combat testing and polishing in the dev console, many bug fixes
This commit is contained in:
337
public_web/templates/dev/combat.html
Normal file
337
public_web/templates/dev/combat.html
Normal file
@@ -0,0 +1,337 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Combat Tester - Dev Tools{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.dev-banner {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.combat-hub {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.dev-section {
|
||||
background: rgba(30, 30, 40, 0.9);
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dev-section h2 {
|
||||
color: #f59e0b;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
border-bottom: 1px solid #4a4a5a;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
color: #9ca3af;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: #1a1a2a;
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 6px;
|
||||
color: #e5e7eb;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-select:focus {
|
||||
outline: none;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.enemy-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.enemy-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.enemy-option:hover {
|
||||
background: #3a3a4a;
|
||||
border-color: #5a5a6a;
|
||||
}
|
||||
|
||||
.enemy-option.selected {
|
||||
background: #3b3b5b;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.enemy-option input[type="checkbox"] {
|
||||
margin-right: 0.75rem;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: #f59e0b;
|
||||
}
|
||||
|
||||
.enemy-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.enemy-name {
|
||||
color: #e5e7eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.enemy-level {
|
||||
color: #9ca3af;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-start {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-start:hover {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.btn-start:disabled {
|
||||
background: #4a4a5a;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#create-result {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.session-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.session-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.session-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.session-id {
|
||||
color: #f59e0b;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.session-character {
|
||||
color: #e5e7eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.session-status {
|
||||
color: #10b981;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-resume {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn-resume:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
padding: 2rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #7f1d1d;
|
||||
color: #fecaca;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #064e3b;
|
||||
color: #a7f3d0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
color: #60a5fa;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
color: #9ca3af;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dev-banner">
|
||||
DEV MODE - Combat System Tester
|
||||
</div>
|
||||
|
||||
<div class="combat-hub">
|
||||
<a href="{{ url_for('dev.index') }}" class="back-link">← Back to Dev Tools</a>
|
||||
|
||||
{% if error %}
|
||||
<div class="error">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Start New Combat -->
|
||||
<div class="dev-section">
|
||||
<h2>Start New Combat</h2>
|
||||
|
||||
<form hx-post="{{ url_for('dev.start_combat') }}"
|
||||
hx-target="#create-result"
|
||||
hx-swap="innerHTML">
|
||||
|
||||
<!-- Session Selection -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select Session (must have a character)</label>
|
||||
<select name="session_id" class="form-select" required>
|
||||
<option value="">-- Select a session --</option>
|
||||
{% for char in characters %}
|
||||
<option value="{{ char.session_id if char.session_id else '' }}"
|
||||
{% if not char.session_id %}disabled{% endif %}>
|
||||
{{ char.name }} ({{ char.class_name }} Lv.{{ char.level }})
|
||||
{% if not char.session_id %} - No active session{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p class="helper-text">You need an active story session to start combat. Create one in the Story Tester first.</p>
|
||||
</div>
|
||||
|
||||
<!-- Enemy Selection -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select Enemies (check multiple for group encounter)</label>
|
||||
{% if enemies %}
|
||||
<div class="enemy-grid">
|
||||
{% for enemy in enemies %}
|
||||
<label class="enemy-option" onclick="this.classList.toggle('selected')">
|
||||
<input type="checkbox" name="enemy_ids" value="{{ enemy.enemy_id }}">
|
||||
<div class="enemy-info">
|
||||
<div class="enemy-name">{{ enemy.name }}</div>
|
||||
<div class="enemy-level">{{ enemy.difficulty | capitalize }} · {{ enemy.experience_reward }} XP</div>
|
||||
</div>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
No enemy templates available. Check that the API has enemy data loaded.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-start" {% if not enemies %}disabled{% endif %}>
|
||||
Start Combat
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="create-result"></div>
|
||||
</div>
|
||||
|
||||
<!-- Active Combat Sessions -->
|
||||
<div class="dev-section">
|
||||
<h2>Active Combat Sessions</h2>
|
||||
|
||||
{% if sessions_in_combat %}
|
||||
<div class="session-list">
|
||||
{% for session in sessions_in_combat %}
|
||||
<div class="session-card">
|
||||
<div class="session-info">
|
||||
<div class="session-id">{{ session.session_id[:12] }}...</div>
|
||||
<div class="session-character">{{ session.character_name or 'Unknown Character' }}</div>
|
||||
<div class="session-status">In Combat - Round {{ session.game_state.combat_round or 1 }}</div>
|
||||
</div>
|
||||
<a href="{{ url_for('dev.combat_session', session_id=session.session_id) }}" class="btn-resume">
|
||||
Resume Combat
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
No active combat sessions. Start a new combat above.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Toggle selected state on checkbox change
|
||||
document.querySelectorAll('.enemy-option input[type="checkbox"]').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', function() {
|
||||
this.closest('.enemy-option').classList.toggle('selected', this.checked);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
864
public_web/templates/dev/combat_session.html
Normal file
864
public_web/templates/dev/combat_session.html
Normal file
@@ -0,0 +1,864 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Combat Debug - Dev Tools{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.dev-banner {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.combat-container {
|
||||
max-width: 1400px;
|
||||
margin: 1rem auto;
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 300px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.combat-container {
|
||||
grid-template-columns: 250px 1fr;
|
||||
}
|
||||
.right-panel {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.combat-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.left-panel {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: rgba(30, 30, 40, 0.9);
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
color: #f59e0b;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid #4a4a5a;
|
||||
padding-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-refresh {
|
||||
background: #6366f1;
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-refresh:hover {
|
||||
background: #4f46e5;
|
||||
}
|
||||
|
||||
/* Left Panel - State */
|
||||
.state-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.state-section h4 {
|
||||
color: #9ca3af;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.state-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.state-label {
|
||||
color: #6b7280;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.state-value {
|
||||
color: #e5e7eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.combatant-card {
|
||||
background: #2a2a3a;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-left: 3px solid #4a4a5a;
|
||||
}
|
||||
|
||||
.combatant-card.player {
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
|
||||
.combatant-card.enemy {
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
|
||||
.combatant-card.active {
|
||||
box-shadow: 0 0 0 2px #f59e0b;
|
||||
}
|
||||
|
||||
.combatant-card.defeated {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.combatant-name {
|
||||
color: #e5e7eb;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.resource-bar {
|
||||
height: 8px;
|
||||
background: #1a1a2a;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.resource-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.resource-bar-fill.hp {
|
||||
background: linear-gradient(90deg, #ef4444, #f87171);
|
||||
}
|
||||
|
||||
.resource-bar-fill.mp {
|
||||
background: linear-gradient(90deg, #3b82f6, #60a5fa);
|
||||
}
|
||||
|
||||
.resource-bar-fill.low {
|
||||
background: linear-gradient(90deg, #dc2626, #ef4444);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.resource-text {
|
||||
font-size: 0.7rem;
|
||||
color: #9ca3af;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Debug Actions */
|
||||
.debug-actions {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #4a4a5a;
|
||||
}
|
||||
|
||||
.debug-btn {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.debug-btn.victory {
|
||||
background: #064e3b;
|
||||
color: #a7f3d0;
|
||||
}
|
||||
|
||||
.debug-btn.victory:hover {
|
||||
background: #065f46;
|
||||
}
|
||||
|
||||
.debug-btn.defeat {
|
||||
background: #7f1d1d;
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.debug-btn.defeat:hover {
|
||||
background: #991b1b;
|
||||
}
|
||||
|
||||
.debug-btn.reset {
|
||||
background: #1e40af;
|
||||
color: #bfdbfe;
|
||||
}
|
||||
|
||||
.debug-btn.reset:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
/* Center Panel - Main */
|
||||
.main-panel {
|
||||
min-height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#combat-log {
|
||||
flex: 1;
|
||||
background: #1a1a2a;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
min-height: 300px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.log-entry--player {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
border-left: 3px solid #3b82f6;
|
||||
}
|
||||
|
||||
.log-entry--enemy {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
border-left: 3px solid #ef4444;
|
||||
}
|
||||
|
||||
.log-entry--crit {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
border-left: 3px solid #f59e0b;
|
||||
}
|
||||
|
||||
.log-entry--system {
|
||||
background: rgba(107, 114, 128, 0.15);
|
||||
border-left: 3px solid #6b7280;
|
||||
font-style: italic;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.log-entry--heal {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
border-left: 3px solid #10b981;
|
||||
}
|
||||
|
||||
.log-actor {
|
||||
font-weight: 600;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.log-message {
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.log-damage {
|
||||
color: #ef4444;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-heal {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.log-crit {
|
||||
color: #f59e0b;
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
/* Action Buttons */
|
||||
.actions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.actions-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn.attack {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
.action-btn.attack:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.action-btn.ability {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
.action-btn.ability:hover:not(:disabled) {
|
||||
background: #7c3aed;
|
||||
}
|
||||
|
||||
.action-btn.item {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
.action-btn.item:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.action-btn.defend {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
.action-btn.defend:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.action-btn.flee {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
.action-btn.flee:hover:not(:disabled) {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
/* Right Panel */
|
||||
.turn-order {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.turn-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
background: #2a2a3a;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.turn-item.active {
|
||||
background: #3b3b5b;
|
||||
border: 1px solid #f59e0b;
|
||||
}
|
||||
|
||||
.turn-number {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #4a4a5a;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.turn-item.active .turn-number {
|
||||
background: #f59e0b;
|
||||
color: #1a1a2a;
|
||||
}
|
||||
|
||||
.turn-name {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.turn-name.player {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.turn-name.enemy {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* Effects Panel */
|
||||
.effects-panel {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.effect-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
background: #2a2a3a;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.effect-name {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.effect-duration {
|
||||
color: #f59e0b;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Debug Panel */
|
||||
.debug-panel {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: #1a1a2a;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.debug-toggle {
|
||||
color: #9ca3af;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.debug-content {
|
||||
margin-top: 0.5rem;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
color: #a3e635;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #1a1a2a;
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-content h3 {
|
||||
color: #f59e0b;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
margin-top: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #6b7280;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Sheet Styles */
|
||||
.combat-items-sheet {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #1a1a2a;
|
||||
border-top: 1px solid #4a4a5a;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 1rem;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
z-index: 1000;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.combat-items-sheet.open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.sheet-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sheet-header h3 {
|
||||
color: #f59e0b;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sheet-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #9ca3af;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #7f1d1d;
|
||||
color: #fecaca;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.success {
|
||||
background: #064e3b;
|
||||
color: #a7f3d0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #60a5fa;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="dev-banner">
|
||||
DEV MODE - Combat Session {{ session_id[:8] }}...
|
||||
</div>
|
||||
|
||||
<div class="combat-container">
|
||||
<!-- Left Panel: Combat State -->
|
||||
<div class="panel left-panel">
|
||||
<h3>
|
||||
Combat State
|
||||
<button class="btn-refresh"
|
||||
hx-get="{{ url_for('dev.combat_state', session_id=session_id) }}"
|
||||
hx-target="#state-content"
|
||||
hx-swap="innerHTML">
|
||||
Refresh
|
||||
</button>
|
||||
</h3>
|
||||
<div id="state-content">
|
||||
{% include 'dev/partials/combat_state.html' %}
|
||||
</div>
|
||||
|
||||
<!-- Debug Actions -->
|
||||
<div class="debug-actions">
|
||||
<h4 style="color: #f59e0b; font-size: 0.85rem; margin: 0 0 0.5rem 0;">Debug Actions</h4>
|
||||
<button class="debug-btn reset"
|
||||
hx-post="{{ url_for('dev.reset_hp_mp', session_id=session_id) }}"
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend">
|
||||
Reset HP/MP
|
||||
</button>
|
||||
<button class="debug-btn victory"
|
||||
hx-post="{{ url_for('dev.force_end_combat', session_id=session_id) }}"
|
||||
hx-vals='{"victory": "true"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="innerHTML">
|
||||
Force Victory
|
||||
</button>
|
||||
<button class="debug-btn defeat"
|
||||
hx-post="{{ url_for('dev.force_end_combat', session_id=session_id) }}"
|
||||
hx-vals='{"victory": "false"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="innerHTML">
|
||||
Force Defeat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
|
||||
<a href="{{ url_for('dev.combat_hub') }}" class="back-link">← Back to Combat Hub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center Panel: Combat Log & Actions -->
|
||||
<div class="panel main-panel">
|
||||
<h3>Combat Log</h3>
|
||||
|
||||
<!-- Combat Log -->
|
||||
<div id="combat-log" role="log" aria-live="polite">
|
||||
{% for entry in combat_log %}
|
||||
<div class="log-entry log-entry--{{ entry.type }}">
|
||||
{% if entry.actor %}
|
||||
<span class="log-actor">{{ entry.actor }}</span>
|
||||
{% endif %}
|
||||
<span class="log-message">{{ entry.message }}</span>
|
||||
{% if entry.damage %}
|
||||
<span class="log-damage">-{{ entry.damage }} HP</span>
|
||||
{% endif %}
|
||||
{% if entry.heal %}
|
||||
<span class="log-heal">+{{ entry.heal }} HP</span>
|
||||
{% endif %}
|
||||
{% if entry.is_crit %}
|
||||
<span class="log-crit">CRITICAL!</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="log-entry log-entry--system">
|
||||
Combat begins!
|
||||
{% if is_player_turn %}
|
||||
Take your action.
|
||||
{% else %}
|
||||
Waiting for enemy turn...
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="actions-grid" id="action-buttons">
|
||||
<button class="action-btn attack"
|
||||
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "attack"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
hx-disabled-elt="this"
|
||||
{% if not is_player_turn %}disabled{% endif %}>
|
||||
Attack
|
||||
</button>
|
||||
<button class="action-btn ability"
|
||||
hx-get="{{ url_for('dev.combat_abilities', session_id=session_id) }}"
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if not is_player_turn %}disabled{% endif %}>
|
||||
Ability
|
||||
</button>
|
||||
<button class="action-btn item"
|
||||
hx-get="{{ url_for('dev.combat_items', session_id=session_id) }}"
|
||||
hx-target="#sheet-container"
|
||||
hx-swap="innerHTML"
|
||||
{% if not is_player_turn %}disabled{% endif %}>
|
||||
Item
|
||||
</button>
|
||||
<button class="action-btn defend"
|
||||
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "defend"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
hx-disabled-elt="this"
|
||||
{% if not is_player_turn %}disabled{% endif %}>
|
||||
Defend
|
||||
</button>
|
||||
<button class="action-btn flee"
|
||||
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "flee"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
hx-disabled-elt="this"
|
||||
{% if not is_player_turn %}disabled{% endif %}>
|
||||
Flee
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Debug Panel -->
|
||||
<div class="debug-panel">
|
||||
<div class="debug-toggle" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'">
|
||||
[+] Raw State JSON (click to toggle)
|
||||
</div>
|
||||
<div class="debug-content" style="display: none;">{{ raw_state | tojson(indent=2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Panel: Turn Order & Effects -->
|
||||
<div class="panel right-panel">
|
||||
<h3>Turn Order</h3>
|
||||
|
||||
<div class="turn-order">
|
||||
{% for combatant_id in turn_order %}
|
||||
{% set ns = namespace(combatant=None) %}
|
||||
{% for c in encounter.combatants %}
|
||||
{% if c.combatant_id == combatant_id %}
|
||||
{% set ns.combatant = c %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="turn-item {% if combatant_id == current_turn_id %}active{% endif %}">
|
||||
<span class="turn-number">{{ loop.index }}</span>
|
||||
<span class="turn-name {% if ns.combatant and ns.combatant.is_player %}player{% else %}enemy{% endif %}">
|
||||
{% if ns.combatant %}{{ ns.combatant.name }}{% else %}{{ combatant_id[:8] }}{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h3 style="margin-top: 1rem;">Active Effects</h3>
|
||||
<div class="effects-panel">
|
||||
{% if player_combatant and player_combatant.active_effects %}
|
||||
{% for effect in player_combatant.active_effects %}
|
||||
<div class="effect-item">
|
||||
<span class="effect-name">{{ effect.name }}</span>
|
||||
<span class="effect-duration">{{ effect.remaining_duration }} turns</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<p style="color: #6b7280; font-size: 0.85rem; text-align: center;">No active effects</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Container -->
|
||||
<div id="modal-container"></div>
|
||||
|
||||
<!-- Sheet Container -->
|
||||
<div id="sheet-container"></div>
|
||||
|
||||
<script>
|
||||
// Close modal function
|
||||
function closeModal() {
|
||||
document.getElementById('modal-container').innerHTML = '';
|
||||
}
|
||||
|
||||
// Close combat sheet function
|
||||
function closeCombatSheet() {
|
||||
document.getElementById('sheet-container').innerHTML = '';
|
||||
}
|
||||
|
||||
// Refresh combat state panel
|
||||
function refreshCombatState() {
|
||||
htmx.ajax('GET', '{{ url_for("dev.combat_state", session_id=session_id) }}', {
|
||||
target: '#state-content',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-scroll combat log
|
||||
const combatLog = document.getElementById('combat-log');
|
||||
if (combatLog) {
|
||||
combatLog.scrollTop = combatLog.scrollHeight;
|
||||
}
|
||||
|
||||
// Observe combat log for new entries and auto-scroll
|
||||
const observer = new MutationObserver(function() {
|
||||
combatLog.scrollTop = combatLog.scrollHeight;
|
||||
});
|
||||
observer.observe(combatLog, { childList: true });
|
||||
|
||||
// Guard against duplicate enemy turn requests
|
||||
let enemyTurnPending = false;
|
||||
let enemyTurnTimeout = null;
|
||||
|
||||
function triggerEnemyTurn(delay = 1000) {
|
||||
// Prevent duplicate requests
|
||||
if (enemyTurnPending) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear any pending timeout
|
||||
if (enemyTurnTimeout) {
|
||||
clearTimeout(enemyTurnTimeout);
|
||||
}
|
||||
|
||||
enemyTurnPending = true;
|
||||
enemyTurnTimeout = setTimeout(function() {
|
||||
htmx.ajax('POST', '{{ url_for("dev.combat_enemy_turn", session_id=session_id) }}', {
|
||||
target: '#combat-log',
|
||||
swap: 'beforeend'
|
||||
}).then(function() {
|
||||
enemyTurnPending = false;
|
||||
// Refresh state after enemy turn completes
|
||||
setTimeout(refreshCombatState, 500);
|
||||
}).catch(function() {
|
||||
enemyTurnPending = false;
|
||||
});
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// Auto-trigger enemy turn on page load if it's not the player's turn
|
||||
{% if not is_player_turn %}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Small delay to let the page render first
|
||||
triggerEnemyTurn(500);
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
// Handle enemy turn trigger
|
||||
document.body.addEventListener('htmx:afterRequest', function(event) {
|
||||
// Check for enemyTurn trigger
|
||||
const trigger = event.detail.xhr.getResponseHeader('HX-Trigger');
|
||||
if (trigger && trigger.includes('enemyTurn')) {
|
||||
triggerEnemyTurn(1000);
|
||||
}
|
||||
|
||||
// Refresh state after any combat action (player action, debug action, but NOT enemy turn - handled above)
|
||||
const requestUrl = event.detail.pathInfo?.requestPath || '';
|
||||
const isActionBtn = event.detail.elt && event.detail.elt.classList && event.detail.elt.classList.contains('action-btn');
|
||||
const isDebugBtn = event.detail.elt && event.detail.elt.classList && event.detail.elt.classList.contains('debug-btn');
|
||||
|
||||
if (isActionBtn || isDebugBtn) {
|
||||
setTimeout(refreshCombatState, 500);
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable buttons when player turn returns
|
||||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||||
// If state was updated, check if it's player turn
|
||||
if (event.detail.target.id === 'state-content') {
|
||||
const stateContent = document.getElementById('state-content');
|
||||
const isPlayerTurn = stateContent && stateContent.textContent.includes('Your Turn');
|
||||
const buttons = document.querySelectorAll('.action-btn');
|
||||
buttons.forEach(function(btn) {
|
||||
btn.disabled = !isPlayerTurn;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -83,6 +83,14 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dev-section">
|
||||
<h2>Combat System</h2>
|
||||
<a href="{{ url_for('dev.combat_hub') }}" class="dev-link">
|
||||
Combat System Tester
|
||||
<small>Start encounters, test actions, abilities, items, and enemy AI</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dev-section">
|
||||
<h2>Quest System</h2>
|
||||
<span class="dev-link dev-link-disabled">
|
||||
|
||||
62
public_web/templates/dev/partials/ability_modal.html
Normal file
62
public_web/templates/dev/partials/ability_modal.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!-- Ability Selection Modal -->
|
||||
|
||||
<div class="modal-overlay" onclick="closeModal()">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||
<h3 style="margin: 0; color: #f59e0b;">Select Ability</h3>
|
||||
<button onclick="closeModal()" style="background: none; border: none; color: #9ca3af; font-size: 1.5rem; cursor: pointer;">×</button>
|
||||
</div>
|
||||
|
||||
{% if abilities %}
|
||||
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
|
||||
{% for ability in abilities %}
|
||||
<button style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
background: {{ '#2a2a3a' if ability.available else '#1a1a2a' }};
|
||||
border: 1px solid {{ '#4a4a5a' if ability.available else '#3a3a4a' }};
|
||||
border-radius: 6px;
|
||||
cursor: {{ 'pointer' if ability.available else 'not-allowed' }};
|
||||
opacity: {{ '1' if ability.available else '0.5' }};
|
||||
text-align: left;
|
||||
transition: all 0.2s;
|
||||
"
|
||||
{% if ability.available %}
|
||||
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
onclick="closeModal()"
|
||||
{% else %}
|
||||
disabled
|
||||
{% endif %}>
|
||||
<div>
|
||||
<div style="color: #e5e7eb; font-weight: 500;">{{ ability.name }}</div>
|
||||
{% if ability.description %}
|
||||
<div style="color: #9ca3af; font-size: 0.8rem; margin-top: 0.25rem;">{{ ability.description[:100] }}{% if ability.description|length > 100 %}...{% endif %}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
{% if ability.mp_cost > 0 %}
|
||||
<div style="color: #60a5fa; font-size: 0.85rem;">{{ ability.mp_cost }} MP</div>
|
||||
{% endif %}
|
||||
{% if ability.cooldown > 0 %}
|
||||
<div style="color: #f59e0b; font-size: 0.75rem;">CD: {{ ability.cooldown }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="text-align: center; color: #6b7280; padding: 2rem;">
|
||||
No abilities available.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<button class="modal-close" onclick="closeModal()" style="width: 100%; margin-top: 1rem;">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
19
public_web/templates/dev/partials/combat_debug_log.html
Normal file
19
public_web/templates/dev/partials/combat_debug_log.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!-- Combat Debug Log Entry Partial - appended to combat log -->
|
||||
|
||||
{% for entry in combat_log %}
|
||||
<div class="log-entry log-entry--{{ entry.type }}">
|
||||
{% if entry.actor %}
|
||||
<span class="log-actor">{{ entry.actor }}</span>
|
||||
{% endif %}
|
||||
<span class="log-message">{{ entry.message }}</span>
|
||||
{% if entry.damage %}
|
||||
<span class="log-damage">-{{ entry.damage }} HP</span>
|
||||
{% endif %}
|
||||
{% if entry.heal %}
|
||||
<span class="log-heal">+{{ entry.heal }} HP</span>
|
||||
{% endif %}
|
||||
{% if entry.is_crit %}
|
||||
<span class="log-crit">CRITICAL!</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
32
public_web/templates/dev/partials/combat_defeat.html
Normal file
32
public_web/templates/dev/partials/combat_defeat.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!-- Combat Defeat Screen -->
|
||||
|
||||
<div style="text-align: center; padding: 2rem;">
|
||||
<div style="font-size: 3rem; margin-bottom: 1rem;">💀</div>
|
||||
<h2 style="color: #ef4444; margin-bottom: 1rem;">Defeat</h2>
|
||||
<p style="color: #d1d5db; margin-bottom: 2rem;">You have been defeated in battle...</p>
|
||||
|
||||
<!-- Penalties -->
|
||||
{% if gold_lost and gold_lost > 0 %}
|
||||
<div style="background: rgba(127, 29, 29, 0.3); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem;">
|
||||
<div style="color: #fecaca;">
|
||||
<span style="color: #ef4444; font-weight: 600;">-{{ gold_lost }} gold</span> lost
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p style="color: #9ca3af; font-size: 0.9rem; margin-bottom: 2rem;">
|
||||
Your progress has been saved. You can try again or return to town.
|
||||
</p>
|
||||
|
||||
<!-- Actions -->
|
||||
<div style="display: flex; gap: 1rem; justify-content: center;">
|
||||
<a href="{{ url_for('dev.combat_hub') }}"
|
||||
style="padding: 0.75rem 1.5rem; background: #ef4444; color: white; border-radius: 6px; text-decoration: none;">
|
||||
Try Again
|
||||
</a>
|
||||
<a href="{{ url_for('dev.story_hub') }}"
|
||||
style="padding: 0.75rem 1.5rem; background: #6b7280; color: white; border-radius: 6px; text-decoration: none;">
|
||||
Return to Town
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
88
public_web/templates/dev/partials/combat_items_sheet.html
Normal file
88
public_web/templates/dev/partials/combat_items_sheet.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<!-- Combat Items Bottom Sheet -->
|
||||
|
||||
<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
|
||||
<div class="combat-items-sheet open">
|
||||
<div class="sheet-header">
|
||||
<h3>Use Item</h3>
|
||||
<button class="sheet-close" onclick="closeCombatSheet()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="sheet-body">
|
||||
{% if has_consumables %}
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem;">
|
||||
{% for item in consumables %}
|
||||
<button style="
|
||||
padding: 1rem;
|
||||
background: #2a2a3a;
|
||||
border: 1px solid #4a4a5a;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.2s;
|
||||
"
|
||||
hx-get="{{ url_for('dev.combat_item_detail', session_id=session_id, item_id=item.item_id) }}"
|
||||
hx-target="#item-detail"
|
||||
hx-swap="innerHTML">
|
||||
<div style="color: #e5e7eb; font-weight: 500; margin-bottom: 0.25rem;">{{ item.name }}</div>
|
||||
<div style="color:
|
||||
{% if item.rarity == 'uncommon' %}#10b981
|
||||
{% elif item.rarity == 'rare' %}#3b82f6
|
||||
{% elif item.rarity == 'epic' %}#a78bfa
|
||||
{% elif item.rarity == 'legendary' %}#f59e0b
|
||||
{% else %}#9ca3af{% endif %};
|
||||
font-size: 0.75rem; text-transform: capitalize;">
|
||||
{{ item.rarity }}
|
||||
</div>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Item Detail Panel -->
|
||||
<div id="item-detail" style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
|
||||
<div style="text-align: center; color: #6b7280; font-size: 0.9rem;">
|
||||
Select an item to see details
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="text-align: center; color: #6b7280; padding: 2rem;">
|
||||
No consumable items in inventory.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.detail-info {
|
||||
background: #1a1a2a;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.detail-name {
|
||||
color: #e5e7eb;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.detail-effect {
|
||||
color: #10b981;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.use-btn {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.use-btn:hover {
|
||||
background: #059669;
|
||||
}
|
||||
</style>
|
||||
84
public_web/templates/dev/partials/combat_state.html
Normal file
84
public_web/templates/dev/partials/combat_state.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!-- Combat State Partial - refreshable via HTMX -->
|
||||
|
||||
<div class="state-section">
|
||||
<h4>Encounter Info</h4>
|
||||
<div class="state-item">
|
||||
<div class="state-label">Round</div>
|
||||
<div class="state-value">{{ encounter.round_number or 1 }}</div>
|
||||
</div>
|
||||
<div class="state-item">
|
||||
<div class="state-label">Status</div>
|
||||
<div class="state-value">{{ encounter.status or 'active' }}</div>
|
||||
</div>
|
||||
<div class="state-item">
|
||||
<div class="state-label">Current Turn</div>
|
||||
<div class="state-value">
|
||||
{% if is_player_turn %}
|
||||
<span style="color: #60a5fa;">Your Turn</span>
|
||||
{% else %}
|
||||
<span style="color: #f87171;">Enemy Turn</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Player Card -->
|
||||
{% if player_combatant %}
|
||||
<div class="state-section">
|
||||
<h4>Player</h4>
|
||||
<div class="combatant-card player {% if player_combatant.combatant_id == current_turn_id %}active{% endif %} {% if player_combatant.current_hp <= 0 %}defeated{% endif %}">
|
||||
<div class="combatant-name">{{ player_combatant.name }}</div>
|
||||
|
||||
<!-- HP Bar -->
|
||||
{% set hp_percent = (player_combatant.current_hp / player_combatant.max_hp * 100) if player_combatant.max_hp > 0 else 0 %}
|
||||
<div class="resource-bar">
|
||||
<div class="resource-bar-fill hp {% if hp_percent < 25 %}low{% endif %}"
|
||||
style="width: {{ hp_percent }}%"></div>
|
||||
</div>
|
||||
<div class="resource-text">
|
||||
<span>HP</span>
|
||||
<span>{{ player_combatant.current_hp }}/{{ player_combatant.max_hp }}</span>
|
||||
</div>
|
||||
|
||||
<!-- MP Bar -->
|
||||
{% if player_combatant.max_mp and player_combatant.max_mp > 0 %}
|
||||
{% set mp_percent = (player_combatant.current_mp / player_combatant.max_mp * 100) if player_combatant.max_mp > 0 else 0 %}
|
||||
<div class="resource-bar" style="margin-top: 0.5rem;">
|
||||
<div class="resource-bar-fill mp" style="width: {{ mp_percent }}%"></div>
|
||||
</div>
|
||||
<div class="resource-text">
|
||||
<span>MP</span>
|
||||
<span>{{ player_combatant.current_mp }}/{{ player_combatant.max_mp }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Enemy Cards -->
|
||||
{% if enemy_combatants %}
|
||||
<div class="state-section">
|
||||
<h4>Enemies ({{ enemy_combatants | length }})</h4>
|
||||
{% for enemy in enemy_combatants %}
|
||||
<div class="combatant-card enemy {% if enemy.combatant_id == current_turn_id %}active{% endif %} {% if enemy.current_hp <= 0 %}defeated{% endif %}">
|
||||
<div class="combatant-name">
|
||||
{{ enemy.name }}
|
||||
{% if enemy.current_hp <= 0 %}
|
||||
<span style="color: #6b7280; font-size: 0.75rem;">(Defeated)</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- HP Bar -->
|
||||
{% set enemy_hp_percent = (enemy.current_hp / enemy.max_hp * 100) if enemy.max_hp > 0 else 0 %}
|
||||
<div class="resource-bar">
|
||||
<div class="resource-bar-fill hp {% if enemy_hp_percent < 25 %}low{% endif %}"
|
||||
style="width: {{ enemy_hp_percent }}%"></div>
|
||||
</div>
|
||||
<div class="resource-text">
|
||||
<span>HP</span>
|
||||
<span>{{ enemy.current_hp }}/{{ enemy.max_hp }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
68
public_web/templates/dev/partials/combat_victory.html
Normal file
68
public_web/templates/dev/partials/combat_victory.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!-- Combat Victory Screen -->
|
||||
|
||||
<div style="text-align: center; padding: 2rem;">
|
||||
<div style="font-size: 3rem; margin-bottom: 1rem;">🏆</div>
|
||||
<h2 style="color: #10b981; margin-bottom: 1rem;">Victory!</h2>
|
||||
<p style="color: #d1d5db; margin-bottom: 2rem;">You have defeated your enemies!</p>
|
||||
|
||||
<!-- Rewards Section -->
|
||||
{% if rewards %}
|
||||
<div style="background: #2a2a3a; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; text-align: left;">
|
||||
<h3 style="color: #f59e0b; margin-top: 0; margin-bottom: 1rem;">Rewards</h3>
|
||||
|
||||
{% if rewards.experience %}
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
||||
<span style="color: #9ca3af;">Experience</span>
|
||||
<span style="color: #a78bfa; font-weight: 600;">+{{ rewards.experience }} XP</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if rewards.gold %}
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
||||
<span style="color: #9ca3af;">Gold</span>
|
||||
<span style="color: #fbbf24; font-weight: 600;">+{{ rewards.gold }} gold</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if rewards.level_ups %}
|
||||
<div style="background: rgba(168, 85, 247, 0.2); border-radius: 6px; padding: 1rem; margin-top: 1rem;">
|
||||
<div style="color: #a78bfa; font-weight: 600;">Level Up!</div>
|
||||
<div style="color: #d1d5db; font-size: 0.9rem;">You have reached a new level!</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if rewards.items %}
|
||||
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
|
||||
<div style="color: #9ca3af; font-size: 0.85rem; margin-bottom: 0.5rem;">Loot Obtained:</div>
|
||||
{% for item in rewards.items %}
|
||||
<div style="display: flex; align-items: center; padding: 0.5rem; background: #1a1a2a; border-radius: 4px; margin-bottom: 0.25rem;">
|
||||
<span style="color: #e5e7eb;">{{ item.name }}</span>
|
||||
{% if item.rarity and item.rarity != 'common' %}
|
||||
<span style="margin-left: 0.5rem; font-size: 0.75rem; color:
|
||||
{% if item.rarity == 'uncommon' %}#10b981
|
||||
{% elif item.rarity == 'rare' %}#3b82f6
|
||||
{% elif item.rarity == 'epic' %}#a78bfa
|
||||
{% elif item.rarity == 'legendary' %}#f59e0b
|
||||
{% else %}#9ca3af{% endif %};">
|
||||
({{ item.rarity }})
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Actions -->
|
||||
<div style="display: flex; gap: 1rem; justify-content: center;">
|
||||
<a href="{{ url_for('dev.combat_hub') }}"
|
||||
style="padding: 0.75rem 1.5rem; background: #3b82f6; color: white; border-radius: 6px; text-decoration: none;">
|
||||
Back to Combat Hub
|
||||
</a>
|
||||
<a href="{{ url_for('dev.story_hub') }}"
|
||||
style="padding: 0.75rem 1.5rem; background: #6b7280; color: white; border-radius: 6px; text-decoration: none;">
|
||||
Continue Adventure
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
258
public_web/templates/game/combat.html
Normal file
258
public_web/templates/game/combat.html
Normal file
@@ -0,0 +1,258 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Combat - Code of Conquest{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/inventory.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="combat-page">
|
||||
<div class="combat-container">
|
||||
{# ===== COMBAT HEADER ===== #}
|
||||
<header class="combat-header">
|
||||
<h1 class="combat-title">
|
||||
<span class="combat-title-icon">⚔</span>
|
||||
Combat Encounter
|
||||
</h1>
|
||||
<div class="combat-round">
|
||||
<span class="round-counter">Round <strong>{{ encounter.round_number }}</strong></span>
|
||||
{% if is_player_turn %}
|
||||
<span class="turn-indicator turn-indicator--player">Your Turn</span>
|
||||
{% else %}
|
||||
<span class="turn-indicator turn-indicator--enemy">Enemy Turn</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# ===== LEFT COLUMN: COMBATANTS ===== #}
|
||||
<aside class="combatant-panel">
|
||||
{# Player Section #}
|
||||
<div class="combatant-section">
|
||||
<h2 class="combatant-section-title">Your Party</h2>
|
||||
{% for combatant in encounter.combatants if combatant.is_player %}
|
||||
<div class="combatant-card combatant-card--player {% if combatant.combatant_id == current_turn_id %}combatant-card--active{% endif %} {% if combatant.current_hp <= 0 %}combatant-card--defeated{% endif %}">
|
||||
<div class="combatant-header">
|
||||
<span class="combatant-name">{{ combatant.name }}</span>
|
||||
<span class="combatant-level">Lv.{{ combatant.level|default(1) }}</span>
|
||||
</div>
|
||||
<div class="combatant-resources">
|
||||
{% set hp_percent = ((combatant.current_hp / combatant.max_hp) * 100)|round|int %}
|
||||
<div class="resource-bar resource-bar--hp {% if hp_percent < 25 %}low{% endif %}">
|
||||
<div class="resource-bar-label">
|
||||
<span class="resource-bar-name">HP</span>
|
||||
<span class="resource-bar-value">{{ combatant.current_hp }} / {{ combatant.max_hp }}</span>
|
||||
</div>
|
||||
<div class="resource-bar-track">
|
||||
<div class="resource-bar-fill" style="width: {{ hp_percent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% set mp_percent = ((combatant.current_mp / combatant.max_mp) * 100)|round|int if combatant.max_mp > 0 else 0 %}
|
||||
<div class="resource-bar resource-bar--mp">
|
||||
<div class="resource-bar-label">
|
||||
<span class="resource-bar-name">MP</span>
|
||||
<span class="resource-bar-value">{{ combatant.current_mp }} / {{ combatant.max_mp }}</span>
|
||||
</div>
|
||||
<div class="resource-bar-track">
|
||||
<div class="resource-bar-fill" style="width: {{ mp_percent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# Enemies Section #}
|
||||
<div class="combatant-section">
|
||||
<h2 class="combatant-section-title">Enemies</h2>
|
||||
{% for combatant in encounter.combatants if not combatant.is_player %}
|
||||
<div class="combatant-card combatant-card--enemy {% if combatant.combatant_id == current_turn_id %}combatant-card--active{% endif %} {% if combatant.current_hp <= 0 %}combatant-card--defeated{% endif %}">
|
||||
<div class="combatant-header">
|
||||
<span class="combatant-name">{{ combatant.name }}</span>
|
||||
<span class="combatant-level">{% if combatant.current_hp <= 0 %}Defeated{% endif %}</span>
|
||||
</div>
|
||||
<div class="combatant-resources">
|
||||
{% set hp_percent = ((combatant.current_hp / combatant.max_hp) * 100)|round|int %}
|
||||
<div class="resource-bar resource-bar--hp {% if hp_percent < 25 %}low{% endif %}">
|
||||
<div class="resource-bar-label">
|
||||
<span class="resource-bar-name">HP</span>
|
||||
<span class="resource-bar-value">{{ combatant.current_hp }} / {{ combatant.max_hp }}</span>
|
||||
</div>
|
||||
<div class="resource-bar-track">
|
||||
<div class="resource-bar-fill" style="width: {{ hp_percent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{# ===== CENTER COLUMN: COMBAT LOG + ACTIONS ===== #}
|
||||
<main class="combat-main">
|
||||
{# Combat Log #}
|
||||
<div id="combat-log" class="combat-log" role="log" aria-live="polite" aria-label="Combat log">
|
||||
{% include "game/partials/combat_log.html" %}
|
||||
</div>
|
||||
|
||||
{# Combat Actions #}
|
||||
<div id="combat-actions" class="combat-actions">
|
||||
{% include "game/partials/combat_actions.html" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{# ===== RIGHT COLUMN: TURN ORDER + EFFECTS ===== #}
|
||||
<aside class="combat-sidebar">
|
||||
{# Turn Order #}
|
||||
<div class="turn-order">
|
||||
<h2 class="turn-order__title">Turn Order</h2>
|
||||
<div class="turn-order__list">
|
||||
{% for combatant_id in encounter.turn_order %}
|
||||
{% set combatant = encounter.combatants|selectattr('combatant_id', 'equalto', combatant_id)|first %}
|
||||
{% if combatant %}
|
||||
<div class="turn-order__item {% if combatant.is_player %}turn-order__item--player{% else %}turn-order__item--enemy{% endif %} {% if combatant_id == current_turn_id %}turn-order__item--active{% endif %} {% if combatant.current_hp <= 0 %}turn-order__item--defeated{% endif %}">
|
||||
<span class="turn-order__position">{{ loop.index }}</span>
|
||||
<span class="turn-order__name">{{ combatant.name }}</span>
|
||||
{% if combatant_id == current_turn_id %}
|
||||
<span class="turn-order__check" title="Current turn">➤</span>
|
||||
{% elif combatant.current_hp <= 0 %}
|
||||
<span class="turn-order__check" title="Defeated">✗</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Active Effects #}
|
||||
<div class="effects-panel">
|
||||
<h2 class="effects-panel__title">Active Effects</h2>
|
||||
{% if player_combatant and player_combatant.active_effects %}
|
||||
<div class="effects-list">
|
||||
{% for effect in player_combatant.active_effects %}
|
||||
<div class="effect-item effect-item--{{ effect.effect_type|default('buff') }}">
|
||||
<span class="effect-icon">
|
||||
{% if effect.effect_type == 'shield' %}🛡
|
||||
{% elif effect.effect_type == 'buff' %}⬆
|
||||
{% elif effect.effect_type == 'debuff' %}⬇
|
||||
{% elif effect.effect_type == 'dot' %}🔥
|
||||
{% elif effect.effect_type == 'hot' %}❤
|
||||
{% else %}★
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="effect-name">{{ effect.name }}</span>
|
||||
<span class="effect-duration">{{ effect.remaining_duration }} {% if effect.remaining_duration == 1 %}turn{% else %}turns{% endif %}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="effects-empty">No active effects</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{# Modal Container for Ability selection #}
|
||||
<div id="modal-container"></div>
|
||||
|
||||
{# Combat Items Sheet Container #}
|
||||
<div id="combat-sheet-container"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Auto-scroll combat log to bottom on new entries
|
||||
function scrollCombatLog() {
|
||||
const log = document.getElementById('combat-log');
|
||||
if (log) {
|
||||
log.scrollTop = log.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll on page load
|
||||
document.addEventListener('DOMContentLoaded', scrollCombatLog);
|
||||
|
||||
// Scroll after HTMX swaps
|
||||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||||
if (event.detail.target.id === 'combat-log' ||
|
||||
event.detail.target.closest('#combat-log')) {
|
||||
scrollCombatLog();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal function
|
||||
function closeModal() {
|
||||
const container = document.getElementById('modal-container');
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Close combat items sheet
|
||||
function closeCombatSheet() {
|
||||
const container = document.getElementById('combat-sheet-container');
|
||||
if (container) {
|
||||
container.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Close modal/sheet on Escape key
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
closeModal();
|
||||
closeCombatSheet();
|
||||
}
|
||||
});
|
||||
|
||||
// Guard against duplicate enemy turn requests
|
||||
let enemyTurnPending = false;
|
||||
let enemyTurnTimeout = null;
|
||||
|
||||
function triggerEnemyTurn() {
|
||||
// Prevent duplicate requests
|
||||
if (enemyTurnPending) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear any pending timeout
|
||||
if (enemyTurnTimeout) {
|
||||
clearTimeout(enemyTurnTimeout);
|
||||
}
|
||||
|
||||
enemyTurnPending = true;
|
||||
enemyTurnTimeout = setTimeout(function() {
|
||||
htmx.ajax('POST', '{{ url_for("combat.combat_enemy_turn", session_id=session_id) }}', {
|
||||
target: '#combat-log',
|
||||
swap: 'beforeend'
|
||||
}).then(function() {
|
||||
enemyTurnPending = false;
|
||||
}).catch(function() {
|
||||
enemyTurnPending = false;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Handle enemy turn polling
|
||||
document.body.addEventListener('htmx:afterRequest', function(event) {
|
||||
// Check if we need to trigger enemy turn
|
||||
const response = event.detail.xhr;
|
||||
if (response && response.getResponseHeader('HX-Trigger')) {
|
||||
const triggers = response.getResponseHeader('HX-Trigger');
|
||||
if (triggers && triggers.includes('enemyTurn')) {
|
||||
triggerEnemyTurn();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Handle combat end redirect
|
||||
document.body.addEventListener('htmx:beforeSwap', function(event) {
|
||||
// If the response indicates combat ended, handle accordingly
|
||||
const response = event.detail.xhr;
|
||||
if (response && response.getResponseHeader('X-Combat-Ended')) {
|
||||
// Let the full page swap happen for victory/defeat screen
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
61
public_web/templates/game/partials/ability_modal.html
Normal file
61
public_web/templates/game/partials/ability_modal.html
Normal file
@@ -0,0 +1,61 @@
|
||||
{# Ability Selection Modal - Shows available abilities during combat #}
|
||||
|
||||
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
|
||||
<div class="modal-content modal-content--md">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Select Ability</h3>
|
||||
<button class="modal-close" onclick="closeModal()" aria-label="Close modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{% if abilities %}
|
||||
<div class="ability-list">
|
||||
{% for ability in abilities %}
|
||||
<button class="ability-btn"
|
||||
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
hx-disabled-elt="this"
|
||||
{% if not ability.available %}disabled{% endif %}
|
||||
onclick="closeModal()">
|
||||
<span class="ability-icon">
|
||||
{% if ability.damage_type == 'fire' %}🔥
|
||||
{% elif ability.damage_type == 'ice' %}❄
|
||||
{% elif ability.damage_type == 'lightning' %}⚡
|
||||
{% elif ability.effect_type == 'heal' %}❤
|
||||
{% elif ability.effect_type == 'buff' %}⬆
|
||||
{% elif ability.effect_type == 'debuff' %}⬇
|
||||
{% else %}✨
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="ability-info">
|
||||
<span class="ability-name">{{ ability.name }}</span>
|
||||
<span class="ability-description">{{ ability.description|default('A powerful ability.') }}</span>
|
||||
</div>
|
||||
<div class="ability-meta">
|
||||
{% if ability.mp_cost > 0 %}
|
||||
<span class="ability-cost">{{ ability.mp_cost }} MP</span>
|
||||
{% endif %}
|
||||
{% if ability.cooldown > 0 %}
|
||||
<span class="ability-cooldown ability-cooldown--active">{{ ability.cooldown }} turns CD</span>
|
||||
{% elif ability.max_cooldown > 0 %}
|
||||
<span class="ability-cooldown">{{ ability.max_cooldown }} turns CD</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="items-empty">
|
||||
<p>No abilities available.</p>
|
||||
<p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
|
||||
Learn abilities by leveling up or finding skill tomes.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,8 +82,19 @@ Displays character stats, resource bars, and action buttons
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Quick Actions (Equipment, NPC, Travel) #}
|
||||
{# Quick Actions (Inventory, Equipment, NPC, Travel) #}
|
||||
<div class="quick-actions">
|
||||
{# Inventory - Opens modal #}
|
||||
<button class="action-btn action-btn--special"
|
||||
hx-get="{{ url_for('game.inventory_modal', session_id=session_id) }}"
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
aria-label="Open inventory">
|
||||
<span class="action-icon">💼</span>
|
||||
Inventory
|
||||
<span class="action-count">({{ character.inventory|length|default(0) }})</span>
|
||||
</button>
|
||||
|
||||
{# Equipment & Gear - Opens modal #}
|
||||
<button class="action-btn action-btn--special"
|
||||
hx-get="{{ url_for('game.equipment_modal', session_id=session_id) }}"
|
||||
|
||||
87
public_web/templates/game/partials/combat_actions.html
Normal file
87
public_web/templates/game/partials/combat_actions.html
Normal file
@@ -0,0 +1,87 @@
|
||||
{# Combat Actions Partial - Action buttons for combat #}
|
||||
{# This partial shows the available combat actions #}
|
||||
|
||||
{% if is_player_turn %}
|
||||
<div class="combat-actions__grid">
|
||||
{# Attack Button - Direct action #}
|
||||
<button class="combat-action-btn combat-action-btn--attack"
|
||||
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "attack"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
hx-disabled-elt="this"
|
||||
title="Basic attack with your weapon">
|
||||
<span class="combat-action-btn__icon">⚔</span>
|
||||
<span>Attack</span>
|
||||
</button>
|
||||
|
||||
{# Ability Button - Opens modal #}
|
||||
<button class="combat-action-btn combat-action-btn--ability"
|
||||
hx-get="{{ url_for('combat.combat_abilities', session_id=session_id) }}"
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
title="Use a special ability or spell">
|
||||
<span class="combat-action-btn__icon">✨</span>
|
||||
<span>Ability</span>
|
||||
</button>
|
||||
|
||||
{# Item Button - Opens bottom sheet #}
|
||||
<button class="combat-action-btn combat-action-btn--item"
|
||||
hx-get="{{ url_for('combat.combat_items', session_id=session_id) }}"
|
||||
hx-target="#combat-sheet-container"
|
||||
hx-swap="innerHTML"
|
||||
title="Use an item from your inventory">
|
||||
<span class="combat-action-btn__icon">🍷</span>
|
||||
<span>Item</span>
|
||||
</button>
|
||||
|
||||
{# Defend Button - Direct action #}
|
||||
<button class="combat-action-btn combat-action-btn--defend"
|
||||
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "defend"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
hx-disabled-elt="this"
|
||||
title="Take a defensive stance, reducing damage taken">
|
||||
<span class="combat-action-btn__icon">🛡</span>
|
||||
<span>Defend</span>
|
||||
</button>
|
||||
|
||||
{# Flee Button - Direct action #}
|
||||
<button class="combat-action-btn combat-action-btn--flee"
|
||||
hx-post="{{ url_for('combat.combat_flee', session_id=session_id) }}"
|
||||
hx-target="body"
|
||||
hx-swap="innerHTML"
|
||||
hx-disabled-elt="this"
|
||||
hx-confirm="Are you sure you want to flee from combat?"
|
||||
title="Attempt to escape from battle">
|
||||
<span class="combat-action-btn__icon">🏃</span>
|
||||
<span>Flee</span>
|
||||
</button>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="combat-actions__grid">
|
||||
{# Disabled buttons when not player's turn #}
|
||||
<button class="combat-action-btn combat-action-btn--attack" disabled>
|
||||
<span class="combat-action-btn__icon">⚔</span>
|
||||
<span>Attack</span>
|
||||
</button>
|
||||
<button class="combat-action-btn combat-action-btn--ability" disabled>
|
||||
<span class="combat-action-btn__icon">✨</span>
|
||||
<span>Ability</span>
|
||||
</button>
|
||||
<button class="combat-action-btn combat-action-btn--item" disabled>
|
||||
<span class="combat-action-btn__icon">🍷</span>
|
||||
<span>Item</span>
|
||||
</button>
|
||||
<button class="combat-action-btn combat-action-btn--defend" disabled>
|
||||
<span class="combat-action-btn__icon">🛡</span>
|
||||
<span>Defend</span>
|
||||
</button>
|
||||
<button class="combat-action-btn combat-action-btn--flee" disabled>
|
||||
<span class="combat-action-btn__icon">🏃</span>
|
||||
<span>Flee</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="combat-actions__disabled-message">Waiting for enemy turn...</p>
|
||||
{% endif %}
|
||||
55
public_web/templates/game/partials/combat_defeat.html
Normal file
55
public_web/templates/game/partials/combat_defeat.html
Normal file
@@ -0,0 +1,55 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Defeated - Code of Conquest{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="combat-result combat-result--defeat">
|
||||
<div class="combat-result__icon">💀</div>
|
||||
<h1 class="combat-result__title">Defeated</h1>
|
||||
<p class="combat-result__subtitle">Your party has fallen in battle...</p>
|
||||
|
||||
{# Defeat Message #}
|
||||
<div class="combat-rewards" style="border-color: var(--accent-red);">
|
||||
<h2 class="rewards-title" style="color: var(--accent-red);">Battle Lost</h2>
|
||||
<div class="rewards-list">
|
||||
<div class="reward-item">
|
||||
<span class="reward-icon">⚠</span>
|
||||
<span class="reward-label">Your progress has been saved</span>
|
||||
<span class="reward-value" style="color: var(--text-muted);">No items lost</span>
|
||||
</div>
|
||||
{% if gold_lost %}
|
||||
<div class="reward-item">
|
||||
<span class="reward-icon">💰</span>
|
||||
<span class="reward-label">Gold dropped</span>
|
||||
<span class="reward-value" style="color: var(--accent-red);">-{{ gold_lost }} gold</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-primary); text-align: center;">
|
||||
<p style="font-size: var(--text-sm); color: var(--text-secondary); font-style: italic;">
|
||||
"Even the mightiest heroes face setbacks. Rise again, adventurer!"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Action Buttons #}
|
||||
<div class="combat-result__actions">
|
||||
<a href="{{ url_for('game.play_session', session_id=session_id) }}" class="btn btn-primary">
|
||||
Return to Game
|
||||
</a>
|
||||
{% if can_retry %}
|
||||
<button class="btn btn-secondary"
|
||||
hx-post="{{ url_for('combat.combat_view', session_id=session_id) }}"
|
||||
hx-target="body"
|
||||
hx-swap="innerHTML">
|
||||
Retry Battle
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
52
public_web/templates/game/partials/combat_items_sheet.html
Normal file
52
public_web/templates/game/partials/combat_items_sheet.html
Normal file
@@ -0,0 +1,52 @@
|
||||
{#
|
||||
Combat Items Sheet
|
||||
Bottom sheet for selecting consumable items during combat
|
||||
#}
|
||||
<div class="combat-items-sheet open" role="dialog" aria-modal="true" aria-labelledby="combat-items-title">
|
||||
{# Drag handle for mobile #}
|
||||
<div class="sheet-handle" aria-hidden="true"></div>
|
||||
|
||||
{# Sheet header #}
|
||||
<div class="sheet-header">
|
||||
<h3 id="combat-items-title">Use Item</h3>
|
||||
<button class="sheet-close" onclick="closeCombatSheet()" aria-label="Close">×</button>
|
||||
</div>
|
||||
|
||||
{# Sheet body #}
|
||||
<div class="sheet-body">
|
||||
{# Consumables Grid #}
|
||||
<div class="combat-items-grid">
|
||||
{% for item in consumables %}
|
||||
<button class="combat-item"
|
||||
hx-get="{{ url_for('combat.combat_item_detail', session_id=session_id, item_id=item.item_id) }}"
|
||||
hx-target="#combat-item-detail"
|
||||
hx-swap="innerHTML"
|
||||
aria-label="{{ item.name }}">
|
||||
<img src="{{ url_for('static', filename='img/items/consumable.svg') }}" alt="">
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
<span class="item-effect">{{ item.description|truncate(30) }}</span>
|
||||
</button>
|
||||
{% else %}
|
||||
<p class="no-consumables">No usable items in inventory</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# Selected Item Detail + Use Button #}
|
||||
<div class="combat-item-detail" id="combat-item-detail">
|
||||
<p style="color: var(--text-muted); text-align: center;">Select an item to use</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
|
||||
|
||||
<script>
|
||||
// Handle item selection highlighting in combat sheet
|
||||
document.querySelectorAll('.combat-item').forEach(item => {
|
||||
item.addEventListener('htmx:afterRequest', function() {
|
||||
// Remove selected from all items
|
||||
document.querySelectorAll('.combat-item.selected').forEach(i => i.classList.remove('selected'));
|
||||
// Add selected to clicked item
|
||||
this.classList.add('selected');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
25
public_web/templates/game/partials/combat_log.html
Normal file
25
public_web/templates/game/partials/combat_log.html
Normal file
@@ -0,0 +1,25 @@
|
||||
{# Combat Log Partial - Displays combat action history #}
|
||||
{# This partial is swapped via HTMX when combat actions occur #}
|
||||
|
||||
{% if combat_log %}
|
||||
{% for entry in combat_log %}
|
||||
<div class="combat-log__entry combat-log__entry--{{ entry.type|default('system') }}{% if entry.is_crit %} combat-log__entry--crit{% endif %}">
|
||||
{% if entry.actor %}
|
||||
<span class="log-actor">{{ entry.actor }}</span>
|
||||
{% endif %}
|
||||
<span class="log-message">{{ entry.message }}</span>
|
||||
{% if entry.damage %}
|
||||
<span class="log-damage{% if entry.is_crit %} log-damage--crit{% endif %}">
|
||||
{% if entry.is_crit %}CRITICAL! {% endif %}{{ entry.damage }} damage
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if entry.heal %}
|
||||
<span class="log-heal">+{{ entry.heal }} HP</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="combat-log__empty">
|
||||
Combat begins! Choose your action below.
|
||||
</div>
|
||||
{% endif %}
|
||||
84
public_web/templates/game/partials/combat_victory.html
Normal file
84
public_web/templates/game/partials/combat_victory.html
Normal file
@@ -0,0 +1,84 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Victory! - Code of Conquest{% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="combat-result combat-result--victory">
|
||||
<div class="combat-result__icon">🏆</div>
|
||||
<h1 class="combat-result__title">Victory!</h1>
|
||||
<p class="combat-result__subtitle">You have defeated your enemies!</p>
|
||||
|
||||
{# Rewards Section #}
|
||||
{% if rewards %}
|
||||
<div class="combat-rewards">
|
||||
<h2 class="rewards-title">Rewards Earned</h2>
|
||||
<div class="rewards-list">
|
||||
{# Experience #}
|
||||
{% if rewards.experience %}
|
||||
<div class="reward-item">
|
||||
<span class="reward-icon">⭐</span>
|
||||
<span class="reward-label">Experience Points</span>
|
||||
<span class="reward-value reward-value--xp">+{{ rewards.experience }} XP</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Gold #}
|
||||
{% if rewards.gold %}
|
||||
<div class="reward-item">
|
||||
<span class="reward-icon">💰</span>
|
||||
<span class="reward-label">Gold</span>
|
||||
<span class="reward-value reward-value--gold">+{{ rewards.gold }} gold</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Level Up #}
|
||||
{% if rewards.level_ups %}
|
||||
{% for character_id in rewards.level_ups %}
|
||||
<div class="reward-item">
|
||||
<span class="reward-icon">🌟</span>
|
||||
<span class="reward-label">Level Up!</span>
|
||||
<span class="reward-value reward-value--level">New abilities unlocked!</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Loot Items #}
|
||||
{% if rewards.items %}
|
||||
<div class="loot-section">
|
||||
<h3 class="loot-title">Items Obtained</h3>
|
||||
<div class="loot-list">
|
||||
{% for item in rewards.items %}
|
||||
<div class="loot-item loot-item--{{ item.rarity|default('common') }}">
|
||||
<span>
|
||||
{% if item.type == 'weapon' %}⚔
|
||||
{% elif item.type == 'armor' %}🧳
|
||||
{% elif item.type == 'consumable' %}🍷
|
||||
{% elif item.type == 'material' %}🔥
|
||||
{% else %}📦
|
||||
{% endif %}
|
||||
</span>
|
||||
<span>{{ item.name }}</span>
|
||||
{% if item.quantity > 1 %}
|
||||
<span style="color: var(--text-muted);">x{{ item.quantity }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Action Buttons #}
|
||||
<div class="combat-result__actions">
|
||||
<a href="{{ url_for('game.play_session', session_id=session_id) }}" class="btn btn-primary">
|
||||
Continue Adventure
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
118
public_web/templates/game/partials/inventory_item_detail.html
Normal file
118
public_web/templates/game/partials/inventory_item_detail.html
Normal file
@@ -0,0 +1,118 @@
|
||||
{#
|
||||
Inventory Item Detail
|
||||
Partial template loaded via HTMX when an item is selected
|
||||
#}
|
||||
<div class="item-detail-content">
|
||||
{# Mobile back button #}
|
||||
<button class="item-detail-back" onclick="hideMobileDetail()" aria-label="Back to inventory">
|
||||
← Back to items
|
||||
</button>
|
||||
|
||||
{# Item header #}
|
||||
<div class="item-detail-header">
|
||||
<img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
|
||||
class="item-detail-icon" alt="">
|
||||
<div class="item-detail-title">
|
||||
<h3 class="rarity-text-{{ item.rarity|default('common') }}">{{ item.name }}</h3>
|
||||
<span class="item-type">{{ item.item_type|default('Item')|replace('_', ' ')|title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Item description #}
|
||||
<p class="item-description">{{ item.description|default('No description available.') }}</p>
|
||||
|
||||
{# Stats (for equipment) #}
|
||||
{% if item.item_type in ['weapon', 'armor'] %}
|
||||
<div class="item-stats">
|
||||
{% if item.damage %}
|
||||
<div>
|
||||
<span>Damage</span>
|
||||
<span>{{ item.damage }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if item.defense %}
|
||||
<div>
|
||||
<span>Defense</span>
|
||||
<span>{{ item.defense }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if item.spell_power %}
|
||||
<div>
|
||||
<span>Spell Power</span>
|
||||
<span>{{ item.spell_power }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if item.crit_chance %}
|
||||
<div>
|
||||
<span>Crit Chance</span>
|
||||
<span>{{ (item.crit_chance * 100)|round|int }}%</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if item.stat_bonuses %}
|
||||
{% for stat, value in item.stat_bonuses.items() %}
|
||||
<div>
|
||||
<span>{{ stat|replace('_', ' ')|title }}</span>
|
||||
<span>+{{ value }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Effects (for consumables) #}
|
||||
{% if item.item_type == 'consumable' and item.effects_on_use %}
|
||||
<div class="item-stats">
|
||||
<div class="item-stats-title" style="font-weight: 600; margin-bottom: 0.5rem;">Effects</div>
|
||||
{% for effect in item.effects_on_use %}
|
||||
<div>
|
||||
<span>{{ effect.name|default(effect.effect_type|default('Effect')|title) }}</span>
|
||||
<span>{{ effect.value|default('') }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Item value #}
|
||||
{% if item.value %}
|
||||
<div class="item-value" style="font-size: var(--text-sm); color: var(--accent-gold); margin-bottom: 1rem;">
|
||||
Value: {{ item.value }} gold
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Action Buttons #}
|
||||
<div class="item-actions">
|
||||
{% if item.item_type == 'consumable' %}
|
||||
<button class="action-btn action-btn--primary"
|
||||
hx-post="{{ url_for('game.inventory_use', session_id=session_id) }}"
|
||||
hx-vals='{"item_id": "{{ item.item_id }}"}'
|
||||
hx-target="#character-panel"
|
||||
hx-swap="innerHTML"
|
||||
onclick="closeModal()">
|
||||
Use
|
||||
</button>
|
||||
{% elif item.item_type in ['weapon', 'armor'] %}
|
||||
<button class="action-btn action-btn--primary"
|
||||
hx-post="{{ url_for('game.inventory_equip', session_id=session_id) }}"
|
||||
hx-vals='{"item_id": "{{ item.item_id }}"{% if suggested_slot %}, "slot": "{{ suggested_slot }}"{% endif %}}'
|
||||
hx-target="#character-panel"
|
||||
hx-swap="innerHTML"
|
||||
onclick="closeModal()">
|
||||
Equip
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% if item.item_type != 'quest_item' %}
|
||||
<button class="action-btn action-btn--danger"
|
||||
hx-delete="{{ url_for('game.inventory_drop', session_id=session_id, item_id=item.item_id) }}"
|
||||
hx-target=".inventory-modal"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Drop {{ item.name }}? This cannot be undone.">
|
||||
Drop
|
||||
</button>
|
||||
{% else %}
|
||||
<p style="font-size: var(--text-xs); color: var(--text-muted); text-align: center; padding: 0.5rem;">
|
||||
Quest items cannot be dropped
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
138
public_web/templates/game/partials/inventory_modal.html
Normal file
138
public_web/templates/game/partials/inventory_modal.html
Normal file
@@ -0,0 +1,138 @@
|
||||
{#
|
||||
Inventory Modal
|
||||
Full inventory management modal for play screen
|
||||
#}
|
||||
<div class="modal-overlay" onclick="if(event.target===this) closeModal()"
|
||||
role="dialog" aria-modal="true" aria-labelledby="inventory-title">
|
||||
<div class="modal-content inventory-modal">
|
||||
{# Header #}
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" id="inventory-title">
|
||||
Inventory
|
||||
<span class="inventory-count">({{ inventory_count }}/{{ inventory_max }})</span>
|
||||
</h2>
|
||||
<button class="modal-close" onclick="closeModal()" aria-label="Close inventory">×</button>
|
||||
</div>
|
||||
|
||||
{# Tab Filter Bar #}
|
||||
<div class="inventory-tabs" role="tablist">
|
||||
<button class="tab {% if filter == 'all' %}active{% endif %}"
|
||||
role="tab"
|
||||
aria-selected="{{ 'true' if filter == 'all' else 'false' }}"
|
||||
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='all') }}"
|
||||
hx-target=".inventory-modal"
|
||||
hx-swap="outerHTML">
|
||||
All
|
||||
</button>
|
||||
<button class="tab {% if filter == 'weapon' %}active{% endif %}"
|
||||
role="tab"
|
||||
aria-selected="{{ 'true' if filter == 'weapon' else 'false' }}"
|
||||
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='weapon') }}"
|
||||
hx-target=".inventory-modal"
|
||||
hx-swap="outerHTML">
|
||||
Weapons
|
||||
</button>
|
||||
<button class="tab {% if filter == 'armor' %}active{% endif %}"
|
||||
role="tab"
|
||||
aria-selected="{{ 'true' if filter == 'armor' else 'false' }}"
|
||||
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='armor') }}"
|
||||
hx-target=".inventory-modal"
|
||||
hx-swap="outerHTML">
|
||||
Armor
|
||||
</button>
|
||||
<button class="tab {% if filter == 'consumable' %}active{% endif %}"
|
||||
role="tab"
|
||||
aria-selected="{{ 'true' if filter == 'consumable' else 'false' }}"
|
||||
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='consumable') }}"
|
||||
hx-target=".inventory-modal"
|
||||
hx-swap="outerHTML">
|
||||
Consumables
|
||||
</button>
|
||||
<button class="tab {% if filter == 'quest_item' %}active{% endif %}"
|
||||
role="tab"
|
||||
aria-selected="{{ 'true' if filter == 'quest_item' else 'false' }}"
|
||||
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='quest_item') }}"
|
||||
hx-target=".inventory-modal"
|
||||
hx-swap="outerHTML">
|
||||
Quest
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{# Body #}
|
||||
<div class="modal-body inventory-body">
|
||||
{# Item Grid #}
|
||||
<div class="inventory-grid-container">
|
||||
<div class="inventory-grid" id="inventory-items" role="listbox">
|
||||
{% for item in inventory %}
|
||||
<button class="inventory-item rarity-{{ item.rarity|default('common') }}"
|
||||
role="option"
|
||||
hx-get="{{ url_for('game.inventory_item_detail', session_id=session_id, item_id=item.item_id) }}"
|
||||
hx-target="#item-detail"
|
||||
hx-swap="innerHTML"
|
||||
aria-label="{{ item.name }}, {{ item.rarity|default('common') }} {{ item.item_type }}">
|
||||
<img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
|
||||
alt="" aria-hidden="true">
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
{% if item.quantity and item.quantity > 1 %}
|
||||
<span class="item-quantity">x{{ item.quantity }}</span>
|
||||
{% endif %}
|
||||
</button>
|
||||
{% else %}
|
||||
<p class="inventory-empty">
|
||||
{% if filter == 'all' %}
|
||||
No items in inventory
|
||||
{% else %}
|
||||
No {{ filter|replace('_', ' ') }}s found
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Item Detail Panel #}
|
||||
<div class="item-detail" id="item-detail" aria-live="polite">
|
||||
<p class="item-detail-empty">Select an item to view details</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Footer #}
|
||||
<div class="modal-footer">
|
||||
<span class="gold-display">{{ gold }}</span>
|
||||
<button class="btn btn--secondary" onclick="closeModal()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Handle item selection highlighting
|
||||
document.querySelectorAll('.inventory-item').forEach(item => {
|
||||
item.addEventListener('htmx:afterRequest', function() {
|
||||
// Remove selected from all items
|
||||
document.querySelectorAll('.inventory-item.selected').forEach(i => i.classList.remove('selected'));
|
||||
// Add selected to clicked item
|
||||
this.classList.add('selected');
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile: Show detail panel as slide-in
|
||||
function showMobileDetail() {
|
||||
const detail = document.getElementById('item-detail');
|
||||
if (window.innerWidth <= 768 && detail) {
|
||||
detail.classList.add('visible');
|
||||
}
|
||||
}
|
||||
|
||||
function hideMobileDetail() {
|
||||
const detail = document.getElementById('item-detail');
|
||||
if (detail) {
|
||||
detail.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for item detail loads on mobile
|
||||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||||
if (event.detail.target.id === 'item-detail') {
|
||||
showMobileDetail();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
51
public_web/templates/game/partials/item_modal.html
Normal file
51
public_web/templates/game/partials/item_modal.html
Normal file
@@ -0,0 +1,51 @@
|
||||
{# Item Selection Modal - Shows consumable items during combat #}
|
||||
|
||||
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
|
||||
<div class="modal-content modal-content--md">
|
||||
<div class="modal-header">
|
||||
<h3 class="modal-title">Use Item</h3>
|
||||
<button class="modal-close" onclick="closeModal()" aria-label="Close modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{% if items %}
|
||||
<div class="item-list">
|
||||
{% for item in items %}
|
||||
<button class="item-btn"
|
||||
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
|
||||
hx-vals='{"action_type": "item", "item_id": "{{ item.id }}"}'
|
||||
hx-target="#combat-log"
|
||||
hx-swap="beforeend"
|
||||
hx-disabled-elt="this"
|
||||
{% if item.quantity <= 0 %}disabled{% endif %}
|
||||
onclick="closeModal()">
|
||||
<span class="item-icon">
|
||||
{% if 'health' in item.name|lower or 'heal' in item.effect|lower %}🍷
|
||||
{% elif 'mana' in item.name|lower or 'mp' in item.effect|lower %}🥭
|
||||
{% elif 'antidote' in item.name|lower or 'cure' in item.effect|lower %}🧪
|
||||
{% elif 'bomb' in item.name|lower or 'damage' in item.effect|lower %}💣
|
||||
{% elif 'elixir' in item.name|lower %}🥤
|
||||
{% else %}📦
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="item-info">
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
<span class="item-effect">{{ item.effect|default('Use in combat.') }}</span>
|
||||
</div>
|
||||
<span class="item-quantity">x{{ item.quantity }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="items-empty">
|
||||
<p>No usable items in inventory.</p>
|
||||
<p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
|
||||
Purchase potions from merchants or find them while exploring.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
{% block extra_head %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/play.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/inventory.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
Reference in New Issue
Block a user