import React, { useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; const GRID_SIZE = 8; const BASE_ENEMIES_PER_FLOOR = 3; const getEnemiesForFloor = (floor) => { if (floor <= 10) return BASE_ENEMIES_PER_FLOOR; // Calculate extra enemies based on floor number after floor 10 const extraEnemies = Math.floor((floor - 10) / 5); return BASE_ENEMIES_PER_FLOOR + extraEnemies; }; const App = () => { const [showTitle, setShowTitle] = useState(true); const [showSecondTitle, setShowSecondTitle] = useState(false); const [showThirdTitle, setShowThirdTitle] = useState(false); const [titleScale, setTitleScale] = useState(0.1); const [secondTitlePosition, setSecondTitlePosition] = useState(100); const [statPointsLeft, setStatPointsLeft] = useState(3); const [gameStarted, setGameStarted] = useState(false); const [selectedSprite, setSelectedSprite] = useState(null); const initialPlayerState = { position: { x: 0, y: 0 }, stats: { attack: 1, defense: 1, speed: 1 }, health: 10, maxHealth: 10, level: 1, xp: 0, copper: 0, inventory: [], // [{name: string, count: number}] activeBuffs: { attack: 0, defense: 0, speed: 0 } }; const generateEnemies = (floor) => { const usedPositions = new Set(); usedPositions.add(`0,0`); // Player starts at 0,0 // Generate traps starting from floor 2 let traps = []; if (floor >= 2) { const baseNumber = Math.floor(Math.random() * 100) + 1; const totalNumber = baseNumber + floor; const trapCount = Math.floor(totalNumber / 20); for (let i = 0; i < trapCount; i++) { let trapX, trapY; do { trapX = Math.floor(Math.random() * GRID_SIZE); trapY = Math.floor(Math.random() * GRID_SIZE); } while (usedPositions.has(`${trapX},${trapY}`)); usedPositions.add(`${trapX},${trapY}`); traps.push({ x: trapX, y: trapY }); } } 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 { enemies: [{ position: { x: bossX, y: bossY }, size: { width: 2, height: 2 }, stats: { attack: 8 + statIncrease, defense: 12 + statIncrease }, health: 50 + (statIncrease * 4), maxHealth: 50 + (statIncrease * 4), isBoss: true, bossLevel: bossLevel }], traps: [] }; } const enemyCount = getEnemiesForFloor(floor); const enemies = Array(enemyCount).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 + (statIncrease * 2), // Health increases with attack and defense maxHealth: 5 + (statIncrease * 2), // Track max health too isBoss: false }; }); return { enemies, traps }; }; const [player, setPlayer] = useState(initialPlayerState); const selectRandomItems = () => { const allItems = [ { name: 'Healing Elixir', description: 'Heals 10 HP' }, { name: 'Attack Booster', description: '+2 Attack permanently' }, { name: 'Defense Booster', description: '+4 Defense permanently' }, { name: 'Speed Booster', description: '+2 Speed permanently' }, { name: 'Quick Attack', description: 'Gives you 1 extra move' } ]; const shuffled = [...allItems].sort(() => 0.5 - Math.random()); return shuffled.slice(0, 2); }; const initialGameState = { floor: 1, movesLeft: initialPlayerState.stats.speed, enemies: generateEnemies(1).enemies, traps: generateEnemies(1).traps, turn: 'player', particleEffects: [], // [{x: number, y: number, type: 'attack' | 'death', createdAt: number}] isMerchantFloor: false, showMerchant: false, merchantItems: [], 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); // Cleanup particle effects after animation React.useEffect(() => { if (gameState.particleEffects.length > 0) { const cleanup = setTimeout(() => { setGameState(prev => ({ ...prev, particleEffects: prev.particleEffects.filter(effect => Date.now() - effect.createdAt < 500 ) })); }, 500); return () => clearTimeout(cleanup); } }, [gameState.particleEffects]); 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.floorReward || gameState.showMerchant || 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 trap at new position const trapAt = gameState.traps.find(trap => trap.x === newX && trap.y === newY); if (trapAt) { const trapDamage = Math.max(1, 5 - Math.floor(player.stats.defense * 0.25)); const newHealth = player.health - trapDamage; setPlayer(prev => ({ ...prev, health: newHealth })); if (newHealth <= 0) { setGameState(prev => ({ ...prev, message: `You took ${trapDamage} damage from a trap and were defeated!`, gameOver: true, turn: 'none' })); return; } setGameState(prev => ({ ...prev, message: `You took ${trapDamage} damage from a trap!`, traps: prev.traps.filter(t => t.x !== newX || t.y !== newY) })); } // 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, maxHealth: enemy.maxHealth // Preserve maxHealth on damage update }; if (newEnemies[enemyIndex].health <= 0) { const defeatedEnemy = newEnemies[enemyIndex]; const enemyPosition = { ...defeatedEnemy.position }; newEnemies[enemyIndex] = null; // Add death particle effect setGameState(prev => ({ ...prev, particleEffects: [ ...prev.particleEffects, { x: enemyPosition.x, y: enemyPosition.y, type: 'death', createdAt: Date.now() } ] })); setPlayer(prev => { const copperGain = defeatedEnemy.isBoss ? 50 : 1; const xpGain = defeatedEnemy.isBoss ? 3 : 1; const newXp = prev.xp + xpGain; const newCopper = prev.copper + copperGain; if (newXp >= prev.level) { // Level up! return { ...prev, level: prev.level + 1, xp: 0, copper: newCopper }; } return { ...prev, xp: newXp, copper: newCopper }; }); 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, particleEffects: [ ...prev.particleEffects, { x: newX, y: newY, type: 'attack', createdAt: Date.now() } ] })); } } 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 const isAdjacent = activeEnemy.isBoss ? // For boss, check if any part of its 2x2 area is adjacent to player (Math.abs(player.position.x - activeEnemy.position.x) <= 2 && Math.abs(player.position.y - activeEnemy.position.y) <= 2 && // Check if player is truly adjacent to any part of boss area ((Math.abs(player.position.x - activeEnemy.position.x) <= 1 && player.position.y >= activeEnemy.position.y && player.position.y <= activeEnemy.position.y + 1) || (Math.abs(player.position.x - (activeEnemy.position.x + 1)) <= 1 && player.position.y >= activeEnemy.position.y && player.position.y <= activeEnemy.position.y + 1) || (Math.abs(player.position.y - activeEnemy.position.y) <= 1 && player.position.x >= activeEnemy.position.x && player.position.x <= activeEnemy.position.x + 1) || (Math.abs(player.position.y - (activeEnemy.position.y + 1)) <= 1 && player.position.x >= activeEnemy.position.x && player.position.x <= activeEnemy.position.x + 1))) : // For regular enemies, use normal adjacent check (distanceX <= 1 && distanceY <= 1); if (isAdjacent) { // 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; setGameState(prev => ({ ...prev, particleEffects: [ ...prev.particleEffects, { x: player.position.x, y: player.position.y, type: 'damage', createdAt: Date.now() } ] })); 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 (activeEnemy.isBoss) { // For boss, calculate center point of boss area const bossCenterX = activeEnemy.position.x + 0.5; const bossCenterY = activeEnemy.position.y + 0.5; // Calculate direction from boss center to player const dxFromCenter = Math.sign(player.position.x - bossCenterX); const dyFromCenter = Math.sign(player.position.y - bossCenterY); // Calculate distances from center const distanceXFromCenter = Math.abs(player.position.x - bossCenterX); const distanceYFromCenter = Math.abs(player.position.y - bossCenterY); // Choose movement direction based on larger distance if (distanceXFromCenter > distanceYFromCenter) { moveX = dxFromCenter; } else if (distanceYFromCenter > distanceXFromCenter) { moveY = dyFromCenter; } else { // If distances are equal, randomly choose direction if (Math.random() < 0.5) { moveX = dxFromCenter; } else { moveY = dyFromCenter; } } } else { // Regular enemy movement logic 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) => { if (!e || i === currentIndex) return false; if (activeEnemy.isBoss) { // Check if any part of the boss's new 2x2 area would overlap with another enemy const bossArea = [ [newX, newY], [newX + 1, newY], [newX, newY + 1], [newX + 1, newY + 1] ]; return bossArea.some(([x, y]) => e.position.x === x && e.position.y === y ); } else { // Regular enemy collision check if (e.isBoss) { // Check if the regular enemy would overlap with any part of a boss return newX >= e.position.x && newX < e.position.x + 2 && newY >= e.position.y && newY < e.position.y + 2; } return 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 })); } const newEnemies = generateEnemies(nextFloor); setGameState(prev => ({ ...prev, floor: nextFloor, movesLeft: player.stats.speed, enemies: newEnemies.enemies, traps: newEnemies.traps, turn: 'player', message: wasOnBossFloor ? `Boss floor cleared! You get 2 extra stat points!` : 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: !wasOnBossFloor, activeEnemyIndex: -1, bossStatPoints: wasOnBossFloor ? 2 : 0, merchantItems: wasOnBossFloor ? selectRandomItems() : [], showMerchant: false })); } }, [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', showMerchant: remainingPoints === 0 }; } // 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 }; }); }; React.useEffect(() => { if (showTitle) { const startTime = Date.now(); const duration = 5000; // 5 seconds const updateScale = () => { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); // Use easeOut function for smoother animation const easeOut = (t) => 1 - Math.pow(1 - t, 2); const newScale = 0.1 + easeOut(progress) * 0.9; // Scale from 0.1 to 1.0 setTitleScale(newScale); if (progress < 1) { requestAnimationFrame(updateScale); } else { setTimeout(() => { setShowTitle(false); setShowSecondTitle(true); }, 500); } }; requestAnimationFrame(updateScale); } }, [showTitle]); React.useEffect(() => { if (showThirdTitle) { const timeoutId = setTimeout(() => { setShowThirdTitle(false); }, 5000); return () => clearTimeout(timeoutId); } }, [showThirdTitle]); React.useEffect(() => { if (showSecondTitle) { const startTime = Date.now(); const duration = 5000; // 5 seconds const updatePosition = () => { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); // Pan from bottom (100%) to top (0%) of the actual image content const newPosition = 100 - (progress * 100); setSecondTitlePosition(newPosition); if (progress < 1) { requestAnimationFrame(updatePosition); } else { setTimeout(() => { setShowSecondTitle(false); setShowThirdTitle(true); }, 500); } }; requestAnimationFrame(updatePosition); } }, [showSecondTitle]); if (showTitle) { return (

); } if (showSecondTitle) { return (

); } if (showThirdTitle) { return (

); } if (!gameStarted) { if (!selectedSprite) { return (

Choose Your Character

setSelectedSprite('chrome_Mif9e3BF8s')} style={{ cursor: 'pointer', padding: '20px', border: '2px solid transparent', borderRadius: '10px', transition: 'all 0.3s', backgroundColor: 'rgba(255, 255, 255, 0.1)', ':hover': { borderColor: '#4444ff', backgroundColor: 'rgba(255, 255, 255, 0.2)' } }} > Character 1

setSelectedSprite('chrome_I73Lnrey9V')} style={{ cursor: 'pointer', padding: '20px', border: '2px solid transparent', borderRadius: '10px', transition: 'all 0.3s', backgroundColor: 'rgba(255, 255, 255, 0.1)', ':hover': { borderColor: '#4444ff', backgroundColor: 'rgba(255, 255, 255, 0.2)' } }} > Character 2

); } 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}

