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