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 [audio] = useState(() => { const audioElement = new Audio('https://play.rosebud.ai/assets/Rise%20of%20the%20Heroes.mp3?Dgb6'); audioElement.preload = 'auto'; audioElement.volume = 0; // Start muted to prevent sudden sound audioElement.volume = 0.25; // Set volume to 25% audioElement.addEventListener('canplaythrough', () => { console.log('Audio ready to play'); }); audioElement.addEventListener('error', (e) => { console.error('Audio loading error:', e); // Fallback to secondary URL if primary fails audioElement.src = 'https://play.rosebud.ai/assets/Rise%20of%20the%20Heroes.mp3?Dgb6'; audioElement.load(); }); return audioElement; }); // Initialize multiple attack sounds and enemy attack sound for faster response const [attackSounds] = useState(() => { const sounds = Array(3).fill(null).map(() => { const sound = new Audio('https://play.rosebud.ai/assets/Video_Game_karate_sy.mp3?LSq0'); sound.preload = 'auto'; sound.volume = 0.4; return sound; }); return sounds; }); const [rangedAttackSound] = useState(() => { const sound = new Audio('https://play.rosebud.ai/assets/@Fantasy_Skeleton_Arc.mp3?Il3L'); sound.preload = 'auto'; sound.volume = 0.3; return sound; }); const [enemyAttackSound] = useState(() => { const sound = new Audio('https://play.rosebud.ai/assets/@Fantasy_Skeleton_Att.mp3?KGLM'); sound.preload = 'auto'; sound.volume = 0.3; return sound; }); const [magicAttackSound] = useState(() => { const sound = new Audio('https://play.rosebud.ai/assets/@Fantasy_Skeleton_Mag.mp3?LLba'); sound.preload = 'auto'; sound.volume = 0.3; return sound; }); const [currentSoundIndex, setCurrentSoundIndex] = useState(0); const [isAudioOn, setIsAudioOn] = useState(true); 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 [showHowToPlay, setShowHowToPlay] = useState(true); // Store new run inventory const [newRunInventory, setNewRunInventory] = useState([]); const getInitialPlayerState = (characterType, initialInventory = []) => { // Define starting stats based on the character selected let stats = { attack: 1, defense: 1, speed: 1 }; if (characterType === 'chrome_Mif9e3BF8s') { // Rictor stats = { attack: 4, defense: 1, speed: 1 }; } else if (characterType === 'chrome_I73Lnrey9V') { // Em stats = { attack: 1, defense: 1, speed: 4 }; } else if (characterType === 'chrome_lwvYSfcs80') { // Star stats = { attack: 1, defense: 4, speed: 1 }; } return { position: { x: 0, y: 0 }, stats: stats, health: 10, maxHealth: 10, level: 1, xp: 0, copper: 0, inventory: [...initialInventory], // [{name: string, count: number}] activeBuffs: { attack: 0, defense: 0, speed: 0 } }; }; const initialPlayerState = getInitialPlayerState(null); 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}`); // Initialize enemies array with the boss(es) const enemies = [{ position: { x: bossX, y: bossY }, size: { width: 2, height: 2 }, stats: { attack: 8 + statIncrease, defense: 12 + statIncrease }, health: 50 + (statIncrease * 4) + statIncrease, maxHealth: 50 + (statIncrease * 4) + statIncrease, isBoss: true, bossLevel: bossLevel }]; // Add second boss for every other boss floor (20, 40, 60, etc.) if (floor % 20 === 0) { let secondBossX, secondBossY; do { secondBossX = Math.floor(Math.random() * (GRID_SIZE - 1)); secondBossY = Math.floor(Math.random() * (GRID_SIZE - 1)); } while ( usedPositions.has(`${secondBossX},${secondBossY}`) || usedPositions.has(`${secondBossX + 1},${secondBossY}`) || usedPositions.has(`${secondBossX},${secondBossY + 1}`) || usedPositions.has(`${secondBossX + 1},${secondBossY + 1}`) ); // Mark second boss positions as used usedPositions.add(`${secondBossX},${secondBossY}`); usedPositions.add(`${secondBossX + 1},${secondBossY}`); usedPositions.add(`${secondBossX},${secondBossY + 1}`); usedPositions.add(`${secondBossX + 1},${secondBossY + 1}`); // Add second boss with same stats enemies.push({ position: { x: secondBossX, y: secondBossY }, size: { width: 2, height: 2 }, stats: { attack: 8 + statIncrease, defense: 12 + statIncrease }, health: 50 + (statIncrease * 4) + statIncrease, maxHealth: 50 + (statIncrease * 4) + statIncrease, isBoss: true, bossLevel: bossLevel }); } // Add regular enemies appropriate to the floor number const regularEnemyCount = Math.floor(getEnemiesForFloor(floor) / 2); // Half the normal amount for (let i = 0; i < regularEnemyCount; i++) { 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}`); enemies.push({ position: { x, y }, size: { width: 1, height: 1 }, stats: { attack: 1 + statIncrease, defense: 1 + statIncrease }, health: 5 + statIncrease, maxHealth: 5 + statIncrease, isBoss: false, isRanged: false }); } return { enemies: enemies, traps: [] }; } const enemyCount = getEnemiesForFloor(floor); const enemies = []; // Add one ranged enemy on every 3rd floor if (floor % 3 === 0 && floor > 1) { const statIncrease = Math.floor((floor - 1) / 2); // Only add one ranged enemy { 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}`); enemies.push({ position: { x, y }, size: { width: 1, height: 1 }, stats: { attack: 2 + statIncrease, defense: 1 + statIncrease }, health: 4 + statIncrease, maxHealth: 4 + statIncrease, isBoss: false, isRanged: true, rangeAttackDamage: 2 + Math.floor(statIncrease / 2) }); } } // Add a close-range magic enemy on floors divisible by 4 if (floor % 4 === 0 && floor > 0) { const statIncrease = Math.floor((floor - 1) / 2); // Only add one magic enemy { 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}`); enemies.push({ position: { x, y }, size: { width: 1, height: 1 }, stats: { attack: 3 + statIncrease, defense: 1 + statIncrease }, health: 6 + statIncrease, maxHealth: 6 + statIncrease, isBoss: false, isRanged: false, isMagic: true, magicAttackDamage: 3 + Math.floor(statIncrease / 2), magicAttackRange: 3 }); } } // Fill the remaining enemy count with regular enemies const regularEnemyCount = enemyCount - enemies.length; for (let i = 0; i < regularEnemyCount; i++) { 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}`); enemies.push({ position: { x, y }, size: { width: 1, height: 1 }, stats: { attack: 1 + statIncrease, defense: 1 + statIncrease }, health: 5 + statIncrease, maxHealth: 5 + statIncrease, isBoss: false, isRanged: 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 for one round' }, { 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 the first two items 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 = (withInventory = [], withCopper = 0) => { setStatPointsLeft(3); setGameStarted(false); setShowHowToPlay(true); // Clear out all state first const initialState = getInitialPlayerState(null); // Set the inventory for the new run and copper // Deep clone the inventory to avoid reference issues setNewRunInventory( withInventory.map(item => ({ name: item.name, count: item.count })) ); // Reset player with copper setPlayer({ ...initialState, copper: withCopper }); setSelectedSprite(null); // Don't reset newRunInventory here - we need to keep it until character selection // Generate fresh enemies for the new run const firstFloorEnemies = generateEnemies(1); setGameState({ ...initialGameState, enemies: firstFloorEnemies.enemies, traps: firstFloorEnemies.traps, movesLeft: initialState.stats.speed, gameOver: false }); }; 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.5)); 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]; // Play attack sound // Play the next available sound immediately without resetting const sound = attackSounds[currentSoundIndex]; sound.play().catch(error => console.log('Attack sound play failed:', error)); setCurrentSoundIndex((prevIndex) => (prevIndex + 1) % attackSounds.length); const baseDamage = player.stats.attack; const reduction = Math.floor(enemy.stats.defense * 0.5); 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]; 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 ranged enemy can shoot (player is in same row or column) const canShoot = activeEnemy.isRanged && ((distanceX === 0 && distanceY > 0) || (distanceY === 0 && distanceX > 0)); // Check if magic enemy can cast spell (player is within range) const canCastMagic = activeEnemy.isMagic && (distanceX + distanceY <= activeEnemy.magicAttackRange); // 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 (canShoot) { // Ranged attack logic const baseDamage = activeEnemy.rangeAttackDamage; const reduction = Math.floor(player.stats.defense * 0.4); // Less reduction for ranged attacks const damage = Math.max(0, baseDamage - reduction); if (damage > 0) { // Play enemy attack sound for ranged attack with volume check if (isAudioOn) { rangedAttackSound.currentTime = 0; rangedAttackSound.volume = 0.3; rangedAttackSound.play().catch(error => console.log('Ranged attack sound failed:', error)); } const newHealth = player.health - damage; setGameState(prev => ({ ...prev, particleEffects: [ ...prev.particleEffects, { x: player.position.x, y: player.position.y, type: 'damage', createdAt: Date.now() } ] })); // Add projectile effect const rangedLine = []; if (distanceX === 0) { // Vertical line const minY = Math.min(player.position.y, activeEnemy.position.y); const maxY = Math.max(player.position.y, activeEnemy.position.y); for (let y = minY + 1; y < maxY; y++) { rangedLine.push({ x: player.position.x, y }); } } else { // Horizontal line const minX = Math.min(player.position.x, activeEnemy.position.x); const maxX = Math.max(player.position.x, activeEnemy.position.x); for (let x = minX + 1; x < maxX; x++) { rangedLine.push({ x, y: player.position.y }); } } // Add a traveling projectile from enemy to player rangedLine.forEach((pos, idx) => { setTimeout(() => { setGameState(prev => ({ ...prev, particleEffects: [ ...prev.particleEffects, { x: pos.x, y: pos.y, type: 'rangedAttack', // New type for ranged attacks createdAt: Date.now(), fromEnemy: true } ] })); }, idx * 80); // Slightly slower to make it more visible }); setPlayer(prev => ({ ...prev, health: newHealth })); if (newHealth <= 0) { setGameState(prev => ({ ...prev, message: `Ranged enemy deals ${damage} damage from a distance! 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: `Ranged enemy shoots for ${damage} damage!`, turn: nextEnemy ? 'enemy' : 'player', activeEnemyIndex: nextEnemy ? nextIndex : -1 })); } else { setGameState(prev => ({ ...prev, activeEnemyIndex: currentIndex + 1, message: `Ranged enemy's shot was blocked!` })); } } else if (canCastMagic) { // Magic attack logic const baseDamage = activeEnemy.magicAttackDamage; const reduction = Math.floor(player.stats.defense * 0.3); // Even less reduction for magic attacks const damage = Math.max(0, baseDamage - reduction); if (damage > 0) { // Play magic attack sound with volume check if (isAudioOn) { magicAttackSound.currentTime = 0; magicAttackSound.volume = 0.3; magicAttackSound.play().catch(error => console.log('Magic attack sound failed:', error)); } const newHealth = player.health - damage; // Visualize magic path from enemy to player // Create a path of particles from the enemy to the player const path = []; const stepCount = Math.max(distanceX, distanceY) * 2; // Double steps for smoother animation for (let i = 1; i <= stepCount; i++) { const progress = i / stepCount; // Use linear interpolation for x and y const pathX = Math.round(activeEnemy.position.x + (player.position.x - activeEnemy.position.x) * progress); const pathY = Math.round(activeEnemy.position.y + (player.position.y - activeEnemy.position.y) * progress); // Don't add duplicate positions if (path.length === 0 || path[path.length-1].x !== pathX || path[path.length-1].y !== pathY) { path.push({ x: pathX, y: pathY }); } } // Add magic effect along path path.forEach((pos, idx) => { setTimeout(() => { setGameState(prev => ({ ...prev, particleEffects: [ ...prev.particleEffects, { x: pos.x, y: pos.y, type: 'magicAttack', // New type for magic attacks createdAt: Date.now(), fromEnemy: true } ] })); }, idx * 70); // Slightly slower to make it more visible }); // Add damage effect at player position setTimeout(() => { setGameState(prev => ({ ...prev, particleEffects: [ ...prev.particleEffects, { x: player.position.x, y: player.position.y, type: 'damage', createdAt: Date.now() } ] })); }, path.length * 70); setPlayer(prev => ({ ...prev, health: newHealth })); if (newHealth <= 0) { setGameState(prev => ({ ...prev, message: `Magic enemy casts a spell for ${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: `Magic enemy casts a spell for ${damage} damage!`, turn: nextEnemy ? 'enemy' : 'player', activeEnemyIndex: nextEnemy ? nextIndex : -1 })); } else { setGameState(prev => ({ ...prev, activeEnemyIndex: currentIndex + 1, message: `Magic enemy's spell was resisted!` })); } } else if (isAdjacent) { // Attack logic for adjacent enemies const baseDamage = activeEnemy.stats.attack; const reduction = Math.floor(player.stats.defense * 0.5); const damage = Math.max(0, baseDamage - reduction); if (damage > 0) { // Play enemy attack sound with volume check if (isAudioOn) { enemyAttackSound.currentTime = 0; enemyAttackSound.volume = 0.3; enemyAttackSound.play().catch(error => console.log('Enemy attack sound failed:', error)); } 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 let moveX = 0; let moveY = 0; if (activeEnemy.isBoss) { // Boss movement logic (unchanged) const bossCenterX = activeEnemy.position.x + 0.5; const bossCenterY = activeEnemy.position.y + 0.5; const dxFromCenter = Math.sign(player.position.x - bossCenterX); const dyFromCenter = Math.sign(player.position.y - bossCenterY); const distanceXFromCenter = Math.abs(player.position.x - bossCenterX); const distanceYFromCenter = Math.abs(player.position.y - bossCenterY); if (distanceXFromCenter > distanceYFromCenter) { moveX = dxFromCenter; } else if (distanceYFromCenter > distanceXFromCenter) { moveY = dyFromCenter; } else { if (Math.random() < 0.5) { moveX = dxFromCenter; } else { moveY = dyFromCenter; } } } else if (activeEnemy.isRanged) { // Ranged enemy tries to move away from player to maintain distance // and tries to align horizontally or vertically for shooting // If already aligned and at good distance (>2), try to maintain alignment const isAligned = distanceX === 0 || distanceY === 0; const goodDistance = distanceX > 2 || distanceY > 2; if (isAligned && goodDistance) { // Try to maintain alignment but increase distance if possible if (distanceX === 0) { // Vertically aligned - move farther away vertically moveY = -dy; } else { // Horizontally aligned - move farther away horizontally moveX = -dx; } } else if (isAligned) { // Aligned but too close - move away diagonally to maintain some distance moveX = -dx; moveY = -dy; } else { // Not aligned - try to get aligned while keeping distance // Decide which alignment would be better (horizontal or vertical) if (distanceX < distanceY) { // Try to align horizontally (get X to match) moveX = dx; // But also try to increase Y distance if (distanceY < 3) moveY = -dy; } else { // Try to align vertically (get Y to match) moveY = dy; // But also try to increase X distance if (distanceX < 3) moveX = -dx; } } // Ensure we're actually moving somewhere if (moveX === 0 && moveY === 0) { moveX = Math.random() < 0.5 ? -1 : 1; } } else if (activeEnemy.isMagic) { // Magic enemy tries to maintain optimal distance (2-3 squares) const totalDistance = distanceX + distanceY; if (totalDistance <= 1) { // Too close, move away moveX = -dx; moveY = -dy; } else if (totalDistance > 3) { // Too far, move closer moveX = dx; moveY = dy; } else { // At optimal distance, move to flanking position // Try to move perpendicular to the player if (distanceX > distanceY) { moveY = Math.random() < 0.5 ? 1 : -1; } else { moveX = Math.random() < 0.5 ? 1 : -1; } } } else { // Regular enemy movement logic (unchanged) if (distanceX > distanceY) { moveX = dx; } else if (distanceY > distanceX) { moveY = dy; } else { 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 and mobile detection const [isMobile, setIsMobile] = React.useState(false); // Detect mobile device React.useEffect(() => { const checkIfMobile = () => { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768; }; setIsMobile(checkIfMobile()); const handleResize = () => { setIsMobile(checkIfMobile()); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); // Add keyboard event listener (still useful for desktop) 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]); // Hide "How to Play" after 15 seconds React.useEffect(() => { if (gameStarted && showHowToPlay) { const hideInfoTimeout = setTimeout(() => { setShowHowToPlay(false); }, 15000); return () => clearTimeout(hideInfoTimeout); } }, [gameStarted, showHowToPlay]); // Audio management const [audioStarted, setAudioStarted] = React.useState(false); const startAudio = React.useCallback(() => { if (!audioStarted) { // Force load the audio if not ready if (audio.readyState < 2) { audio.load(); } const startPromise = async () => { try { audio.loop = true; await audio.play(); // Fade in volume let vol = 0; const fadeIn = setInterval(() => { if (vol < (isAudioOn ? 0.25 : 0)) { vol += 0.025; audio.volume = vol; } else { clearInterval(fadeIn); } }, 100); console.log("Audio playback started successfully"); setAudioStarted(true); } catch (error) { console.error("Audio playback failed:", error); // Retry once after a short delay setTimeout(() => { audio.play().catch(e => console.error("Retry failed:", e)); }, 1000); } }; startPromise(); } }, [audio, audioStarted, isAudioOn]); const toggleAudio = React.useCallback(() => { setIsAudioOn(prev => !prev); audio.volume = isAudioOn ? 0 : 0.25; }, [audio, isAudioOn]); React.useEffect(() => { return () => { audio.pause(); audio.currentTime = 0; attackSounds.forEach(sound => { sound.pause(); sound.currentTime = 0; }); enemyAttackSound.pause(); enemyAttackSound.currentTime = 0; rangedAttackSound.pause(); rangedAttackSound.currentTime = 0; magicAttackSound.pause(); magicAttackSound.currentTime = 0; }; }, [audio, attackSounds, enemyAttackSound]); 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 (

{ e.preventDefault(); startAudio(); }} style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', backgroundColor: 'black', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 3000, cursor: 'pointer' }}> {!audioStarted && (

Click anywhere to start the game with sound

)}

); } if (showSecondTitle) { return (

); } if (showThirdTitle) { return (

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

Choose Your Character

{ setSelectedSprite('chrome_Mif9e3BF8s'); // Pass inventory directly to getInitialPlayerState const initialState = getInitialPlayerState('chrome_Mif9e3BF8s', newRunInventory); setPlayer({ ...initialState, copper: player.copper }); console.log("Items for new run:", newRunInventory); }} 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

Rictor

ATK: 4 | DEF: 1 | SPD: 1

{ setSelectedSprite('chrome_I73Lnrey9V'); // Pass inventory directly to getInitialPlayerState const initialState = getInitialPlayerState('chrome_I73Lnrey9V', newRunInventory); setPlayer({ ...initialState, copper: player.copper }); console.log("Items for new run:", newRunInventory); }} 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

ATK: 1 | DEF: 1 | SPD: 4

{ setSelectedSprite('chrome_lwvYSfcs80'); // Pass inventory directly to getInitialPlayerState const initialState = getInitialPlayerState('chrome_lwvYSfcs80', newRunInventory); setPlayer({ ...initialState, copper: player.copper }); console.log("Items for new run:", newRunInventory); }} 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 3

Star

ATK: 1 | DEF: 4 | SPD: 1

); } 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 50% of DEF value

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

); } // Already moved to the top of the component 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}

Merchant

Buy items for your next run with {player.copper} copper

{/* Use all items instead of a random selection */} {[ { name: 'Healing Elixir', description: 'Heals 10 HP' }, { name: 'Attack Booster', description: '+2 Attack for one round' }, { name: 'Defense Booster', description: '+4 Defense permanently' }, { name: 'Speed Booster', description: '+2 Speed permanently' }, { name: 'Quick Attack', description: 'Gives you 1 extra move' } ].map((item, index) => (

{item.name}

{item.description}

))}

{newRunInventory.length > 0 && (

Items for next run:

{newRunInventory.map((item, idx) => (

{item.name} x{item.count}

))}

)}

); } 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 */} {showHowToPlay && (

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!

)} {/* Volume Control */}

