109 lines
5.2 KiB
HTML
109 lines
5.2 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 #}
|
|
<div class="equipment-grid">
|
|
{% set slots = [
|
|
('weapon', 'Weapon'),
|
|
('armor', 'Armor'),
|
|
('helmet', 'Helmet'),
|
|
('boots', 'Boots'),
|
|
('accessory', 'Accessory')
|
|
] %}
|
|
|
|
{% 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">
|
|
{% if item.item_type == 'weapon' %}⚔️
|
|
{% elif item.item_type == 'armor' %}🛡️
|
|
{% elif item.item_type == 'helmet' %}⛑️
|
|
{% elif item.item_type == 'boots' %}👢
|
|
{% elif item.item_type == 'accessory' %}💍
|
|
{% 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 == 'armor' %}🛡️
|
|
{% elif slot_id == 'helmet' %}⛑️
|
|
{% elif slot_id == 'boots' %}👢
|
|
{% elif slot_id == 'accessory' %}💍
|
|
{% 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>
|