feat: LAN Battlefield App Integration with AI Pipeline (#196)
* feat: LAN Battlefield App integration with Commander-AI-Lab AI pipeline Add the LAN Battlefield App as a browser client (lan-client/) that connects to the Commander-AI-Lab backend for ML-powered AI opponents, 3-category deck selection, and enhanced player panels. Phase 1 - Foundation: - Remove floating mana pool display (keep internal tracking) - Add energy, experience, rad, emblems fields to game state - No-op renderManaPool(), showManaPool(), setupManaPoolDrag() Phase 2 - Backend Connection (ai-bridge.js): - BackendConnector: REST + WebSocket connectivity with retry/timeout - GameStateBridge: Serializes engine.js state for /api/policy/decide - MacroActionMapper: Translates 8 ML macro-actions to engine.js calls - DeckSourceClient: Fetches precon/EDHREC decks from backend API Phase 3 - Deck System: - 3-tab deck selector (Precons / EDHREC / My Decks) replaces dropdown - Precon grouping by set with collapsible sections and filtering - EDHREC search integration (stub, ready for backend implementation) - My Decks textarea import placeholder Phase 4 - AI Integration: - runAiTurn() priority chain: ML Pipeline > Forge > Local Heuristic - _runMlAiTurn() async turn loop with multi-phase decision requests - Backend session initialization on game start - Automatic fallback to local AI on any ML pipeline error Phase 5 - Enhanced Player Panels (player-panels.js): - Collapsible panels with localStorage persistence - Commander damage progress bars with warning/critical thresholds - Poison, energy, experience, rad counter widgets - Emblem tracking with add/remove Phase 6 - Polish: - Script loading order: precons > engine > ai-bridge > panels > ui - Backend auto-detection on page load with status indicator - Connection status display on setup screen Closes #184, Closes #185, Closes #186, Closes #187, Closes #188, Closes #189 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix: refine LAN battlefield integration with full JSDoc, proper phase IDs - Add comprehensive JSDoc comments to all ai-bridge.js classes - Use optional chaining for PHASES lookup in GameStateBridge - Direct addLogEntry calls in player-panels.js (loaded after engine.js) - Remove leftover mana pool CSS that was missed in initial pass - Minor style.css cleanup for consistency Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
1 parent
e2568c731c
commit
4214831e59
6 files changed
+33276
No files matched your search
File diff suppressed because it is too large.
Load diff
+25612
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,643 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MTG Commander Battlefield</title>
|
||||
<link rel="stylesheet" href="style.css?v=20260403_0300">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ====================================================
|
||||
SETUP SCREEN
|
||||
==================================================== -->
|
||||
<div id="setup-screen">
|
||||
<!-- Populated by ui.js initSetupScreen() -->
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
TABLE SURFACE — 4-Quadrant Battlefield
|
||||
==================================================== -->
|
||||
<div class="table-surface" id="game-battlefield" style="display:none;">
|
||||
|
||||
<!-- TOP BAR: Phase tracker + controls -->
|
||||
<div id="top-bar">
|
||||
<span class="top-bar-logo">Commander</span>
|
||||
|
||||
<div class="turn-counter-badge" id="turn-counter">Turn <span>1</span></div>
|
||||
|
||||
<div class="active-player-indicator" id="active-player-indicator">
|
||||
<span class="active-player-dot" id="active-dot" style="background:#c0392b;"></span>
|
||||
Player 1's Turn
|
||||
</div>
|
||||
|
||||
<!-- Phase track -->
|
||||
<div class="phase-track-wrapper">
|
||||
<div class="phase-track" id="phase-track"></div>
|
||||
</div>
|
||||
|
||||
<!-- Phase/turn action buttons -->
|
||||
<div class="top-bar-actions">
|
||||
<button class="btn-phase" onclick="nextPhase()" title="Advance to next phase (N)">Next Phase</button>
|
||||
<button class="btn-phase btn-next-turn" onclick="nextTurn()" title="End turn, advance to next player (T)">Next Turn</button>
|
||||
</div>
|
||||
|
||||
<!-- Utility buttons -->
|
||||
<div class="top-bar-utils">
|
||||
<button class="btn-util" id="btn-undo" onclick="undo()" title="Undo (Ctrl+Z)" disabled>↩</button>
|
||||
<button class="btn-util" id="btn-redo" onclick="redo()" title="Redo (Ctrl+Y)" disabled>↪</button>
|
||||
<button class="btn-util" id="btn-triggers" onclick="toggleTriggerStack()" title="Trigger Stack">❇</button>
|
||||
<button class="btn-util" onclick="openDiceModal()" title="Dice & Coins (G)">🎲</button>
|
||||
<button class="btn-util" onclick="checkStateBasedActions()" title="Check State-Based Actions">SBA</button>
|
||||
<button class="btn-util" onclick="toggleSettingsPanel()" title="Settings">⚙</button>
|
||||
<button class="btn-util" id="btn-search-toggle" onclick="document.getElementById('card-search-sidebar').classList.toggle('collapsed')" title="Card Search (S)">🔍</button>
|
||||
</div>
|
||||
|
||||
<!-- Storm counter -->
|
||||
<span id="storm-badge" style="display:none;font-size:10px;color:var(--mtg-gold);background:rgba(200,168,67,0.15);border:1px solid rgba(200,168,67,0.3);border-radius:4px;padding:2px 7px;white-space:nowrap;">Storm: 0</span>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER LINES -->
|
||||
<div class="divider-h"></div>
|
||||
<div class="divider-v"></div>
|
||||
|
||||
<!-- CORNER ACCENTS -->
|
||||
<div class="corner-accent tl"></div>
|
||||
<div class="corner-accent tr"></div>
|
||||
<div class="corner-accent bl"></div>
|
||||
<div class="corner-accent br"></div>
|
||||
|
||||
<!-- CENTER EMBLEM -->
|
||||
<div class="center-emblem">
|
||||
<svg viewBox="0 0 100 100" fill="none">
|
||||
<circle cx="50" cy="50" r="42" stroke="rgba(255,255,255,0.2)" stroke-width="1.5"/>
|
||||
<circle cx="50" cy="50" r="28" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
|
||||
<polygon points="50,15 58.5,37 82,37 63,51 69,74 50,60 31,74 37,51 18,37 41.5,37"
|
||||
fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- ================================================
|
||||
4-QUADRANT BATTLEFIELD
|
||||
================================================ -->
|
||||
<div class="battlefield">
|
||||
|
||||
<!-- PLAYER 1: Top-Left (Crimson) -->
|
||||
<div class="player-area p1" id="player-area-1">
|
||||
<span class="player-label" id="player-label-1">Player 1</span>
|
||||
<div class="life-counter" id="life-counter-1">
|
||||
<button onclick="adjustLife(0,-1)" aria-label="Decrease P1 life">−</button>
|
||||
<span class="life-counter-value" id="life-0" onclick="showSetLifeDialog(0)">40</span>
|
||||
<button onclick="adjustLife(0,1)" aria-label="Increase P1 life">+</button>
|
||||
</div>
|
||||
<div class="poison-badge" id="poison-0" style="display:none;" onclick="adjustPoison(0,1)" title="Poison counters (click +1, right-click -1)" oncontextmenu="event.preventDefault();adjustPoison(0,-1)">0 poison</div>
|
||||
|
||||
<!-- Zone Row: Library, Exile, Graveyard, Hand -->
|
||||
<div class="zone-row" id="zone-row-1">
|
||||
<div class="zone library" id="lib-zone-1" data-player="1" data-zone="library"
|
||||
onclick="openZoneModal(0,'library')" data-tooltip="Library">
|
||||
<span class="card-count" id="lib-count-1">0</span>
|
||||
<span class="zone-icon">📚</span>
|
||||
<span class="zone-name">Library</span>
|
||||
</div>
|
||||
<div class="zone exile" id="exile-zone-1" data-player="1" data-zone="exile"
|
||||
onclick="openZoneModal(0,'exile')" data-tooltip="Exile">
|
||||
<span class="card-count" id="exile-count-1" style="display:none;">0</span>
|
||||
<span class="zone-icon">⬡</span>
|
||||
<span class="zone-name">Exile</span>
|
||||
</div>
|
||||
<div class="zone graveyard" id="gv-zone-1" data-player="1" data-zone="graveyard"
|
||||
onclick="openZoneModal(0,'graveyard')" data-tooltip="Graveyard">
|
||||
<span class="card-count" id="gv-count-1" style="display:none;">0</span>
|
||||
<span class="zone-icon">☠</span>
|
||||
<span class="zone-name">Grave</span>
|
||||
</div>
|
||||
<div class="zone hand" id="hand-zone-1" data-player="1" data-zone="hand"
|
||||
onclick="openZoneModal(0,'hand')" data-tooltip="Hand">
|
||||
<span class="zone-icon">🃏</span>
|
||||
<span class="zone-name">Hand (<span id="hand-count-1">0</span>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Commander Row -->
|
||||
<div class="commander-row" id="cmd-row-1">
|
||||
<div class="zone commander" id="cmd-zone-1" data-player="1" data-zone="command"
|
||||
onclick="openZoneModal(0,'command')" data-tooltip="Command Zone">
|
||||
<span class="zone-icon">👑</span>
|
||||
<span class="zone-name">Commander</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Battle Zone -->
|
||||
<div class="battle-zone" id="battle-zone-1">
|
||||
<div class="battle-zone-inner"></div>
|
||||
<span class="battle-zone-label">Battlefield</span>
|
||||
<!-- Battlefield cards injected here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PLAYER 2: Top-Right (Sapphire) -->
|
||||
<div class="player-area p2" id="player-area-2">
|
||||
<span class="player-label" id="player-label-2">Player 2</span>
|
||||
<div class="life-counter" id="life-counter-2">
|
||||
<button onclick="adjustLife(1,-1)" aria-label="Decrease P2 life">−</button>
|
||||
<span class="life-counter-value" id="life-1" onclick="showSetLifeDialog(1)">40</span>
|
||||
<button onclick="adjustLife(1,1)" aria-label="Increase P2 life">+</button>
|
||||
</div>
|
||||
<div class="poison-badge" id="poison-1" style="display:none;" onclick="adjustPoison(1,1)" oncontextmenu="event.preventDefault();adjustPoison(1,-1)">0 poison</div>
|
||||
|
||||
<div class="zone-row" id="zone-row-2">
|
||||
<div class="zone library" id="lib-zone-2" data-player="2" data-zone="library"
|
||||
onclick="openZoneModal(1,'library')" data-tooltip="Library">
|
||||
<span class="card-count" id="lib-count-2">0</span>
|
||||
<span class="zone-icon">📚</span>
|
||||
<span class="zone-name">Library</span>
|
||||
</div>
|
||||
<div class="zone exile" id="exile-zone-2" data-player="2" data-zone="exile"
|
||||
onclick="openZoneModal(1,'exile')" data-tooltip="Exile">
|
||||
<span class="card-count" id="exile-count-2" style="display:none;">0</span>
|
||||
<span class="zone-icon">⬡</span>
|
||||
<span class="zone-name">Exile</span>
|
||||
</div>
|
||||
<div class="zone graveyard" id="gv-zone-2" data-player="2" data-zone="graveyard"
|
||||
onclick="openZoneModal(1,'graveyard')" data-tooltip="Graveyard">
|
||||
<span class="card-count" id="gv-count-2" style="display:none;">0</span>
|
||||
<span class="zone-icon">☠</span>
|
||||
<span class="zone-name">Grave</span>
|
||||
</div>
|
||||
<div class="zone hand" id="hand-zone-2" data-player="2" data-zone="hand"
|
||||
onclick="openZoneModal(1,'hand')" data-tooltip="Hand">
|
||||
<span class="zone-icon">🃏</span>
|
||||
<span class="zone-name">Hand (<span id="hand-count-2">0</span>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="commander-row" id="cmd-row-2">
|
||||
<div class="zone commander" id="cmd-zone-2" data-player="2" data-zone="command"
|
||||
onclick="openZoneModal(1,'command')" data-tooltip="Command Zone">
|
||||
<span class="zone-icon">👑</span>
|
||||
<span class="zone-name">Commander</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="battle-zone" id="battle-zone-2">
|
||||
<div class="battle-zone-inner"></div>
|
||||
<span class="battle-zone-label">Battlefield</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PLAYER 3: Bottom-Left (Emerald) -->
|
||||
<div class="player-area p3" id="player-area-3">
|
||||
<!-- Battle zone on top for bottom players -->
|
||||
<div class="battle-zone" id="battle-zone-3">
|
||||
<div class="battle-zone-inner"></div>
|
||||
<span class="battle-zone-label">Battlefield</span>
|
||||
</div>
|
||||
|
||||
<div class="commander-row" id="cmd-row-3">
|
||||
<div class="zone commander" id="cmd-zone-3" data-player="3" data-zone="command"
|
||||
onclick="openZoneModal(2,'command')" data-tooltip="Command Zone">
|
||||
<span class="zone-icon">👑</span>
|
||||
<span class="zone-name">Commander</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone-row" id="zone-row-3">
|
||||
<div class="zone library" id="lib-zone-3" data-player="3" data-zone="library"
|
||||
onclick="openZoneModal(2,'library')" data-tooltip="Library">
|
||||
<span class="card-count" id="lib-count-3">0</span>
|
||||
<span class="zone-icon">📚</span>
|
||||
<span class="zone-name">Library</span>
|
||||
</div>
|
||||
<div class="zone exile" id="exile-zone-3" data-player="3" data-zone="exile"
|
||||
onclick="openZoneModal(2,'exile')" data-tooltip="Exile">
|
||||
<span class="card-count" id="exile-count-3" style="display:none;">0</span>
|
||||
<span class="zone-icon">⬡</span>
|
||||
<span class="zone-name">Exile</span>
|
||||
</div>
|
||||
<div class="zone graveyard" id="gv-zone-3" data-player="3" data-zone="graveyard"
|
||||
onclick="openZoneModal(2,'graveyard')" data-tooltip="Graveyard">
|
||||
<span class="card-count" id="gv-count-3" style="display:none;">0</span>
|
||||
<span class="zone-icon">☠</span>
|
||||
<span class="zone-name">Grave</span>
|
||||
</div>
|
||||
<div class="zone hand" id="hand-zone-3" data-player="3" data-zone="hand"
|
||||
onclick="openZoneModal(2,'hand')" data-tooltip="Hand">
|
||||
<span class="zone-icon">🃏</span>
|
||||
<span class="zone-name">Hand (<span id="hand-count-3">0</span>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="player-label" id="player-label-3">Player 3</span>
|
||||
<div class="life-counter" id="life-counter-3">
|
||||
<button onclick="adjustLife(2,-1)" aria-label="Decrease P3 life">−</button>
|
||||
<span class="life-counter-value" id="life-2" onclick="showSetLifeDialog(2)">40</span>
|
||||
<button onclick="adjustLife(2,1)" aria-label="Increase P3 life">+</button>
|
||||
</div>
|
||||
<div class="poison-badge" id="poison-2" style="display:none;" onclick="adjustPoison(2,1)" oncontextmenu="event.preventDefault();adjustPoison(2,-1)">0 poison</div>
|
||||
</div>
|
||||
|
||||
<!-- PLAYER 4: Bottom-Right (Gold) -->
|
||||
<div class="player-area p4" id="player-area-4">
|
||||
<div class="battle-zone" id="battle-zone-4">
|
||||
<div class="battle-zone-inner"></div>
|
||||
<span class="battle-zone-label">Battlefield</span>
|
||||
</div>
|
||||
|
||||
<div class="commander-row" id="cmd-row-4">
|
||||
<div class="zone commander" id="cmd-zone-4" data-player="4" data-zone="command"
|
||||
onclick="openZoneModal(3,'command')" data-tooltip="Command Zone">
|
||||
<span class="zone-icon">👑</span>
|
||||
<span class="zone-name">Commander</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zone-row" id="zone-row-4">
|
||||
<div class="zone library" id="lib-zone-4" data-player="4" data-zone="library"
|
||||
onclick="openZoneModal(3,'library')" data-tooltip="Library">
|
||||
<span class="card-count" id="lib-count-4">0</span>
|
||||
<span class="zone-icon">📚</span>
|
||||
<span class="zone-name">Library</span>
|
||||
</div>
|
||||
<div class="zone exile" id="exile-zone-4" data-player="4" data-zone="exile"
|
||||
onclick="openZoneModal(3,'exile')" data-tooltip="Exile">
|
||||
<span class="card-count" id="exile-count-4" style="display:none;">0</span>
|
||||
<span class="zone-icon">⬡</span>
|
||||
<span class="zone-name">Exile</span>
|
||||
</div>
|
||||
<div class="zone graveyard" id="gv-zone-4" data-player="4" data-zone="graveyard"
|
||||
onclick="openZoneModal(3,'graveyard')" data-tooltip="Graveyard">
|
||||
<span class="card-count" id="gv-count-4" style="display:none;">0</span>
|
||||
<span class="zone-icon">☠</span>
|
||||
<span class="zone-name">Grave</span>
|
||||
</div>
|
||||
<div class="zone hand" id="hand-zone-4" data-player="4" data-zone="hand"
|
||||
onclick="openZoneModal(3,'hand')" data-tooltip="Hand">
|
||||
<span class="zone-icon">🃏</span>
|
||||
<span class="zone-name">Hand (<span id="hand-count-4">0</span>)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="player-label" id="player-label-4">Player 4</span>
|
||||
<div class="life-counter" id="life-counter-4">
|
||||
<button onclick="adjustLife(3,-1)" aria-label="Decrease P4 life">−</button>
|
||||
<span class="life-counter-value" id="life-3" onclick="showSetLifeDialog(3)">40</span>
|
||||
<button onclick="adjustLife(3,1)" aria-label="Increase P4 life">+</button>
|
||||
</div>
|
||||
<div class="poison-badge" id="poison-3" style="display:none;" onclick="adjustPoison(3,1)" oncontextmenu="event.preventDefault();adjustPoison(3,-1)">0 poison</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.battlefield -->
|
||||
|
||||
<!-- COMBAT SVG OVERLAY (arrows) -->
|
||||
<svg id="combat-overlay" xmlns="http://www.w3.org/2000/svg" style="position:absolute;inset:44px 0 0 0;pointer-events:none;z-index:30;">
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||||
<polygon points="0 0, 10 3.5, 0 7" fill="rgba(211,32,42,0.7)"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g id="combat-arrows-svg"></g>
|
||||
</svg>
|
||||
|
||||
<!-- FLOATING LOG -->
|
||||
<div id="floating-log" class="floating-log"></div>
|
||||
|
||||
<!-- SHORTCUT HINT -->
|
||||
<div class="shortcut-hint"></div>
|
||||
|
||||
<!-- CARD SEARCH SIDEBAR (right side, collapsible) -->
|
||||
<div id="card-search-sidebar" class="collapsed">
|
||||
<div class="sidebar-header">
|
||||
<span class="sidebar-title">Card Search</span>
|
||||
<button class="sidebar-toggle" onclick="document.getElementById('card-search-sidebar').classList.toggle('collapsed')" title="Close search">✕</button>
|
||||
</div>
|
||||
<div class="search-input-wrap">
|
||||
<input class="search-input" id="card-search-input" type="text" placeholder="Search Scryfall..." autocomplete="off"/>
|
||||
</div>
|
||||
<div class="search-status" id="search-status">Type to search cards...</div>
|
||||
<div class="card-results" id="card-results"></div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar edge tab -->
|
||||
<div id="sidebar-edge-tab" class="sidebar-edge-tab" title="Toggle card search">‹</div>
|
||||
|
||||
</div><!-- /.table-surface / #game-battlefield -->
|
||||
|
||||
<!-- ====================================================
|
||||
CONTEXT MENU
|
||||
==================================================== -->
|
||||
<div id="context-menu"></div>
|
||||
|
||||
<!-- ====================================================
|
||||
FLOATING CARD PREVIEW
|
||||
==================================================== -->
|
||||
<div id="card-preview">
|
||||
<img src="" alt="Card Preview"/>
|
||||
<div class="card-preview-pt-overlay" id="card-preview-pt-overlay"></div>
|
||||
<div class="card-preview-info">
|
||||
<div class="card-preview-name"></div>
|
||||
<div class="card-preview-type"></div>
|
||||
<div class="card-preview-oracle"></div>
|
||||
<div class="card-preview-pt"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
ZONE MODAL
|
||||
==================================================== -->
|
||||
<div id="zone-modal">
|
||||
<div class="zone-modal-card">
|
||||
<div class="zone-modal-header">
|
||||
<span class="zone-modal-title" id="zone-modal-title">Player Zones</span>
|
||||
<button class="btn-close" onclick="closeZoneModal()">✕</button>
|
||||
</div>
|
||||
<div class="zone-modal-tabs" id="zone-modal-tabs">
|
||||
<!-- Populated by renderZoneModal() -->
|
||||
</div>
|
||||
<div class="zone-modal-body" id="zone-modal-body">
|
||||
<!-- Populated by renderZoneModal() -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
DICE MODAL
|
||||
==================================================== -->
|
||||
<div id="dice-modal">
|
||||
<div class="dice-modal-card">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
|
||||
<span style="font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.08em;">Dice & Coins</span>
|
||||
<button class="btn-close" onclick="closeDiceModal()">✕</button>
|
||||
</div>
|
||||
<div class="dice-result-display" id="dice-result-display">—</div>
|
||||
<div class="dice-label" id="dice-label">Choose a die</div>
|
||||
<div class="dice-buttons">
|
||||
<button class="btn-dice" onclick="rollDice(4)">d4</button>
|
||||
<button class="btn-dice" onclick="rollDice(6)">d6</button>
|
||||
<button class="btn-dice" onclick="rollDice(8)">d8</button>
|
||||
<button class="btn-dice" onclick="rollDice(10)">d10</button>
|
||||
<button class="btn-dice" onclick="rollDice(12)">d12</button>
|
||||
<button class="btn-dice" onclick="rollDice(20)">d20</button>
|
||||
<button class="btn-dice" onclick="rollDice(100)">d100</button>
|
||||
<button class="btn-dice coin" onclick="flipCoin()">Coin Flip</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
TOKEN MODAL
|
||||
==================================================== -->
|
||||
<div id="token-modal">
|
||||
<div class="token-modal-card">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">Create Token</span>
|
||||
<button class="btn-close" onclick="closeTokenModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="token-modal-body">
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
|
||||
<div>
|
||||
<label style="font-size:11px;font-weight:600;color:var(--color-text);display:block;margin-bottom:4px;">Token Name</label>
|
||||
<input class="game-input" id="token-name" type="text" placeholder="e.g. 1/1 White Soldier"/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size:11px;font-weight:600;color:var(--color-text);display:block;margin-bottom:4px;">Type Line</label>
|
||||
<input class="game-input" id="token-type" type="text" placeholder="Creature — Soldier"/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size:11px;font-weight:600;color:var(--color-text);display:block;margin-bottom:4px;">Power/Toughness</label>
|
||||
<input class="game-input" id="token-pt" type="text" placeholder="1/1"/>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size:11px;font-weight:600;color:var(--color-text);display:block;margin-bottom:4px;">Count</label>
|
||||
<input class="game-input" id="token-count" type="number" value="1" min="1" max="20"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom:10px;">
|
||||
<label style="font-size:11px;font-weight:600;color:var(--color-text);display:block;margin-bottom:4px;">Keywords (comma-separated)</label>
|
||||
<input class="game-input" id="token-keywords" type="text" placeholder="Flying, Vigilance"/>
|
||||
</div>
|
||||
<div style="margin-bottom:12px;">
|
||||
<label style="font-size:11px;font-weight:600;color:var(--color-text);display:block;margin-bottom:4px;">Player</label>
|
||||
<select class="game-input" id="token-player-select" style="height:28px;">
|
||||
<option value="0">Player 1</option>
|
||||
<option value="1">Player 2</option>
|
||||
<option value="2">Player 3</option>
|
||||
<option value="3">Player 4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn btn-primary" onclick="createTokenFromModal()">Create Token(s)</button>
|
||||
<button class="btn btn-cancel" onclick="closeTokenModal()">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
DECK MODAL
|
||||
==================================================== -->
|
||||
<div id="deck-modal">
|
||||
<div class="deck-modal-card">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">Deck Manager</span>
|
||||
<button class="btn-close" onclick="closeDeckModal()">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="deck-modal-body">
|
||||
<!-- Populated by renderDeckModalContent() -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
COMMANDER DAMAGE MATRIX MODAL
|
||||
==================================================== -->
|
||||
<div id="cmd-dmg-matrix-modal">
|
||||
<!-- Populated by renderCmdDmgMatrix() -->
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
TRIGGER STACK PANEL
|
||||
==================================================== -->
|
||||
<div id="trigger-stack-panel">
|
||||
<div class="trigger-stack-card">
|
||||
<div class="trigger-stack-header">
|
||||
<span class="trigger-stack-title">Trigger Stack</span>
|
||||
<button class="btn-close" style="font-size:14px;width:20px;height:20px;" onclick="closeTriggerStack()">✕</button>
|
||||
</div>
|
||||
<div class="trigger-stack-body" id="trigger-stack-body">
|
||||
<div class="trigger-stack-empty">No pending triggers.</div>
|
||||
</div>
|
||||
<div class="trigger-stack-actions">
|
||||
<button class="btn-resolve" onclick="resolveNextTrigger()">Resolve Next</button>
|
||||
<button class="btn-resolve-all" onclick="resolveAllTriggers()">Resolve All</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
SETTINGS PANEL
|
||||
==================================================== -->
|
||||
<div id="settings-panel">
|
||||
<div class="modal-header" style="flex-shrink:0;">
|
||||
<span class="modal-title">Settings</span>
|
||||
<button class="btn-close" onclick="toggleSettingsPanel()">✕</button>
|
||||
</div>
|
||||
<div class="settings-body" id="settings-body" style="flex:1;overflow-y:auto;padding:12px;">
|
||||
<!-- Populated by renderSettingsPanel() -->
|
||||
</div>
|
||||
<div style="padding:10px 14px;border-top:1px solid var(--color-border);display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;">
|
||||
<button class="btn btn-primary" onclick="openDiceModal()">🎲 Dice</button>
|
||||
<button class="btn btn-gold" onclick="openCmdDmgMatrix()">CMD Damage Matrix</button>
|
||||
<button class="btn btn-cancel" onclick="checkStateBasedActions()">Check SBA</button>
|
||||
<button class="btn btn-cancel" onclick="autoArrangeBattlefield()">Auto-Arrange</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
PRIORITY BANNER
|
||||
==================================================== -->
|
||||
<div id="priority-banner">
|
||||
<span class="priority-text" id="priority-text">Waiting for priority...</span>
|
||||
<button class="btn-priority-pass" onclick="passPriority()">Pass Priority</button>
|
||||
<button class="btn-close" style="font-size:13px;" onclick="closePriorityWindow()">✕</button>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
LEGAL ACTIONS BAR
|
||||
==================================================== -->
|
||||
<div id="legal-actions-bar">
|
||||
<!-- Populated by renderLegalActionsBar() -->
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
UNDO HISTORY PANEL
|
||||
==================================================== -->
|
||||
<div id="undo-history-panel">
|
||||
<!-- Populated by renderUndoHistory() -->
|
||||
</div>
|
||||
|
||||
<!-- ====================================================
|
||||
MANA COLOR PICKER (dynamically appended) -->
|
||||
<!-- Zone card context menu (dynamically appended) -->
|
||||
<!-- SBA alert panel (dynamically appended) -->
|
||||
<!-- Set-life dialog (dynamically appended) -->
|
||||
|
||||
<!-- ====================================================
|
||||
SCRIPTS
|
||||
==================================================== -->
|
||||
<script src="precons.js?v=20260403_0300"></script>
|
||||
<script src="engine.js?v=20260403_0300"></script>
|
||||
<script src="ai-bridge.js?v=20260403_0300"></script>
|
||||
<script src="player-panels.js?v=20260403_0300"></script>
|
||||
<script src="ui.js?v=20260403_0300"></script>
|
||||
|
||||
<script>
|
||||
// ============================================================
|
||||
// STARTUP & BRIDGE FUNCTIONS
|
||||
// ============================================================
|
||||
|
||||
// Token creation from modal
|
||||
function createTokenFromModal() {
|
||||
if (!gameState) return;
|
||||
const name = document.getElementById('token-name').value.trim() || '1/1 Token';
|
||||
const typeLine = document.getElementById('token-type').value.trim() || 'Creature';
|
||||
const pt = document.getElementById('token-pt').value.trim() || '1/1';
|
||||
const count = parseInt(document.getElementById('token-count').value) || 1;
|
||||
const keywords = document.getElementById('token-keywords').value.trim();
|
||||
const playerIdx = parseInt(document.getElementById('token-player-select').value) || 0;
|
||||
|
||||
const parts = pt.split('/');
|
||||
const power = parts[0] ? parts[0].trim() : '1';
|
||||
const toughness = parts[1] ? parts[1].trim() : '1';
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
addCardToBattlefield(name, '', typeLine, playerIdx, undefined, undefined,
|
||||
keywords ? keywords.replace(/,/g, ' ') : '',
|
||||
{ power, toughness, pt, isToken: true });
|
||||
}
|
||||
addLogEntry('Created ' + count + 'x <strong>' + name + '</strong> token(s) for Player ' + (playerIdx + 1));
|
||||
closeTokenModal();
|
||||
}
|
||||
|
||||
// Pass priority
|
||||
function passPriority() {
|
||||
addLogEntry('Priority passed.');
|
||||
closePriorityWindow();
|
||||
}
|
||||
|
||||
// Open precon browser (stub - opens deck modal for current player)
|
||||
function openPreconBrowser() {
|
||||
if (gameState) openDeckModal(gameState.currentPlayerIndex);
|
||||
}
|
||||
|
||||
// Open collection modal (stub)
|
||||
function openCollectionModal() { showToast('Collection tracker available in full version.'); }
|
||||
|
||||
// Scry dialog stub
|
||||
function showScryDialog(playerId) {
|
||||
if (!gameState) return;
|
||||
const player = gameState.players[playerId];
|
||||
if (!player || player.zones.library.length === 0) {
|
||||
addLogEntry('!! ' + (player ? player.name : 'Player') + ' has no cards to scry.');
|
||||
return;
|
||||
}
|
||||
const count = Math.min(parseInt(prompt('Scry how many? (1-7)', '1') || '1'), 7, player.zones.library.length);
|
||||
if (isNaN(count) || count < 1) return;
|
||||
const topCards = player.zones.library.slice(0, count);
|
||||
const names = topCards.map(c => c.name || '?').join(', ');
|
||||
addLogEntry('<strong>' + player.name + '</strong> scrys ' + count + ': [' + names + ']');
|
||||
}
|
||||
|
||||
// Mill dialog stub
|
||||
function showMillDialog(playerId) {
|
||||
if (!gameState) return;
|
||||
const count = parseInt(prompt('Mill how many cards?', '1') || '1');
|
||||
if (isNaN(count) || count < 1) return;
|
||||
millCards(playerId, count);
|
||||
}
|
||||
|
||||
// Become monarch
|
||||
function becomeMonarch(playerId) {
|
||||
if (!gameState) return;
|
||||
gameState.monarchPlayerIndex = playerId;
|
||||
const player = gameState.players[playerId];
|
||||
addLogEntry('👑 <strong>' + (player ? player.name : 'Player') + '</strong> becomes the Monarch!');
|
||||
updateMonarchBadges();
|
||||
}
|
||||
|
||||
// Empower the life counter right-click on the quadrant labels
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Wire right-click on life values to set-life dialog
|
||||
for (var i = 0; i < 4; i++) {
|
||||
(function(idx) {
|
||||
var lifeEl = document.getElementById('life-' + idx);
|
||||
if (lifeEl) {
|
||||
lifeEl.addEventListener('contextmenu', function(e) {
|
||||
e.preventDefault();
|
||||
showSetLifeDialog(idx);
|
||||
});
|
||||
}
|
||||
})(i);
|
||||
}
|
||||
|
||||
// Life counter right-click on quadrant buttons too
|
||||
// (already handled via inline onclick in HTML)
|
||||
|
||||
// Auto-detect Commander-AI-Lab backend on page load
|
||||
if (typeof AIBridge !== 'undefined') {
|
||||
AIBridge.init().then(function(status) {
|
||||
var indicator = document.getElementById('backend-status-indicator');
|
||||
if (indicator) {
|
||||
indicator.textContent = status.connected
|
||||
? (status.modelLoaded ? '\u{1F9E0} ML Backend Connected' : '\u26a1 Backend Connected (no ML model)')
|
||||
: '\u{1F4E1} Local Mode (no backend)';
|
||||
indicator.className = 'backend-status ' +
|
||||
(status.connected ? (status.modelLoaded ? 'connected-ml' : 'connected') : 'disconnected');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,270 @@
|
||||
// player-panels.js — Enhanced Player Panel Component
|
||||
// Provides collapsible panels with life, commander damage, counters, and emblems.
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Create an enhanced player panel widget for a quadrant.
|
||||
* Replaces the basic life counter with a full tracking panel.
|
||||
*
|
||||
* @param {object} player - Player object from gameState
|
||||
* @param {number} quadrant - 1-4 (matches CSS class p1-p4)
|
||||
* @param {boolean} isActive - Whether this is the active player
|
||||
*/
|
||||
function createEnhancedPlayerPanel(player, quadrant, isActive) {
|
||||
var panel = document.createElement('div');
|
||||
panel.className = 'enhanced-player-panel' +
|
||||
(isActive ? ' active-turn' : '') +
|
||||
(player.eliminated ? ' eliminated' : '');
|
||||
panel.id = 'enhanced-panel-' + player.id;
|
||||
panel.setAttribute('data-player-id', player.id);
|
||||
|
||||
// Track collapse state
|
||||
var collapseKey = 'panel-collapsed-' + player.id;
|
||||
var isCollapsed = localStorage.getItem(collapseKey) === 'true';
|
||||
|
||||
// ── Header Row ──────────────────────────────────────────
|
||||
var headerHtml =
|
||||
'<div class="epp-header" onclick="togglePlayerPanel(' + player.id + ')">' +
|
||||
'<span class="epp-collapse-arrow">' + (isCollapsed ? '\u25b8' : '\u25be') + '</span>' +
|
||||
'<div class="epp-name-dot" style="background:' + player.color + '"></div>' +
|
||||
'<span class="epp-name">' + player.name + '</span>' +
|
||||
(player.isAI ? '<span class="epp-ai-badge">AI</span>' : '') +
|
||||
'<span class="epp-life-badge">' +
|
||||
'\u2665 ' + player.life +
|
||||
(player.life < player.startingLife
|
||||
? ' / ' + player.startingLife
|
||||
: '') +
|
||||
'</span>' +
|
||||
'</div>';
|
||||
|
||||
// ── Life Counter Row ────────────────────────────────────
|
||||
var lifeHtml =
|
||||
'<div class="epp-life-row">' +
|
||||
'<button class="epp-life-btn minus" onclick="adjustLife(' + player.id + ',-1)" ' +
|
||||
'oncontextmenu="event.preventDefault();adjustLife(' + player.id + ',-5)" ' +
|
||||
'title="Left: -1 | Right: -5">\u2212</button>' +
|
||||
'<div class="epp-life-value" id="epp-life-' + player.id + '" ' +
|
||||
'onclick="showSetLifeDialog(' + player.id + ')">' +
|
||||
player.life +
|
||||
'</div>' +
|
||||
'<button class="epp-life-btn plus" onclick="adjustLife(' + player.id + ',1)" ' +
|
||||
'oncontextmenu="event.preventDefault();adjustLife(' + player.id + ',5)" ' +
|
||||
'title="Left: +1 | Right: +5">+</button>' +
|
||||
'</div>';
|
||||
|
||||
// ── Commander Damage Section ────────────────────────────
|
||||
var otherPlayers = gameState.players.filter(function(p) {
|
||||
return p.id !== player.id && !p.eliminated;
|
||||
});
|
||||
|
||||
var cmdDmgHtml =
|
||||
'<div class="epp-section">' +
|
||||
'<div class="epp-section-label">Commander Damage</div>' +
|
||||
'<div class="epp-cmd-dmg-grid">';
|
||||
|
||||
otherPlayers.forEach(function(op) {
|
||||
var dmg = player.commanderDamage[op.id] || 0;
|
||||
var pct = Math.round((dmg / 21) * 100);
|
||||
var dangerClass = dmg >= 18 ? 'critical' : dmg >= 10 ? 'warning' : '';
|
||||
|
||||
cmdDmgHtml +=
|
||||
'<div class="epp-cmd-dmg-item ' + dangerClass + '">' +
|
||||
'<div class="epp-cmd-dmg-bar" style="width:' + pct + '%"></div>' +
|
||||
'<div class="epp-cmd-dmg-dot" style="background:' + op.color + '"></div>' +
|
||||
'<span class="epp-cmd-dmg-name">' + op.name + '</span>' +
|
||||
'<span class="epp-cmd-dmg-value">' + dmg + '/21</span>' +
|
||||
'<button class="epp-counter-btn" ' +
|
||||
'onclick="event.stopPropagation();adjustCommanderDamage(' + player.id + ',' + op.id + ',1)" ' +
|
||||
'title="Add commander damage">+</button>' +
|
||||
'<button class="epp-counter-btn" ' +
|
||||
'onclick="event.stopPropagation();adjustCommanderDamage(' + player.id + ',' + op.id + ',-1)" ' +
|
||||
'title="Remove commander damage">\u2212</button>' +
|
||||
'</div>';
|
||||
});
|
||||
|
||||
cmdDmgHtml += '</div></div>';
|
||||
|
||||
// ── Counters Section ────────────────────────────────────
|
||||
var poison = player.poison || 0;
|
||||
var energy = player.energy || 0;
|
||||
var experience = player.experience || 0;
|
||||
var rad = player.rad || 0;
|
||||
|
||||
var countersHtml =
|
||||
'<div class="epp-section">' +
|
||||
'<div class="epp-section-label">Counters</div>' +
|
||||
'<div class="epp-counters-grid">' +
|
||||
_buildCounterWidget('Poison', '\u2620', poison, 10,
|
||||
'adjustPoison(' + player.id + ',1)',
|
||||
'adjustPoison(' + player.id + ',-1)',
|
||||
poison >= 8 ? 'critical' : poison >= 5 ? 'warning' : '') +
|
||||
_buildCounterWidget('Energy', '\u269b', energy, 0,
|
||||
'adjustEnergy(' + player.id + ',1)',
|
||||
'adjustEnergy(' + player.id + ',-1)', '') +
|
||||
_buildCounterWidget('Experience', '\u2605', experience, 0,
|
||||
'adjustExperience(' + player.id + ',1)',
|
||||
'adjustExperience(' + player.id + ',-1)', '') +
|
||||
_buildCounterWidget('Rad', '\u2622', rad, 0,
|
||||
'adjustRad(' + player.id + ',1)',
|
||||
'adjustRad(' + player.id + ',-1)', '') +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
// ── Emblems Section ─────────────────────────────────────
|
||||
var emblems = player.emblems || [];
|
||||
var emblemsHtml =
|
||||
'<div class="epp-section">' +
|
||||
'<div class="epp-section-label">Emblems</div>' +
|
||||
'<div class="epp-emblems">';
|
||||
|
||||
if (emblems.length === 0) {
|
||||
emblemsHtml += '<span class="epp-no-emblems">None</span>';
|
||||
} else {
|
||||
emblems.forEach(function(emb, idx) {
|
||||
emblemsHtml +=
|
||||
'<div class="epp-emblem-chip" title="' + emb.name + '">' +
|
||||
'<span class="epp-emblem-name">' + emb.name + '</span>' +
|
||||
'<button class="epp-emblem-remove" ' +
|
||||
'onclick="event.stopPropagation();removeEmblem(' + player.id + ',' + idx + ')">\u00d7</button>' +
|
||||
'</div>';
|
||||
});
|
||||
}
|
||||
|
||||
emblemsHtml +=
|
||||
'<button class="epp-add-emblem-btn" ' +
|
||||
'onclick="event.stopPropagation();showAddEmblemDialog(' + player.id + ')" ' +
|
||||
'title="Add an emblem">+ Emblem</button>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
// ── Assemble Panel ──────────────────────────────────────
|
||||
var bodyHtml =
|
||||
'<div class="epp-body" id="epp-body-' + player.id + '" ' +
|
||||
'style="' + (isCollapsed ? 'display:none;' : '') + '">' +
|
||||
lifeHtml + cmdDmgHtml + countersHtml + emblemsHtml +
|
||||
'</div>';
|
||||
|
||||
panel.innerHTML = headerHtml + bodyHtml;
|
||||
return panel;
|
||||
}
|
||||
|
||||
function _buildCounterWidget(label, icon, value, threshold, onInc, onDec, dangerClass) {
|
||||
return '<div class="epp-counter ' + dangerClass + '">' +
|
||||
'<div class="epp-counter-icon">' + icon + '</div>' +
|
||||
'<div class="epp-counter-info">' +
|
||||
'<span class="epp-counter-value">' + value + '</span>' +
|
||||
'<span class="epp-counter-label">' + label + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="epp-counter-btns">' +
|
||||
'<button class="epp-counter-btn" onclick="event.stopPropagation();' + onInc + '">+</button>' +
|
||||
'<button class="epp-counter-btn" onclick="event.stopPropagation();' + onDec + '">\u2212</button>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
function togglePlayerPanel(playerId) {
|
||||
var body = document.getElementById('epp-body-' + playerId);
|
||||
var panel = document.getElementById('enhanced-panel-' + playerId);
|
||||
if (!body || !panel) return;
|
||||
|
||||
var isCollapsed = body.style.display === 'none';
|
||||
body.style.display = isCollapsed ? '' : 'none';
|
||||
|
||||
var arrow = panel.querySelector('.epp-collapse-arrow');
|
||||
if (arrow) arrow.textContent = isCollapsed ? '\u25be' : '\u25b8';
|
||||
|
||||
localStorage.setItem('panel-collapsed-' + playerId, !isCollapsed);
|
||||
}
|
||||
|
||||
// Counter adjustment functions
|
||||
function adjustEnergy(playerId, amount) {
|
||||
if (!gameState) return;
|
||||
var player = gameState.players[playerId];
|
||||
if (!player) return;
|
||||
player.energy = Math.max(0, (player.energy || 0) + amount);
|
||||
addLogEntry('<strong>' + player.name + '</strong> energy: ' + player.energy);
|
||||
renderEnhancedPanels();
|
||||
}
|
||||
|
||||
function adjustExperience(playerId, amount) {
|
||||
if (!gameState) return;
|
||||
var player = gameState.players[playerId];
|
||||
if (!player) return;
|
||||
player.experience = Math.max(0, (player.experience || 0) + amount);
|
||||
addLogEntry('<strong>' + player.name + '</strong> experience: ' + player.experience);
|
||||
renderEnhancedPanels();
|
||||
}
|
||||
|
||||
function adjustRad(playerId, amount) {
|
||||
if (!gameState) return;
|
||||
var player = gameState.players[playerId];
|
||||
if (!player) return;
|
||||
player.rad = Math.max(0, (player.rad || 0) + amount);
|
||||
addLogEntry('<strong>' + player.name + '</strong> rad counters: ' + player.rad);
|
||||
renderEnhancedPanels();
|
||||
}
|
||||
|
||||
function showAddEmblemDialog(playerId) {
|
||||
var name = prompt('Enter emblem name (e.g., "Sorin, Vengeful Bloodlord"):');
|
||||
if (!name || !name.trim()) return;
|
||||
if (!gameState) return;
|
||||
var player = gameState.players[playerId];
|
||||
if (!player) return;
|
||||
if (!player.emblems) player.emblems = [];
|
||||
player.emblems.push({ name: name.trim() });
|
||||
addLogEntry('<strong>' + player.name + '</strong> gained emblem: ' + name.trim());
|
||||
renderEnhancedPanels();
|
||||
}
|
||||
|
||||
function removeEmblem(playerId, idx) {
|
||||
if (!gameState) return;
|
||||
var player = gameState.players[playerId];
|
||||
if (!player || !player.emblems) return;
|
||||
var removed = player.emblems.splice(idx, 1);
|
||||
if (removed.length > 0) {
|
||||
addLogEntry('<strong>' + player.name + '</strong> lost emblem: ' + removed[0].name);
|
||||
}
|
||||
renderEnhancedPanels();
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-render all enhanced player panels in their quadrant positions.
|
||||
*/
|
||||
function renderEnhancedPanels() {
|
||||
if (!gameState) return;
|
||||
|
||||
for (var i = 0; i < gameState.players.length; i++) {
|
||||
var player = gameState.players[i];
|
||||
var quadrant = i + 1;
|
||||
var areaEl = document.getElementById('player-area-' + quadrant);
|
||||
if (!areaEl) continue;
|
||||
|
||||
// Find or create the enhanced panel container
|
||||
var container = areaEl.querySelector('.epp-container');
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.className = 'epp-container';
|
||||
// Insert before the zone row
|
||||
var zoneRow = areaEl.querySelector('.zone-row');
|
||||
if (zoneRow) {
|
||||
areaEl.insertBefore(container, zoneRow);
|
||||
} else {
|
||||
areaEl.appendChild(container);
|
||||
}
|
||||
}
|
||||
|
||||
var isActive = gameState.currentPlayerIndex === i;
|
||||
var panel = createEnhancedPlayerPanel(player, quadrant, isActive);
|
||||
container.innerHTML = '';
|
||||
container.appendChild(panel);
|
||||
|
||||
// Hide the old life counter (we have our own now)
|
||||
var oldLifeCounter = areaEl.querySelector('.life-counter');
|
||||
if (oldLifeCounter) oldLifeCounter.style.display = 'none';
|
||||
|
||||
// Hide old poison badge (we have counters section)
|
||||
var oldPoison = areaEl.querySelector('.poison-badge');
|
||||
if (oldPoison) oldPoison.style.display = 'none';
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
+2297
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user