Inventory: {player.inventory.map((item, index) => (

{ if (gameState.turn !== 'player') return; const newInventory = [...player.inventory]; newInventory[index] = { ...item, count: item.count - 1 }; // Remove item if count reaches 0 if (newInventory[index].count <= 0) { newInventory.splice(index, 1); } switch(item.name) { case 'Healing Elixir': setPlayer(prev => ({ ...prev, health: Math.min(prev.health + 10, prev.maxHealth), inventory: newInventory })); setGameState(prev => ({ ...prev, message: 'Used Healing Elixir! Restored 10 HP!' })); break; case 'Attack Booster': setPlayer(prev => ({ ...prev, inventory: newInventory, stats: { ...prev.stats, attack: prev.stats.attack + 2 } })); setGameState(prev => ({ ...prev, message: 'Used Attack Booster! Attack +2 permanently!' })); break; case 'Defense Booster': setPlayer(prev => ({ ...prev, inventory: newInventory, stats: { ...prev.stats, defense: prev.stats.defense + 4 } })); setGameState(prev => ({ ...prev, message: 'Used Defense Booster! Defense +4 permanently!' })); break; case 'Speed Booster': setPlayer(prev => ({ ...prev, inventory: newInventory, stats: { ...prev.stats, speed: prev.stats.speed + 2 } })); setGameState(prev => ({ ...prev, message: 'Used Speed Booster! Speed +2 permanently!' })); break; case 'Quick Attack': setPlayer(prev => ({ ...prev, inventory: newInventory })); setGameState(prev => ({ ...prev, movesLeft: prev.movesLeft + 1, message: 'Used Quick Attack! Gained 1 extra move!' })); break; } }} style={{ cursor: gameState.turn === 'player' ? 'pointer' : 'not-allowed', color: gameState.turn === 'player' ? '#fff' : '#666', padding: '2px 5px', margin: '2px 0', borderRadius: '3px', backgroundColor: 'rgba(255, 255, 255, 0.1)' }} > {item.name} x{item.count}

))}

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

Copper: {player.copper}

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:

)} {/* Merchant popup removed */} {gameState.showMerchant && (

A Wandering Merchant Appears!

The merchant offers you these items:

Your Copper: {player.copper}

{gameState.merchantItems.map((item, index) => (

= 50 ? 'pointer' : 'not-allowed', opacity: player.copper >= 50 ? 1 : 0.5 }} onClick={() => { if (player.copper >= 50) { setPlayer(prev => ({ ...prev, copper: prev.copper - 50, inventory: [ ...prev.inventory, { name: item.name, count: 1 } ].reduce((acc, currentItem) => { const existing = acc.find(i => i.name === currentItem.name); if (existing) { existing.count += currentItem.count; return acc; } return [...acc, currentItem]; }, []) })); setGameState(prev => ({ ...prev, message: `Purchased ${item.name}!` })); } }} >

{item.name}

{item.description}

Cost: 50 copper

))}

)}

{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 (

trap.x === x && trap.y === y) ? 'url(https://play.rosebud.ai/assets/chrome_A8QvQQLwhh.png?6HSl)' : 'none', backgroundSize: enemy?.isBoss ? `${100 * enemy.size.width}% ${100 * enemy.size.height}%` : 'cover', backgroundPosition: enemy?.isBoss ? `${x === enemy.position.x ? '0%' : '100%'} ${y === enemy.position.y ? '0%' : '100%'}` : 'center', backgroundRepeat: 'no-repeat', opacity: gameState.traps.some(trap => trap.x === x && trap.y === y) ? 0.7 : 1 }}> {isBossCenter && enemy.health} {gameState.particleEffects.some(effect => effect.x === x && effect.y === y) && (

effect.x === x && effect.y === y )?.type === 'damage' ? '#FF4444' : '#FFD700', borderRadius: '50%', animation: 'particle-burst 0.5s ease-out forwards' }}/>

)}

); })}

{/* Bottom HUD - Enemy Stats */}

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

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

HP:

{enemy.health}/{enemy.maxHealth}

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

))}

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