first commit

public_web/templates/game/play.html

@@ -0,0 +1,152 @@
+{% extends "base.html" %}
+
+{% block title %}Playing - Code of Conquest{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/play.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="play-container">
+    {# ===== LEFT SIDEBAR - Character Panel ===== #}
+    <aside class="play-panel play-sidebar play-sidebar--left" id="character-panel">
+        {% include "game/partials/character_panel.html" %}
+    </aside>
+
+    {# ===== MIDDLE - Narrative Panel ===== #}
+    <section class="play-panel play-main">
+        {% include "game/partials/narrative_panel.html" %}
+    </section>
+
+    {# ===== RIGHT SIDEBAR - Accordions ===== #}
+    <aside class="play-panel play-sidebar play-sidebar--right accordion-panel">
+        {# History Accordion #}
+        <div class="accordion" data-accordion="history">
+            <button class="accordion-header" onclick="toggleAccordion(this)">
+                <span>History <span class="accordion-count">({{ history|length }})</span></span>
+                <span class="accordion-icon">▼</span>
+            </button>
+            <div class="accordion-content" id="accordion-history">
+                {% include "game/partials/sidebar_history.html" %}
+            </div>
+        </div>
+
+        {# Quests Accordion #}
+        <div class="accordion collapsed" data-accordion="quests">
+            <button class="accordion-header" onclick="toggleAccordion(this)">
+                <span>Quests <span class="accordion-count">({{ quests|length }})</span></span>
+                <span class="accordion-icon">▼</span>
+            </button>
+            <div class="accordion-content" id="accordion-quests">
+                {% include "game/partials/sidebar_quests.html" %}
+            </div>
+        </div>
+
+        {# NPCs Accordion #}
+        <div class="accordion collapsed" data-accordion="npcs">
+            <button class="accordion-header" onclick="toggleAccordion(this)">
+                <span>NPCs Here <span class="accordion-count">({{ npcs|length }})</span></span>
+                <span class="accordion-icon">▼</span>
+            </button>
+            <div class="accordion-content" id="accordion-npcs">
+                {% include "game/partials/sidebar_npcs.html" %}
+            </div>
+        </div>
+
+        {# Map Accordion #}
+        <div class="accordion collapsed" data-accordion="map">
+            <button class="accordion-header" onclick="toggleAccordion(this)">
+                <span>Map <span class="accordion-count">({{ discovered_locations|length }})</span></span>
+                <span class="accordion-icon">▼</span>
+            </button>
+            <div class="accordion-content" id="accordion-map">
+                {% include "game/partials/sidebar_map.html" %}
+            </div>
+        </div>
+    </aside>
+</div>
+
+{# Modal Container #}
+<div id="modal-container"></div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Accordion Toggle (right sidebar)
+function toggleAccordion(button) {
+    const accordion = button.closest('.accordion');
+    accordion.classList.toggle('collapsed');
+}
+
+// Panel Accordion Toggle (character panel)
+function togglePanelAccordion(button) {
+    const accordion = button.closest('.panel-accordion');
+    accordion.classList.toggle('collapsed');
+}
+
+// Toggle Ambient Details
+function toggleAmbient() {
+    const section = document.querySelector('.ambient-section');
+    section.classList.toggle('collapsed');
+}
+
+// Close Modal
+function closeModal() {
+    const modal = document.querySelector('.modal-overlay');
+    if (modal) {
+        modal.remove();
+    }
+}
+
+// Close modal on Escape key
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeModal();
+    }
+});
+
+// Close modal on overlay click
+document.addEventListener('click', function(e) {
+    if (e.target.classList.contains('modal-overlay')) {
+        closeModal();
+    }
+});
+
+// Clear chat input after submission
+document.body.addEventListener('htmx:afterSwap', function(e) {
+    // Clear chat input if it was a chat form submission
+    if (e.target.closest('.chat-history')) {
+        const form = document.querySelector('.chat-input-form');
+        if (form) {
+            const input = form.querySelector('.chat-input');
+            if (input) {
+                input.value = '';
+                input.focus();
+            }
+        }
+    }
+
+    // Clear player action input after submission
+    if (e.target.id === 'narrative-content') {
+        const textarea = document.querySelector('.player-input-textarea');
+        if (textarea) {
+            textarea.value = '';
+            textarea.focus();
+        }
+    }
+});
+
+// Player input: Enter to submit, Shift+Enter for new line
+document.addEventListener('keydown', function(e) {
+    if (e.target.classList.contains('player-input-textarea')) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            const form = e.target.closest('form');
+            if (form && e.target.value.trim()) {
+                htmx.trigger(form, 'submit');
+            }
+        }
+    }
+});
+</script>
+{% endblock %}