Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Adaptive Tactics</title> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet"> | |
| <!-- Stylesheets --> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <link rel="stylesheet" href="css/board.css"> | |
| <link rel="stylesheet" href="css/panels.css"> | |
| <link rel="stylesheet" href="css/screens.css"> | |
| <link rel="stylesheet" href="css/transitions.css"> | |
| </head> | |
| <body> | |
| <div id="game-container"> | |
| <!-- Title Screen --> | |
| <div id="title-screen" class="screen active"> | |
| <div class="title-content"> | |
| <h1 class="game-title">Adaptive Tactics</h1> | |
| <p class="game-subtitle">He dies. He remembers. He returns.</p> | |
| <div class="title-buttons"> | |
| <button id="btn-start" class="btn-primary">Start</button> | |
| <button id="btn-how-to-play" class="btn-secondary">How to Play</button> | |
| <button id="btn-credits" class="btn-secondary">Credits</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Name Entry Screen --> | |
| <div id="name-entry-screen" class="screen"> | |
| <div class="modal-overlay"> | |
| <div class="modal-content"> | |
| <p class="name-prompt">Speak your name, so the cycle knows what must return.</p> | |
| <input type="text" id="player-name-input" maxlength="20" placeholder="Enter your name..."> | |
| <button id="btn-confirm-name" class="btn-primary">Confirm</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Battle Screen --> | |
| <div id="battle-screen" class="screen"> | |
| <!-- Top Bar --> | |
| <header id="top-bar"> | |
| <div class="cycle-info"> | |
| <span id="cycle-number">Cycle 1</span> | |
| <span id="ephraim-form">— Defiant King</span> | |
| </div> | |
| <div class="turn-info"> | |
| <span id="turn-number">Turn 1</span> | |
| <span id="current-phase">Player Phase</span> | |
| </div> | |
| <div class="objective"> | |
| <span>Objective: Defeat Ephraim</span> | |
| </div> | |
| <button id="btn-threat-overlay" class="btn-icon" title="Toggle Threat Overlay">⚠</button> | |
| </header> | |
| <!-- Main Battle Area --> | |
| <main id="battle-area"> | |
| <!-- Left Unit Panel --> | |
| <aside id="unit-panel"> | |
| <div class="panel-header">Selected Unit</div> | |
| <div id="selected-unit-display"> | |
| <div id="unit-sprite-container"></div> | |
| <div id="unit-name">—</div> | |
| <div id="unit-title">—</div> | |
| <div id="unit-hp-bar"> | |
| <div id="unit-hp-fill"></div> | |
| <span id="unit-hp-text">— / —</span> | |
| </div> | |
| <div id="unit-stats"> | |
| <div class="stat-row"><span>Pow</span><span id="stat-pow">—</span></div> | |
| <div class="stat-row"><span>Skl</span><span id="stat-skl">—</span></div> | |
| <div class="stat-row"><span>Spd</span><span id="stat-spd">—</span></div> | |
| <div class="stat-row"><span>Def</span><span id="stat-def">—</span></div> | |
| <div class="stat-row"><span>Res</span><span id="stat-res">—</span></div> | |
| <div class="stat-row"><span>Mov</span><span id="stat-mov">—</span></div> | |
| </div> | |
| <div id="unit-weapon"> | |
| <div class="weapon-label">Equipped</div> | |
| <div id="equipped-weapon">—</div> | |
| <div id="weapon-stats">—</div> | |
| </div> | |
| <div id="alternate-weapons"></div> | |
| </div> | |
| </aside> | |
| <!-- Game Board --> | |
| <div id="board-container"> | |
| <div id="game-board"></div> | |
| </div> | |
| <!-- Right Context Panel --> | |
| <aside id="context-panel"> | |
| <div class="panel-section" id="ephraim-status"> | |
| <div class="panel-header">Ephraim</div> | |
| <div id="ephraim-thumbnail"></div> | |
| <div id="ephraim-form-title">Defiant King</div> | |
| <div id="ephraim-key-stats"></div> | |
| </div> | |
| <div class="panel-section" id="adaptation-hint"> | |
| <div class="panel-header">Whispers</div> | |
| <p id="hint-text">The cycle begins anew...</p> | |
| </div> | |
| <div class="panel-section" id="turn-log"> | |
| <div class="panel-header">Battle Log</div> | |
| <div id="log-entries"></div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Bottom Action Bar --> | |
| <footer id="action-bar"> | |
| <div id="action-buttons"> | |
| <button id="btn-attack" class="btn-action" disabled>Attack</button> | |
| <button id="btn-heal" class="btn-action" disabled>Heal</button> | |
| <button id="btn-wait" class="btn-action" disabled>Wait</button> | |
| <button id="btn-switch-weapon" class="btn-action" disabled>Switch Weapon</button> | |
| <button id="btn-end-turn" class="btn-action">End Turn</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Cycle Transition Screen --> | |
| <div id="transition-screen" class="screen"> | |
| <div class="transition-content"> | |
| <div id="transition-cycle-info">Cycle 2</div> | |
| <div id="transition-form-title">Dark King</div> | |
| <div id="transition-portrait"></div> | |
| <p id="transition-main-line" class="transition-quote"></p> | |
| <p id="transition-hint-line" class="transition-hint"></p> | |
| <button id="btn-continue" class="btn-primary">Continue</button> | |
| </div> | |
| </div> | |
| <!-- Final Defeat Screen --> | |
| <div id="defeat-screen" class="screen"> | |
| <div class="defeat-content"> | |
| <h2 id="defeat-summary"></h2> | |
| <p id="defeat-form"></p> | |
| <div id="defeat-adaptations"> | |
| <p>He learned:</p> | |
| <ul id="adaptation-list"></ul> | |
| </div> | |
| <div class="defeat-buttons"> | |
| <button id="btn-try-again" class="btn-primary">Try Again</button> | |
| <button id="btn-return-title" class="btn-secondary">Return to Title</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- How to Play Modal --> | |
| <div id="how-to-play-modal" class="modal"> | |
| <div class="modal-content"> | |
| <h2>How to Play</h2> | |
| <div class="rules-content"> | |
| <h3>Objective</h3> | |
| <p>Defeat Ephraim, the Returning King, to complete each cycle. Survive as many cycles as possible.</p> | |
| <h3>Turn Structure</h3> | |
| <p>Each turn has a Player Phase and Enemy Phase. During your phase, each unit can move and then take one action (Attack, Heal, or Wait).</p> | |
| <h3>Combat</h3> | |
| <p>Attack enemies within your weapon's range. If the defender can counter-attack (their weapon reaches your range), they will.</p> | |
| <p>A unit with 4+ more Speed than their target attacks twice.</p> | |
| <h3>Adaptation</h3> | |
| <p>Ephraim learns from each defeat. He will adapt his forces and tactics based on how you fight.</p> | |
| </div> | |
| <button id="btn-close-how-to-play" class="btn-secondary">Close</button> | |
| </div> | |
| </div> | |
| <!-- Credits Modal --> | |
| <div id="credits-modal" class="modal"> | |
| <div class="modal-content"> | |
| <h2>Credits</h2> | |
| <p>Adaptive Tactics</p> | |
| <p class="credits-text">A tactical roguelite experience</p> | |
| <p class="credits-text">Built with vanilla JavaScript</p> | |
| <button id="btn-close-credits" class="btn-secondary">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Scripts (ES Modules) --> | |
| <script type="module" src="js/main.js"></script> | |
| </body> | |
| </html> | |