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

4
public_web/app/__init__.py
View File

@@ -56,11 +56,13 @@ def create_app():
# Register blueprints
from .views.auth_views import auth_bp
from .views.character_views import character_bp
from .views.combat_views import combat_bp
from .views.game_views import game_bp
from .views.pages import pages_bp
app.register_blueprint(auth_bp)
app.register_blueprint(character_bp)
app.register_blueprint(combat_bp)
app.register_blueprint(game_bp)
app.register_blueprint(pages_bp)
@@ -109,6 +111,6 @@ def create_app():
logger.error("internal_server_error", error=str(error))
return render_template('errors/500.html'), 500
logger.info("flask_app_created", blueprints=["auth", "character", "game", "pages"])
logger.info("flask_app_created", blueprints=["auth", "character", "combat", "game", "pages"])
return app

561
public_web/app/views/combat_views.py Normal file
View File

@@ -0,0 +1,561 @@
"""
Combat Views
Routes for combat UI.
"""
from flask import Blueprint, render_template, request, redirect, url_for, make_response
import structlog
from ..utils.api_client import get_api_client, APIError, APINotFoundError
from ..utils.auth import require_auth_web as require_auth
logger = structlog.get_logger(__name__)
combat_bp = Blueprint('combat', __name__, url_prefix='/combat')
@combat_bp.route('/<session_id>')
@require_auth
def combat_view(session_id: str):
"""
Render the combat page for an active encounter.
Displays the 3-column combat interface with:
- Left: Combatants (player + enemies) with HP/MP bars
- Center: Combat log + action buttons
- Right: Turn order + active effects
"""
client = get_api_client()
try:
# Get combat state from API
response = client.get(f'/api/v1/combat/{session_id}/state')
result = response.get('result', {})
# Check if combat is still active
if not result.get('in_combat'):
# Combat ended - redirect to game play
return redirect(url_for('game.play', session_id=session_id))
encounter = result.get('encounter') or {}
combat_log = result.get('combat_log', [])
# Get current turn combatant ID directly from API response
current_turn_id = encounter.get('current_turn')
# Find if it's the player's turn
is_player_turn = False
player_combatant = None
for combatant in encounter.get('combatants', []):
if combatant.get('is_player'):
player_combatant = combatant
if combatant.get('combatant_id') == current_turn_id:
is_player_turn = True
break
# Format combat log entries for display
formatted_log = []
for entry in combat_log:
log_entry = {
'actor': entry.get('combatant_name', entry.get('actor', '')),
'message': entry.get('message', ''),
'damage': entry.get('damage'),
'heal': entry.get('healing'),
'is_crit': entry.get('is_critical', False),
'type': 'player' if entry.get('is_player', False) else 'enemy'
}
# Detect system messages
if entry.get('action_type') in ('round_start', 'combat_start', 'combat_end'):
log_entry['type'] = 'system'
formatted_log.append(log_entry)
return render_template(
'game/combat.html',
session_id=session_id,
encounter=encounter,
combat_log=formatted_log,
current_turn_id=current_turn_id,
is_player_turn=is_player_turn,
player_combatant=player_combatant
)
except APINotFoundError:
logger.warning("combat_not_found", session_id=session_id)
return render_template('errors/404.html', message="No active combat encounter"), 404
except APIError as e:
logger.error("failed_to_load_combat", session_id=session_id, error=str(e))
return render_template('errors/500.html', message=str(e)), 500
@combat_bp.route('/<session_id>/action', methods=['POST'])
@require_auth
def combat_action(session_id: str):
"""
Execute a combat action (attack, defend, ability, item).
Returns updated combat log entries.
"""
client = get_api_client()
action_type = request.form.get('action_type', 'attack')
ability_id = request.form.get('ability_id')
item_id = request.form.get('item_id')
target_id = request.form.get('target_id')
try:
# Build action payload
payload = {
'action_type': action_type
}
if ability_id:
payload['ability_id'] = ability_id
if item_id:
payload['item_id'] = item_id
if target_id:
payload['target_id'] = target_id
# POST action to API
response = client.post(f'/api/v1/combat/{session_id}/action', payload)
result = response.get('result', {})
# Check if combat ended
combat_ended = result.get('combat_ended', False)
combat_status = result.get('combat_status')
if combat_ended:
# API returns lowercase status values: 'victory', 'defeat', 'fled'
status_lower = (combat_status or '').lower()
if status_lower == 'victory':
return render_template(
'game/partials/combat_victory.html',
session_id=session_id,
rewards=result.get('rewards', {})
)
elif status_lower == 'defeat':
return render_template(
'game/partials/combat_defeat.html',
session_id=session_id,
gold_lost=result.get('gold_lost', 0),
can_retry=result.get('can_retry', False)
)
# Format action result for log display
# API returns data directly in result, not nested under 'action_result'
log_entries = []
# Player action entry
player_entry = {
'actor': 'You',
'message': result.get('message', f'used {action_type}'),
'type': 'player',
'is_crit': False
}
# Add damage info if present
damage_results = result.get('damage_results', [])
if damage_results:
for dmg in damage_results:
player_entry['damage'] = dmg.get('total_damage') or dmg.get('damage')
player_entry['is_crit'] = dmg.get('is_critical', False)
if player_entry['is_crit']:
player_entry['type'] = 'crit'
# Add healing info if present
if result.get('healing'):
player_entry['heal'] = result.get('healing')
player_entry['type'] = 'heal'
log_entries.append(player_entry)
# Add any effect entries
for effect in result.get('effects_applied', []):
log_entries.append({
'actor': '',
'message': effect.get('message', f'Effect applied: {effect.get("name")}'),
'type': 'system'
})
# Return log entries HTML
resp = make_response(render_template(
'game/partials/combat_log.html',
combat_log=log_entries
))
# Trigger enemy turn if it's no longer player's turn
next_combatant = result.get('next_combatant_id')
if next_combatant and not result.get('next_is_player', True):
resp.headers['HX-Trigger'] = 'enemyTurn'
return resp
except APIError as e:
logger.error("combat_action_failed", session_id=session_id, action_type=action_type, error=str(e))
return f'''
<div class="combat-log__entry combat-log__entry--system">
<span class="log-message">Action failed: {e}</span>
</div>
''', 500
@combat_bp.route('/<session_id>/abilities')
@require_auth
def combat_abilities(session_id: str):
"""Get abilities modal for combat."""
client = get_api_client()
try:
# Get combat state to get player's abilities
response = client.get(f'/api/v1/combat/{session_id}/state')
result = response.get('result', {})
encounter = result.get('encounter', {})
# Find player combatant
player_combatant = None
for combatant in encounter.get('combatants', []):
if combatant.get('is_player'):
player_combatant = combatant
break
# Get abilities from player combatant or character
abilities = []
if player_combatant:
ability_ids = player_combatant.get('abilities', [])
current_mp = player_combatant.get('current_mp', 0)
cooldowns = player_combatant.get('cooldowns', {})
# Fetch ability details (if API has ability endpoint)
for ability_id in ability_ids:
try:
ability_response = client.get(f'/api/v1/abilities/{ability_id}')
ability_data = ability_response.get('result', {})
# Check availability
mp_cost = ability_data.get('mp_cost', 0)
cooldown = cooldowns.get(ability_id, 0)
available = current_mp >= mp_cost and cooldown == 0
abilities.append({
'id': ability_id,
'name': ability_data.get('name', ability_id),
'description': ability_data.get('description', ''),
'mp_cost': mp_cost,
'cooldown': cooldown,
'max_cooldown': ability_data.get('cooldown', 0),
'damage_type': ability_data.get('damage_type'),
'effect_type': ability_data.get('effect_type'),
'available': available
})
except (APINotFoundError, APIError):
# Ability not found, add basic entry
abilities.append({
'id': ability_id,
'name': ability_id.replace('_', ' ').title(),
'description': '',
'mp_cost': 0,
'cooldown': cooldowns.get(ability_id, 0),
'max_cooldown': 0,
'available': True
})
return render_template(
'game/partials/ability_modal.html',
session_id=session_id,
abilities=abilities
)
except APIError as e:
logger.error("failed_to_load_abilities", session_id=session_id, error=str(e))
return f'''
<div class="modal-overlay" onclick="closeModal()">
<div class="modal-content modal-content--md">
<div class="modal-header">
<h3 class="modal-title">Select Ability</h3>
<button class="modal-close" onclick="closeModal()">&times;</button>
</div>
<div class="modal-body">
<div class="items-empty">Failed to load abilities: {e}</div>
</div>
</div>
</div>
'''
@combat_bp.route('/<session_id>/items')
@require_auth
def combat_items(session_id: str):
"""
Get combat items bottom sheet (consumables only).
Returns a bottom sheet UI with only consumable items that can be used in combat.
"""
client = get_api_client()
try:
# Get session to find character
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
# Get character inventory - filter to consumables only
consumables = []
if character_id:
try:
inv_response = client.get(f'/api/v1/characters/{character_id}/inventory')
inv_data = inv_response.get('result', {})
inventory = inv_data.get('inventory', [])
# Filter to consumable items only
for item in inventory:
item_type = item.get('item_type', item.get('type', ''))
if item_type == 'consumable' or item.get('usable_in_combat', False):
consumables.append({
'item_id': item.get('item_id'),
'name': item.get('name', 'Unknown Item'),
'description': item.get('description', ''),
'effects_on_use': item.get('effects_on_use', []),
'rarity': item.get('rarity', 'common')
})
except (APINotFoundError, APIError) as e:
logger.warning("failed_to_load_combat_inventory", character_id=character_id, error=str(e))
return render_template(
'game/partials/combat_items_sheet.html',
session_id=session_id,
consumables=consumables,
has_consumables=len(consumables) > 0
)
except APIError as e:
logger.error("failed_to_load_items", session_id=session_id, error=str(e))
return f'''
<div class="combat-items-sheet open">
<div class="sheet-handle"></div>
<div class="sheet-header">
<h3>Use Item</h3>
<button class="sheet-close" onclick="closeCombatSheet()">&times;</button>
</div>
<div class="sheet-body">
<div class="no-consumables">Failed to load items: {e}</div>
</div>
</div>
<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
'''
@combat_bp.route('/<session_id>/items/<item_id>/detail')
@require_auth
def combat_item_detail(session_id: str, item_id: str):
"""Get item detail for combat bottom sheet."""
client = get_api_client()
try:
# Get session to find character
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
item = None
if character_id:
# Get inventory and find the item
inv_response = client.get(f'/api/v1/characters/{character_id}/inventory')
inv_data = inv_response.get('result', {})
inventory = inv_data.get('inventory', [])
for inv_item in inventory:
if inv_item.get('item_id') == item_id:
item = inv_item
break
if not item:
return '<p>Item not found</p>', 404
# Format effect description
effect_desc = item.get('description', 'Use this item')
effects = item.get('effects_on_use', [])
if effects:
effect_parts = []
for effect in effects:
if effect.get('stat') == 'hp':
effect_parts.append(f"Restores {effect.get('value', 0)} HP")
elif effect.get('stat') == 'mp':
effect_parts.append(f"Restores {effect.get('value', 0)} MP")
elif effect.get('name'):
effect_parts.append(effect.get('name'))
if effect_parts:
effect_desc = ', '.join(effect_parts)
return f'''
<div class="detail-info">
<div class="detail-name">{item.get('name', 'Item')}</div>
<div class="detail-effect">{effect_desc}</div>
</div>
<button class="use-btn"
hx-post="{url_for('combat.combat_action', session_id=session_id)}"
hx-vals='{{"action_type": "item", "item_id": "{item_id}"}}'
hx-target="#combat-log"
hx-swap="beforeend"
onclick="closeCombatSheet()">
Use
</button>
'''
except APIError as e:
logger.error("failed_to_load_combat_item_detail", session_id=session_id, item_id=item_id, error=str(e))
return f'<p>Failed to load item: {e}</p>', 500
@combat_bp.route('/<session_id>/flee', methods=['POST'])
@require_auth
def combat_flee(session_id: str):
"""Attempt to flee from combat."""
client = get_api_client()
try:
response = client.post(f'/api/v1/combat/{session_id}/flee', {})
result = response.get('result', {})
if result.get('success'):
# Flee successful - redirect to play page
return redirect(url_for('game.play_session', session_id=session_id))
else:
# Flee failed - return log entry
return f'''
<div class="combat-log__entry combat-log__entry--system">
<span class="log-message">{result.get('message', 'Failed to flee!')}</span>
</div>
'''
except APIError as e:
logger.error("flee_failed", session_id=session_id, error=str(e))
return f'''
<div class="combat-log__entry combat-log__entry--system">
<span class="log-message">Flee failed: {e}</span>
</div>
''', 500
@combat_bp.route('/<session_id>/enemy-turn', methods=['POST'])
@require_auth
def combat_enemy_turn(session_id: str):
"""Execute enemy turn and return result."""
client = get_api_client()
try:
response = client.post(f'/api/v1/combat/{session_id}/enemy-turn', {})
result = response.get('result', {})
# Check if combat ended
combat_ended = result.get('combat_ended', False)
combat_status = result.get('combat_status')
if combat_ended:
# API returns lowercase status values: 'victory', 'defeat', 'fled'
status_lower = (combat_status or '').lower()
if status_lower == 'victory':
return render_template(
'game/partials/combat_victory.html',
session_id=session_id,
rewards=result.get('rewards', {})
)
elif status_lower == 'defeat':
return render_template(
'game/partials/combat_defeat.html',
session_id=session_id,
gold_lost=result.get('gold_lost', 0),
can_retry=result.get('can_retry', False)
)
# Format enemy action for log
action_result = result.get('action_result', {})
log_entries = [{
'actor': action_result.get('actor_name', 'Enemy'),
'message': action_result.get('message', 'attacks'),
'type': 'enemy',
'is_crit': action_result.get('is_critical', False)
}]
# Add damage info
damage_results = action_result.get('damage_results', [])
if damage_results:
log_entries[0]['damage'] = damage_results[0].get('damage')
# Check if it's still enemy turn (multiple enemies)
resp = make_response(render_template(
'game/partials/combat_log.html',
combat_log=log_entries
))
# If next combatant is also an enemy, trigger another enemy turn
if result.get('next_combatant_id') and not result.get('next_is_player', True):
resp.headers['HX-Trigger'] = 'enemyTurn'
return resp
except APIError as e:
logger.error("enemy_turn_failed", session_id=session_id, error=str(e))
return f'''
<div class="combat-log__entry combat-log__entry--system">
<span class="log-message">Enemy turn error: {e}</span>
</div>
''', 500
@combat_bp.route('/<session_id>/log')
@require_auth
def combat_log(session_id: str):
"""Get current combat log."""
client = get_api_client()
try:
response = client.get(f'/api/v1/combat/{session_id}/state')
result = response.get('result', {})
combat_log_data = result.get('combat_log', [])
# Format log entries
formatted_log = []
for entry in combat_log_data:
log_entry = {
'actor': entry.get('combatant_name', entry.get('actor', '')),
'message': entry.get('message', ''),
'damage': entry.get('damage'),
'heal': entry.get('healing'),
'is_crit': entry.get('is_critical', False),
'type': 'player' if entry.get('is_player', False) else 'enemy'
}
if entry.get('action_type') in ('round_start', 'combat_start', 'combat_end'):
log_entry['type'] = 'system'
formatted_log.append(log_entry)
return render_template(
'game/partials/combat_log.html',
combat_log=formatted_log
)
except APIError as e:
logger.error("failed_to_load_combat_log", session_id=session_id, error=str(e))
return '<div class="combat-log__empty">Failed to load combat log</div>', 500
@combat_bp.route('/<session_id>/results')
@require_auth
def combat_results(session_id: str):
"""Display combat results (victory/defeat)."""
client = get_api_client()
try:
response = client.get(f'/api/v1/combat/{session_id}/results')
results = response.get('result', {})
return render_template(
'game/combat_results.html',
victory=results['victory'],
xp_gained=results['xp_gained'],
gold_gained=results['gold_gained'],
loot=results['loot']
)
except APIError as e:
logger.error("failed_to_load_combat_results", session_id=session_id, error=str(e))
return redirect(url_for('game.play_session', session_id=session_id))

