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

combat testing and polishing in the dev console, many bug fixes

Browse Source
This commit is contained in:
Phillip Tarrant
2025-11-27 20:37:53 -06:00
parent 94c4ca9e95
commit dd92cf5991
45 changed files with 8157 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
public_web/templates/dev/combat.html Normal file
View File

@@ -0,0 +1,337 @@
{% extends "base.html" %}
{% block title %}Combat Tester - Dev Tools{% endblock %}
{% block extra_head %}
<style>
.dev-banner {
background: #dc2626;
color: white;
padding: 0.5rem 1rem;
text-align: center;
font-weight: bold;
position: sticky;
top: 0;
z-index: 100;
}
.combat-hub {
max-width: 900px;
margin: 2rem auto;
padding: 0 1rem;
}
.dev-section {
background: rgba(30, 30, 40, 0.9);
border: 1px solid #4a4a5a;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.dev-section h2 {
color: #f59e0b;
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.25rem;
border-bottom: 1px solid #4a4a5a;
padding-bottom: 0.5rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-label {
display: block;
color: #9ca3af;
font-size: 0.85rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.form-select {
width: 100%;
padding: 0.75rem;
background: #1a1a2a;
border: 1px solid #4a4a5a;
border-radius: 6px;
color: #e5e7eb;
font-size: 1rem;
}
.form-select:focus {
outline: none;
border-color: #f59e0b;
}
.enemy-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.enemy-option {
display: flex;
align-items: center;
padding: 0.75rem;
background: #2a2a3a;
border: 1px solid #4a4a5a;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
}
.enemy-option:hover {
background: #3a3a4a;
border-color: #5a5a6a;
}
.enemy-option.selected {
background: #3b3b5b;
border-color: #f59e0b;
}
.enemy-option input[type="checkbox"] {
margin-right: 0.75rem;
width: 18px;
height: 18px;
accent-color: #f59e0b;
}
.enemy-info {
flex: 1;
}
.enemy-name {
color: #e5e7eb;
font-weight: 500;
}
.enemy-level {
color: #9ca3af;
font-size: 0.8rem;
}
.btn-start {
width: 100%;
padding: 1rem;
background: #10b981;
color: white;
border: none;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.btn-start:hover {
background: #059669;
}
.btn-start:disabled {
background: #4a4a5a;
cursor: not-allowed;
}
#create-result {
margin-top: 1rem;
}
.session-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.session-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #2a2a3a;
border: 1px solid #4a4a5a;
border-radius: 6px;
}
.session-info {
flex: 1;
}
.session-id {
color: #f59e0b;
font-family: monospace;
font-size: 0.85rem;
}
.session-character {
color: #e5e7eb;
font-weight: 500;
}
.session-status {
color: #10b981;
font-size: 0.85rem;
}
.btn-resume {
padding: 0.5rem 1rem;
background: #3b82f6;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
font-size: 0.9rem;
}
.btn-resume:hover {
background: #2563eb;
}
.empty-state {
text-align: center;
color: #6b7280;
padding: 2rem;
font-style: italic;
}
.error {
background: #7f1d1d;
color: #fecaca;
padding: 0.75rem;
border-radius: 6px;
margin-bottom: 1rem;
}
.success {
background: #064e3b;
color: #a7f3d0;
padding: 0.75rem;
border-radius: 6px;
}
.back-link {
display: inline-block;
margin-bottom: 1rem;
color: #60a5fa;
text-decoration: none;
font-size: 0.9rem;
}
.back-link:hover {
text-decoration: underline;
}
.helper-text {
color: #9ca3af;
font-size: 0.85rem;
margin-top: 0.5rem;
}
</style>
{% endblock %}
{% block content %}
<div class="dev-banner">
DEV MODE - Combat System Tester
</div>
<div class="combat-hub">
<a href="{{ url_for('dev.index') }}" class="back-link">&larr; Back to Dev Tools</a>
{% if error %}
<div class="error">{{ error }}</div>
{% endif %}
<!-- Start New Combat -->
<div class="dev-section">
<h2>Start New Combat</h2>
<form hx-post="{{ url_for('dev.start_combat') }}"
hx-target="#create-result"
hx-swap="innerHTML">
<!-- Session Selection -->
<div class="form-group">
<label class="form-label">Select Session (must have a character)</label>
<select name="session_id" class="form-select" required>
<option value="">-- Select a session --</option>
{% for char in characters %}
<option value="{{ char.session_id if char.session_id else '' }}"
{% if not char.session_id %}disabled{% endif %}>
{{ char.name }} ({{ char.class_name }} Lv.{{ char.level }})
{% if not char.session_id %} - No active session{% endif %}
</option>
{% endfor %}
</select>
<p class="helper-text">You need an active story session to start combat. Create one in the Story Tester first.</p>
</div>
<!-- Enemy Selection -->
<div class="form-group">
<label class="form-label">Select Enemies (check multiple for group encounter)</label>
{% if enemies %}
<div class="enemy-grid">
{% for enemy in enemies %}
<label class="enemy-option" onclick="this.classList.toggle('selected')">
<input type="checkbox" name="enemy_ids" value="{{ enemy.enemy_id }}">
<div class="enemy-info">
<div class="enemy-name">{{ enemy.name }}</div>
<div class="enemy-level">{{ enemy.difficulty | capitalize }} · {{ enemy.experience_reward }} XP</div>
</div>
</label>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
No enemy templates available. Check that the API has enemy data loaded.
</div>
{% endif %}
</div>
<button type="submit" class="btn-start" {% if not enemies %}disabled{% endif %}>
Start Combat
</button>
</form>
<div id="create-result"></div>
</div>
<!-- Active Combat Sessions -->
<div class="dev-section">
<h2>Active Combat Sessions</h2>
{% if sessions_in_combat %}
<div class="session-list">
{% for session in sessions_in_combat %}
<div class="session-card">
<div class="session-info">
<div class="session-id">{{ session.session_id[:12] }}...</div>
<div class="session-character">{{ session.character_name or 'Unknown Character' }}</div>
<div class="session-status">In Combat - Round {{ session.game_state.combat_round or 1 }}</div>
</div>
<a href="{{ url_for('dev.combat_session', session_id=session.session_id) }}" class="btn-resume">
Resume Combat
</a>
</div>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
No active combat sessions. Start a new combat above.
</div>
{% endif %}
</div>
</div>
<script>
// Toggle selected state on checkbox change
document.querySelectorAll('.enemy-option input[type="checkbox"]').forEach(checkbox => {
checkbox.addEventListener('change', function() {
this.closest('.enemy-option').classList.toggle('selected', this.checked);
});
});
</script>
{% endblock %}

864
public_web/templates/dev/combat_session.html Normal file
View File

@@ -0,0 +1,864 @@
{% extends "base.html" %}
{% block title %}Combat Debug - Dev Tools{% endblock %}
{% block extra_head %}
<style>
.dev-banner {
background: #dc2626;
color: white;
padding: 0.5rem 1rem;
text-align: center;
font-weight: bold;
position: sticky;
top: 0;
z-index: 100;
}
.combat-container {
max-width: 1400px;
margin: 1rem auto;
padding: 0 1rem;
display: grid;
grid-template-columns: 280px 1fr 300px;
gap: 1rem;
}
@media (max-width: 1200px) {
.combat-container {
grid-template-columns: 250px 1fr;
}
.right-panel {
display: none;
}
}
@media (max-width: 768px) {
.combat-container {
grid-template-columns: 1fr;
}
.left-panel {
display: none;
}
}
.panel {
background: rgba(30, 30, 40, 0.9);
border: 1px solid #4a4a5a;
border-radius: 8px;
padding: 1rem;
}
.panel h3 {
color: #f59e0b;
margin-top: 0;
margin-bottom: 1rem;
font-size: 1rem;
border-bottom: 1px solid #4a4a5a;
padding-bottom: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-refresh {
background: #6366f1;
color: white;
padding: 0.25rem 0.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.75rem;
}
.btn-refresh:hover {
background: #4f46e5;
}
/* Left Panel - State */
.state-section {
margin-bottom: 1.5rem;
}
.state-section h4 {
color: #9ca3af;
font-size: 0.75rem;
text-transform: uppercase;
margin: 0 0 0.5rem 0;
}
.state-item {
margin-bottom: 0.5rem;
}
.state-label {
color: #6b7280;
font-size: 0.75rem;
}
.state-value {
color: #e5e7eb;
font-weight: 500;
}
.combatant-card {
background: #2a2a3a;
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 0.5rem;
border-left: 3px solid #4a4a5a;
}
.combatant-card.player {
border-left-color: #3b82f6;
}
.combatant-card.enemy {
border-left-color: #ef4444;
}
.combatant-card.active {
box-shadow: 0 0 0 2px #f59e0b;
}
.combatant-card.defeated {
opacity: 0.5;
}
.combatant-name {
color: #e5e7eb;
font-weight: 600;
margin-bottom: 0.5rem;
}
.resource-bar {
height: 8px;
background: #1a1a2a;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0.25rem;
}
.resource-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.resource-bar-fill.hp {
background: linear-gradient(90deg, #ef4444, #f87171);
}
.resource-bar-fill.mp {
background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.resource-bar-fill.low {
background: linear-gradient(90deg, #dc2626, #ef4444);
animation: pulse 1s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.resource-text {
font-size: 0.7rem;
color: #9ca3af;
display: flex;
justify-content: space-between;
}
/* Debug Actions */
.debug-actions {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #4a4a5a;
}
.debug-btn {
width: 100%;
padding: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid #4a4a5a;
border-radius: 4px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
}
.debug-btn.victory {
background: #064e3b;
color: #a7f3d0;
}
.debug-btn.victory:hover {
background: #065f46;
}
.debug-btn.defeat {
background: #7f1d1d;
color: #fecaca;
}
.debug-btn.defeat:hover {
background: #991b1b;
}
.debug-btn.reset {
background: #1e40af;
color: #bfdbfe;
}
.debug-btn.reset:hover {
background: #1d4ed8;
}
/* Center Panel - Main */
.main-panel {
min-height: 600px;
display: flex;
flex-direction: column;
}
#combat-log {
flex: 1;
background: #1a1a2a;
border-radius: 6px;
padding: 1rem;
min-height: 300px;
max-height: 400px;
overflow-y: auto;
margin-bottom: 1rem;
}
.log-entry {
padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem;
border-radius: 4px;
font-size: 0.9rem;
}
.log-entry--player {
background: rgba(59, 130, 246, 0.15);
border-left: 3px solid #3b82f6;
}
.log-entry--enemy {
background: rgba(239, 68, 68, 0.15);
border-left: 3px solid #ef4444;
}
.log-entry--crit {
background: rgba(245, 158, 11, 0.2);
border-left: 3px solid #f59e0b;
}
.log-entry--system {
background: rgba(107, 114, 128, 0.15);
border-left: 3px solid #6b7280;
font-style: italic;
color: #9ca3af;
}
.log-entry--heal {
background: rgba(16, 185, 129, 0.15);
border-left: 3px solid #10b981;
}
.log-actor {
font-weight: 600;
color: #e5e7eb;
}
.log-message {
color: #d1d5db;
}
.log-damage {
color: #ef4444;
font-weight: 600;
}
.log-heal {
color: #10b981;
font-weight: 600;
}
.log-crit {
color: #f59e0b;
font-size: 0.75rem;
margin-left: 0.5rem;
}
/* Action Buttons */
.actions-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
margin-bottom: 1rem;
}
@media (max-width: 900px) {
.actions-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.action-btn {
padding: 0.75rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.2s;
text-align: center;
}
.action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.action-btn.attack {
background: #ef4444;
color: white;
}
.action-btn.attack:hover:not(:disabled) {
background: #dc2626;
}
.action-btn.ability {
background: #8b5cf6;
color: white;
}
.action-btn.ability:hover:not(:disabled) {
background: #7c3aed;
}
.action-btn.item {
background: #10b981;
color: white;
}
.action-btn.item:hover:not(:disabled) {
background: #059669;
}
.action-btn.defend {
background: #3b82f6;
color: white;
}
.action-btn.defend:hover:not(:disabled) {
background: #2563eb;
}
.action-btn.flee {
background: #6b7280;
color: white;
}
.action-btn.flee:hover:not(:disabled) {
background: #4b5563;
}
/* Right Panel */
.turn-order {
margin-bottom: 1rem;
}
.turn-item {
display: flex;
align-items: center;
padding: 0.5rem;
margin-bottom: 0.25rem;
background: #2a2a3a;
border-radius: 4px;
font-size: 0.85rem;
}
.turn-item.active {
background: #3b3b5b;
border: 1px solid #f59e0b;
}
.turn-number {
width: 24px;
height: 24px;
background: #4a4a5a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
font-size: 0.75rem;
color: #9ca3af;
}
.turn-item.active .turn-number {
background: #f59e0b;
color: #1a1a2a;
}
.turn-name {
color: #e5e7eb;
}
.turn-name.player {
color: #60a5fa;
}
.turn-name.enemy {
color: #f87171;
}
/* Effects Panel */
.effects-panel {
margin-top: 1rem;
}
.effect-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
margin-bottom: 0.25rem;
background: #2a2a3a;
border-radius: 4px;
font-size: 0.8rem;
}
.effect-name {
color: #e5e7eb;
}
.effect-duration {
color: #f59e0b;
font-size: 0.75rem;
}
/* Debug Panel */
.debug-panel {
margin-top: 1rem;
padding: 1rem;
background: #1a1a2a;
border-radius: 6px;
font-family: monospace;
font-size: 0.75rem;
}
.debug-toggle {
color: #9ca3af;
cursor: pointer;
user-select: none;
}
.debug-content {
margin-top: 0.5rem;
max-height: 300px;
overflow: auto;
white-space: pre;
color: #a3e635;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: #1a1a2a;
border: 1px solid #4a4a5a;
border-radius: 8px;
padding: 1.5rem;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.modal-content h3 {
color: #f59e0b;
margin-top: 0;
margin-bottom: 1rem;
}
.modal-close {
margin-top: 1rem;
padding: 0.5rem 1rem;
background: #6b7280;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
}
/* Sheet Styles */
.combat-items-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #1a1a2a;
border-top: 1px solid #4a4a5a;
border-radius: 16px 16px 0 0;
padding: 1rem;
max-height: 50vh;
overflow-y: auto;
z-index: 1000;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.combat-items-sheet.open {
transform: translateY(0);
}
.sheet-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.sheet-header h3 {
color: #f59e0b;
margin: 0;
}
.sheet-close {
background: none;
border: none;
color: #9ca3af;
font-size: 1.5rem;
cursor: pointer;
}
.error {
background: #7f1d1d;
color: #fecaca;
padding: 0.75rem;
border-radius: 6px;
}
.success {
background: #064e3b;
color: #a7f3d0;
padding: 0.75rem;
border-radius: 6px;
}
.back-link {
color: #60a5fa;
text-decoration: none;
font-size: 0.85rem;
}
.back-link:hover {
text-decoration: underline;
}
</style>
{% endblock %}
{% block content %}
<div class="dev-banner">
DEV MODE - Combat Session {{ session_id[:8] }}...
</div>
<div class="combat-container">
<!-- Left Panel: Combat State -->
<div class="panel left-panel">
<h3>
Combat State
<button class="btn-refresh"
hx-get="{{ url_for('dev.combat_state', session_id=session_id) }}"
hx-target="#state-content"
hx-swap="innerHTML">
Refresh
</button>
</h3>
<div id="state-content">
{% include 'dev/partials/combat_state.html' %}
</div>
<!-- Debug Actions -->
<div class="debug-actions">
<h4 style="color: #f59e0b; font-size: 0.85rem; margin: 0 0 0.5rem 0;">Debug Actions</h4>
<button class="debug-btn reset"
hx-post="{{ url_for('dev.reset_hp_mp', session_id=session_id) }}"
hx-target="#combat-log"
hx-swap="beforeend">
Reset HP/MP
</button>
<button class="debug-btn victory"
hx-post="{{ url_for('dev.force_end_combat', session_id=session_id) }}"
hx-vals='{"victory": "true"}'
hx-target="#combat-log"
hx-swap="innerHTML">
Force Victory
</button>
<button class="debug-btn defeat"
hx-post="{{ url_for('dev.force_end_combat', session_id=session_id) }}"
hx-vals='{"victory": "false"}'
hx-target="#combat-log"
hx-swap="innerHTML">
Force Defeat
</button>
</div>
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
<a href="{{ url_for('dev.combat_hub') }}" class="back-link">&larr; Back to Combat Hub</a>
</div>
</div>
<!-- Center Panel: Combat Log & Actions -->
<div class="panel main-panel">
<h3>Combat Log</h3>
<!-- Combat Log -->
<div id="combat-log" role="log" aria-live="polite">
{% for entry in combat_log %}
<div class="log-entry log-entry--{{ entry.type }}">
{% if entry.actor %}
<span class="log-actor">{{ entry.actor }}</span>
{% endif %}
<span class="log-message">{{ entry.message }}</span>
{% if entry.damage %}
<span class="log-damage">-{{ entry.damage }} HP</span>
{% endif %}
{% if entry.heal %}
<span class="log-heal">+{{ entry.heal }} HP</span>
{% endif %}
{% if entry.is_crit %}
<span class="log-crit">CRITICAL!</span>
{% endif %}
</div>
{% else %}
<div class="log-entry log-entry--system">
Combat begins!
{% if is_player_turn %}
Take your action.
{% else %}
Waiting for enemy turn...
{% endif %}
</div>
{% endfor %}
</div>
<!-- Action Buttons -->
<div class="actions-grid" id="action-buttons">
<button class="action-btn attack"
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "attack"}'
hx-target="#combat-log"
hx-swap="beforeend"
hx-disabled-elt="this"
{% if not is_player_turn %}disabled{% endif %}>
Attack
</button>
<button class="action-btn ability"
hx-get="{{ url_for('dev.combat_abilities', session_id=session_id) }}"
hx-target="#modal-container"
hx-swap="innerHTML"
{% if not is_player_turn %}disabled{% endif %}>
Ability
</button>
<button class="action-btn item"
hx-get="{{ url_for('dev.combat_items', session_id=session_id) }}"
hx-target="#sheet-container"
hx-swap="innerHTML"
{% if not is_player_turn %}disabled{% endif %}>
Item
</button>
<button class="action-btn defend"
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "defend"}'
hx-target="#combat-log"
hx-swap="beforeend"
hx-disabled-elt="this"
{% if not is_player_turn %}disabled{% endif %}>
Defend
</button>
<button class="action-btn flee"
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "flee"}'
hx-target="#combat-log"
hx-swap="beforeend"
hx-disabled-elt="this"
{% if not is_player_turn %}disabled{% endif %}>
Flee
</button>
</div>
<!-- Debug Panel -->
<div class="debug-panel">
<div class="debug-toggle" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'">
[+] Raw State JSON (click to toggle)
</div>
<div class="debug-content" style="display: none;">{{ raw_state | tojson(indent=2) }}</div>
</div>
</div>
<!-- Right Panel: Turn Order & Effects -->
<div class="panel right-panel">
<h3>Turn Order</h3>
<div class="turn-order">
{% for combatant_id in turn_order %}
{% set ns = namespace(combatant=None) %}
{% for c in encounter.combatants %}
{% if c.combatant_id == combatant_id %}
{% set ns.combatant = c %}
{% endif %}
{% endfor %}
<div class="turn-item {% if combatant_id == current_turn_id %}active{% endif %}">
<span class="turn-number">{{ loop.index }}</span>
<span class="turn-name {% if ns.combatant and ns.combatant.is_player %}player{% else %}enemy{% endif %}">
{% if ns.combatant %}{{ ns.combatant.name }}{% else %}{{ combatant_id[:8] }}{% endif %}
</span>
</div>
{% endfor %}
</div>
<h3 style="margin-top: 1rem;">Active Effects</h3>
<div class="effects-panel">
{% if player_combatant and player_combatant.active_effects %}
{% for effect in player_combatant.active_effects %}
<div class="effect-item">
<span class="effect-name">{{ effect.name }}</span>
<span class="effect-duration">{{ effect.remaining_duration }} turns</span>
</div>
{% endfor %}
{% else %}
<p style="color: #6b7280; font-size: 0.85rem; text-align: center;">No active effects</p>
{% endif %}
</div>
</div>
</div>
<!-- Modal Container -->
<div id="modal-container"></div>
<!-- Sheet Container -->
<div id="sheet-container"></div>
<script>
// Close modal function
function closeModal() {
document.getElementById('modal-container').innerHTML = '';
}
// Close combat sheet function
function closeCombatSheet() {
document.getElementById('sheet-container').innerHTML = '';
}
// Refresh combat state panel
function refreshCombatState() {
htmx.ajax('GET', '{{ url_for("dev.combat_state", session_id=session_id) }}', {
target: '#state-content',
swap: 'innerHTML'
});
}
// Auto-scroll combat log
const combatLog = document.getElementById('combat-log');
if (combatLog) {
combatLog.scrollTop = combatLog.scrollHeight;
}
// Observe combat log for new entries and auto-scroll
const observer = new MutationObserver(function() {
combatLog.scrollTop = combatLog.scrollHeight;
});
observer.observe(combatLog, { childList: true });
// Guard against duplicate enemy turn requests
let enemyTurnPending = false;
let enemyTurnTimeout = null;
function triggerEnemyTurn(delay = 1000) {
// Prevent duplicate requests
if (enemyTurnPending) {
return;
}
// Clear any pending timeout
if (enemyTurnTimeout) {
clearTimeout(enemyTurnTimeout);
}
enemyTurnPending = true;
enemyTurnTimeout = setTimeout(function() {
htmx.ajax('POST', '{{ url_for("dev.combat_enemy_turn", session_id=session_id) }}', {
target: '#combat-log',
swap: 'beforeend'
}).then(function() {
enemyTurnPending = false;
// Refresh state after enemy turn completes
setTimeout(refreshCombatState, 500);
}).catch(function() {
enemyTurnPending = false;
});
}, delay);
}
// Auto-trigger enemy turn on page load if it's not the player's turn
{% if not is_player_turn %}
document.addEventListener('DOMContentLoaded', function() {
// Small delay to let the page render first
triggerEnemyTurn(500);
});
{% endif %}
// Handle enemy turn trigger
document.body.addEventListener('htmx:afterRequest', function(event) {
// Check for enemyTurn trigger
const trigger = event.detail.xhr.getResponseHeader('HX-Trigger');
if (trigger && trigger.includes('enemyTurn')) {
triggerEnemyTurn(1000);
}
// Refresh state after any combat action (player action, debug action, but NOT enemy turn - handled above)
const requestUrl = event.detail.pathInfo?.requestPath || '';
const isActionBtn = event.detail.elt && event.detail.elt.classList && event.detail.elt.classList.contains('action-btn');
const isDebugBtn = event.detail.elt && event.detail.elt.classList && event.detail.elt.classList.contains('debug-btn');
if (isActionBtn || isDebugBtn) {
setTimeout(refreshCombatState, 500);
}
});
// Re-enable buttons when player turn returns
document.body.addEventListener('htmx:afterSwap', function(event) {
// If state was updated, check if it's player turn
if (event.detail.target.id === 'state-content') {
const stateContent = document.getElementById('state-content');
const isPlayerTurn = stateContent && stateContent.textContent.includes('Your Turn');
const buttons = document.querySelectorAll('.action-btn');
buttons.forEach(function(btn) {
btn.disabled = !isPlayerTurn;
});
}
});
</script>
{% endblock %}

8
public_web/templates/dev/index.html
View File

@@ -83,6 +83,14 @@
</a>
</div>
<div class="dev-section">
<h2>Combat System</h2>
<a href="{{ url_for('dev.combat_hub') }}" class="dev-link">
Combat System Tester
<small>Start encounters, test actions, abilities, items, and enemy AI</small>
</a>
</div>
<div class="dev-section">
<h2>Quest System</h2>
<span class="dev-link dev-link-disabled">

62
public_web/templates/dev/partials/ability_modal.html Normal file
View File

@@ -0,0 +1,62 @@
<!-- Ability Selection Modal -->
<div class="modal-overlay" onclick="closeModal()">
<div class="modal-content" onclick="event.stopPropagation()">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<h3 style="margin: 0; color: #f59e0b;">Select Ability</h3>
<button onclick="closeModal()" style="background: none; border: none; color: #9ca3af; font-size: 1.5rem; cursor: pointer;">&times;</button>
</div>
{% if abilities %}
<div style="display: flex; flex-direction: column; gap: 0.5rem;">
{% for ability in abilities %}
<button style="
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: {{ '#2a2a3a' if ability.available else '#1a1a2a' }};
border: 1px solid {{ '#4a4a5a' if ability.available else '#3a3a4a' }};
border-radius: 6px;
cursor: {{ 'pointer' if ability.available else 'not-allowed' }};
opacity: {{ '1' if ability.available else '0.5' }};
text-align: left;
transition: all 0.2s;
"
{% if ability.available %}
hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
hx-target="#combat-log"
hx-swap="beforeend"
onclick="closeModal()"
{% else %}
disabled
{% endif %}>
<div>
<div style="color: #e5e7eb; font-weight: 500;">{{ ability.name }}</div>
{% if ability.description %}
<div style="color: #9ca3af; font-size: 0.8rem; margin-top: 0.25rem;">{{ ability.description[:100] }}{% if ability.description|length > 100 %}...{% endif %}</div>
{% endif %}
</div>
<div style="text-align: right;">
{% if ability.mp_cost > 0 %}
<div style="color: #60a5fa; font-size: 0.85rem;">{{ ability.mp_cost }} MP</div>
{% endif %}
{% if ability.cooldown > 0 %}
<div style="color: #f59e0b; font-size: 0.75rem;">CD: {{ ability.cooldown }}</div>
{% endif %}
</div>
</button>
{% endfor %}
</div>
{% else %}
<div style="text-align: center; color: #6b7280; padding: 2rem;">
No abilities available.
</div>
{% endif %}
<button class="modal-close" onclick="closeModal()" style="width: 100%; margin-top: 1rem;">
Cancel
</button>
</div>
</div>

19
public_web/templates/dev/partials/combat_debug_log.html Normal file
View File

@@ -0,0 +1,19 @@
<!-- Combat Debug Log Entry Partial - appended to combat log -->
{% for entry in combat_log %}
<div class="log-entry log-entry--{{ entry.type }}">
{% if entry.actor %}
<span class="log-actor">{{ entry.actor }}</span>
{% endif %}
<span class="log-message">{{ entry.message }}</span>
{% if entry.damage %}
<span class="log-damage">-{{ entry.damage }} HP</span>
{% endif %}
{% if entry.heal %}
<span class="log-heal">+{{ entry.heal }} HP</span>
{% endif %}
{% if entry.is_crit %}
<span class="log-crit">CRITICAL!</span>
{% endif %}
</div>
{% endfor %}

32
public_web/templates/dev/partials/combat_defeat.html Normal file
View File

@@ -0,0 +1,32 @@
<!-- Combat Defeat Screen -->
<div style="text-align: center; padding: 2rem;">
<div style="font-size: 3rem; margin-bottom: 1rem;">&#128128;</div>
<h2 style="color: #ef4444; margin-bottom: 1rem;">Defeat</h2>
<p style="color: #d1d5db; margin-bottom: 2rem;">You have been defeated in battle...</p>
<!-- Penalties -->
{% if gold_lost and gold_lost > 0 %}
<div style="background: rgba(127, 29, 29, 0.3); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem;">
<div style="color: #fecaca;">
<span style="color: #ef4444; font-weight: 600;">-{{ gold_lost }} gold</span> lost
</div>
</div>
{% endif %}
<p style="color: #9ca3af; font-size: 0.9rem; margin-bottom: 2rem;">
Your progress has been saved. You can try again or return to town.
</p>
<!-- Actions -->
<div style="display: flex; gap: 1rem; justify-content: center;">
<a href="{{ url_for('dev.combat_hub') }}"
style="padding: 0.75rem 1.5rem; background: #ef4444; color: white; border-radius: 6px; text-decoration: none;">
Try Again
</a>
<a href="{{ url_for('dev.story_hub') }}"
style="padding: 0.75rem 1.5rem; background: #6b7280; color: white; border-radius: 6px; text-decoration: none;">
Return to Town
</a>
</div>
</div>

88
public_web/templates/dev/partials/combat_items_sheet.html Normal file
View File

@@ -0,0 +1,88 @@
<!-- Combat Items Bottom Sheet -->
<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
<div class="combat-items-sheet open">
<div class="sheet-header">
<h3>Use Item</h3>
<button class="sheet-close" onclick="closeCombatSheet()">&times;</button>
</div>
<div class="sheet-body">
{% if has_consumables %}
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem;">
{% for item in consumables %}
<button style="
padding: 1rem;
background: #2a2a3a;
border: 1px solid #4a4a5a;
border-radius: 6px;
cursor: pointer;
text-align: left;
transition: all 0.2s;
"
hx-get="{{ url_for('dev.combat_item_detail', session_id=session_id, item_id=item.item_id) }}"
hx-target="#item-detail"
hx-swap="innerHTML">
<div style="color: #e5e7eb; font-weight: 500; margin-bottom: 0.25rem;">{{ item.name }}</div>
<div style="color:
{% if item.rarity == 'uncommon' %}#10b981
{% elif item.rarity == 'rare' %}#3b82f6
{% elif item.rarity == 'epic' %}#a78bfa
{% elif item.rarity == 'legendary' %}#f59e0b
{% else %}#9ca3af{% endif %};
font-size: 0.75rem; text-transform: capitalize;">
{{ item.rarity }}
</div>
</button>
{% endfor %}
</div>
<!-- Item Detail Panel -->
<div id="item-detail" style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
<div style="text-align: center; color: #6b7280; font-size: 0.9rem;">
Select an item to see details
</div>
</div>
{% else %}
<div style="text-align: center; color: #6b7280; padding: 2rem;">
No consumable items in inventory.
</div>
{% endif %}
</div>
</div>
<style>
.detail-info {
background: #1a1a2a;
border-radius: 6px;
padding: 1rem;
margin-bottom: 1rem;
}
.detail-name {
color: #e5e7eb;
font-weight: 600;
margin-bottom: 0.5rem;
}
.detail-effect {
color: #10b981;
font-size: 0.9rem;
}
.use-btn {
width: 100%;
padding: 0.75rem;
background: #10b981;
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.use-btn:hover {
background: #059669;
}
</style>

84
public_web/templates/dev/partials/combat_state.html Normal file
View File

@@ -0,0 +1,84 @@
<!-- Combat State Partial - refreshable via HTMX -->
<div class="state-section">
<h4>Encounter Info</h4>
<div class="state-item">
<div class="state-label">Round</div>
<div class="state-value">{{ encounter.round_number or 1 }}</div>
</div>
<div class="state-item">
<div class="state-label">Status</div>
<div class="state-value">{{ encounter.status or 'active' }}</div>
</div>
<div class="state-item">
<div class="state-label">Current Turn</div>
<div class="state-value">
{% if is_player_turn %}
<span style="color: #60a5fa;">Your Turn</span>
{% else %}
<span style="color: #f87171;">Enemy Turn</span>
{% endif %}
</div>
</div>
</div>
<!-- Player Card -->
{% if player_combatant %}
<div class="state-section">
<h4>Player</h4>
<div class="combatant-card player {% if player_combatant.combatant_id == current_turn_id %}active{% endif %} {% if player_combatant.current_hp <= 0 %}defeated{% endif %}">
<div class="combatant-name">{{ player_combatant.name }}</div>
<!-- HP Bar -->
{% set hp_percent = (player_combatant.current_hp / player_combatant.max_hp * 100) if player_combatant.max_hp > 0 else 0 %}
<div class="resource-bar">
<div class="resource-bar-fill hp {% if hp_percent < 25 %}low{% endif %}"
style="width: {{ hp_percent }}%"></div>
</div>
<div class="resource-text">
<span>HP</span>
<span>{{ player_combatant.current_hp }}/{{ player_combatant.max_hp }}</span>
</div>
<!-- MP Bar -->
{% if player_combatant.max_mp and player_combatant.max_mp > 0 %}
{% set mp_percent = (player_combatant.current_mp / player_combatant.max_mp * 100) if player_combatant.max_mp > 0 else 0 %}
<div class="resource-bar" style="margin-top: 0.5rem;">
<div class="resource-bar-fill mp" style="width: {{ mp_percent }}%"></div>
</div>
<div class="resource-text">
<span>MP</span>
<span>{{ player_combatant.current_mp }}/{{ player_combatant.max_mp }}</span>
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Enemy Cards -->
{% if enemy_combatants %}
<div class="state-section">
<h4>Enemies ({{ enemy_combatants | length }})</h4>
{% for enemy in enemy_combatants %}
<div class="combatant-card enemy {% if enemy.combatant_id == current_turn_id %}active{% endif %} {% if enemy.current_hp <= 0 %}defeated{% endif %}">
<div class="combatant-name">
{{ enemy.name }}
{% if enemy.current_hp <= 0 %}
<span style="color: #6b7280; font-size: 0.75rem;">(Defeated)</span>
{% endif %}
</div>
<!-- HP Bar -->
{% set enemy_hp_percent = (enemy.current_hp / enemy.max_hp * 100) if enemy.max_hp > 0 else 0 %}
<div class="resource-bar">
<div class="resource-bar-fill hp {% if enemy_hp_percent < 25 %}low{% endif %}"
style="width: {{ enemy_hp_percent }}%"></div>
</div>
<div class="resource-text">
<span>HP</span>
<span>{{ enemy.current_hp }}/{{ enemy.max_hp }}</span>
</div>
</div>
{% endfor %}
</div>
{% endif %}

68
public_web/templates/dev/partials/combat_victory.html Normal file
View File

@@ -0,0 +1,68 @@
<!-- Combat Victory Screen -->
<div style="text-align: center; padding: 2rem;">
<div style="font-size: 3rem; margin-bottom: 1rem;">&#127942;</div>
<h2 style="color: #10b981; margin-bottom: 1rem;">Victory!</h2>
<p style="color: #d1d5db; margin-bottom: 2rem;">You have defeated your enemies!</p>
<!-- Rewards Section -->
{% if rewards %}
<div style="background: #2a2a3a; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; text-align: left;">
<h3 style="color: #f59e0b; margin-top: 0; margin-bottom: 1rem;">Rewards</h3>
{% if rewards.experience %}
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span style="color: #9ca3af;">Experience</span>
<span style="color: #a78bfa; font-weight: 600;">+{{ rewards.experience }} XP</span>
</div>
{% endif %}
{% if rewards.gold %}
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
<span style="color: #9ca3af;">Gold</span>
<span style="color: #fbbf24; font-weight: 600;">+{{ rewards.gold }} gold</span>
</div>
{% endif %}
{% if rewards.level_ups %}
<div style="background: rgba(168, 85, 247, 0.2); border-radius: 6px; padding: 1rem; margin-top: 1rem;">
<div style="color: #a78bfa; font-weight: 600;">Level Up!</div>
<div style="color: #d1d5db; font-size: 0.9rem;">You have reached a new level!</div>
</div>
{% endif %}
{% if rewards.items %}
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
<div style="color: #9ca3af; font-size: 0.85rem; margin-bottom: 0.5rem;">Loot Obtained:</div>
{% for item in rewards.items %}
<div style="display: flex; align-items: center; padding: 0.5rem; background: #1a1a2a; border-radius: 4px; margin-bottom: 0.25rem;">
<span style="color: #e5e7eb;">{{ item.name }}</span>
{% if item.rarity and item.rarity != 'common' %}
<span style="margin-left: 0.5rem; font-size: 0.75rem; color:
{% if item.rarity == 'uncommon' %}#10b981
{% elif item.rarity == 'rare' %}#3b82f6
{% elif item.rarity == 'epic' %}#a78bfa
{% elif item.rarity == 'legendary' %}#f59e0b
{% else %}#9ca3af{% endif %};">
({{ item.rarity }})
</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
<!-- Actions -->
<div style="display: flex; gap: 1rem; justify-content: center;">
<a href="{{ url_for('dev.combat_hub') }}"
style="padding: 0.75rem 1.5rem; background: #3b82f6; color: white; border-radius: 6px; text-decoration: none;">
Back to Combat Hub
</a>
<a href="{{ url_for('dev.story_hub') }}"
style="padding: 0.75rem 1.5rem; background: #6b7280; color: white; border-radius: 6px; text-decoration: none;">
Continue Adventure
</a>
</div>
</div>