67 lines
2.5 KiB
HTML
67 lines
2.5 KiB
HTML
{#
|
|
Narrative Panel - Middle section
|
|
Displays location header, ambient details, and DM response
|
|
#}
|
|
<div class="narrative-panel">
|
|
{# Location Header #}
|
|
<div class="location-header">
|
|
<div class="location-top">
|
|
<span class="location-type-badge location-type-badge--{{ location.location_type }}">
|
|
{{ location.location_type }}
|
|
</span>
|
|
<h2 class="location-name">{{ location.name }}</h2>
|
|
</div>
|
|
<div class="location-meta">
|
|
<span class="location-region">{{ location.region }}</span>
|
|
<span class="turn-counter">Turn {{ session.turn_number }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{# Ambient Details (Collapsible) #}
|
|
{% if location.ambient_description %}
|
|
<div class="ambient-section">
|
|
<button class="ambient-toggle" onclick="toggleAmbient()">
|
|
<span>Ambient Details</span>
|
|
<span class="ambient-icon">▼</span>
|
|
</button>
|
|
<div class="ambient-content">
|
|
{{ location.ambient_description }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# DM Response Area #}
|
|
<div class="narrative-content" id="narrative-content">
|
|
<div class="dm-response">
|
|
{{ dm_response }}
|
|
</div>
|
|
</div>
|
|
|
|
{# Player Input Area #}
|
|
<div class="player-input-area">
|
|
<form class="player-input-form"
|
|
hx-post="{{ url_for('game.take_action', session_id=session_id) }}"
|
|
hx-target="#narrative-content"
|
|
hx-swap="innerHTML"
|
|
hx-disabled-elt="find button">
|
|
<label for="player-action" class="player-input-label">What will you do?</label>
|
|
<div class="player-input-row">
|
|
<input type="hidden" name="action_type" value="text">
|
|
<textarea id="player-action"
|
|
name="action_text"
|
|
class="player-input-textarea"
|
|
placeholder="Describe your action... (e.g., 'I draw my sword and approach the tavern keeper')"
|
|
rows="2"
|
|
required></textarea>
|
|
<button type="submit" class="player-input-submit">
|
|
<span class="submit-text">Act</span>
|
|
<span class="submit-icon">→</span>
|
|
</button>
|
|
</div>
|
|
<div class="player-input-hint">
|
|
Press Enter to submit, Shift+Enter for new line
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|