import React, { useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; const GRID_SIZE = 8; const ENEMIES_PER_FLOOR = 3; const App = () => { const [statPointsLeft, setStatPointsLeft] = useState(3); const [gameStarted, setGameStarted] = useState(false); const initialPlayerState = { position: { x: 0, y: 0 }, stats: { attack: 1, defense: 1, speed: 1 }, health: 10, maxHealth: 10, level: 1, xp: 0 }; const generateEnemies = (floor) => { const usedPositions = new Set(); usedPositions.add(`0,0`); // Player starts at 0,0 if (floor % 10 === 0) { // Calculate boss stat increases based on number of encounters const bossLevel = Math.floor(floor / 10); const statIncrease = (bossLevel - 1) * 4; // Generate boss position (needs 2x2 space) let bossX, bossY; do { bossX = Math.floor(Math.random() * (GRID_SIZE - 1)); // -1 to ensure space for 2x2 bossY = Math.floor(Math.random() * (GRID_SIZE - 1)); } while ( usedPositions.has(`${bossX},${bossY}`) || usedPositions.has(`${bossX + 1},${bossY}`) || usedPositions.has(`${bossX},${bossY + 1}`) || usedPositions.has(`${bossX + 1},${bossY + 1}`) ); // Mark boss positions as used usedPositions.add(`${bossX},${bossY}`); usedPositions.add(`${bossX + 1},${bossY}`); usedPositions.add(`${bossX},${bossY + 1}`); usedPositions.add(`${bossX + 1},${bossY + 1}`); return [{ position: { x: bossX, y: bossY }, size: { width: 2, height: 2 }, stats: { attack: 4 + statIncrease, defense: 12 + statIncrease }, health: 50 + (statIncrease * 4), isBoss: true, bossLevel: bossLevel }]; } return Array(ENEMIES_PER_FLOOR).fill(null).map(() => { const statIncrease = Math.floor((floor - 1) / 2); let x, y; do { x = Math.floor(Math.random() * GRID_SIZE); y = Math.floor(Math.random() * GRID_SIZE); } while (usedPositions.has(`${x},${y}`)); usedPositions.add(`${x},${y}`); return { position: { x, y }, size: { width: 1, height: 1 }, stats: { attack: 1 + statIncrease, defense: 1 + statIncrease }, health: 5, isBoss: false }; }); }; const [player, setPlayer] = useState(initialPlayerState); const initialGameState = { floor: 1, movesLeft: initialPlayerState.stats.speed, enemies: generateEnemies(1), turn: 'player', message: 'Your turn! Use arrow keys to move.', levelUp: false, selectingMove: false, targetEnemyIndex: -1, gameOver: false, floorReward: false, activeEnemyIndex: -1, bossStatPoints: 0 }; const [gameState, setGameState] = useState(initialGameState); const restartGame = () => { setStatPointsLeft(3); setGameStarted(false); setPlayer(initialPlayerState); setGameState({ ...initialGameState, movesLeft: initialPlayerState.stats.speed }); }; const movePlayer = useCallback((dx, dy) => { if (gameState.turn !== 'player' || gameState.levelUp || gameState.movesLeft <= 0) return; const newX = Math.max(0, Math.min(GRID_SIZE - 1, player.position.x + dx)); const newY = Math.max(0, Math.min(GRID_SIZE - 1, player.position.y + dy)); // Check for enemy at new position const enemyIndex = gameState.enemies.findIndex(e => { if (!e) return false; // For regular enemies if (!e.isBoss) { return e.position.x === newX && e.position.y === newY; } // For boss (2x2 area) return newX >= e.position.x && newX < e.position.x + e.size.width && newY >= e.position.y && newY < e.position.y + e.size.height; }); if (enemyIndex >= 0) { if (gameState.movesLeft <= 0) { setGameState(prev => ({ ...prev, message: 'No moves left! Enemy turn.', turn: 'enemy', activeEnemyIndex: 0 })); return; } // Combat const enemy = gameState.enemies[enemyIndex]; const baseDamage = player.stats.attack; const reduction = Math.floor(enemy.stats.defense * 0.25); const damage = Math.max(0, baseDamage - reduction); const newEnemies = [...gameState.enemies]; const newMovesLeft = gameState.movesLeft - 1; newEnemies[enemyIndex] = { ...enemy, health: enemy.health - damage }; if (newEnemies[enemyIndex].health <= 0) { const defeatedEnemy = newEnemies[enemyIndex]; newEnemies[enemyIndex] = null; setPlayer(prev => { const xpGain = defeatedEnemy.isBoss ? 3 : 1; const newXp = prev.xp + xpGain; if (newXp >= prev.level) { // Level up! return { ...prev, level: prev.level + 1, xp: 0 }; } return { ...prev, xp: newXp }; }); if (defeatedEnemy.isBoss) { setGameState(prev => { const willLevelUp = player.xp + 3 >= player.level; return { ...prev, enemies: newEnemies, movesLeft: willLevelUp ? newMovesLeft : (prev.enemies.some(e => e !== null) ? prev.enemies.find(e => e !== null).stats.speed : 0), turn: willLevelUp ? 'player' : 'enemy', message: `Boss defeated! Gained 3 XP! ${willLevelUp ? 'Level Up!' : 'Enemy turn'}`, levelUp: willLevelUp, activeEnemyIndex: willLevelUp ? -1 : 0 }; }); } else { const hasRemainingEnemies = newEnemies.some(enemy => enemy !== null); const willLevelUp = player.xp + 1 >= player.level; setGameState(prev => ({ ...prev, enemies: newEnemies, movesLeft: willLevelUp ? newMovesLeft : (newMovesLeft <= 0 ? (hasRemainingEnemies ? newEnemies.find(e => e !== null).stats.speed : player.stats.speed) : newMovesLeft), turn: willLevelUp ? 'player' : (newMovesLeft <= 0 ? 'enemy' : 'player'), message: `Enemy defeated! Gained 1 XP! ${newMovesLeft > 0 ? `${newMovesLeft} moves left` : 'Enemy turn'}`, levelUp: willLevelUp, activeEnemyIndex: willLevelUp ? -1 : (newMovesLeft <= 0 ? 0 : -1) })); } } else { setGameState(prev => ({ ...prev, enemies: newEnemies, movesLeft: newMovesLeft, turn: newMovesLeft <= 0 ? 'enemy' : 'player', message: `You dealt ${damage} damage! ${newMovesLeft > 0 ? `${newMovesLeft} moves left` : 'Enemy turn'}`, activeEnemyIndex: newMovesLeft <= 0 ? 0 : -1 })); } } else { setPlayer(prev => ({ ...prev, position: { x: newX, y: newY } })); const newMovesLeft = gameState.movesLeft - 1; setGameState(prev => ({ ...prev, movesLeft: newMovesLeft, turn: newMovesLeft <= 0 ? 'enemy' : 'player', message: newMovesLeft <= 0 ? 'Enemy turn' : `${newMovesLeft} moves left` })); } }, [player, gameState]); React.useEffect(() => { if (gameState.turn === 'enemy' && !gameState.levelUp && !gameState.floorReward) { // Add a small delay between enemy actions const timeoutId = setTimeout(() => { // First, validate that there are actually enemies left const validEnemies = gameState.enemies.filter(e => e !== null); if (validEnemies.length === 0) { setGameState(prev => ({ ...prev, turn: 'player', message: 'Your turn!', movesLeft: player.stats.speed, activeEnemyIndex: -1 })); return; } // Get current enemy and their remaining moves const currentIndex = gameState.activeEnemyIndex === -1 ? 0 : gameState.activeEnemyIndex; const currentEnemy = gameState.enemies[currentIndex]; // If current enemy is defeated or invalid, find next enemy if (!currentEnemy) { let nextValidIndex = currentIndex + 1; while (nextValidIndex < gameState.enemies.length && !gameState.enemies[nextValidIndex]) { nextValidIndex++; } if (nextValidIndex >= gameState.enemies.length) { // No more enemies, switch to player turn setGameState(prev => ({ ...prev, turn: 'player', message: 'Your turn!', movesLeft: player.stats.speed, activeEnemyIndex: -1 })); } else { // Start next enemy's turn setGameState(prev => ({ ...prev, activeEnemyIndex: nextValidIndex, movesLeft: 1, message: `Enemy ${nextValidIndex + 1}'s turn!` })); } return; } // Get current enemy index from game state const enemyIndex = gameState.activeEnemyIndex; // If starting new enemy turn sequence if (enemyIndex === -1) { const firstValidIndex = gameState.enemies.findIndex(e => e !== null); setGameState(prev => ({ ...prev, activeEnemyIndex: firstValidIndex, movesLeft: 1 })); return; } const activeEnemy = gameState.enemies[enemyIndex]; if (!activeEnemy) { // Skip null enemies setGameState(prev => ({ ...prev, activeEnemyIndex: currentIndex + 1, movesLeft: currentIndex + 1 < prev.enemies.length && prev.enemies[currentIndex + 1] ? prev.enemies[currentIndex + 1].stats.speed : 0 })); return; } // If all enemies have acted, return to player's turn if (currentIndex >= gameState.enemies.length) { const allEnemiesDefeated = gameState.enemies.every(e => e === null); setGameState(prev => ({ ...prev, turn: 'player', message: 'Your turn!', movesLeft: player.stats.speed, activeEnemyIndex: -1, floorReward: allEnemiesDefeated })); return; } // Process current enemy const enemy = gameState.enemies[currentIndex]; if (!enemy) { setGameState(prev => ({ ...prev, activeEnemyIndex: enemyIndex + 1 })); return; } // If no moves left for current enemy, move to next enemy if (gameState.movesLeft <= 0) { let nextIndex = enemyIndex + 1; let nextEnemy = null; let foundNextEnemy = false; // Find next valid enemy while (nextIndex < gameState.enemies.length && !foundNextEnemy) { if (gameState.enemies[nextIndex]) { nextEnemy = gameState.enemies[nextIndex]; foundNextEnemy = true; } else { nextIndex++; } } const shouldEndTurn = !foundNextEnemy; const validEnemies = gameState.enemies.filter(e => e !== null); setGameState(prev => { if (shouldEndTurn) { return { ...prev, turn: 'player', message: 'Your turn!', movesLeft: player.stats.speed, activeEnemyIndex: -1, floorReward: validEnemies.length === 0 }; } return { ...prev, turn: 'enemy', message: `Enemy ${nextIndex + 1}'s turn!`, activeEnemyIndex: nextIndex, movesLeft: 1, floorReward: false }; }); return; } // Calculate distances and movement direction const dx = Math.sign(player.position.x - activeEnemy.position.x); const dy = Math.sign(player.position.y - activeEnemy.position.y); const distanceX = Math.abs(player.position.x - activeEnemy.position.x); const distanceY = Math.abs(player.position.y - activeEnemy.position.y); // Check if enemy is adjacent to player if (distanceX <= 1 && distanceY <= 1) { // Attack logic const baseDamage = activeEnemy.stats.attack; const reduction = Math.floor(player.stats.defense * 0.25); const damage = Math.max(0, baseDamage - reduction); if (damage > 0) { const newHealth = player.health - damage; setPlayer(prev => ({ ...prev, health: newHealth })); if (newHealth <= 0) { setGameState(prev => ({ ...prev, message: `Enemy ${currentIndex + 1} deals ${damage} damage! You were defeated!`, gameOver: true, turn: 'none' })); return; } const nextIndex = currentIndex + 1; let nextEnemy = null; // Find next valid enemy for (let i = nextIndex; i < gameState.enemies.length; i++) { if (gameState.enemies[i]) { nextEnemy = gameState.enemies[i]; break; } } setGameState(prev => ({ ...prev, movesLeft: nextEnemy ? nextEnemy.stats.speed : player.stats.speed, message: `Enemy ${currentIndex + 1} deals ${damage} damage!`, turn: nextEnemy ? 'enemy' : 'player', activeEnemyIndex: nextEnemy ? nextIndex : -1 })); } else { setGameState(prev => ({ ...prev, activeEnemyIndex: currentIndex + 1, message: `Enemy ${currentIndex + 1}'s attack was blocked!` })); } } else { // Move logic const newEnemies = [...gameState.enemies]; // Determine which direction to move (prioritize larger distance) let moveX = 0; let moveY = 0; if (distanceX > distanceY) { moveX = dx; } else if (distanceY > distanceX) { moveY = dy; } else { // If distances are equal, randomly choose direction if (Math.random() < 0.5) { moveX = dx; } else { moveY = dy; } } const newX = Math.max(0, Math.min(GRID_SIZE - 1, activeEnemy.position.x + moveX)); const newY = Math.max(0, Math.min(GRID_SIZE - 1, activeEnemy.position.y + moveY)); // Check if new position is occupied by another enemy const isPositionOccupied = gameState.enemies.some((e, i) => e && i !== currentIndex && e.position.x === newX && e.position.y === newY ); if (!isPositionOccupied && (newX !== activeEnemy.position.x || newY !== activeEnemy.position.y)) { newEnemies[enemyIndex] = { ...activeEnemy, position: { x: newX, y: newY } }; } const newMovesLeft = gameState.movesLeft - 1; const nextIndex = currentIndex + 1; let nextEnemy = null; // Find next valid enemy for (let i = nextIndex; i < gameState.enemies.length; i++) { if (gameState.enemies[i]) { nextEnemy = gameState.enemies[i]; break; } } const validEnemies = newEnemies.filter(e => e !== null); // Handle enemy turn progression setGameState(prev => { // Store the updated state const updatedState = { ...prev, enemies: newEnemies, movesLeft: newMovesLeft, message: `Enemy ${currentIndex + 1} moved closer! (${newMovesLeft} moves left)`, activeEnemyIndex: currentIndex }; // Schedule the next move if there are moves left if (newMovesLeft > 0) { setTimeout(() => { // Trigger next move by updating active enemy index setGameState(current => ({ ...current, activeEnemyIndex: currentIndex, message: `Enemy ${currentIndex + 1}'s next move...` })); }, 300); } else { // Find next enemy when current enemy is out of moves let nextValidIndex = currentIndex + 1; while (nextValidIndex < prev.enemies.length && !newEnemies[nextValidIndex]) { nextValidIndex++; } if (nextValidIndex >= prev.enemies.length) { // No more enemies, switch to player turn updatedState.turn = 'player'; updatedState.message = 'Your turn!'; updatedState.movesLeft = player.stats.speed; updatedState.activeEnemyIndex = -1; updatedState.floorReward = validEnemies.length === 0; } else { // Start next enemy's turn updatedState.turn = 'enemy'; updatedState.message = `Enemy ${nextValidIndex + 1}'s turn!`; updatedState.movesLeft = 1; updatedState.activeEnemyIndex = nextValidIndex; } } return updatedState; }); } }, 300); return () => clearTimeout(timeoutId); } }, [gameState.turn, gameState.activeEnemyIndex, player.position, player.stats.speed, player.health]); // Add keyboard event listener React.useEffect(() => { const handleKeyDown = (event) => { if (gameState.gameOver || gameState.levelUp) return; switch (event.key) { case 'ArrowUp': movePlayer(0, -1); break; case 'ArrowDown': movePlayer(0, 1); break; case 'ArrowLeft': movePlayer(-1, 0); break; case 'ArrowRight': movePlayer(1, 0); break; default: break; } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [movePlayer, gameState.gameOver, gameState.levelUp]); // Check if floor is cleared React.useEffect(() => { if (gameState.enemies.every(e => e === null)) { const nextFloor = gameState.floor + 1; const wasOnBossFloor = gameState.floor % 10 === 0; // Check if the next floor is a multiple of 5 if (nextFloor % 5 === 0) { setPlayer(prev => ({ ...prev, health: prev.health + 5, maxHealth: prev.maxHealth + 5 })); } setGameState(prev => ({ ...prev, floor: nextFloor, movesLeft: player.stats.speed, enemies: generateEnemies(nextFloor), turn: 'none', message: wasOnBossFloor ? `Boss floor cleared! You get 2 extra stat points! Choose your reward!` : nextFloor % 5 === 0 ? `Floor ${prev.floor} cleared! Max HP increased by 5! Choose your reward!` : `Floor ${prev.floor} cleared! Choose your reward!`, levelUp: wasOnBossFloor, floorReward: true, activeEnemyIndex: -1, bossStatPoints: wasOnBossFloor ? 2 : 0 })); } }, [gameState.enemies, player.stats.speed]); const levelUpStat = (stat) => { setPlayer(prev => ({ ...prev, stats: { ...prev.stats, [stat]: prev.stats[stat] + 1 } })); setGameState(prev => { const newMovesLeft = stat === 'speed' ? prev.movesLeft + 1 : prev.movesLeft; // Handle boss stat points first if (prev.bossStatPoints > 0) { const remainingPoints = prev.bossStatPoints - 1; return { ...prev, message: `${stat} increased!`, movesLeft: newMovesLeft, bossStatPoints: remainingPoints, levelUp: remainingPoints > 0, turn: 'player' }; } // Check if player has moves left after leveling up if (newMovesLeft > 0) { return { ...prev, message: `${stat} increased! ${newMovesLeft} moves left!`, movesLeft: newMovesLeft, turn: 'player', activeEnemyIndex: -1, levelUp: false, floorReward: false }; } // If no moves left, find first valid enemy let firstEnemy = null; let firstEnemyIndex = -1; for (let i = 0; i < prev.enemies.length; i++) { if (prev.enemies[i]) { firstEnemy = prev.enemies[i]; firstEnemyIndex = i; break; } } return { ...prev, message: firstEnemy ? `${stat} increased! No moves left - Enemy turn!` : `${stat} increased!`, movesLeft: firstEnemy ? firstEnemy.stats.speed : player.stats.speed, turn: firstEnemy ? 'enemy' : 'player', activeEnemyIndex: firstEnemyIndex, levelUp: false, floorReward: false }; }); }; if (!gameStarted) { return (

Allocate Your Stats

Points remaining: {statPointsLeft}

Current Stats:
ATK: {player.stats.attack} | DEF: {player.stats.defense} | SPD: {player.stats.speed}

Attack (ATK): Base damage dealt to enemies

Defense (DEF): Reduces incoming damage by 25% of DEF value

Speed (SPD): Number of moves you can make per turn

); } if (gameState.gameOver) { return (

Game Over

You reached floor {gameState.floor}

Final Stats:
ATK: {player.stats.attack} | DEF: {player.stats.defense} | SPD: {player.stats.speed}

); } const claimFloorReward = (type, stat = null) => { if (type === 'health') { setPlayer(prev => ({ ...prev, health: Math.min(prev.health + 5, prev.maxHealth) })); } else if (type === 'stat' && stat) { setPlayer(prev => ({ ...prev, stats: { ...prev.stats, [stat]: prev.stats[stat] + 1 } })); } setGameState(prev => ({ ...prev, floorReward: false, turn: 'player', message: type === 'health' ? 'Gained 5 HP!' : `${stat} increased!` })); }; return (

{/* Info Box */}

How to Play

• Use arrow keys to move

• Each enemy takes their turn after you move

• ATK determines damage dealt

• DEF reduces incoming damage

• SPD determines moves per turn

• Defeat enemies to level up!

{/* Top HUD - Health Bar */}

Floor {gameState.floor} | Level {player.level} ({player.xp}/{player.level} XP)

HP:

{player.health}/{player.maxHealth}

Stats: ATK {player.stats.attack} | DEF {player.stats.defense} | SPD {player.stats.speed}

Moves left: {gameState.movesLeft}

{/* Right HUD - Action Log */}

Battle Log

{gameState.message}

{/* Move selection UI removed for now */} {gameState.levelUp && (

Level {player.level}! Choose a stat to increase:

)} {gameState.floorReward && (

Floor Cleared! Choose your reward:

)}

{Array(GRID_SIZE * GRID_SIZE).fill(null).map((_, index) => { const x = index % GRID_SIZE; const y = Math.floor(index / GRID_SIZE); const isPlayer = player.position.x === x && player.position.y === y; const enemy = gameState.enemies.find(e => e && x >= e.position.x && x < e.position.x + e.size.width && y >= e.position.y && y < e.position.y + e.size.height ); const isBossCenter = enemy?.isBoss && x === enemy.position.x && y === enemy.position.y; return (

{isBossCenter && enemy.health}

); })}

{/* Bottom HUD - Enemy Stats */}

{gameState.enemies.map((enemy, index) => enemy && (

{enemy.isBoss ? `Boss (Level ${enemy.bossLevel})` : `Enemy ${index + 1}`}

HP:

{enemy.health}/{enemy.isBoss ? 50 : 5}

ATK: {enemy.stats.attack} | DEF: {enemy.stats.defense}

))}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();