ptarrant/Code_of_Conquest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chat history with the NPC modal

Browse Source
This commit is contained in:
Phillip Tarrant
2025-11-25 21:16:01 -06:00
parent 20cb279793
commit 196346165f
8 changed files with 244 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public_web/templates/base.html
View File

@@ -16,6 +16,8 @@
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- HTMX JSON encoding extension -->
<script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/json-enc.js"></script>
<!-- Hyperscript for custom events -->
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
{% block extra_head %}{% endblock %}
</head>

29
public_web/templates/game/partials/npc_chat_history.html Normal file
View File

@@ -0,0 +1,29 @@
{#
NPC Chat History Sidebar
Shows last 5 messages in compact cards with timestamps
#}
<div class="chat-history-sidebar">
<h4 class="history-header">Recent Messages</h4>
{% if messages %}
<div class="history-list">
{% for msg in messages|reverse %}
<div class="history-card">
<div class="history-timestamp">
{{ msg.timestamp|format_timestamp }}
</div>
<div class="history-player">
<strong>You:</strong> {{ msg.player_message|truncate(60) }}
</div>
<div class="history-npc">
<strong>NPC:</strong> {{ msg.npc_response|truncate(60) }}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="history-empty">
No previous messages
</div>
{% endif %}
</div>

17
public_web/templates/game/partials/npc_chat_modal.html
View File

@@ -3,15 +3,15 @@ NPC Chat Modal (Expanded)
Shows NPC profile with portrait, relationship meter, and conversation interface
#}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
<div class="modal-content modal-content--lg">
<div class="modal-content modal-content--xl">
{# Modal Header #}
<div class="modal-header">
<h3 class="modal-title">{{ npc.name }}</h3>
<button class="modal-close" onclick="closeModal()">&times;</button>
</div>
{# Modal Body - Two Column Layout #}
<div class="modal-body npc-modal-body">
{# Modal Body - Three Column Layout #}
<div class="modal-body npc-modal-body npc-modal-body--three-col">
{# Left Column: NPC Profile #}
<div class="npc-profile">
{# NPC Portrait #}
@@ -115,6 +115,17 @@ Shows NPC profile with portrait, relationship meter, and conversation interface
</button>
</form>
</div>
{# Right Column: Message History Sidebar #}
<aside class="npc-history-panel"
id="npc-history-{{ npc.npc_id }}"
hx-get="{{ url_for('game.npc_chat_history', session_id=session_id, npc_id=npc.npc_id) }}"
hx-trigger="load, newMessage from:body"
hx-swap="innerHTML"
hx-indicator=".history-loading">
{# History loaded via HTMX #}
<div class="loading-state-small history-loading">Loading history...</div>
</aside>
</div>
{# Modal Footer #}

49
public_web/templates/game/partials/npc_dialogue_response.html
View File

@@ -11,46 +11,23 @@ Expected context:
- session_id: For any follow-up actions
#}
<div class="npc-dialogue-response">
<div class="npc-dialogue-header">
<span class="npc-dialogue-title">{{ npc_name }} says:</span>
{# Only show CURRENT exchange (removed conversation_history loop) #}
<div class="current-exchange">
{% if player_line %}
<div class="chat-message chat-message--player">
<strong>{{ character_name }}:</strong> {{ player_line }}
</div>
<div class="npc-dialogue-content">
{# Show conversation history if present #}
{% if conversation_history %}
<div class="conversation-history">
{% for exchange in conversation_history[-3:] %}
<div class="history-exchange">
<div class="history-player">
<span class="speaker player">{{ character_name }}:</span>
<span class="text">{{ exchange.player_line }}</span>
</div>
<div class="history-npc">
<span class="speaker npc">{{ npc_name }}:</span>
<span class="text">{{ exchange.npc_response }}</span>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{# Show current exchange #}
<div class="current-exchange">
{% if player_line %}
<div class="player-message">
<span class="speaker player">{{ character_name }}:</span>
<span class="text">{{ player_line }}</span>
</div>
{% endif %}
<div class="npc-message">
<span class="speaker npc">{{ npc_name }}:</span>
<span class="text">{{ dialogue }}</span>
</div>
</div>
{% endif %}
<div class="chat-message chat-message--npc">
<strong>{{ npc_name }}:</strong> {{ dialogue }}
</div>
</div>
{# Trigger history refresh after new message #}
<div hx-trigger="load"
_="on load trigger newMessage on body"
style="display: none;"></div>
{# Trigger sidebar refreshes after NPC dialogue #}
<div hx-get="{{ url_for('game.npcs_accordion', session_id=session_id) }}"
hx-trigger="load"