63 lines
2.8 KiB
HTML
63 lines
2.8 KiB
HTML
<!-- 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>
|