Undertale Fight

Okay, let's add keyboard controls and basic enemy attacks. Undertale Fight

ENEMY

Dummy HP: 100 / 100

* A wild Dummy appears.

Player LV 1 HP 20 / 20

body { background-color: black; color: white; font-family: 'Determination Mono Web', monospace; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-size: 24px; /* Adjust base font size */ overflow: hidden; /* Prevent scrollbars */ } #game-container { border: 2px solid white; padding: 20px; width: 640px; /* Standard Undertale width */ text-align: center; } #enemy-area { margin-bottom: 20px; min-height: 100px; /* Ensure space for enemy */ } #enemy-sprite { /* Placeholder for sprite */ width: 80px; height: 80px; border: 1px dashed white; margin: 0 auto 10px auto; display: flex; justify-content: center; align-items: center; font-size: 16px; transition: filter 0.1s ease; /* For hit flash */ } #enemy-hp-bar-container, #player-hp-bar-container { width: 100px; height: 15px; border: 1px solid white; margin: 5px auto; background-color: red; } #player-hp-bar-container { display: inline-block; /* Align with text */ vertical-align: middle; margin-left: 10px; } #enemy-hp-bar, #player-hp-bar { height: 100%; background-color: yellow; width: 100%; /* Initial width */ transition: width 0.5s ease; } #dialogue-box { border: 2px solid white; padding: 15px; min-height: 80px; margin-bottom: 20px; text-align: left; line-height: 1.4; white-space: pre-wrap; /* Preserve line breaks from \n */ } #fight-box { border: 2px solid white; width: 150px; height: 150px; margin: 0 auto 20px auto; position: relative; /* For heart and projectile positioning */ display: flex; justify-content: center; align-items: center; overflow: hidden; /* Keep projectiles contained */ } #player-heart { width: 16px; /* Slightly smaller */ height: 16px; background-color: red; position: absolute; transition: background-color 0.1s ease, transform 0.1s ease; /* For hit flash */ /* Initial position will be set by JS */ } #player-heart.invincible { background-color: pink; /* Indicate temporary invincibility */ } .projectile { position: absolute; width: 8px; height: 8px; background-color: white; border-radius: 50%; /* Make them round */ } #player-info { margin-bottom: 20px; } #player-info span { margin: 0 10px; } #action-menu { display: flex; justify-content: space-around; margin-bottom: 20px; /* Add space below buttons */ } .action-button, .act-option-button, .mercy-option-button, .back-button, #attack-confirm { background-color: black; border: none; color: white; font-family: 'Determination Mono Web', monospace; font-size: 24px; padding: 10px 15px; cursor: pointer; text-align: center; min-width: 100px; /* Ensure buttons have some width */ position: relative; /* For the selection heart */ } .action-button:hover, .act-option-button:hover, .mercy-option-button:hover, .back-button:hover, #attack-confirm:hover { /* Keep hover minimal if keyboard nav is primary */ /* background-color: #333; */ } .action-button:focus, .act-option-button:focus, .mercy-option-button:focus, .back-button:focus, #attack-confirm:focus { outline: none; } /* Selection Indicator (Heart) */ .menu-option::before { content: ''; display: none; /* Hidden by default */ position: absolute; left: -5px; /* Position left of the button text */ top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-color: red; /* Heart color */ /* Simple heart shape using borders or SVG could be used here */ /* For simplicity, using a square for now */ } .menu-option.selected::before { display: block; /* Show heart on selected item */ } /* Sub-menu styling */ #act-options, #mercy-options, #item-options { border: 2px solid white; padding: 15px; margin-top: -20px; /* Overlap slightly with action menu area */ margin-bottom: 20px; display: flex; /* Use flexbox for layout */ flex-direction: column; /* Stack buttons vertically */ align-items: flex-start; /* Align buttons to the left */ min-height: 80px; /* Match dialogue box height */ } #act-options button, #mercy-options button, #item-options button { margin-bottom: 5px; /* Space between buttons */ } #act-options p, #mercy-options p, #item-options p { margin-bottom: 10px; text-align: left; } /* Attack Timing Bar */ #attack-timing { border: 2px solid white; padding: 15px; margin: 10px auto 20px auto; width: 80%; text-align: center; } #attack-bar { width: 100%; height: 20px; background-color: #555; position: relative; margin-bottom: 10px; overflow: hidden; /* Hide marker overflow */ } #attack-marker { position: absolute; top: 0; left: 0%; /* Starts at the left */ width: 5px; height: 100%; background-color: white; /* Animation controlled by JS */ } @keyframes attack-sweep { 0% { left: 0%; } 50% { left: calc(100% - 5px); } /* Move to the right */ 100% { left: 0%; } /* Move back to the left */ } #attack-confirm { margin-top: 5px; display: none; /* Hide button, use Z key */ } // --- DOM Elements --- const dialogueBox = document.getElementById('dialogue-box'); const enemySprite = document.getElementById('enemy-sprite'); const enemyName = document.getElementById('enemy-name'); const enemyHpDisplay = document.getElementById('enemy-hp'); const enemyMaxHpDisplay = document.getElementById('enemy-max-hp'); const enemyHpBar = document.getElementById('enemy-hp-bar'); const playerHpDisplay = document.getElementById('player-hp'); const playerMaxHpDisplay = document.getElementById('player-max-hp'); const playerHpBar = document.getElementById('player-hp-bar'); const playerHeart = document.getElementById('player-heart'); const fightBox = document.getElementById('fight-box'); const actionMenu = document.getElementById('action-menu'); const fightButton = document.getElementById('fight-button'); const actButton = document.getElementById('act-button'); const itemButton = document.getElementById('item-button'); const mercyButton = document.getElementById('mercy-button'); const attackTiming = document.getElementById('attack-timing'); const attackMarker = document.getElementById('attack-marker'); // const attackConfirm = document.getElementById('attack-confirm'); // Button removed visually const actOptions = document.getElementById('act-options'); const itemOptions = document.getElementById('item-options'); const mercyOptions = document.getElementById('mercy-options'); // --- Game State --- let playerHP = 20; let playerMaxHP = 20; let enemyHP = 100; let enemyMaxHP = 100; let enemyDEF = 0; let playerATK = 5; let enemyDefeatedCount = 0; // Game Flow States const GameState = { PLAYER_MENU: 'PLAYER_MENU', // Player choosing action (FIGHT, ACT, etc.) PLAYER_ATTACK_TIMING: 'PLAYER_ATTACK_TIMING', // Player executing FIGHT ENEMY_TURN_DIALOGUE: 'ENEMY_TURN_DIALOGUE', // Enemy showing text before attack ENEMY_TURN_ATTACKING: 'ENEMY_TURN_ATTACKING', // Enemy attacking, player dodging TRANSITION: 'TRANSITION', // Short state for animations/delays GAME_OVER: 'GAME_OVER', BATTLE_WON: 'BATTLE_WON' // When enemy HP is 0 }; let currentState = GameState.TRANSITION; // Start in transition before first turn let playerActionSelected = false; // Used within PLAYER_MENU state let attackAnimationId = null; let enemyAttackLoopId = null; // For enemy attack animation frame let projectiles = []; // Array to hold active projectile elements and data let playerInvincible = false; // Player invincible after getting hit let invincibilityTimer = null; // Keyboard Navigation State let currentMenuElement = actionMenu; // Which menu is currently active let selectedIndex = 0; // Index of the selected button in the current menu // Player Movement State const playerSpeed = 3; let moveUp = false; let moveDown = false; let moveLeft = false; let moveRight = false; // --- Utility Functions --- function updateDialogue(text) { dialogueBox.textContent = `* ${text}`; } function updateHPBars() { const playerHPRatio = Math.max(0, playerHP / playerMaxHP); playerHpBar.style.width = `${playerHPRatio * 100}%`; playerHpDisplay.textContent = playerHP; playerMaxHpDisplay.textContent = playerMaxHP; const enemyHPRatio = Math.max(0, enemyHP / enemyMaxHP); enemyHpBar.style.width = `${enemyHPRatio * 100}%`; enemyHpDisplay.textContent = enemyHP; enemyMaxHpDisplay.textContent = enemyMaxHP; } function centerPlayerHeart() { const boxRect = fightBox.getBoundingClientRect(); // Recalculate bounds on resize potentially, but fine for fixed size const heartSize = playerHeart.offsetWidth; // Use offsetWidth playerHeart.style.left = `${(fightBox.clientWidth - heartSize) / 2}px`; playerHeart.style.top = `${(fightBox.clientHeight - heartSize) / 2}px`; } function flashElement(element, duration = 150, brightness = 'brightness(2)') { element.style.filter = brightness; setTimeout(() => { element.style.filter = 'none'; }, duration); } function setPlayerInvincible(duration = 1000) { if (playerInvincible) return; // Already invincible playerInvincible = true; playerHeart.classList.add('invincible'); clearTimeout(invincibilityTimer); // Clear previous timer if any invincibilityTimer = setTimeout(() => { playerInvincible = false; playerHeart.classList.remove('invincible'); }, duration); } // --- State Management --- function setState(newState) { console.log(`Changing state from ${currentState} to ${newState}`); currentState = newState; // Reset movement keys when not attacking if (newState !== GameState.ENEMY_TURN_ATTACKING) { moveUp = moveDown = moveLeft = moveRight = false; } // Stop attack timing animation if leaving that state if (newState !== GameState.PLAYER_ATTACK_TIMING) { stopAttackAnimation(); } // Stop enemy attack loop if leaving that state if (newState !== GameState.ENEMY_TURN_ATTACKING) { stopEnemyAttackLoop(); clearProjectiles(); } // Handle UI visibility based on state actionMenu.style.display = 'none'; attackTiming.style.display = 'none'; actOptions.style.display = 'none'; itemOptions.style.display = 'none'; mercyOptions.style.display = 'none'; fightBox.style.borderColor = 'white'; // Reset border color switch (newState) { case GameState.PLAYER_MENU: showMenu(actionMenu); // Show main menu by default playerActionSelected = false; break; case GameState.PLAYER_ATTACK_TIMING: attackTiming.style.display = 'block'; startAttackAnimation(); break; case GameState.ENEMY_TURN_DIALOGUE: // Dialogue updated by calling function break; case GameState.ENEMY_TURN_ATTACKING: fightBox.style.borderColor = 'red'; // Indicate danger centerPlayerHeart(); // Ensure heart starts centered for dodging startEnemyAttackLoop(); // Start projectile logic break; case GameState.BATTLE_WON: updateDialogue(`Dummy yields! You won! You gained 0 EXP and 0 gold.`); // Could add a delay then reset or end setTimeout(resetForNextFight, 2000); break; case GameState.GAME_OVER: updateDialogue("You lost the battle..."); playerHeart.style.backgroundColor = 'grey'; // Indicate defeat break; case GameState.TRANSITION: // Usually brief, handled by setTimeout callbacks break; } } // --- Menu Navigation & Interaction --- function updateSelection(menuElem, newIndex) { const options = menuElem.querySelectorAll('.menu-option'); if (!options.length) return; // No options in this menu // Remove selection from old index const oldSelected = options[selectedIndex]; if (oldSelected) oldSelected.classList.remove('selected'); // Clamp index selectedIndex = Math.max(0, Math.min(newIndex, options.length - 1)); // Add selection to new index const newSelected = options[selectedIndex]; if (newSelected) newSelected.classList.add('selected'); } function showMenu(menuElem) { // Hide all menus first actionMenu.style.display = 'none'; actOptions.style.display = 'none'; itemOptions.style.display = 'none'; mercyOptions.style.display = 'none'; actionMenu.classList.remove('menu-active'); actOptions.classList.remove('menu-active'); itemOptions.classList.remove('menu-active'); mercyOptions.classList.remove('menu-active'); // Show the target menu menuElem.style.display = menuElem.classList.contains('submenu') ? 'flex' : 'flex'; // Adjust display type if needed menuElem.classList.add('menu-active'); currentMenuElement = menuElem; selectedIndex = 0; // Reset selection to the first item updateSelection(currentMenuElement, selectedIndex); // Highlight the first item } function handleMenuConfirm() { const selectedButton = currentMenuElement.querySelector('.menu-option.selected'); if (selectedButton) { selectedButton.click(); // Simulate click on the selected button } } function handleMenuBack() { // Only go back from submenus to the main action menu if (currentMenuElement !== actionMenu) { showMenu(actionMenu); updateDialogue("What will you do?"); // Reset dialogue playerActionSelected = false; // Allow selecting a new main action } } // --- Player Attack --- function startAttackAnimation() { attackMarker.style.animation = 'attack-sweep 1.5s linear infinite'; } function stopAttackAnimation() { attackMarker.style.animation = 'none'; // Reset position for next time if needed attackMarker.style.left = '0%'; } function handleAttackTiming() { if (currentState !== GameState.PLAYER_ATTACK_TIMING) return; stopAttackAnimation(); setState(GameState.TRANSITION); // Transition briefly const barWidth = attackMarker.parentElement.offsetWidth; const markerPos = attackMarker.offsetLeft + attackMarker.offsetWidth / 2; const center = barWidth / 2; const accuracy = Math.max(0, 1 - Math.abs(markerPos - center) / center); let damage = Math.round(playerATK * (0.8 + accuracy * 0.4)); damage = Math.max(1, damage - enemyDEF); updateDialogue(`You hit for ${damage} damage!`); enemyHP -= damage; enemyHP = Math.max(0, enemyHP); updateHPBars(); flashElement(enemySprite); setTimeout(() => { if (enemyHP <= 0) { setState(GameState.BATTLE_WON); } else { setState(GameState.ENEMY_TURN_DIALOGUE); // Move to enemy turn enemyTurn(); // Start enemy's turn logic } }, 800); // Delay after attack message } // --- Enemy Turn & Attacks --- function enemyTurn() { // 1. Dialogue Phase setState(GameState.ENEMY_TURN_DIALOGUE); updateDialogue("The enemy dummy prepares an attack!"); // 2. Attack Phase (after a short delay) setTimeout(() => { if (currentState === GameState.ENEMY_TURN_DIALOGUE) { // Check if state hasn't changed (e.g. player fled) setState(GameState.ENEMY_TURN_ATTACKING); // Start a specific attack pattern startSimpleProjectileAttack(); } }, 1500); // Delay for dialogue } function startSimpleProjectileAttack() { // Example: Fire 5 projectiles one after another let projectilesFired = 0; const maxProjectiles = 5; const fireInterval = 300; // ms between projectiles function fireOne() { if (currentState !== GameState.ENEMY_TURN_ATTACKING || projectilesFired >= maxProjectiles) { // If state changed or all fired, check if done if (projectiles.length === 0) { // Wait until all projectiles are gone endEnemyAttackPhase(); } return; // Stop firing new ones } createProjectile(fightBox.clientWidth / 2, 0, 0, 2); // Fire from top-middle downwards projectilesFired++; setTimeout(fireOne, fireInterval); } fireOne(); // Start firing sequence // Failsafe timeout to end the phase if something goes wrong setTimeout(() => { if (currentState === GameState.ENEMY_TURN_ATTACKING) { console.warn("Attack phase timeout reached."); endEnemyAttackPhase(); } }, 8000); // Max duration for this attack pattern } function createProjectile(x, y, vx, vy) { const p = document.createElement('div'); p.className = 'projectile'; p.style.left = `${x}px`; p.style.top = `${y}px`; fightBox.appendChild(p); projectiles.push({ element: p, x, y, vx, vy }); } function moveProjectiles() { const boxRect = fightBox.getBoundingClientRect(); // Get current bounds const heartRect = playerHeart.getBoundingClientRect(); const heartCenterX = heartRect.left + heartRect.width / 2 - boxRect.left; const heartCenterY = heartRect.top + heartRect.height / 2 - boxRect.top; const heartRadius = playerHeart.offsetWidth / 2; // Approximate hit radius for (let i = projectiles.length - 1; i >= 0; i--) { const p = projectiles[i]; p.x += p.vx; p.y += p.vy; p.element.style.left = `${p.x}px`; p.element.style.top = `${p.y}px`; // Collision Check const dx = p.x - heartCenterX; const dy = p.y - heartCenterY; const distance = Math.sqrt(dx * dx + dy * dy); const projectileRadius = p.element.offsetWidth / 2; if (!playerInvincible && distance < heartRadius + projectileRadius) { // Collision! playerHit(1); // Player takes 1 damage p.element.remove(); // Remove projectile projectiles.splice(i, 1); continue; // Skip boundary check for this removed projectile } // Remove projectile if out of bounds if (p.x < 0 || p.x > fightBox.clientWidth || p.y < 0 || p.y > fightBox.clientHeight) { p.element.remove(); projectiles.splice(i, 1); } } } function playerHit(damage) { if (playerInvincible) return; // Can't get hit while invincible playerHP -= damage; playerHP = Math.max(0, playerHP); // Clamp HP >= 0 updateHPBars(); flashElement(playerHeart, 100, 'brightness(3)'); // Flash heart setPlayerInvincible(1000); // Grant 1 second invincibility if (playerHP <= 0) { setState(GameState.GAME_OVER); stopEnemyAttackLoop(); // Stop attacks immediately on death } } function clearProjectiles() { projectiles.forEach(p => p.element.remove()); projectiles = []; } function enemyAttackLoop() { if (currentState !== GameState.ENEMY_TURN_ATTACKING) return; // Stop if state changed movePlayerHeart(); moveProjectiles(); // Check if attack pattern should end (e.g., all projectiles gone and none being fired) // This check is simplified; more complex patterns need better end conditions. // The check is now primarily handled within the attack pattern functions (like startSimpleProjectileAttack) enemyAttackLoopId = requestAnimationFrame(enemyAttackLoop); } function startEnemyAttackLoop() { if (enemyAttackLoopId) cancelAnimationFrame(enemyAttackLoopId); // Prevent duplicates enemyAttackLoopId = requestAnimationFrame(enemyAttackLoop); } function stopEnemyAttackLoop() { if (enemyAttackLoopId) cancelAnimationFrame(enemyAttackLoopId); enemyAttackLoopId = null; } function endEnemyAttackPhase() { if (currentState !== GameState.ENEMY_TURN_ATTACKING) return; // Avoid ending twice console.log("Ending enemy attack phase"); stopEnemyAttackLoop(); clearProjectiles(); setState(GameState.TRANSITION); // Brief transition // Check player HP again before switching turn if (playerHP <= 0) { setState(GameState.GAME_OVER); } else { setTimeout(() => { updateDialogue("What will you do?"); setState(GameState.PLAYER_MENU); // Give turn back to player }, 500); } } // --- Player Heart Movement --- function movePlayerHeart() { const box = fightBox; const heart = playerHeart; const rect = box.getBoundingClientRect(); // Use clientWidth/Height for internal size const heartSize = heart.offsetWidth; // Use offsetWidth for actual rendered size let currentX = parseFloat(heart.style.left || '0'); let currentY = parseFloat(heart.style.top || '0'); if (moveLeft) currentX -= playerSpeed; if (moveRight) currentX += playerSpeed; if (moveUp) currentY -= playerSpeed; if (moveDown) currentY += playerSpeed; // Clamp position within the fight box boundaries currentX = Math.max(0, Math.min(currentX, box.clientWidth - heartSize)); currentY = Math.max(0, Math.min(currentY, box.clientHeight - heartSize)); heart.style.left = `${currentX}px`; heart.style.top = `${currentY}px`; } // --- Game Flow Control --- function handleEnemyDefeat() { // This function is now effectively replaced by setting state to BATTLE_WON // setState(GameState.BATTLE_WON); // Called after attack confirms HP <= 0 } function resetEnemy() { enemyHP = enemyMaxHP; enemyName.textContent = `Dummy #${enemyDefeatedCount + 1}`; updateHPBars(); } function resetForNextFight() { enemyDefeatedCount++; resetEnemy(); // Player HP is NOT reset between fights in this version updateDialogue(`Another Dummy appears. What will you do?`); setState(GameState.PLAYER_MENU); // Start next round } // --- Event Listeners --- // Keyboard Input document.addEventListener('keydown', (e) => { // --- Player Heart Movement (Only during enemy attack) --- if (currentState === GameState.ENEMY_TURN_ATTACKING) { switch (e.key) { case 'ArrowUp': moveUp = true; e.preventDefault(); break; case 'ArrowDown': moveDown = true; e.preventDefault(); break; case 'ArrowLeft': moveLeft = true; e.preventDefault(); break; case 'ArrowRight': moveRight = true; e.preventDefault(); break; } } // --- Menu Navigation & Confirmation (Only during player menu state) --- if (currentState === GameState.PLAYER_MENU) { const options = currentMenuElement.querySelectorAll('.menu-option'); switch (e.key) { case 'ArrowLeft': if (currentMenuElement === actionMenu) { // Horizontal navigation for action menu updateSelection(currentMenuElement, selectedIndex - 1); } e.preventDefault(); break; case 'ArrowRight': if (currentMenuElement === actionMenu) { // Horizontal navigation for action menu updateSelection(currentMenuElement, selectedIndex + 1); } e.preventDefault(); break; case 'ArrowUp': if (currentMenuElement !== actionMenu) { // Vertical navigation for submenus updateSelection(currentMenuElement, selectedIndex - 1); } e.preventDefault(); break; case 'ArrowDown': if (currentMenuElement !== actionMenu) { // Vertical navigation for submenus updateSelection(currentMenuElement, selectedIndex + 1); } e.preventDefault(); break; case 'z': // Confirm Action case 'Enter': handleMenuConfirm(); e.preventDefault(); break; case 'x': // Back Action case 'Shift': // Often used as back in Undertale handleMenuBack(); e.preventDefault(); break; } } // --- Player Attack Timing Confirmation --- if (currentState === GameState.PLAYER_ATTACK_TIMING && (e.key === 'z' || e.key === 'Enter')) { handleAttackTiming(); e.preventDefault(); } }); document.addEventListener('keyup', (e) => { // Stop heart movement when key is released if (currentState === GameState.ENEMY_TURN_ATTACKING) { switch (e.key) { case 'ArrowUp': moveUp = false; break; case 'ArrowDown': moveDown = false; break; case 'ArrowLeft': moveLeft = false; break; case 'ArrowRight': moveRight = false; break; } } }); // --- Button Click Listeners (Delegated or Individual) --- // FIGHT Button fightButton.addEventListener('click', () => { if (currentState !== GameState.PLAYER_MENU || playerActionSelected) return; playerActionSelected = true; // Prevent selecting another action this turn setState(GameState.PLAYER_ATTACK_TIMING); updateDialogue("Attack! Press Z at the right time!"); }); // ACT Button actButton.addEventListener('click', () => { if (currentState !== GameState.PLAYER_MENU || playerActionSelected) return; playerActionSelected = true; showMenu(actOptions); updateDialogue("ACT"); }); // ITEM Button itemButton.addEventListener('click', () => { if (currentState !== GameState.PLAYER_MENU || playerActionSelected) return; playerActionSelected = true; showMenu(itemOptions); updateDialogue("ITEM"); // No items, so this menu doesn't lead to enemy turn directly. Player must press Back (X). }); // MERCY Button mercyButton.addEventListener('click', () => { if (currentState !== GameState.PLAYER_MENU || playerActionSelected) return; playerActionSelected = true; showMenu(mercyOptions); updateDialogue("MERCY"); }); // --- Submenu Option Listeners --- // ACT Options actOptions.querySelectorAll('.menu-option').forEach(button => { button.addEventListener('click', (e) => { if (currentState !== GameState.PLAYER_MENU) return; const action = e.target.getAttribute('data-action'); if (action === 'back') { handleMenuBack(); return; // Don't proceed to enemy turn } setState(GameState.TRANSITION); // Transition state if (action === 'check') { updateDialogue(`DUMMY - ATK 0 DEF ${enemyDEF}\n* A cotton heart and a button eye.\n* You are filled with determination.`); } else if (action === 'talk') { updateDialogue("* You talk to the DUMMY.\n* ...\n* It doesn't seem much for conversation."); } // After performing the ACT action, proceed to enemy turn setTimeout(() => { setState(GameState.ENEMY_TURN_DIALOGUE); enemyTurn(); }, 1500); // Delay after ACT text }); }); // MERCY Options mercyOptions.querySelectorAll('.menu-option').forEach(button => { button.addEventListener('click', (e) => { if (currentState !== GameState.PLAYER_MENU) return; const action = e.target.getAttribute('data-action'); if (action === 'back') { handleMenuBack(); return; // Don't proceed to enemy turn } setState(GameState.TRANSITION); if (action === 'spare') { updateDialogue("* You spared the Dummy."); // Sparing instantly "wins" this encounter setTimeout(() => setState(GameState.BATTLE_WON), 1000); } else if (action === 'flee') { updateDialogue("* You fled the battle!"); setTimeout(() => { // Reset enemy but stay in battle loop resetEnemy(); updateDialogue(`You ran away, but another Dummy appeared!`); setState(GameState.PLAYER_MENU); // Give turn back immediately after fleeing message }, 1500); } }); }); // ITEM Options (only Back button) itemOptions.querySelectorAll('.menu-option').forEach(button => { button.addEventListener('click', (e) => { if (currentState !== GameState.PLAYER_MENU) return; const action = e.target.getAttribute('data-action'); if (action === 'back') { handleMenuBack(); // No enemy turn follows using ITEM back } }); }); // --- Initialization --- function initializeGame() { updateHPBars(); centerPlayerHeart(); updateDialogue("A wild Dummy appears."); setState(GameState.PLAYER_MENU); // Start in player menu state } // Delay initialization slightly to ensure fonts/styles load setTimeout(initializeGame, 100);