first commit

public_web/templates/dev/partials/npc_dialogue.html

@@ -0,0 +1,129 @@
+{#
+NPC Dialogue partial - displays conversation history with current exchange.
+
+Expected context:
+- npc_name: Name of the NPC
+- character_name: Name of the player character
+- conversation_history: List of previous exchanges [{player_line, npc_response}, ...]
+- player_line: What the player just said
+- dialogue: NPC's current response
+- session_id: For any follow-up actions
+#}
+
+<div class="npc-conversation">
+    <div class="npc-conversation-header">
+        <span class="npc-conversation-title">Conversation with {{ npc_name }}</span>
+    </div>
+
+    <div class="npc-conversation-history">
+        {# Show previous exchanges #}
+        {% if conversation_history %}
+            {% for exchange in conversation_history %}
+            <div class="dialogue-exchange dialogue-exchange-past">
+                <div class="dialogue-player">
+                    <span class="dialogue-speaker">{{ character_name }}:</span>
+                    <span class="dialogue-text">{{ exchange.player_line }}</span>
+                </div>
+                <div class="dialogue-npc">
+                    <span class="dialogue-speaker">{{ npc_name }}:</span>
+                    <span class="dialogue-text">{{ exchange.npc_response }}</span>
+                </div>
+            </div>
+            {% endfor %}
+        {% endif %}
+
+        {# Show current exchange (highlighted) #}
+        <div class="dialogue-exchange dialogue-exchange-current">
+            <div class="dialogue-player">
+                <span class="dialogue-speaker">{{ character_name }}:</span>
+                <span class="dialogue-text">{{ player_line }}</span>
+            </div>
+            <div class="dialogue-npc">
+                <span class="dialogue-speaker">{{ npc_name }}:</span>
+                <span class="dialogue-text">{{ dialogue }}</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+.npc-conversation {
+    background: #1a1a2a;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.npc-conversation-header {
+    background: #2a2a3a;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid #4a4a5a;
+}
+
+.npc-conversation-title {
+    color: #f59e0b;
+    font-weight: 600;
+    font-size: 0.95rem;
+}
+
+.npc-conversation-history {
+    padding: 1rem;
+    max-height: 400px;
+    overflow-y: auto;
+}
+
+.dialogue-exchange {
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #3a3a4a;
+}
+
+.dialogue-exchange:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.dialogue-exchange-past {
+    opacity: 0.7;
+}
+
+.dialogue-exchange-current {
+    background: #2a2a3a;
+    margin: 0 -1rem;
+    padding: 1rem;
+    border-radius: 0;
+    opacity: 1;
+}
+
+.dialogue-player {
+    margin-bottom: 0.5rem;
+}
+
+.dialogue-npc {
+    padding-left: 0.5rem;
+    border-left: 2px solid #f59e0b;
+}
+
+.dialogue-speaker {
+    font-weight: 600;
+    margin-right: 0.5rem;
+}
+
+.dialogue-player .dialogue-speaker {
+    color: #60a5fa;
+}
+
+.dialogue-npc .dialogue-speaker {
+    color: #f59e0b;
+}
+
+.dialogue-text {
+    color: #e5e7eb;
+    line-height: 1.5;
+    white-space: pre-wrap;
+}
+
+.dialogue-exchange-past .dialogue-text {
+    color: #9ca3af;
+}
+</style>