52 lines
2.5 KiB
HTML
52 lines
2.5 KiB
HTML
{# 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>
|