649
public_web/app/views/dev.py
View File

@@ -380,3 +380,652 @@ def do_travel(session_id: str):
except APIError as e:
logger.error("failed_to_travel", session_id=session_id, location_id=location_id, error=str(e))
return f'<div class="error">Travel failed: {e}</div>', 500
# ===== Combat Test Endpoints =====
@dev_bp.route('/combat')
@require_auth
def combat_hub():
"""Combat testing hub - select character and enemies to start combat."""
client = get_api_client()
try:
# Get user's characters
characters_response = client.get('/api/v1/characters')
result = characters_response.get('result', {})
characters = result.get('characters', [])
# Get available enemy templates
enemies = []
try:
enemies_response = client.get('/api/v1/combat/enemies')
enemies = enemies_response.get('result', {}).get('enemies', [])
except (APINotFoundError, APIError):
# Enemies endpoint may not exist yet
pass
# Get all sessions to map characters to their sessions
sessions_in_combat = []
character_session_map = {} # character_id -> session_id
try:
sessions_response = client.get('/api/v1/sessions')
all_sessions = sessions_response.get('result', [])
for session in all_sessions:
# Map character to session (for dropdown)
char_id = session.get('character_id')
if char_id:
character_session_map[char_id] = session.get('session_id')
# Track sessions in combat (for resume list)
if session.get('in_combat') or session.get('game_state', {}).get('in_combat'):
sessions_in_combat.append(session)
except (APINotFoundError, APIError):
pass
# Add session_id to each character for the template
for char in characters:
char['session_id'] = character_session_map.get(char.get('character_id'))
return render_template(
'dev/combat.html',
characters=characters,
enemies=enemies,
sessions_in_combat=sessions_in_combat
)
except APIError as e:
logger.error("failed_to_load_combat_hub", error=str(e))
return render_template('dev/combat.html', characters=[], enemies=[], sessions_in_combat=[], error=str(e))
@dev_bp.route('/combat/start', methods=['POST'])
@require_auth
def start_combat():
"""Start a new combat encounter - returns redirect to combat session."""
client = get_api_client()
session_id = request.form.get('session_id')
enemy_ids = request.form.getlist('enemy_ids')
logger.info("start_combat called",
session_id=session_id,
enemy_ids=enemy_ids,
form_data=dict(request.form))
if not session_id:
return '<div class="error">No session selected</div>', 400
if not enemy_ids:
return '<div class="error">No enemies selected</div>', 400
try:
response = client.post('/api/v1/combat/start', {
'session_id': session_id,
'enemy_ids': enemy_ids
})
result = response.get('result', {})
# Return redirect script to combat session page
return f'''
<script>window.location.href = '/dev/combat/session/{session_id}';</script>
<div class="success">Combat started! Redirecting...</div>
'''
except APIError as e:
logger.error("failed_to_start_combat", session_id=session_id, error=str(e))
return f'<div class="error">Failed to start combat: {e}</div>', 500
@dev_bp.route('/combat/session/<session_id>')
@require_auth
def combat_session(session_id: str):
"""Combat session debug interface - full 3-column layout."""
client = get_api_client()
try:
# Get combat state from API
response = client.get(f'/api/v1/combat/{session_id}/state')
result = response.get('result', {})
# Check if combat is still active
if not result.get('in_combat'):
# Combat ended - redirect to combat index
return render_template('dev/combat.html',
message="Combat has ended. Start a new combat to continue.")
encounter = result.get('encounter') or {}
combat_log = result.get('combat_log', [])
# Get current turn combatant ID directly from API response
current_turn_id = encounter.get('current_turn')
turn_order = encounter.get('turn_order', [])
# Find player and determine if it's player's turn
is_player_turn = False
player_combatant = None
enemy_combatants = []
for combatant in encounter.get('combatants', []):
if combatant.get('is_player'):
player_combatant = combatant
if combatant.get('combatant_id') == current_turn_id:
is_player_turn = True
else:
enemy_combatants.append(combatant)
# Format combat log entries for display
formatted_log = []
for entry in combat_log:
log_entry = {
'actor': entry.get('combatant_name', entry.get('actor', '')),
'message': entry.get('message', ''),
'damage': entry.get('damage'),
'heal': entry.get('healing'),
'is_crit': entry.get('is_critical', False),
'type': 'player' if entry.get('is_player', False) else 'enemy'
}
# Detect system messages
if entry.get('action_type') in ('round_start', 'combat_start', 'combat_end'):
log_entry['type'] = 'system'
formatted_log.append(log_entry)
return render_template(
'dev/combat_session.html',
session_id=session_id,
encounter=encounter,
combat_log=formatted_log,
current_turn_id=current_turn_id,
is_player_turn=is_player_turn,
player_combatant=player_combatant,
enemy_combatants=enemy_combatants,
turn_order=turn_order,
raw_state=result
)
except APINotFoundError:
logger.warning("combat_not_found", session_id=session_id)
return render_template('dev/combat.html', error=f"No active combat for session {session_id}"), 404
except APIError as e:
logger.error("failed_to_load_combat_session", session_id=session_id, error=str(e))
return render_template('dev/combat.html', error=str(e)), 500
@dev_bp.route('/combat/<session_id>/state')
@require_auth
def combat_state(session_id: str):
"""Get combat state partial - returns refreshable state panel."""
client = get_api_client()
try:
response = client.get(f'/api/v1/combat/{session_id}/state')
result = response.get('result', {})
# Check if combat is still active
if not result.get('in_combat'):
return '<div class="state-section"><h4>Combat Ended</h4><p>No active combat.</p></div>'
encounter = result.get('encounter') or {}
# Get current turn combatant ID directly from API response
current_turn_id = encounter.get('current_turn')
# Separate player and enemies
player_combatant = None
enemy_combatants = []
is_player_turn = False
for combatant in encounter.get('combatants', []):
if combatant.get('is_player'):
player_combatant = combatant
if combatant.get('combatant_id') == current_turn_id:
is_player_turn = True
else:
enemy_combatants.append(combatant)
return render_template(
'dev/partials/combat_state.html',
session_id=session_id,
encounter=encounter,
player_combatant=player_combatant,
enemy_combatants=enemy_combatants,
current_turn_id=current_turn_id,
is_player_turn=is_player_turn
)
except APIError as e:
logger.error("failed_to_get_combat_state", session_id=session_id, error=str(e))
return f'<div class="error">Failed to load state: {e}</div>', 500
@dev_bp.route('/combat/<session_id>/action', methods=['POST'])
@require_auth
def combat_action(session_id: str):
"""Execute a combat action - returns log entry HTML."""
client = get_api_client()
action_type = request.form.get('action_type', 'attack')
ability_id = request.form.get('ability_id')
item_id = request.form.get('item_id')
target_id = request.form.get('target_id')
try:
payload = {'action_type': action_type}
if ability_id:
payload['ability_id'] = ability_id
if item_id:
payload['item_id'] = item_id
if target_id:
payload['target_id'] = target_id
response = client.post(f'/api/v1/combat/{session_id}/action', payload)
result = response.get('result', {})
# Check if combat ended
combat_ended = result.get('combat_ended', False)
combat_status = result.get('combat_status')
if combat_ended:
# API returns lowercase status values: 'victory', 'defeat', 'fled'
status_lower = (combat_status or '').lower()
if status_lower == 'victory':
return render_template(
'dev/partials/combat_victory.html',
session_id=session_id,
rewards=result.get('rewards', {})
)
elif status_lower == 'defeat':
return render_template(
'dev/partials/combat_defeat.html',
session_id=session_id,
gold_lost=result.get('gold_lost', 0)
)
# Format action result for log
# API returns data directly in result, not nested under 'action_result'
log_entries = []
player_entry = {
'actor': 'You',
'message': result.get('message', f'used {action_type}'),
'type': 'player',
'is_crit': False
}
damage_results = result.get('damage_results', [])
if damage_results:
for dmg in damage_results:
player_entry['damage'] = dmg.get('total_damage') or dmg.get('damage')
player_entry['is_crit'] = dmg.get('is_critical', False)
if player_entry['is_crit']:
player_entry['type'] = 'crit'
if result.get('healing'):
player_entry['heal'] = result.get('healing')
player_entry['type'] = 'heal'
log_entries.append(player_entry)
for effect in result.get('effects_applied', []):
log_entries.append({
'actor': '',
'message': effect.get('message', f'Effect applied: {effect.get("name")}'),
'type': 'system'
})
# Return log entries with optional enemy turn trigger
from flask import make_response
resp = make_response(render_template(
'dev/partials/combat_debug_log.html',
combat_log=log_entries
))
# Trigger enemy turn if needed
if result.get('next_combatant_id') and not result.get('next_is_player', True):
resp.headers['HX-Trigger'] = 'enemyTurn'
return resp
except APIError as e:
logger.error("combat_action_failed", session_id=session_id, action_type=action_type, error=str(e))
return f'''
<div class="log-entry log-entry--system">
<span class="log-message">Action failed: {e}</span>
</div>
''', 500
@dev_bp.route('/combat/<session_id>/enemy-turn', methods=['POST'])
@require_auth
def combat_enemy_turn(session_id: str):
"""Execute enemy turn - returns log entry HTML."""
client = get_api_client()
try:
response = client.post(f'/api/v1/combat/{session_id}/enemy-turn', {})
result = response.get('result', {})
# Check if combat ended
combat_ended = result.get('combat_ended', False)
combat_status = result.get('combat_status')
if combat_ended:
# API returns lowercase status values: 'victory', 'defeat', 'fled'
status_lower = (combat_status or '').lower()
if status_lower == 'victory':
return render_template(
'dev/partials/combat_victory.html',
session_id=session_id,
rewards=result.get('rewards', {})
)
elif status_lower == 'defeat':
return render_template(
'dev/partials/combat_defeat.html',
session_id=session_id,
gold_lost=result.get('gold_lost', 0)
)
# Format enemy action for log
# The API returns the action result directly with a complete message
damage_results = result.get('damage_results', [])
is_crit = damage_results[0].get('is_critical', False) if damage_results else False
log_entries = [{
'actor': '', # Message already contains the actor name
'message': result.get('message', 'Enemy attacks!'),
'type': 'crit' if is_crit else 'enemy',
'is_crit': is_crit,
'damage': damage_results[0].get('total_damage') if damage_results else None
}]
from flask import make_response
resp = make_response(render_template(
'dev/partials/combat_debug_log.html',
combat_log=log_entries
))
# Trigger another enemy turn if needed
if result.get('next_combatant_id') and not result.get('next_is_player', True):
resp.headers['HX-Trigger'] = 'enemyTurn'
return resp
except APIError as e:
logger.error("enemy_turn_failed", session_id=session_id, error=str(e))
return f'''
<div class="log-entry log-entry--system">
<span class="log-message">Enemy turn error: {e}</span>
</div>
''', 500
@dev_bp.route('/combat/<session_id>/abilities')
@require_auth
def combat_abilities(session_id: str):
"""Get abilities modal for combat."""
client = get_api_client()
try:
response = client.get(f'/api/v1/combat/{session_id}/state')
result = response.get('result', {})
encounter = result.get('encounter', {})
player_combatant = None
for combatant in encounter.get('combatants', []):
if combatant.get('is_player'):
player_combatant = combatant
break
abilities = []
if player_combatant:
ability_ids = player_combatant.get('abilities', [])
current_mp = player_combatant.get('current_mp', 0)
cooldowns = player_combatant.get('cooldowns', {})
for ability_id in ability_ids:
try:
ability_response = client.get(f'/api/v1/abilities/{ability_id}')
ability_data = ability_response.get('result', {})
mp_cost = ability_data.get('mp_cost', 0)
cooldown = cooldowns.get(ability_id, 0)
available = current_mp >= mp_cost and cooldown == 0
abilities.append({
'id': ability_id,
'name': ability_data.get('name', ability_id),
'description': ability_data.get('description', ''),
'mp_cost': mp_cost,
'cooldown': cooldown,
'max_cooldown': ability_data.get('cooldown', 0),
'damage_type': ability_data.get('damage_type'),
'effect_type': ability_data.get('effect_type'),
'available': available
})
except (APINotFoundError, APIError):
abilities.append({
'id': ability_id,
'name': ability_id.replace('_', ' ').title(),
'description': '',
'mp_cost': 0,
'cooldown': cooldowns.get(ability_id, 0),
'max_cooldown': 0,
'available': True
})
return render_template(
'dev/partials/ability_modal.html',
session_id=session_id,
abilities=abilities
)
except APIError as e:
logger.error("failed_to_load_abilities", session_id=session_id, error=str(e))
return f'''
<div class="modal-overlay" onclick="closeModal()">
<div class="modal-content">
<h3>Select Ability</h3>
<div class="error">Failed to load abilities: {e}</div>
<button class="modal-close" onclick="closeModal()">Close</button>
</div>
</div>
'''
@dev_bp.route('/combat/<session_id>/items')
@require_auth
def combat_items(session_id: str):
"""Get combat items bottom sheet (consumables only)."""
client = get_api_client()
try:
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
consumables = []
if character_id:
try:
inv_response = client.get(f'/api/v1/characters/{character_id}/inventory')
inv_data = inv_response.get('result', {})
inventory = inv_data.get('inventory', [])
for item in inventory:
item_type = item.get('item_type', item.get('type', ''))
if item_type == 'consumable' or item.get('usable_in_combat', False):
consumables.append({
'item_id': item.get('item_id'),
'name': item.get('name', 'Unknown Item'),
'description': item.get('description', ''),
'effects_on_use': item.get('effects_on_use', []),
'rarity': item.get('rarity', 'common')
})
except (APINotFoundError, APIError) as e:
logger.warning("failed_to_load_combat_inventory", character_id=character_id, error=str(e))
return render_template(
'dev/partials/combat_items_sheet.html',
session_id=session_id,
consumables=consumables,
has_consumables=len(consumables) > 0
)
except APIError as e:
logger.error("failed_to_load_items", session_id=session_id, error=str(e))
return f'''
<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">
<div class="error">Failed to load items: {e}</div>
</div>
</div>
<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
'''
@dev_bp.route('/combat/<session_id>/items/<item_id>/detail')
@require_auth
def combat_item_detail(session_id: str, item_id: str):
"""Get item detail for combat bottom sheet."""
client = get_api_client()
try:
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
item = None
if character_id:
inv_response = client.get(f'/api/v1/characters/{character_id}/inventory')
inv_data = inv_response.get('result', {})
inventory = inv_data.get('inventory', [])
for inv_item in inventory:
if inv_item.get('item_id') == item_id:
item = inv_item
break
if not item:
return '<p>Item not found</p>', 404
effect_desc = item.get('description', 'Use this item')
effects = item.get('effects_on_use', [])
if effects:
effect_parts = []
for effect in effects:
if effect.get('stat') == 'hp':
effect_parts.append(f"Restores {effect.get('value', 0)} HP")
elif effect.get('stat') == 'mp':
effect_parts.append(f"Restores {effect.get('value', 0)} MP")
elif effect.get('name'):
effect_parts.append(effect.get('name'))
if effect_parts:
effect_desc = ', '.join(effect_parts)
return f'''
<div class="detail-info">
<div class="detail-name">{item.get('name', 'Item')}</div>
<div class="detail-effect">{effect_desc}</div>
</div>
<button class="use-btn"
hx-post="/dev/combat/{session_id}/action"
hx-vals='{{"action_type": "item", "item_id": "{item_id}"}}'
hx-target="#combat-log"
hx-swap="beforeend"
onclick="closeCombatSheet()">
Use
</button>
'''
except APIError as e:
logger.error("failed_to_load_combat_item_detail", session_id=session_id, item_id=item_id, error=str(e))
return f'<p>Failed to load item: {e}</p>', 500
@dev_bp.route('/combat/<session_id>/end', methods=['POST'])
@require_auth
def force_end_combat(session_id: str):
"""Force end combat (debug action)."""
client = get_api_client()
victory = request.form.get('victory', 'true').lower() == 'true'
try:
response = client.post(f'/api/v1/combat/{session_id}/end', {'victory': victory})
result = response.get('result', {})
if victory:
return render_template(
'dev/partials/combat_victory.html',
session_id=session_id,
rewards=result.get('rewards', {})
)
else:
return render_template(
'dev/partials/combat_defeat.html',
session_id=session_id,
gold_lost=result.get('gold_lost', 0)
)
except APIError as e:
logger.error("failed_to_end_combat", session_id=session_id, error=str(e))
return f'<div class="error">Failed to end combat: {e}</div>', 500
@dev_bp.route('/combat/<session_id>/reset-hp-mp', methods=['POST'])
@require_auth
def reset_hp_mp(session_id: str):
"""Reset player HP and MP to full (debug action)."""
client = get_api_client()
try:
response = client.post(f'/api/v1/combat/{session_id}/debug/reset-hp-mp', {})
result = response.get('result', {})
return f'''
<div class="log-entry log-entry--heal">
<span class="log-message">HP and MP restored to full! (HP: {result.get('current_hp', '?')}/{result.get('max_hp', '?')}, MP: {result.get('current_mp', '?')}/{result.get('max_mp', '?')})</span>
</div>
'''
except APIError as e:
logger.error("failed_to_reset_hp_mp", session_id=session_id, error=str(e))
return f'''
<div class="log-entry log-entry--system">
<span class="log-message">Failed to reset HP/MP: {e}</span>
</div>
''', 500
@dev_bp.route('/combat/<session_id>/log')
@require_auth
def combat_log(session_id: str):
"""Get full combat log."""
client = get_api_client()
try:
response = client.get(f'/api/v1/combat/{session_id}/state')
result = response.get('result', {})
combat_log_data = result.get('combat_log', [])
formatted_log = []
for entry in combat_log_data:
log_entry = {
'actor': entry.get('combatant_name', entry.get('actor', '')),
'message': entry.get('message', ''),
'damage': entry.get('damage'),
'heal': entry.get('healing'),
'is_crit': entry.get('is_critical', False),
'type': 'player' if entry.get('is_player', False) else 'enemy'
}
if entry.get('action_type') in ('round_start', 'combat_start', 'combat_end'):
log_entry['type'] = 'system'
formatted_log.append(log_entry)
return render_template(
'dev/partials/combat_debug_log.html',
combat_log=formatted_log
)
except APIError as e:
logger.error("failed_to_load_combat_log", session_id=session_id, error=str(e))
return '<div class="error">Failed to load combat log</div>', 500