{isAudioOn ? '🔊' : '🔇'}

{/* Top HUD - Health Bar */}

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

HP:

{player.health}/{player.maxHealth}

Inventory:

{player.inventory.length === 0 ? (

No items

) : ( 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 for this round!' })); 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 an extra move!' })); break; } }} style={{ cursor: gameState.turn === 'player' ? 'pointer' : 'not-allowed', color: gameState.turn === 'player' ? '#fff' : '#666', padding: '1px 3px', margin: '1px 0', borderRadius: '3px', backgroundColor: 'rgba(255, 255, 255, 0.1)', fontSize: '10px' }} >

{item.name} x{item.count}

)) )}

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

🪙 {player.copper} copper

Moves: {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, display: 'flex', alignItems: 'center', gap: '10px' }} 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

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

{ const effect = gameState.particleEffects.find( effect => effect.x === x && effect.y === y ); if (effect?.type === 'damage') return '#FF4444'; if (effect?.type === 'rangedAttack') return '#44AAFF'; if (effect?.type === 'magicAttack') return '#AA44FF'; return '#FFD700'; })(), borderRadius: (() => { const effect = gameState.particleEffects.find( effect => effect.x === x && effect.y === y ); // Shape for different particle types if (effect?.type === 'rangedAttack') return '0% 50% 50% 50%'; if (effect?.type === 'magicAttack') return '40%'; return '50%'; })(), transform: (() => { const effect = gameState.particleEffects.find( effect => effect.x === x && effect.y === y ); // Rotate based on direction if (effect?.type === 'rangedAttack') { // Determine direction based on player and enemy positions const playerX = player.position.x; const playerY = player.position.y; if (playerX === x) { return playerY > y ? 'rotate(180deg)' : 'rotate(0deg)'; } else { return playerX > x ? 'rotate(90deg)' : 'rotate(270deg)'; } } return 'rotate(0deg)'; })(), animation: 'particle-burst 0.5s ease-out forwards' }}/>

)}

); })}

{/* Mobile Controls */}

{/* Top row */}

{/* Middle row */}

{/* Bottom row */}

{/* Bottom HUD - Enemy Stats */}

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

{enemy.isBoss ? `Boss (Level ${enemy.bossLevel})` : enemy.isRanged ? `Ranged Enemy ${index + 1}` : enemy.isMagic ? `Magic Enemy ${index + 1}` : `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();