85 lines
3.2 KiB
HTML
85 lines
3.2 KiB
HTML
<!-- 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 %}
|