216
public_web/app/views/game_views.py
View File

@@ -7,7 +7,7 @@ Provides the main gameplay interface with 3-column layout:
- Right: Accordions for history, quests, NPCs, map
"""
from flask import Blueprint, render_template, request
from flask import Blueprint, render_template, request, redirect, url_for
import structlog
from ..utils.api_client import get_api_client, APIError, APINotFoundError
@@ -866,6 +866,220 @@ def npc_chat_history(session_id: str, npc_id: str):
return '<div class="history-empty">Failed to load history</div>', 500
# ===== Inventory Routes =====
@game_bp.route('/session/<session_id>/inventory-modal')
@require_auth
def inventory_modal(session_id: str):
"""
Get inventory modal with all items.
Supports filtering by item type via ?filter= parameter.
"""
client = get_api_client()
filter_type = request.args.get('filter', 'all')
try:
# Get session to find character
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
inventory = []
equipped = {}
gold = 0
inventory_count = 0
inventory_max = 100
if character_id:
try:
inv_response = client.get(f'/api/v1/characters/{character_id}/inventory')
inv_data = inv_response.get('result', {})
inventory = inv_data.get('inventory', [])
equipped = inv_data.get('equipped', {})
inventory_count = inv_data.get('inventory_count', len(inventory))
inventory_max = inv_data.get('max_inventory', 100)
# Get gold from character
char_response = client.get(f'/api/v1/characters/{character_id}')
char_data = char_response.get('result', {})
gold = char_data.get('gold', 0)
except (APINotFoundError, APIError) as e:
logger.warning("failed_to_load_inventory", character_id=character_id, error=str(e))
# Filter inventory by type if specified
if filter_type != 'all':
inventory = [item for item in inventory if item.get('item_type') == filter_type]
return render_template(
'game/partials/inventory_modal.html',
session_id=session_id,
inventory=inventory,
equipped=equipped,
gold=gold,
inventory_count=inventory_count,
inventory_max=inventory_max,
filter=filter_type
)
except APIError as e:
logger.error("failed_to_load_inventory_modal", session_id=session_id, error=str(e))
return f'''
<div class="modal-overlay" onclick="closeModal()">
<div class="modal-content inventory-modal">
<div class="modal-header">
<h2>Inventory</h2>
<button class="modal-close" onclick="closeModal()">&times;</button>
</div>
<div class="modal-body">
<div class="inventory-empty">Failed to load inventory: {e}</div>
</div>
</div>
</div>
'''
@game_bp.route('/session/<session_id>/inventory/item/<item_id>')
@require_auth
def inventory_item_detail(session_id: str, item_id: str):
"""Get item detail partial for HTMX swap."""
client = get_api_client()
try:
# Get session to find character
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
item = None
if character_id:
# Get inventory and find the item
inv_response = client.get(f'/api/v1/characters/{character_id}/inventory')
inv_data = inv_response.get('result', {})
inventory = inv_data.get('inventory', [])
for inv_item in inventory:
if inv_item.get('item_id') == item_id:
item = inv_item
break
if not item:
return '<div class="item-detail-empty">Item not found</div>', 404
# Determine suggested slot for equipment
suggested_slot = None
item_type = item.get('item_type', '')
if item_type == 'weapon':
suggested_slot = 'weapon'
elif item_type == 'armor':
# Could be any armor slot - default to chest
suggested_slot = 'chest'
return render_template(
'game/partials/inventory_item_detail.html',
session_id=session_id,
item=item,
suggested_slot=suggested_slot
)
except APIError as e:
logger.error("failed_to_load_item_detail", session_id=session_id, item_id=item_id, error=str(e))
return f'<div class="item-detail-empty">Failed to load item: {e}</div>', 500
@game_bp.route('/session/<session_id>/inventory/use', methods=['POST'])
@require_auth
def inventory_use(session_id: str):
"""Use a consumable item."""
client = get_api_client()
item_id = request.form.get('item_id')
if not item_id:
return '<div class="error">No item selected</div>', 400
try:
# Get session to find character
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
if not character_id:
return '<div class="error">No character found</div>', 400
# Use the item via API
client.post(f'/api/v1/characters/{character_id}/inventory/use', {
'item_id': item_id
})
# Return updated character panel
return redirect(url_for('game.character_panel', session_id=session_id))
except APIError as e:
logger.error("failed_to_use_item", session_id=session_id, item_id=item_id, error=str(e))
return f'<div class="error">Failed to use item: {e}</div>', 500
@game_bp.route('/session/<session_id>/inventory/equip', methods=['POST'])
@require_auth
def inventory_equip(session_id: str):
"""Equip an item to a slot."""
client = get_api_client()
item_id = request.form.get('item_id')
slot = request.form.get('slot')
if not item_id:
return '<div class="error">No item selected</div>', 400
try:
# Get session to find character
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
if not character_id:
return '<div class="error">No character found</div>', 400
# Equip the item via API
payload = {'item_id': item_id}
if slot:
payload['slot'] = slot
client.post(f'/api/v1/characters/{character_id}/inventory/equip', payload)
# Return updated character panel
return redirect(url_for('game.character_panel', session_id=session_id))
except APIError as e:
logger.error("failed_to_equip_item", session_id=session_id, item_id=item_id, error=str(e))
return f'<div class="error">Failed to equip item: {e}</div>', 500
@game_bp.route('/session/<session_id>/inventory/<item_id>', methods=['DELETE'])
@require_auth
def inventory_drop(session_id: str, item_id: str):
"""Drop (delete) an item from inventory."""
client = get_api_client()
try:
# Get session to find character
session_response = client.get(f'/api/v1/sessions/{session_id}')
session_data = session_response.get('result', {})
character_id = session_data.get('character_id')
if not character_id:
return '<div class="error">No character found</div>', 400
# Delete the item via API
client.delete(f'/api/v1/characters/{character_id}/inventory/{item_id}')
# Return updated inventory modal
return redirect(url_for('game.inventory_modal', session_id=session_id))
except APIError as e:
logger.error("failed_to_drop_item", session_id=session_id, item_id=item_id, error=str(e))
return f'<div class="error">Failed to drop item: {e}</div>', 500
@game_bp.route('/session/<session_id>/npc/<npc_id>/talk', methods=['POST'])
@require_auth
def talk_to_npc(session_id: str, npc_id: str):

1178
public_web/static/css/combat.css Normal file
View File

File diff suppressed because it is too large Load Diff

722
public_web/static/css/inventory.css Normal file
View File

@@ -0,0 +1,722 @@
/**
* Code of Conquest - Inventory UI Stylesheet
* Inventory modal, item grid, and combat items sheet
*/
/* ===== INVENTORY VARIABLES ===== */
:root {
/* Rarity colors */
--rarity-common: #9ca3af;
--rarity-uncommon: #22c55e;
--rarity-rare: #3b82f6;
--rarity-epic: #a855f7;
--rarity-legendary: #f59e0b;
/* Item card */
--item-bg: var(--bg-input, #1e1e24);
--item-border: var(--border-primary, #3a3a45);
--item-hover-bg: rgba(255, 255, 255, 0.05);
/* Touch targets - WCAG compliant */
--touch-target-min: 48px;
--touch-target-primary: 56px;
--touch-spacing: 8px;
}
/* ===== INVENTORY MODAL ===== */
.inventory-modal {
max-width: 800px;
width: 95%;
max-height: 85vh;
}
.inventory-modal .modal-body {
display: flex;
flex-direction: row;
gap: 1rem;
padding: 1rem;
overflow: hidden;
}
/* ===== TAB FILTER BAR ===== */
.inventory-tabs {
display: flex;
gap: 0.25rem;
padding: 0 1rem;
background: var(--bg-tertiary, #16161a);
border-bottom: 1px solid var(--play-border, #3a3a45);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.inventory-tabs .tab {
min-height: var(--touch-target-min);
padding: 0.75rem 1rem;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-secondary, #a0a0a8);
font-size: var(--text-sm, 0.875rem);
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.inventory-tabs .tab:hover {
color: var(--text-primary, #e5e5e5);
background: var(--item-hover-bg);
}
.inventory-tabs .tab.active {
color: var(--accent-gold, #f3a61a);
border-bottom-color: var(--accent-gold, #f3a61a);
}
/* ===== INVENTORY CONTENT LAYOUT ===== */
.inventory-body {
flex: 1;
display: flex;
gap: 1rem;
overflow: hidden;
}
.inventory-grid-container {
flex: 1;
overflow-y: auto;
padding-right: 0.5rem;
}
/* ===== ITEM GRID ===== */
.inventory-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--touch-spacing);
}
/* Responsive grid columns */
@media (max-width: 900px) {
.inventory-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.inventory-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ===== INVENTORY ITEM CARD ===== */
.inventory-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.75rem 0.5rem;
min-height: 96px;
min-width: 80px;
background: var(--item-bg);
border: 2px solid var(--item-border);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
}
.inventory-item:hover,
.inventory-item:focus {
background: var(--item-hover-bg);
transform: translateY(-2px);
}
.inventory-item:focus {
outline: 2px solid var(--accent-gold, #f3a61a);
outline-offset: 2px;
}
.inventory-item.selected {
border-color: var(--accent-gold, #f3a61a);
box-shadow: 0 0 12px rgba(243, 166, 26, 0.3);
}
/* Rarity border colors */
.inventory-item.rarity-common { border-color: var(--rarity-common); }
.inventory-item.rarity-uncommon { border-color: var(--rarity-uncommon); }
.inventory-item.rarity-rare { border-color: var(--rarity-rare); }
.inventory-item.rarity-epic { border-color: var(--rarity-epic); }
.inventory-item.rarity-legendary {
border-color: var(--rarity-legendary);
box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}
/* Item icon */
.inventory-item img {
width: 40px;
height: 40px;
object-fit: contain;
margin-bottom: 0.5rem;
opacity: 0.9;
}
/* Item name */
.inventory-item .item-name {
font-size: var(--text-xs, 0.75rem);
color: var(--text-primary, #e5e5e5);
text-align: center;
line-height: 1.2;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Item quantity badge */
.inventory-item .item-quantity {
position: absolute;
top: 4px;
right: 4px;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--bg-tertiary, #16161a);
border: 1px solid var(--item-border);
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-primary, #e5e5e5);
display: flex;
align-items: center;
justify-content: center;
}
/* Empty state */
.inventory-empty {
grid-column: 1 / -1;
text-align: center;
padding: 2rem;
color: var(--text-muted, #707078);
font-style: italic;
}
/* ===== ITEM DETAIL PANEL ===== */
.item-detail {
width: 280px;
min-width: 280px;
background: var(--bg-tertiary, #16161a);
border: 1px solid var(--play-border, #3a3a45);
border-radius: 8px;
padding: 1rem;
display: flex;
flex-direction: column;
}
.item-detail-empty {
color: var(--text-muted, #707078);
text-align: center;
padding: 2rem 1rem;
font-style: italic;
}
.item-detail-content {
display: flex;
flex-direction: column;
height: 100%;
}
.item-detail-header {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--play-border, #3a3a45);
}
.item-detail-icon {
width: 48px;
height: 48px;
object-fit: contain;
}
.item-detail-title h3 {
font-family: var(--font-heading);
font-size: var(--text-lg, 1.125rem);
margin: 0 0 0.25rem 0;
}
.item-detail-title .item-type {
font-size: var(--text-xs, 0.75rem);
color: var(--text-muted, #707078);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Rarity text colors */
.rarity-text-common { color: var(--rarity-common); }
.rarity-text-uncommon { color: var(--rarity-uncommon); }
.rarity-text-rare { color: var(--rarity-rare); }
.rarity-text-epic { color: var(--rarity-epic); }
.rarity-text-legendary { color: var(--rarity-legendary); }
.item-description {
font-size: var(--text-sm, 0.875rem);
color: var(--text-secondary, #a0a0a8);
line-height: 1.5;
margin-bottom: 1rem;
}
/* Item stats */
.item-stats {
background: var(--item-bg);
border-radius: 6px;
padding: 0.75rem;
margin-bottom: 1rem;
}
.item-stats div {
display: flex;
justify-content: space-between;
padding: 0.25rem 0;
font-size: var(--text-sm, 0.875rem);
}
.item-stats div:not(:last-child) {
border-bottom: 1px solid var(--item-border);
}
/* Item action buttons */
.item-actions {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.item-actions .action-btn {
min-height: var(--touch-target-primary);
padding: 0.75rem 1rem;
border: none;
border-radius: 6px;
font-size: var(--text-sm, 0.875rem);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.item-actions .action-btn--primary {
background: var(--accent-gold, #f3a61a);
color: var(--bg-primary, #0a0a0c);
}
.item-actions .action-btn--primary:hover {
background: var(--accent-gold-hover, #e69500);
}
.item-actions .action-btn--secondary {
background: var(--bg-input, #1e1e24);
border: 1px solid var(--play-border, #3a3a45);
color: var(--text-primary, #e5e5e5);
}
.item-actions .action-btn--secondary:hover {
background: var(--item-hover-bg);
border-color: var(--text-muted, #707078);
}
.item-actions .action-btn--danger {
background: transparent;
border: 1px solid #ef4444;
color: #ef4444;
}
.item-actions .action-btn--danger:hover {
background: rgba(239, 68, 68, 0.1);
}
/* ===== MODAL FOOTER ===== */
.inventory-modal .modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.gold-display {
font-size: var(--text-sm, 0.875rem);
color: var(--accent-gold, #f3a61a);
font-weight: 600;
}
.gold-display::before {
content: "coins ";
font-size: 1.1em;
}
/* ===== COMBAT ITEMS BOTTOM SHEET ===== */
.combat-items-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-height: 70vh;
background: var(--bg-secondary, #12121a);
border: 2px solid var(--border-ornate, #f3a61a);
border-bottom: none;
border-radius: 16px 16px 0 0;
z-index: 1001;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s ease-out;
}
.combat-items-sheet.open {
transform: translateY(0);
}
/* Sheet backdrop */
.sheet-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
animation: fadeIn 0.2s ease;
}
/* Drag handle */
.sheet-handle {
width: 40px;
height: 4px;
background: var(--text-muted, #707078);
border-radius: 2px;
margin: 8px auto;
}
/* Sheet header */
.sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--play-border, #3a3a45);
}
.sheet-header h3 {
font-family: var(--font-heading);
font-size: var(--text-lg, 1.125rem);
color: var(--accent-gold, #f3a61a);
margin: 0;
}
.sheet-close {
width: var(--touch-target-min);
height: var(--touch-target-min);
background: none;
border: none;
color: var(--text-muted, #707078);
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.sheet-close:hover {
color: var(--text-primary, #e5e5e5);
}
/* Sheet body */
.sheet-body {
flex: 1;
padding: 1rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Combat items grid - larger items for combat */
.combat-items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--touch-spacing);
}
.combat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
min-height: 120px;
background: var(--item-bg);
border: 2px solid var(--rarity-common);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.combat-item:hover,
.combat-item:focus {
background: var(--item-hover-bg);
border-color: var(--accent-gold, #f3a61a);
}
.combat-item:focus {
outline: 2px solid var(--accent-gold, #f3a61a);
outline-offset: 2px;
}
.combat-item.selected {
border-color: var(--accent-gold, #f3a61a);
box-shadow: 0 0 12px rgba(243, 166, 26, 0.3);
}
.combat-item img {
width: 48px;
height: 48px;
margin-bottom: 0.5rem;
}
.combat-item .item-name {
font-size: var(--text-sm, 0.875rem);
color: var(--text-primary, #e5e5e5);
font-weight: 500;
text-align: center;
margin-bottom: 0.25rem;
}
.combat-item .item-effect {
font-size: var(--text-xs, 0.75rem);
color: var(--text-muted, #707078);
text-align: center;
}
/* Combat item detail section */
.combat-item-detail {
background: var(--bg-tertiary, #16161a);
border: 1px solid var(--play-border, #3a3a45);
border-radius: 8px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.combat-item-detail .detail-info {
flex: 1;
}
.combat-item-detail .detail-name {
font-weight: 600;
color: var(--text-primary, #e5e5e5);
margin-bottom: 0.25rem;
}
.combat-item-detail .detail-effect {
font-size: var(--text-sm, 0.875rem);
color: var(--text-secondary, #a0a0a8);
}
.combat-item-detail .use-btn {
min-width: 100px;
min-height: var(--touch-target-primary);
padding: 0.75rem 1.5rem;
background: var(--hp-bar-fill, #ef4444);
border: none;
border-radius: 6px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.combat-item-detail .use-btn:hover {
background: #dc2626;
}
/* No consumables message */
.no-consumables {
text-align: center;
padding: 2rem;
color: var(--text-muted, #707078);
font-style: italic;
}
/* ===== MOBILE RESPONSIVENESS ===== */
/* Full-screen modal on mobile */
@media (max-width: 768px) {
.inventory-modal {
width: 100vw;
height: 100vh;
max-width: 100vw;
max-height: 100vh;
border-radius: 0;
border: none;
}
.inventory-modal .modal-body {
flex-direction: column;
padding: 0.75rem;
}
/* Item detail slides in from right on mobile */
.item-detail {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 320px;
min-width: unset;
z-index: 1002;
border-radius: 0;
border-left: 2px solid var(--border-ornate, #f3a61a);
transform: translateX(100%);
transition: transform 0.3s ease;
}
.item-detail.visible {
transform: translateX(0);
}
.item-detail-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1001;
}
/* Back button for mobile detail view */
.item-detail-back {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
margin: -1rem -1rem 1rem -1rem;
background: var(--bg-secondary, #12121a);
border: none;
border-bottom: 1px solid var(--play-border, #3a3a45);
color: var(--accent-gold, #f3a61a);
font-size: var(--text-sm, 0.875rem);
cursor: pointer;
width: calc(100% + 2rem);
}
.item-detail-back:hover {
background: var(--item-hover-bg);
}
/* Action buttons fixed at bottom on mobile */
.item-actions {
position: sticky;
bottom: 0;
background: var(--bg-tertiary, #16161a);
padding: 1rem;
margin: auto -1rem -1rem -1rem;
border-top: 1px solid var(--play-border, #3a3a45);
}
/* Larger touch targets on mobile */
.inventory-item {
min-height: 88px;
padding: 0.5rem;
}
/* Tabs scroll horizontally on mobile */
.inventory-tabs {
padding: 0 0.5rem;
}
.inventory-tabs .tab {
min-height: 44px;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
/* Combat sheet takes more space on mobile */
.combat-items-sheet {
max-height: 80vh;
}
.combat-items-grid {
grid-template-columns: repeat(2, 1fr);
}
.combat-item {
min-height: 100px;
padding: 0.75rem;
}
}
/* Extra small screens */
@media (max-width: 400px) {
.inventory-grid {
grid-template-columns: repeat(2, 1fr);
}
.inventory-item {
min-height: 80px;
}
.inventory-item img {
width: 32px;
height: 32px;
}
}
/* ===== LOADING STATE ===== */
.inventory-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
color: var(--text-muted, #707078);
}
.inventory-loading::after {
content: "";
width: 24px;
height: 24px;
margin-left: 0.75rem;
border: 2px solid var(--text-muted, #707078);
border-top-color: var(--accent-gold, #f3a61a);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ===== ACCESSIBILITY ===== */
/* Focus visible for keyboard navigation */
.inventory-item:focus-visible,
.combat-item:focus-visible,
.inventory-tabs .tab:focus-visible,
.action-btn:focus-visible {
outline: 2px solid var(--accent-gold, #f3a61a);
outline-offset: 2px;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.inventory-item,
.combat-item,
.combat-items-sheet,
.item-detail {
transition: none;
}
.inventory-loading::after {
animation: none;
}
}

7
public_web/static/img/items/armor.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- Shield shape -->
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
<!-- Shield decoration -->
<path d="M12 8v6"/>
<path d="M9 11h6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

14
public_web/static/img/items/consumable.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- Potion bottle body -->
<path d="M10 2v4"/>
<path d="M14 2v4"/>
<!-- Bottle neck -->
<path d="M8 6h8"/>
<!-- Bottle shape -->
<path d="M8 6l-2 4v10a2 2 0 002 2h8a2 2 0 002-2V10l-2-4"/>
<!-- Liquid level -->
<path d="M6 14h12"/>
<!-- Bubbles -->
<circle cx="10" cy="17" r="1"/>
<circle cx="14" cy="16" r="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 505 B

7
public_web/static/img/items/default.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- Box/crate shape -->
<path d="M21 8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16V8z"/>
<!-- Box edges -->
<path d="M3.27 6.96L12 12.01l8.73-5.05"/>
<path d="M12 22.08V12"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

12
public_web/static/img/items/quest_item.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- Scroll body -->
<path d="M4 4a2 2 0 012-2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/>
<!-- Scroll roll top -->
<path d="M4 4h16"/>
<ellipse cx="4" cy="4" rx="1" ry="2"/>
<ellipse cx="20" cy="4" rx="1" ry="2"/>
<!-- Text lines -->
<path d="M8 9h8"/>
<path d="M8 13h6"/>
<path d="M8 17h4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 488 B

10
public_web/static/img/items/weapon.svg Normal file
View File

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- Sword blade -->
<path d="M14.5 17.5L3 6V3h3l11.5 11.5"/>
<!-- Sword guard -->
<path d="M13 19l6-6"/>
<!-- Sword handle -->
<path d="M16 16l4 4"/>
<!-- Blade tip detail -->
<path d="M19 21l2-2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 382 B

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>

258
public_web/templates/game/combat.html Normal file
View File

@@ -0,0 +1,258 @@
{% extends "base.html" %}
{% block title %}Combat - Code of Conquest{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/inventory.css') }}">
{% endblock %}
{% block content %}
<div class="combat-page">
<div class="combat-container">
{# ===== COMBAT HEADER ===== #}
<header class="combat-header">
<h1 class="combat-title">
<span class="combat-title-icon">&#9876;</span>
Combat Encounter
</h1>
<div class="combat-round">
<span class="round-counter">Round <strong>{{ encounter.round_number }}</strong></span>
{% if is_player_turn %}
<span class="turn-indicator turn-indicator--player">Your Turn</span>
{% else %}
<span class="turn-indicator turn-indicator--enemy">Enemy Turn</span>
{% endif %}
</div>
</header>
{# ===== LEFT COLUMN: COMBATANTS ===== #}
<aside class="combatant-panel">
{# Player Section #}
<div class="combatant-section">
<h2 class="combatant-section-title">Your Party</h2>
{% for combatant in encounter.combatants if combatant.is_player %}
<div class="combatant-card combatant-card--player {% if combatant.combatant_id == current_turn_id %}combatant-card--active{% endif %} {% if combatant.current_hp <= 0 %}combatant-card--defeated{% endif %}">
<div class="combatant-header">
<span class="combatant-name">{{ combatant.name }}</span>
<span class="combatant-level">Lv.{{ combatant.level|default(1) }}</span>
</div>
<div class="combatant-resources">
{% set hp_percent = ((combatant.current_hp / combatant.max_hp) * 100)|round|int %}
<div class="resource-bar resource-bar--hp {% if hp_percent < 25 %}low{% endif %}">
<div class="resource-bar-label">
<span class="resource-bar-name">HP</span>
<span class="resource-bar-value">{{ combatant.current_hp }} / {{ combatant.max_hp }}</span>
</div>
<div class="resource-bar-track">
<div class="resource-bar-fill" style="width: {{ hp_percent }}%"></div>
</div>
</div>
{% set mp_percent = ((combatant.current_mp / combatant.max_mp) * 100)|round|int if combatant.max_mp > 0 else 0 %}
<div class="resource-bar resource-bar--mp">
<div class="resource-bar-label">
<span class="resource-bar-name">MP</span>
<span class="resource-bar-value">{{ combatant.current_mp }} / {{ combatant.max_mp }}</span>
</div>
<div class="resource-bar-track">
<div class="resource-bar-fill" style="width: {{ mp_percent }}%"></div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{# Enemies Section #}
<div class="combatant-section">
<h2 class="combatant-section-title">Enemies</h2>
{% for combatant in encounter.combatants if not combatant.is_player %}
<div class="combatant-card combatant-card--enemy {% if combatant.combatant_id == current_turn_id %}combatant-card--active{% endif %} {% if combatant.current_hp <= 0 %}combatant-card--defeated{% endif %}">
<div class="combatant-header">
<span class="combatant-name">{{ combatant.name }}</span>
<span class="combatant-level">{% if combatant.current_hp <= 0 %}Defeated{% endif %}</span>
</div>
<div class="combatant-resources">
{% set hp_percent = ((combatant.current_hp / combatant.max_hp) * 100)|round|int %}
<div class="resource-bar resource-bar--hp {% if hp_percent < 25 %}low{% endif %}">
<div class="resource-bar-label">
<span class="resource-bar-name">HP</span>
<span class="resource-bar-value">{{ combatant.current_hp }} / {{ combatant.max_hp }}</span>
</div>
<div class="resource-bar-track">
<div class="resource-bar-fill" style="width: {{ hp_percent }}%"></div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</aside>
{# ===== CENTER COLUMN: COMBAT LOG + ACTIONS ===== #}
<main class="combat-main">
{# Combat Log #}
<div id="combat-log" class="combat-log" role="log" aria-live="polite" aria-label="Combat log">
{% include "game/partials/combat_log.html" %}
</div>
{# Combat Actions #}
<div id="combat-actions" class="combat-actions">
{% include "game/partials/combat_actions.html" %}
</div>
</main>
{# ===== RIGHT COLUMN: TURN ORDER + EFFECTS ===== #}
<aside class="combat-sidebar">
{# Turn Order #}
<div class="turn-order">
<h2 class="turn-order__title">Turn Order</h2>
<div class="turn-order__list">
{% for combatant_id in encounter.turn_order %}
{% set combatant = encounter.combatants|selectattr('combatant_id', 'equalto', combatant_id)|first %}
{% if combatant %}
<div class="turn-order__item {% if combatant.is_player %}turn-order__item--player{% else %}turn-order__item--enemy{% endif %} {% if combatant_id == current_turn_id %}turn-order__item--active{% endif %} {% if combatant.current_hp <= 0 %}turn-order__item--defeated{% endif %}">
<span class="turn-order__position">{{ loop.index }}</span>
<span class="turn-order__name">{{ combatant.name }}</span>
{% if combatant_id == current_turn_id %}
<span class="turn-order__check" title="Current turn">&#10148;</span>
{% elif combatant.current_hp <= 0 %}
<span class="turn-order__check" title="Defeated">&#10007;</span>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{# Active Effects #}
<div class="effects-panel">
<h2 class="effects-panel__title">Active Effects</h2>
{% if player_combatant and player_combatant.active_effects %}
<div class="effects-list">
{% for effect in player_combatant.active_effects %}
<div class="effect-item effect-item--{{ effect.effect_type|default('buff') }}">
<span class="effect-icon">
{% if effect.effect_type == 'shield' %}&#128737;
{% elif effect.effect_type == 'buff' %}&#11014;
{% elif effect.effect_type == 'debuff' %}&#11015;
{% elif effect.effect_type == 'dot' %}&#128293;
{% elif effect.effect_type == 'hot' %}&#10084;
{% else %}&#9733;
{% endif %}
</span>
<span class="effect-name">{{ effect.name }}</span>
<span class="effect-duration">{{ effect.remaining_duration }} {% if effect.remaining_duration == 1 %}turn{% else %}turns{% endif %}</span>
</div>
{% endfor %}
</div>
{% else %}
<p class="effects-empty">No active effects</p>
{% endif %}
</div>
</aside>
</div>
{# Modal Container for Ability selection #}
<div id="modal-container"></div>
{# Combat Items Sheet Container #}
<div id="combat-sheet-container"></div>
</div>
{% endblock %}
{% block scripts %}
<script>
// Auto-scroll combat log to bottom on new entries
function scrollCombatLog() {
const log = document.getElementById('combat-log');
if (log) {
log.scrollTop = log.scrollHeight;
}
}
// Scroll on page load
document.addEventListener('DOMContentLoaded', scrollCombatLog);
// Scroll after HTMX swaps
document.body.addEventListener('htmx:afterSwap', function(event) {
if (event.detail.target.id === 'combat-log' ||
event.detail.target.closest('#combat-log')) {
scrollCombatLog();
}
});
// Close modal function
function closeModal() {
const container = document.getElementById('modal-container');
if (container) {
container.innerHTML = '';
}
}
// Close combat items sheet
function closeCombatSheet() {
const container = document.getElementById('combat-sheet-container');
if (container) {
container.innerHTML = '';
}
}
// Close modal/sheet on Escape key
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeModal();
closeCombatSheet();
}
});
// Guard against duplicate enemy turn requests
let enemyTurnPending = false;
let enemyTurnTimeout = null;
function triggerEnemyTurn() {
// Prevent duplicate requests
if (enemyTurnPending) {
return;
}
// Clear any pending timeout
if (enemyTurnTimeout) {
clearTimeout(enemyTurnTimeout);
}
enemyTurnPending = true;
enemyTurnTimeout = setTimeout(function() {
htmx.ajax('POST', '{{ url_for("combat.combat_enemy_turn", session_id=session_id) }}', {
target: '#combat-log',
swap: 'beforeend'
}).then(function() {
enemyTurnPending = false;
}).catch(function() {
enemyTurnPending = false;
});
}, 1000);
}
// Handle enemy turn polling
document.body.addEventListener('htmx:afterRequest', function(event) {
// Check if we need to trigger enemy turn
const response = event.detail.xhr;
if (response && response.getResponseHeader('HX-Trigger')) {
const triggers = response.getResponseHeader('HX-Trigger');
if (triggers && triggers.includes('enemyTurn')) {
triggerEnemyTurn();
}
}
});
// Handle combat end redirect
document.body.addEventListener('htmx:beforeSwap', function(event) {
// If the response indicates combat ended, handle accordingly
const response = event.detail.xhr;
if (response && response.getResponseHeader('X-Combat-Ended')) {
// Let the full page swap happen for victory/defeat screen
}
});
</script>
{% endblock %}

61
public_web/templates/game/partials/ability_modal.html Normal file
View File

@@ -0,0 +1,61 @@
{# Ability Selection Modal - Shows available abilities during combat #}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
<div class="modal-content modal-content--md">
<div class="modal-header">
<h3 class="modal-title">Select Ability</h3>
<button class="modal-close" onclick="closeModal()" aria-label="Close modal">&times;</button>
</div>
<div class="modal-body">
{% if abilities %}
<div class="ability-list">
{% for ability in abilities %}
<button class="ability-btn"
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
hx-target="#combat-log"
hx-swap="beforeend"
hx-disabled-elt="this"
{% if not ability.available %}disabled{% endif %}
onclick="closeModal()">
<span class="ability-icon">
{% if ability.damage_type == 'fire' %}&#128293;
{% elif ability.damage_type == 'ice' %}&#10052;
{% elif ability.damage_type == 'lightning' %}&#9889;
{% elif ability.effect_type == 'heal' %}&#10084;
{% elif ability.effect_type == 'buff' %}&#11014;
{% elif ability.effect_type == 'debuff' %}&#11015;
{% else %}&#10024;
{% endif %}
</span>
<div class="ability-info">
<span class="ability-name">{{ ability.name }}</span>
<span class="ability-description">{{ ability.description|default('A powerful ability.') }}</span>
</div>
<div class="ability-meta">
{% if ability.mp_cost > 0 %}
<span class="ability-cost">{{ ability.mp_cost }} MP</span>
{% endif %}
{% if ability.cooldown > 0 %}
<span class="ability-cooldown ability-cooldown--active">{{ ability.cooldown }} turns CD</span>
{% elif ability.max_cooldown > 0 %}
<span class="ability-cooldown">{{ ability.max_cooldown }} turns CD</span>
{% endif %}
</div>
</button>
{% endfor %}
</div>
{% else %}
<div class="items-empty">
<p>No abilities available.</p>
<p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
Learn abilities by leveling up or finding skill tomes.
</p>
</div>
{% endif %}
</div>
<div class="modal-footer">
<button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
</div>
</div>
</div>

13
public_web/templates/game/partials/character_panel.html
View File

@@ -82,8 +82,19 @@ Displays character stats, resource bars, and action buttons
</div>
</div>
{# Quick Actions (Equipment, NPC, Travel) #}
{# Quick Actions (Inventory, Equipment, NPC, Travel) #}
<div class="quick-actions">
{# Inventory - Opens modal #}
<button class="action-btn action-btn--special"
hx-get="{{ url_for('game.inventory_modal', session_id=session_id) }}"
hx-target="#modal-container"
hx-swap="innerHTML"
aria-label="Open inventory">
<span class="action-icon">&#128188;</span>
Inventory
<span class="action-count">({{ character.inventory|length|default(0) }})</span>
</button>
{# Equipment & Gear - Opens modal #}
<button class="action-btn action-btn--special"
hx-get="{{ url_for('game.equipment_modal', session_id=session_id) }}"

87
public_web/templates/game/partials/combat_actions.html Normal file
View File

@@ -0,0 +1,87 @@
{# Combat Actions Partial - Action buttons for combat #}
{# This partial shows the available combat actions #}
{% if is_player_turn %}
<div class="combat-actions__grid">
{# Attack Button - Direct action #}
<button class="combat-action-btn combat-action-btn--attack"
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "attack"}'
hx-target="#combat-log"
hx-swap="beforeend"
hx-disabled-elt="this"
title="Basic attack with your weapon">
<span class="combat-action-btn__icon">&#9876;</span>
<span>Attack</span>
</button>
{# Ability Button - Opens modal #}
<button class="combat-action-btn combat-action-btn--ability"
hx-get="{{ url_for('combat.combat_abilities', session_id=session_id) }}"
hx-target="#modal-container"
hx-swap="innerHTML"
title="Use a special ability or spell">
<span class="combat-action-btn__icon">&#10024;</span>
<span>Ability</span>
</button>
{# Item Button - Opens bottom sheet #}
<button class="combat-action-btn combat-action-btn--item"
hx-get="{{ url_for('combat.combat_items', session_id=session_id) }}"
hx-target="#combat-sheet-container"
hx-swap="innerHTML"
title="Use an item from your inventory">
<span class="combat-action-btn__icon">&#127863;</span>
<span>Item</span>
</button>
{# Defend Button - Direct action #}
<button class="combat-action-btn combat-action-btn--defend"
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "defend"}'
hx-target="#combat-log"
hx-swap="beforeend"
hx-disabled-elt="this"
title="Take a defensive stance, reducing damage taken">
<span class="combat-action-btn__icon">&#128737;</span>
<span>Defend</span>
</button>
{# Flee Button - Direct action #}
<button class="combat-action-btn combat-action-btn--flee"
hx-post="{{ url_for('combat.combat_flee', session_id=session_id) }}"
hx-target="body"
hx-swap="innerHTML"
hx-disabled-elt="this"
hx-confirm="Are you sure you want to flee from combat?"
title="Attempt to escape from battle">
<span class="combat-action-btn__icon">&#127939;</span>
<span>Flee</span>
</button>
</div>
{% else %}
<div class="combat-actions__grid">
{# Disabled buttons when not player's turn #}
<button class="combat-action-btn combat-action-btn--attack" disabled>
<span class="combat-action-btn__icon">&#9876;</span>
<span>Attack</span>
</button>
<button class="combat-action-btn combat-action-btn--ability" disabled>
<span class="combat-action-btn__icon">&#10024;</span>
<span>Ability</span>
</button>
<button class="combat-action-btn combat-action-btn--item" disabled>
<span class="combat-action-btn__icon">&#127863;</span>
<span>Item</span>
</button>
<button class="combat-action-btn combat-action-btn--defend" disabled>
<span class="combat-action-btn__icon">&#128737;</span>
<span>Defend</span>
</button>
<button class="combat-action-btn combat-action-btn--flee" disabled>
<span class="combat-action-btn__icon">&#127939;</span>
<span>Flee</span>
</button>
</div>
<p class="combat-actions__disabled-message">Waiting for enemy turn...</p>
{% endif %}

55
public_web/templates/game/partials/combat_defeat.html Normal file
View File

@@ -0,0 +1,55 @@
{% extends "base.html" %}
{% block title %}Defeated - Code of Conquest{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
{% endblock %}
{% block content %}
<div class="combat-result combat-result--defeat">
<div class="combat-result__icon">&#128128;</div>
<h1 class="combat-result__title">Defeated</h1>
<p class="combat-result__subtitle">Your party has fallen in battle...</p>
{# Defeat Message #}
<div class="combat-rewards" style="border-color: var(--accent-red);">
<h2 class="rewards-title" style="color: var(--accent-red);">Battle Lost</h2>
<div class="rewards-list">
<div class="reward-item">
<span class="reward-icon">&#9888;</span>
<span class="reward-label">Your progress has been saved</span>
<span class="reward-value" style="color: var(--text-muted);">No items lost</span>
</div>
{% if gold_lost %}
<div class="reward-item">
<span class="reward-icon">&#128176;</span>
<span class="reward-label">Gold dropped</span>
<span class="reward-value" style="color: var(--accent-red);">-{{ gold_lost }} gold</span>
</div>
{% endif %}
</div>
<div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-primary); text-align: center;">
<p style="font-size: var(--text-sm); color: var(--text-secondary); font-style: italic;">
"Even the mightiest heroes face setbacks. Rise again, adventurer!"
</p>
</div>
</div>
{# Action Buttons #}
<div class="combat-result__actions">
<a href="{{ url_for('game.play_session', session_id=session_id) }}" class="btn btn-primary">
Return to Game
</a>
{% if can_retry %}
<button class="btn btn-secondary"
hx-post="{{ url_for('combat.combat_view', session_id=session_id) }}"
hx-target="body"
hx-swap="innerHTML">
Retry Battle
</button>
{% endif %}
</div>
</div>
{% endblock %}

52
public_web/templates/game/partials/combat_items_sheet.html Normal file
View File

@@ -0,0 +1,52 @@
{#
Combat Items Sheet
Bottom sheet for selecting consumable items during combat
#}
<div class="combat-items-sheet open" role="dialog" aria-modal="true" aria-labelledby="combat-items-title">
{# Drag handle for mobile #}
<div class="sheet-handle" aria-hidden="true"></div>
{# Sheet header #}
<div class="sheet-header">
<h3 id="combat-items-title">Use Item</h3>
<button class="sheet-close" onclick="closeCombatSheet()" aria-label="Close">&times;</button>
</div>
{# Sheet body #}
<div class="sheet-body">
{# Consumables Grid #}
<div class="combat-items-grid">
{% for item in consumables %}
<button class="combat-item"
hx-get="{{ url_for('combat.combat_item_detail', session_id=session_id, item_id=item.item_id) }}"
hx-target="#combat-item-detail"
hx-swap="innerHTML"
aria-label="{{ item.name }}">
<img src="{{ url_for('static', filename='img/items/consumable.svg') }}" alt="">
<span class="item-name">{{ item.name }}</span>
<span class="item-effect">{{ item.description|truncate(30) }}</span>
</button>
{% else %}
<p class="no-consumables">No usable items in inventory</p>
{% endfor %}
</div>
{# Selected Item Detail + Use Button #}
<div class="combat-item-detail" id="combat-item-detail">
<p style="color: var(--text-muted); text-align: center;">Select an item to use</p>
</div>
</div>
</div>
<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
<script>
// Handle item selection highlighting in combat sheet
document.querySelectorAll('.combat-item').forEach(item => {
item.addEventListener('htmx:afterRequest', function() {
// Remove selected from all items
document.querySelectorAll('.combat-item.selected').forEach(i => i.classList.remove('selected'));
// Add selected to clicked item
this.classList.add('selected');
});
});
</script>

25
public_web/templates/game/partials/combat_log.html Normal file
View File

@@ -0,0 +1,25 @@
{# Combat Log Partial - Displays combat action history #}
{# This partial is swapped via HTMX when combat actions occur #}
{% if combat_log %}
{% for entry in combat_log %}
<div class="combat-log__entry combat-log__entry--{{ entry.type|default('system') }}{% if entry.is_crit %} combat-log__entry--crit{% endif %}">
{% 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{% if entry.is_crit %} log-damage--crit{% endif %}">
{% if entry.is_crit %}CRITICAL! {% endif %}{{ entry.damage }} damage
</span>
{% endif %}
{% if entry.heal %}
<span class="log-heal">+{{ entry.heal }} HP</span>
{% endif %}
</div>
{% endfor %}
{% else %}
<div class="combat-log__empty">
Combat begins! Choose your action below.
</div>
{% endif %}

84
public_web/templates/game/partials/combat_victory.html Normal file
View File

@@ -0,0 +1,84 @@
{% extends "base.html" %}
{% block title %}Victory! - Code of Conquest{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
{% endblock %}
{% block content %}
<div class="combat-result combat-result--victory">
<div class="combat-result__icon">&#127942;</div>
<h1 class="combat-result__title">Victory!</h1>
<p class="combat-result__subtitle">You have defeated your enemies!</p>
{# Rewards Section #}
{% if rewards %}
<div class="combat-rewards">
<h2 class="rewards-title">Rewards Earned</h2>
<div class="rewards-list">
{# Experience #}
{% if rewards.experience %}
<div class="reward-item">
<span class="reward-icon">&#11088;</span>
<span class="reward-label">Experience Points</span>
<span class="reward-value reward-value--xp">+{{ rewards.experience }} XP</span>
</div>
{% endif %}
{# Gold #}
{% if rewards.gold %}
<div class="reward-item">
<span class="reward-icon">&#128176;</span>
<span class="reward-label">Gold</span>
<span class="reward-value reward-value--gold">+{{ rewards.gold }} gold</span>
</div>
{% endif %}
{# Level Up #}
{% if rewards.level_ups %}
{% for character_id in rewards.level_ups %}
<div class="reward-item">
<span class="reward-icon">&#127775;</span>
<span class="reward-label">Level Up!</span>
<span class="reward-value reward-value--level">New abilities unlocked!</span>
</div>
{% endfor %}
{% endif %}
</div>
{# Loot Items #}
{% if rewards.items %}
<div class="loot-section">
<h3 class="loot-title">Items Obtained</h3>
<div class="loot-list">
{% for item in rewards.items %}
<div class="loot-item loot-item--{{ item.rarity|default('common') }}">
<span>
{% if item.type == 'weapon' %}&#9876;
{% elif item.type == 'armor' %}&#129523;
{% elif item.type == 'consumable' %}&#127863;
{% elif item.type == 'material' %}&#128293;
{% else %}&#128230;
{% endif %}
</span>
<span>{{ item.name }}</span>
{% if item.quantity > 1 %}
<span style="color: var(--text-muted);">x{{ item.quantity }}</span>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
{# Action Buttons #}
<div class="combat-result__actions">
<a href="{{ url_for('game.play_session', session_id=session_id) }}" class="btn btn-primary">
Continue Adventure
</a>
</div>
</div>
{% endblock %}

118
public_web/templates/game/partials/inventory_item_detail.html Normal file
View File

@@ -0,0 +1,118 @@
{#
Inventory Item Detail
Partial template loaded via HTMX when an item is selected
#}
<div class="item-detail-content">
{# Mobile back button #}
<button class="item-detail-back" onclick="hideMobileDetail()" aria-label="Back to inventory">
&larr; Back to items
</button>
{# Item header #}
<div class="item-detail-header">
<img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
class="item-detail-icon" alt="">
<div class="item-detail-title">
<h3 class="rarity-text-{{ item.rarity|default('common') }}">{{ item.name }}</h3>
<span class="item-type">{{ item.item_type|default('Item')|replace('_', ' ')|title }}</span>
</div>
</div>
{# Item description #}
<p class="item-description">{{ item.description|default('No description available.') }}</p>
{# Stats (for equipment) #}
{% if item.item_type in ['weapon', 'armor'] %}
<div class="item-stats">
{% if item.damage %}
<div>
<span>Damage</span>
<span>{{ item.damage }}</span>
</div>
{% endif %}
{% if item.defense %}
<div>
<span>Defense</span>
<span>{{ item.defense }}</span>
</div>
{% endif %}
{% if item.spell_power %}
<div>
<span>Spell Power</span>
<span>{{ item.spell_power }}</span>
</div>
{% endif %}
{% if item.crit_chance %}
<div>
<span>Crit Chance</span>
<span>{{ (item.crit_chance * 100)|round|int }}%</span>
</div>
{% endif %}
{% if item.stat_bonuses %}
{% for stat, value in item.stat_bonuses.items() %}
<div>
<span>{{ stat|replace('_', ' ')|title }}</span>
<span>+{{ value }}</span>
</div>
{% endfor %}
{% endif %}
</div>
{% endif %}
{# Effects (for consumables) #}
{% if item.item_type == 'consumable' and item.effects_on_use %}
<div class="item-stats">
<div class="item-stats-title" style="font-weight: 600; margin-bottom: 0.5rem;">Effects</div>
{% for effect in item.effects_on_use %}
<div>
<span>{{ effect.name|default(effect.effect_type|default('Effect')|title) }}</span>
<span>{{ effect.value|default('') }}</span>
</div>
{% endfor %}
</div>
{% endif %}
{# Item value #}
{% if item.value %}
<div class="item-value" style="font-size: var(--text-sm); color: var(--accent-gold); margin-bottom: 1rem;">
Value: {{ item.value }} gold
</div>
{% endif %}
{# Action Buttons #}
<div class="item-actions">
{% if item.item_type == 'consumable' %}
<button class="action-btn action-btn--primary"
hx-post="{{ url_for('game.inventory_use', session_id=session_id) }}"
hx-vals='{"item_id": "{{ item.item_id }}"}'
hx-target="#character-panel"
hx-swap="innerHTML"
onclick="closeModal()">
Use
</button>
{% elif item.item_type in ['weapon', 'armor'] %}
<button class="action-btn action-btn--primary"
hx-post="{{ url_for('game.inventory_equip', session_id=session_id) }}"
hx-vals='{"item_id": "{{ item.item_id }}"{% if suggested_slot %}, "slot": "{{ suggested_slot }}"{% endif %}}'
hx-target="#character-panel"
hx-swap="innerHTML"
onclick="closeModal()">
Equip
</button>
{% endif %}
{% if item.item_type != 'quest_item' %}
<button class="action-btn action-btn--danger"
hx-delete="{{ url_for('game.inventory_drop', session_id=session_id, item_id=item.item_id) }}"
hx-target=".inventory-modal"
hx-swap="outerHTML"
hx-confirm="Drop {{ item.name }}? This cannot be undone.">
Drop
</button>
{% else %}
<p style="font-size: var(--text-xs); color: var(--text-muted); text-align: center; padding: 0.5rem;">
Quest items cannot be dropped
</p>
{% endif %}
</div>
</div>

138
public_web/templates/game/partials/inventory_modal.html Normal file
View File

@@ -0,0 +1,138 @@
{#
Inventory Modal
Full inventory management modal for play screen
#}
<div class="modal-overlay" onclick="if(event.target===this) closeModal()"
role="dialog" aria-modal="true" aria-labelledby="inventory-title">
<div class="modal-content inventory-modal">
{# Header #}
<div class="modal-header">
<h2 class="modal-title" id="inventory-title">
Inventory
<span class="inventory-count">({{ inventory_count }}/{{ inventory_max }})</span>
</h2>
<button class="modal-close" onclick="closeModal()" aria-label="Close inventory">&times;</button>
</div>
{# Tab Filter Bar #}
<div class="inventory-tabs" role="tablist">
<button class="tab {% if filter == 'all' %}active{% endif %}"
role="tab"
aria-selected="{{ 'true' if filter == 'all' else 'false' }}"
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='all') }}"
hx-target=".inventory-modal"
hx-swap="outerHTML">
All
</button>
<button class="tab {% if filter == 'weapon' %}active{% endif %}"
role="tab"
aria-selected="{{ 'true' if filter == 'weapon' else 'false' }}"
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='weapon') }}"
hx-target=".inventory-modal"
hx-swap="outerHTML">
Weapons
</button>
<button class="tab {% if filter == 'armor' %}active{% endif %}"
role="tab"
aria-selected="{{ 'true' if filter == 'armor' else 'false' }}"
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='armor') }}"
hx-target=".inventory-modal"
hx-swap="outerHTML">
Armor
</button>
<button class="tab {% if filter == 'consumable' %}active{% endif %}"
role="tab"
aria-selected="{{ 'true' if filter == 'consumable' else 'false' }}"
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='consumable') }}"
hx-target=".inventory-modal"
hx-swap="outerHTML">
Consumables
</button>
<button class="tab {% if filter == 'quest_item' %}active{% endif %}"
role="tab"
aria-selected="{{ 'true' if filter == 'quest_item' else 'false' }}"
hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='quest_item') }}"
hx-target=".inventory-modal"
hx-swap="outerHTML">
Quest
</button>
</div>
{# Body #}
<div class="modal-body inventory-body">
{# Item Grid #}
<div class="inventory-grid-container">
<div class="inventory-grid" id="inventory-items" role="listbox">
{% for item in inventory %}
<button class="inventory-item rarity-{{ item.rarity|default('common') }}"
role="option"
hx-get="{{ url_for('game.inventory_item_detail', session_id=session_id, item_id=item.item_id) }}"
hx-target="#item-detail"
hx-swap="innerHTML"
aria-label="{{ item.name }}, {{ item.rarity|default('common') }} {{ item.item_type }}">
<img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
alt="" aria-hidden="true">
<span class="item-name">{{ item.name }}</span>
{% if item.quantity and item.quantity > 1 %}
<span class="item-quantity">x{{ item.quantity }}</span>
{% endif %}
</button>
{% else %}
<p class="inventory-empty">
{% if filter == 'all' %}
No items in inventory
{% else %}
No {{ filter|replace('_', ' ') }}s found
{% endif %}
</p>
{% endfor %}
</div>
</div>
{# Item Detail Panel #}
<div class="item-detail" id="item-detail" aria-live="polite">
<p class="item-detail-empty">Select an item to view details</p>
</div>
</div>
{# Footer #}
<div class="modal-footer">
<span class="gold-display">{{ gold }}</span>
<button class="btn btn--secondary" onclick="closeModal()">Close</button>
</div>
</div>
</div>
<script>
// Handle item selection highlighting
document.querySelectorAll('.inventory-item').forEach(item => {
item.addEventListener('htmx:afterRequest', function() {
// Remove selected from all items
document.querySelectorAll('.inventory-item.selected').forEach(i => i.classList.remove('selected'));
// Add selected to clicked item
this.classList.add('selected');
});
});
// Mobile: Show detail panel as slide-in
function showMobileDetail() {
const detail = document.getElementById('item-detail');
if (window.innerWidth <= 768 && detail) {
detail.classList.add('visible');
}
}
function hideMobileDetail() {
const detail = document.getElementById('item-detail');
if (detail) {
detail.classList.remove('visible');
}
}
// Listen for item detail loads on mobile
document.body.addEventListener('htmx:afterSwap', function(event) {
if (event.detail.target.id === 'item-detail') {
showMobileDetail();
}
});
</script>

51
public_web/templates/game/partials/item_modal.html Normal file
View File

@@ -0,0 +1,51 @@
{# Item Selection Modal - Shows consumable items during combat #}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
<div class="modal-content modal-content--md">
<div class="modal-header">
<h3 class="modal-title">Use Item</h3>
<button class="modal-close" onclick="closeModal()" aria-label="Close modal">&times;</button>
</div>
<div class="modal-body">
{% if items %}
<div class="item-list">
{% for item in items %}
<button class="item-btn"
hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
hx-vals='{"action_type": "item", "item_id": "{{ item.id }}"}'
hx-target="#combat-log"
hx-swap="beforeend"
hx-disabled-elt="this"
{% if item.quantity <= 0 %}disabled{% endif %}
onclick="closeModal()">
<span class="item-icon">
{% if 'health' in item.name|lower or 'heal' in item.effect|lower %}&#127863;
{% elif 'mana' in item.name|lower or 'mp' in item.effect|lower %}&#129389;
{% elif 'antidote' in item.name|lower or 'cure' in item.effect|lower %}&#129514;
{% elif 'bomb' in item.name|lower or 'damage' in item.effect|lower %}&#128163;
{% elif 'elixir' in item.name|lower %}&#129380;
{% else %}&#128230;
{% endif %}
</span>
<div class="item-info">
<span class="item-name">{{ item.name }}</span>
<span class="item-effect">{{ item.effect|default('Use in combat.') }}</span>
</div>
<span class="item-quantity">x{{ item.quantity }}</span>
</button>
{% endfor %}
</div>
{% else %}
<div class="items-empty">
<p>No usable items in inventory.</p>
<p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
Purchase potions from merchants or find them while exploring.
</p>
</div>
{% endif %}
</div>
<div class="modal-footer">
<button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
</div>
</div>
</div>

1
public_web/templates/game/play.html
View File

@@ -4,6 +4,7 @@
{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/play.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/inventory.css') }}">
{% endblock %}
{% block content %}