338 lines
8.4 KiB
HTML
338 lines
8.4 KiB
HTML
{% 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 %}
|