54 lines
2.3 KiB
HTML
54 lines
2.3 KiB
HTML
{#
|
|
Monster Selection Modal
|
|
Shows random encounter options for the current location
|
|
#}
|
|
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
|
|
<div class="modal-content monster-modal">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">⚔️ Search for Monsters</h3>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="monster-modal-location">
|
|
Searching near <strong>{{ location_name }}</strong>...
|
|
</p>
|
|
{% if encounters %}
|
|
<div class="encounter-options">
|
|
{% for enc in encounters %}
|
|
<button class="encounter-option encounter-option--{{ enc.challenge|lower }}"
|
|
hx-post="{{ url_for('game.start_combat', session_id=session_id) }}"
|
|
hx-vals='{"enemy_ids": {{ enc.enemies|tojson }}}'
|
|
hx-target="closest .modal-overlay"
|
|
hx-swap="outerHTML">
|
|
<div class="encounter-info">
|
|
<div class="encounter-name">{{ enc.display_name }}</div>
|
|
<div class="encounter-enemies">
|
|
{% for name in enc.enemy_names %}
|
|
<span class="enemy-badge">{{ name }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="encounter-challenge challenge--{{ enc.challenge|lower }}">
|
|
{{ enc.challenge }}
|
|
</div>
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
<p class="monster-modal-hint">
|
|
<small>Select an encounter to begin combat. Challenge level indicates difficulty.</small>
|
|
</p>
|
|
{% else %}
|
|
<div class="encounter-empty">
|
|
<p>No monsters found in this area.</p>
|
|
<p><small>Try exploring somewhere more dangerous!</small></p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-secondary" onclick="closeModal()">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|