130 lines
3.1 KiB
HTML
130 lines
3.1 KiB
HTML
{#
|
|
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>
|