combat testing and polishing in the dev console, many bug fixes
This commit is contained in:
337
public_web/templates/dev/combat.html
Normal file
337
public_web/templates/dev/combat.html
Normal 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">← 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 %}
|
||||
Reference in New Issue
Block a user