first commit

public_web/templates/game/partials/narrative_panel.html

@@ -0,0 +1,66 @@
+{#
+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>