combat testing and polishing in the dev console, many bug fixes
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user