Phillip Tarrant
06ef8f6f0b
Issue 1: Slot Name Mismatch - Equipment modal used armor, accessory but API uses chest, accessory_1 - Updated to all 8 API slots: weapon, off_hand, helmet, chest, gloves, boots, accessory_1, accessory_2 Issue 2: HTMX Request Not Firing (the real blocker) - onclick=closeModal() was removing the button from DOM before HTMX could send the request - Changed to hx-on::after-request=closeModal() so modal closes after the request completes
119 lines
5.9 KiB
HTML
119 lines
5.9 KiB
HTML
{#
|
|
Equipment Modal
|
|
Displays character's equipped gear and inventory summary
|
|
#}
|
|
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
|
|
<div class="modal-content modal-content--md">
|
|
{# Modal Header #}
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Equipment & Gear</h3>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
|
|
{# Modal Body #}
|
|
<div class="modal-body">
|
|
{# Equipment Grid - All 8 slots matching API #}
|
|
<div class="equipment-grid">
|
|
{% set slots = [
|
|
('weapon', 'Weapon'),
|
|
('off_hand', 'Off-Hand'),
|
|
('helmet', 'Helmet'),
|
|
('chest', 'Chest Armor'),
|
|
('gloves', 'Gloves'),
|
|
('boots', 'Boots'),
|
|
('accessory_1', 'Accessory 1'),
|
|
('accessory_2', 'Accessory 2')
|
|
] %}
|
|
|
|
{% for slot_id, slot_name in slots %}
|
|
{% set item = character.equipped.get(slot_id) %}
|
|
<div class="equipment-slot {% if item %}equipment-slot--equipped{% else %}equipment-slot--empty{% endif %}"
|
|
data-slot="{{ slot_id }}">
|
|
<div class="slot-header">
|
|
<span class="slot-label">{{ slot_name }}</span>
|
|
</div>
|
|
|
|
{% if item %}
|
|
{# Equipped Item #}
|
|
<div class="slot-item">
|
|
<div class="slot-icon">
|
|
{# Icon based on slot_id since item_type doesn't distinguish armor slots #}
|
|
{% if slot_id == 'weapon' %}⚔️
|
|
{% elif slot_id == 'off_hand' %}🛡️
|
|
{% elif slot_id == 'helmet' %}⛑️
|
|
{% elif slot_id == 'chest' %}🎽
|
|
{% elif slot_id == 'gloves' %}🧤
|
|
{% elif slot_id == 'boots' %}👢
|
|
{% elif slot_id == 'accessory_1' %}💍
|
|
{% elif slot_id == 'accessory_2' %}📿
|
|
{% else %}📦{% endif %}
|
|
</div>
|
|
<div class="slot-details">
|
|
<div class="slot-item-name">{{ item.name }}</div>
|
|
<div class="slot-stats">
|
|
{% if item.damage %}
|
|
<span class="stat-damage">{{ item.damage }} DMG</span>
|
|
{% endif %}
|
|
{% if item.defense %}
|
|
<span class="stat-defense">{{ item.defense }} DEF</span>
|
|
{% endif %}
|
|
{% if item.stat_bonuses %}
|
|
{% for stat, bonus in item.stat_bonuses.items() %}
|
|
<span class="stat-bonus">+{{ bonus }} {{ stat[:3].upper() }}</span>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{# Empty Slot #}
|
|
<div class="slot-empty">
|
|
<div class="slot-icon slot-icon--empty">
|
|
{% if slot_id == 'weapon' %}⚔️
|
|
{% elif slot_id == 'off_hand' %}🛡️
|
|
{% elif slot_id == 'helmet' %}⛑️
|
|
{% elif slot_id == 'chest' %}🎽
|
|
{% elif slot_id == 'gloves' %}🧤
|
|
{% elif slot_id == 'boots' %}👢
|
|
{% elif slot_id == 'accessory_1' %}💍
|
|
{% elif slot_id == 'accessory_2' %}📿
|
|
{% else %}📦{% endif %}
|
|
</div>
|
|
<div class="slot-empty-text">Empty</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# Equipment Summary #}
|
|
<div class="equipment-summary">
|
|
<div class="summary-title">Total Bonuses</div>
|
|
<div class="summary-stats">
|
|
{% set total_bonuses = {} %}
|
|
{% for slot_id, item in character.equipped.items() %}
|
|
{% if item and item.stat_bonuses %}
|
|
{% for stat, bonus in item.stat_bonuses.items() %}
|
|
{% if total_bonuses.update({stat: total_bonuses.get(stat, 0) + bonus}) %}{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if total_bonuses %}
|
|
{% for stat, bonus in total_bonuses.items() %}
|
|
<span class="summary-stat">+{{ bonus }} {{ stat[:3].upper() }}</span>
|
|
{% endfor %}
|
|
{% else %}
|
|
<span class="summary-none">No stat bonuses</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Modal Footer #}
|
|
<div class="modal-footer">
|
|
<button class="btn btn--secondary" onclick="closeModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|