import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; // Add CSS animations // Import Press Start 2P font const fontLink = document.createElement('link'); fontLink.href = 'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'; fontLink.rel = 'stylesheet'; document.head.appendChild(fontLink); const style = document.createElement('style'); style.textContent = ` * { font-family: 'Press Start 2P', cursive; } @keyframes heartFill { 0% { filter: brightness(0) invert(1) opacity(0.3); } 50% { filter: none; } 75% { filter: drop-shadow(0 0 5px #ff0000) brightness(1.2); } 100% { filter: none; } } .heart-filling { animation: heartFill 0.5s ease-out forwards; } @media screen and (max-width: 768px) { .enemy-display { display: none !important; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes levelUp { 0% { transform: translateY(0) scale(1.5); } 25% { transform: translateY(-20px) scale(1.5); } 50% { transform: translateY(-20px) scale(1.8) rotate(-20deg); } 75% { transform: translateY(-20px) scale(1.8) rotate(20deg); } 100% { transform: translateY(0) scale(1.5); } } @keyframes sparkle { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .leveling-up { animation: levelUp 0.4s ease-in-out; } .spark { position: absolute; width: 10px; height: 10px; background: #ffd700; border-radius: 50%; pointer-events: none; animation: sparkle 0.8s ease-out forwards; } .spark-ring { position: absolute; width: 60px; height: 60px; border: 2px solid #ffd700; border-radius: 50%; pointer-events: none; animation: sparkle 0.8s ease-out forwards; } .rotating-stars { position: absolute; width: 100%; height: 100%; animation: rotate 2s linear infinite; } `; document.head.appendChild(style); // Create pixel art enemy sprites (unchanged) const createEnemySprite = (level) => { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const ctx = canvas.getContext('2d'); ctx.fillStyle = 'transparent'; ctx.fillRect(0, 0, 32, 32); switch(level) { case 13: // Final Boss ctx.fillStyle = '#800000'; // Dark red base ctx.fillRect(4, 4, 24, 24); // Large body ctx.fillStyle = '#ff0000'; // Bright red details ctx.fillRect(8, 8, 4, 4); // Left eye ctx.fillRect(20, 8, 4, 4); // Right eye ctx.fillRect(12, 16, 8, 4); // Mouth ctx.fillStyle = '#ffff00'; // Yellow crown ctx.fillRect(8, 0, 16, 4); // Crown base ctx.fillRect(8, 0, 4, 8); // Left spike ctx.fillRect(20, 0, 4, 8); // Right spike break; case 11: // Dark Knight ctx.fillStyle = '#202020'; // Dark armor ctx.fillRect(8, 8, 16, 20); // Body ctx.fillRect(12, 4, 8, 8); // Helmet ctx.fillStyle = '#ff0000'; // Red details ctx.fillRect(14, 12, 2, 2); // Left eye ctx.fillRect(18, 12, 2, 2); // Right eye ctx.fillStyle = '#404040'; // Light armor details ctx.fillRect(12, 20, 8, 8); // Chest plate break; case 10: // Witch ctx.fillStyle = '#4B0082'; // Dark purple robe ctx.fillRect(8, 12, 16, 16); // Body ctx.fillRect(12, 8, 8, 8); // Head ctx.fillStyle = '#8B008B'; // Brighter purple for hat ctx.fillRect(8, 4, 16, 4); // Hat brim ctx.fillRect(12, 0, 8, 4); // Hat top ctx.fillStyle = '#FF00FF'; // Magenta for magic effects ctx.fillRect(12, 16, 2, 2); // Left eye ctx.fillRect(18, 16, 2, 2); // Right eye ctx.fillRect(4, 16, 4, 4); // Magic orb left ctx.fillRect(24, 16, 4, 4); // Magic orb right break; case 9: // Fire Knight ctx.fillStyle = '#8b0000'; // Dark red armor ctx.fillRect(8, 8, 16, 20); // Body ctx.fillRect(12, 4, 8, 8); // Helmet ctx.fillStyle = '#ffa500'; // Orange flames ctx.fillRect(14, 12, 2, 2); // Left eye ctx.fillRect(18, 12, 2, 2); // Right eye ctx.fillRect(8, 28, 16, 4); // Flame base break; case 1: // Slime ctx.fillStyle = '#44ff44'; ctx.fillRect(12, 16, 8, 8); ctx.fillRect(8, 20, 16, 4); ctx.fillStyle = '#ffffff'; ctx.fillRect(14, 18, 2, 2); ctx.fillRect(18, 18, 2, 2); break; case 2: // Bat ctx.fillStyle = '#444444'; ctx.fillRect(12, 12, 8, 8); ctx.fillRect(8, 8, 4, 12); ctx.fillRect(20, 8, 4, 12); ctx.fillRect(4, 12, 4, 4); ctx.fillRect(24, 12, 4, 4); ctx.fillStyle = '#ff0000'; ctx.fillRect(14, 14, 2, 2); ctx.fillRect(18, 14, 2, 2); break; case 3: // Skeleton ctx.fillStyle = '#e0e0e0'; ctx.fillRect(12, 8, 8, 8); ctx.fillStyle = '#000000'; ctx.fillRect(14, 10, 2, 2); ctx.fillRect(18, 10, 2, 2); ctx.fillStyle = '#e0e0e0'; ctx.fillRect(14, 16, 4, 8); ctx.fillRect(10, 16, 4, 4); ctx.fillRect(18, 16, 4, 4); break; case 4: // Blue Wizard ctx.fillStyle = '#1E90FF'; // Blue robe ctx.fillRect(8, 12, 16, 16); // Body ctx.fillRect(12, 8, 8, 8); // Head ctx.fillStyle = '#4169E1'; // Dark blue details ctx.fillRect(8, 24, 4, 4); // Left bottom ctx.fillRect(20, 24, 4, 4); // Right bottom ctx.fillRect(14, 20, 4, 8); // Staff handle ctx.fillStyle = '#87CEEB'; // Light blue magic ctx.fillRect(12, 16, 2, 2); // Left eye ctx.fillRect(18, 16, 2, 2); // Right eye ctx.fillRect(14, 16, 4, 4); // Magic orb break; case 5: // Demon ctx.fillStyle = '#ff4444'; ctx.fillRect(8, 8, 16, 16); ctx.fillRect(4, 4, 4, 8); ctx.fillRect(24, 4, 4, 8); ctx.fillStyle = '#ffff00'; ctx.fillRect(12, 16, 4, 4); ctx.fillRect(20, 16, 4, 4); break; case 6: // Wizard ctx.fillStyle = '#6600cc'; ctx.fillRect(8, 8, 16, 20); ctx.fillRect(12, 4, 8, 8); ctx.fillStyle = '#ff00ff'; ctx.fillRect(14, 12, 2, 2); ctx.fillRect(18, 12, 2, 2); ctx.fillRect(14, 28, 4, 4); ctx.fillRect(14, 16, 4, 12); break; case 7: // Reaper ctx.fillStyle = '#220022'; ctx.fillRect(8, 8, 16, 20); ctx.fillRect(12, 4, 8, 8); ctx.fillStyle = '#ff00ff'; ctx.fillRect(14, 12, 2, 2); ctx.fillRect(18, 12, 2, 2); ctx.fillRect(4, 4, 12, 4); ctx.fillRect(4, 8, 4, 16); break; case 8: // Demon Lord ctx.fillStyle = '#660000'; ctx.fillRect(8, 8, 16, 16); ctx.fillRect(4, 4, 4, 8); ctx.fillRect(24, 4, 4, 8); ctx.fillRect(4, 20, 24, 8); ctx.fillStyle = '#ff0000'; ctx.fillRect(14, 16, 2, 2); ctx.fillRect(18, 16, 2, 2); ctx.fillStyle = '#ffff00'; ctx.fillRect(14, 20, 4, 4); break; } return canvas; }; const createKnightSprite = () => { const canvas = document.createElement('canvas'); canvas.width = 48; canvas.height = 48; const ctx = canvas.getContext('2d'); // Legs ctx.fillStyle = '#8B8B8B'; ctx.fillRect(18, 40, 4, 6); // Left leg ctx.fillRect(26, 40, 4, 6); // Right leg // Body ctx.fillStyle = '#8B8B8B'; ctx.fillRect(16, 24, 16, 16); // Main torso // Arms ctx.fillStyle = '#8B8B8B'; ctx.fillRect(12, 24, 4, 12); // Left arm ctx.fillRect(32, 24, 4, 12); // Right arm holding sword // Hand holding sword ctx.fillStyle = '#737373'; ctx.fillRect(32, 28, 6, 4); // Dark armor details ctx.fillStyle = '#636363'; ctx.fillRect(16, 32, 16, 8); // Lower armor ctx.fillRect(18, 44, 4, 2); // Left boot ctx.fillRect(26, 44, 4, 2); // Right boot // Head/Helmet ctx.fillStyle = '#8B8B8B'; ctx.fillRect(16, 16, 16, 8); // Helmet details ctx.fillStyle = '#636363'; ctx.fillRect(16, 20, 16, 4); // Sword ctx.fillStyle = '#C0C0C0'; // Blade ctx.fillRect(34, 8, 4, 20); // Handle ctx.fillStyle = '#8B4513'; ctx.fillRect(34, 28, 4, 4); // Guard ctx.fillStyle = '#FFD700'; ctx.fillRect(32, 26, 8, 2); return canvas; }; const createKnightUnderwearSprite = () => { const canvas = document.createElement('canvas'); canvas.width = 48; canvas.height = 48; const ctx = canvas.getContext('2d'); // Legs ctx.fillStyle = '#ffd5d5'; // Skin color ctx.fillRect(18, 40, 4, 6); // Left leg ctx.fillRect(26, 40, 4, 6); // Right leg // Body ctx.fillStyle = '#ffd5d5'; // Skin color ctx.fillRect(16, 24, 16, 16); // Main torso // Arms ctx.fillStyle = '#ffd5d5'; // Skin color ctx.fillRect(12, 24, 4, 12); // Left arm ctx.fillRect(32, 24, 4, 12); // Right arm // Hand holding sword ctx.fillStyle = '#ffd5d5'; // Skin color ctx.fillRect(32, 28, 6, 4); // Underwear ctx.fillStyle = '#ff6b6b'; // Red underwear ctx.fillRect(16, 32, 16, 8); // Underwear bottom ctx.fillRect(18, 24, 12, 4); // Underwear top // Head ctx.fillStyle = '#ffd5d5'; // Skin color ctx.fillRect(16, 16, 16, 8); // Hair ctx.fillStyle = '#8B4513'; // Brown hair ctx.fillRect(16, 16, 16, 4); // Sword ctx.fillStyle = '#C0C0C0'; // Blade ctx.fillRect(34, 8, 4, 20); // Handle ctx.fillStyle = '#8B4513'; ctx.fillRect(34, 28, 4, 4); // Guard ctx.fillStyle = '#FFD700'; ctx.fillRect(32, 26, 8, 2); return canvas; }; const knightSprite = createKnightSprite(); const knightUnderwearSprite = createKnightUnderwearSprite(); const enemySprites = { 1: createEnemySprite(1), 2: createEnemySprite(2), 3: createEnemySprite(3), 4: createEnemySprite(4), 5: createEnemySprite(5), 6: createEnemySprite(6), 7: createEnemySprite(7), 8: createEnemySprite(8), 9: createEnemySprite(9), 10: createEnemySprite(10), 11: createEnemySprite(11), 13: createEnemySprite(13) }; const createStarSprite = (filled = true) => { const canvas = document.createElement('canvas'); canvas.width = 16; canvas.height = 16; const ctx = canvas.getContext('2d'); // Star color ctx.fillStyle = filled ? '#FFD700' : '#463114'; // Gold for filled, darker for empty // Draw pixel star const pixels = [ [0,0,0,0,1,1,0,0,0,0], [0,0,0,1,1,1,1,0,0,0], [0,0,1,1,1,1,1,1,0,0], [1,1,1,1,1,1,1,1,1,1], [0,1,1,1,1,1,1,1,1,0], [0,0,1,1,1,1,1,1,0,0], [0,1,1,0,0,0,0,1,1,0], [1,1,0,0,0,0,0,0,1,1] ]; pixels.forEach((row, y) => { row.forEach((pixel, x) => { if (pixel) { ctx.fillRect(x + 3, y + 4, 1, 1); } }); }); return canvas; }; const starSprites = { filled: createStarSprite(true), empty: createStarSprite(false) }; const createItemSprite = (type) => { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const ctx = canvas.getContext('2d'); ctx.fillStyle = 'transparent'; ctx.fillRect(0, 0, 32, 32); switch(type) { case 'exp': ctx.fillStyle = '#FFD700'; ctx.fillRect(8, 8, 16, 16); ctx.fillStyle = '#FFF68F'; ctx.fillRect(12, 12, 8, 8); break; case 'chest-closed': ctx.fillStyle = '#8B4513'; ctx.fillRect(8, 12, 16, 12); ctx.fillStyle = '#A0522D'; ctx.fillRect(6, 8, 20, 4); ctx.fillStyle = '#FFD700'; ctx.fillRect(14, 12, 4, 4); break; case 'chest-open': ctx.fillStyle = '#8B4513'; ctx.fillRect(8, 16, 16, 8); ctx.fillStyle = '#A0522D'; ctx.fillRect(6, 6, 20, 4); ctx.fillStyle = '#FFD700'; ctx.fillRect(14, 8, 4, 4); break; case 'heart': ctx.fillStyle = '#FF0000'; ctx.fillRect(8, 8, 6, 6); ctx.fillRect(18, 8, 6, 6); ctx.fillRect(6, 12, 20, 12); ctx.fillRect(12, 24, 8, 4); break; case 'gold': ctx.fillStyle = '#FFD700'; ctx.fillRect(12, 8, 8, 8); ctx.fillRect(8, 14, 8, 8); ctx.fillRect(16, 14, 8, 8); ctx.fillStyle = '#FFF68F'; ctx.fillRect(14, 10, 2, 2); ctx.fillRect(10, 16, 2, 2); ctx.fillRect(18, 16, 2, 2); break; } return canvas; }; const itemSprites = { 'chest-closed': createItemSprite('chest-closed'), 'chest-open': createItemSprite('chest-open'), 'heart': createItemSprite('heart'), 'gold': createItemSprite('gold'), 'exp': createItemSprite('exp') }; const App = () => { const [menuState, setMenuState] = useState('main'); // 'main', 'story', 'challenge' const [isMobile, setIsMobile] = useState(window.innerWidth <= 768); const [hasStarted, setHasStarted] = useState(false); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth <= 768); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const tutorialSteps = [ { target: { x: 4, y: 4 }, message: "Welcome, Brave Knight! This cell will reveal the number of enemy levels around it!", highlight: [[4, 4]] }, { target: { x: 4, y: 4 }, message: "Excellent! Now explore the surrounding cells carefully. Each revealed monster will cost you HP equal to its level. Choose wisely!", highlight: [[3, 3], [3, 4], [3, 5], [4, 3], [4, 4], [4, 5], [5, 3], [5, 4], [5, 5]] }, { target: { x: 2, y: 3 }, message: "Your strength grows with each victory! Defeat monsters to gain experience, then click your knight to level up and restore health!", highlight: [[2, 3]] } ]; const [tutorialStep, setTutorialStep] = useState(0); const [showTooltip, setShowTooltip] = useState(() => ({ message: tutorialSteps[0].message, highlight: tutorialSteps[0].highlight })); const [fillingHearts, setFillingHearts] = useState([]); const [gameState, setGameState] = useState(() => { const savedLevels = localStorage.getItem('completedLevels'); const completedLevels = savedLevels ? JSON.parse(savedLevels) : [0]; const hasLeveledUp = false; const isLevelingUp = false; return { grid: [], revealed: [], playerExp: 0, playerLife: 5, maxHearts: 5, expToNextLevel: 5, chestState: [], gameOver: false, gameWon: false, gridSize: { width: 9, height: 9 }, monsterCount: 10, monstersDefeated: 0, expDrops: [], completedLevels: completedLevels, currentGameLevel: 'story', showSuccessPage: false, chestsCollected: 0, totalChests: 0, starsEarned: 0, halfHeart: false }; }); const [difficulty, setDifficulty] = useState('normal'); const initializeGame = (width = 9, height = 9, selectedLevel) => { const isChallenge = selectedLevel === 'challenge'; // Ensure selectedLevel is a valid number for calculations const numericLevel = parseInt(selectedLevel) || 1; // Set grid size based on level let gridWidth, gridHeight; if (isChallenge) { gridWidth = 13; gridHeight = 10; } else { // Base size increases every 3 levels const baseSize = 9 + Math.floor((numericLevel - 1) / 3); gridWidth = baseSize; gridHeight = baseSize; } const monsters = isChallenge ? 58 : 10 + numericLevel; // Linear scaling const levelConfig = { 'challenge': { monsters: { 1: 7, 2: 8, 3: 8, 4: 6, 5: 11, 6: 5, 7: 4, 8: 5, 9: 2, 11: 1, 13: 1 }, chests: 3, chestContents: ['heart', 'heart', 'heart'] }, 1: { monsters: { 1: 0.7, 2: 0.3 }, chests: 2, chestContents: ['heart', 'gold'] }, 3: { monsters: { 1: 0.4, 2: 0.3, 3: 0.3 }, chests: 2, chestContents: ['heart', 'gold'] }, 4: { monsters: { 1: 0.35, 2: 0.25, 3: 0.2, 4: 0.2 }, chests: 1, chestContents: ['gold'] }, 5: { monsters: { 1: 0.3, 2: 0.25, 3: 0.2, 4: 0.15, 5: 0.1 }, chests: 2, chestContents: ['heart', 'gold'] }, 6: { monsters: { 1: 0.3, 2: 0.25, 3: 0.15, 4: 0.1, 5: 0.1, 6: 0.1 }, chests: 1, chestContents: ['heart'] }, 7: { monsters: { 1: 0.3, 2: 0.25, 3: 0.15, 4: 0.1, 5: 0.1, 6: 0.05, 7: 0.05 }, chests: 2, chestContents: ['gold', 'gold'] }, 8: { monsters: { 1: 0.3, 2: 0.25, 3: 0.15, 4: 0.1, 5: 0.1, 6: 0.05, 7: 0.05 }, chests: 1, chestContents: ['heart'] }, 9: { monsters: { 1: 0.4, 2: 0.3, 3: 0.15, 4: 0.1, 5: 0.05 }, // Total ~19 monsters, damage ~30-35 chests: 2, chestContents: ['heart', 'gold'] // 1 HP restore + 3 EXP }, 10: { monsters: { 1: 0.35, 2: 0.25, 3: 0.2, 4: 0.1, 5: 0.05, 6: 0.05 }, // ~20 monsters, ~1 Witch, damage ~35-40 chests: 2, chestContents: ['heart', 'gold'] }, 11: { monsters: { 1: 0.3, 2: 0.25, 3: 0.15, 4: 0.15, 5: 0.1, 6: 0.05 }, // ~21 monsters, ~1 Dark Knight, damage ~40-45 chests: 2, chestContents: ['heart', 'heart'] // 2 HP restores }, 12: { monsters: { 1: 0.3, 2: 0.25, 3: 0.15, 4: 0.15, 5: 0.1, 6: 0.05 }, // ~22 monsters, damage ~40-45 chests: 3, chestContents: ['heart', 'heart', 'gold'] // 2 HP restores + 3 EXP }, 'challenge': { monsters: { 1: 10, 2: 10, 3: 8, 4: 8, 5: 6, 6: 4, 7: 2, 8: 2, 9: 2, 11: 1, 13: 1 }, // 54 monsters, damage ~100-110 chests: 5, chestContents: ['heart', 'heart', 'heart', 'gold', 'gold'] // 3 HP restores + 6 EXP }, 13: { monsters: { 1: 0.25, 2: 0.2, 3: 0.15, 4: 0.15, 5: 0.1, 6: 0.1, 7: 0.05 }, // ~23 monsters chests: 3, chestContents: ['heart', 'heart', 'gold'] }, 14: { monsters: { 1: 0.2, 2: 0.2, 3: 0.15, 4: 0.15, 5: 0.15, 6: 0.1, 7: 0.05 }, // ~24 monsters chests: 3, chestContents: ['heart', 'heart', 'gold'] }, 15: { monsters: { 2: 0.2, 3: 0.2, 4: 0.15, 5: 0.15, 6: 0.15, 7: 0.1, 8: 0.05 }, // ~25 monsters chests: 4, chestContents: ['heart', 'heart', 'heart', 'gold'] }, 16: { monsters: { 2: 0.15, 3: 0.2, 4: 0.2, 5: 0.15, 6: 0.15, 7: 0.1, 8: 0.05 }, // ~26 monsters chests: 4, chestContents: ['heart', 'heart', 'heart', 'gold'] }, 17: { monsters: { 3: 0.15, 4: 0.2, 5: 0.2, 6: 0.15, 7: 0.15, 8: 0.1, 9: 0.05 }, // ~27 monsters chests: 4, chestContents: ['heart', 'heart', 'heart', 'gold'] }, 18: { monsters: { 3: 0.1, 4: 0.15, 5: 0.2, 6: 0.2, 7: 0.15, 8: 0.15, 9: 0.05 }, // ~28 monsters chests: 5, chestContents: ['heart', 'heart', 'heart', 'heart', 'gold'] }, 19: { monsters: { 4: 0.1, 5: 0.15, 6: 0.2, 7: 0.2, 8: 0.15, 9: 0.15, 10: 0.05 }, // ~29 monsters chests: 5, chestContents: ['heart', 'heart', 'heart', 'heart', 'gold'] }, 20: { monsters: { 5: 0.1, 6: 0.15, 7: 0.2, 8: 0.2, 9: 0.15, 10: 0.15, 11: 0.05 }, // ~30 monsters chests: 5, chestContents: ['heart', 'heart', 'heart', 'heart', 'gold'] }, }; const currentLevelConfig = levelConfig[selectedLevel] || levelConfig[1]; const newGrid = Array(gridHeight).fill().map(() => Array(gridWidth).fill(null)); const newRevealed = Array(gridHeight).fill().map(() => Array(gridWidth).fill(false)); const newChestState = Array(gridHeight).fill().map(() => Array(gridWidth).fill(null)); const monsterLevels = []; const currentDistribution = currentLevelConfig.monsters; if (isChallenge) { // For challenge mode, use fixed counts for (const [level, count] of Object.entries(currentDistribution)) { if (parseInt(level) !== 13) { // Skip boss, it's handled separately for (let i = 0; i < count; i++) { monsterLevels.push(parseInt(level)); } } } } else { // For normal levels, use probability distribution for (let i = 0; i < monsters; i++) { const rand = Math.random(); let cumulativeProb = 0; let monsterLevel = 1; for (const [lvl, prob] of Object.entries(currentDistribution)) { cumulativeProb += prob; if (rand <= cumulativeProb) { monsterLevel = parseInt(lvl); break; } } monsterLevels.push(monsterLevel); } } monsterLevels.sort(() => Math.random() - 0.5); // For level 1, ensure we have a cell with exactly 2 level 2 and 1 level 1 monsters if (selectedLevel === 1) { // Find a suitable position in the middle area of the grid const centerY = Math.floor(gridHeight / 2); const centerX = Math.floor(gridWidth / 2); // Place the monsters around the center cell newGrid[centerY-1][centerX] = { type: 'monster', level: 2 }; newGrid[centerY][centerX+1] = { type: 'monster', level: 2 }; newGrid[centerY+1][centerX] = { type: 'monster', level: 1 }; newGrid[centerY][centerX] = { type: 'empty', level: 5 }; // This cell will have value 5 (2+2+1) // Adjust the monster distribution for the remaining monsters const levelTwoIndex = monsterLevels.indexOf(2); if (levelTwoIndex !== -1) monsterLevels.splice(levelTwoIndex, 1); const levelTwoIndex2 = monsterLevels.indexOf(2); if (levelTwoIndex2 !== -1) monsterLevels.splice(levelTwoIndex2, 1); const levelOneIndex = monsterLevels.indexOf(1); if (levelOneIndex !== -1) monsterLevels.splice(levelOneIndex, 1); } if (currentLevelConfig.chests > 0) { let chestsPlaced = 0; while (chestsPlaced < currentLevelConfig.chests) { const x = Math.floor(Math.random() * gridWidth); const y = Math.floor(Math.random() * gridHeight); // For level 1, check if the position is near the center '5' cell if (selectedLevel === 1) { const centerY = Math.floor(gridHeight / 2); const centerX = Math.floor(gridWidth / 2); // Skip if the position is within the 3x3 area around the center if (Math.abs(y - centerY) <= 1 && Math.abs(x - centerX) <= 1) { continue; } } if (newGrid[y][x] === null) { const content = currentLevelConfig.chestContents[chestsPlaced]; newGrid[y][x] = { type: 'chest', level: 0 }; newChestState[y][x] = { opened: false, collected: false, content: content }; chestsPlaced++; } } } // Place chests before monsters if (isChallenge) { // For challenge mode, use fixed counts for (const [level, count] of Object.entries(currentDistribution)) { if (parseInt(level) !== 13) { // Skip boss, it's handled separately for (let i = 0; i < count; i++) { monsterLevels.push(parseInt(level)); } } } } else { // For normal levels, use probability distribution for (let i = 0; i < monsters; i++) { const rand = Math.random(); let cumulativeProb = 0; let monsterLevel = 1; for (const [lvl, prob] of Object.entries(currentDistribution)) { cumulativeProb += prob; if (rand <= cumulativeProb) { monsterLevel = parseInt(lvl); break; } } monsterLevels.push(monsterLevel); } } monsterLevels.sort(() => Math.random() - 0.5); // Place the boss first if it's challenge mode if (isChallenge) { // Define the central area (excluding the exact center) const centerX = Math.floor(gridWidth / 2); const centerY = Math.floor(gridHeight / 2); const possibleBossPositions = []; // Generate positions around the center (1-2 cells away) for (let dy = -2; dy <= 2; dy++) { for (let dx = -2; dx <= 2; dx++) { if (Math.abs(dx) + Math.abs(dy) > 1) { // Avoid the exact center const x = centerX + dx; const y = centerY + dy; if (x >= 0 && x < gridWidth && y >= 0 && y < gridHeight) { possibleBossPositions.push({ x, y }); } } } } // Randomly select one of the possible positions for the boss const bossPosition = possibleBossPositions[Math.floor(Math.random() * possibleBossPositions.length)]; newGrid[bossPosition.y][bossPosition.x] = { type: 'monster', level: 13, isBoss: true }; newRevealed[bossPosition.y][bossPosition.x] = true; // Make the boss visible } // Place the witch first if it exists in monsterLevels const witchIndex = monsterLevels.indexOf(10); if (witchIndex !== -1) { // Define possible corner positions const corners = [ {x: 0, y: 0}, // Top-left {x: gridWidth-1, y: 0}, // Top-right {x: 0, y: gridHeight-1}, // Bottom-left {x: gridWidth-1, y: gridHeight-1} // Bottom-right ]; // Randomly select a corner const corner = corners[Math.floor(Math.random() * corners.length)]; newGrid[corner.y][corner.x] = { type: 'monster', level: 10, isWitch: true }; newRevealed[corner.y][corner.x] = false; // Keep the witch hidden // Remove the witch from monsterLevels monsterLevels.splice(witchIndex, 1); } // Place the remaining monsters let monstersPlaced = isChallenge ? 1 : 0; // Start from 1 if boss was placed while (monstersPlaced < (witchIndex !== -1 ? monsters - 1 : monsters)) { const x = Math.floor(Math.random() * gridWidth); const y = Math.floor(Math.random() * gridHeight); // Skip the center area in level 1 where we placed our specific monster configuration if (selectedLevel === 1 && Math.abs(y - Math.floor(gridHeight/2)) <= 1 && Math.abs(x - Math.floor(gridWidth/2)) <= 1) { continue; } if (newGrid[y][x] === null) { const monsterLevel = monsterLevels[monstersPlaced]; newGrid[y][x] = { type: 'monster', level: monsterLevel }; monstersPlaced++; } } for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { if (newGrid[y][x] === null) { newGrid[y][x] = { type: 'empty', level: 0 }; } } } for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { if (newGrid[y][x].type === 'empty') { let monsterSum = 0; for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { const ny = y + dy; const nx = x + dx; if (ny < 0 || ny >= gridHeight || nx < 0 || nx >= gridWidth || (dx === 0 && dy === 0)) continue; if (newGrid[ny][nx].type === 'monster') monsterSum += newGrid[ny][nx].level; } } newGrid[y][x].level = monsterSum; } } } let hasSafeStart = false; for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { if (newGrid[y][x].type === 'empty' && newGrid[y][x].level <= 2) { hasSafeStart = true; break; } } if (hasSafeStart) break; } if (!hasSafeStart) { let randomX, randomY; do { randomX = Math.floor(Math.random() * gridWidth); randomY = Math.floor(Math.random() * gridHeight); } while (newGrid[randomY][randomX].type === 'monster'); for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { const ny = randomY + dy; const nx = randomX + dx; if (ny >= 0 && ny < gridHeight && nx >= 0 && nx < gridWidth && newGrid[ny][nx].type === 'monster') { newGrid[ny][nx] = { type: 'empty', level: 0 }; } } } for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { if (newGrid[y][x].type === 'empty') { let monsterSum = 0; for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { const ny = y + dy; const nx = x + dx; if (ny < 0 || ny >= gridHeight || nx < 0 || nx >= gridWidth || (dx === 0 && dy === 0)) continue; if (newGrid[ny][nx].type === 'monster') monsterSum += newGrid[ny][nx].level; } } newGrid[y][x].level = monsterSum; } } } } setGameState(prev => ({ ...prev, grid: newGrid, revealed: newRevealed, chestState: newChestState, playerLevel: 1, playerExp: 0, playerLife: 5, maxHearts: 5, expToNextLevel: 5, gameOver: false, gameWon: false, gridSize: { width: gridWidth, height: gridHeight }, monsterCount: monsters, monstersDefeated: 0, damage: 1, expDrops: [], currentGameLevel: selectedLevel, hasLeveledUp: false, hasLeveledUpOnce: false })); setHasStarted(true); }; const handleCellClick = (x, y) => { // Clear tooltip and allow all clicks after first click post-level-up if (gameState.currentGameLevel !== 1) { setShowTooltip(null); setTutorialStep(tutorialSteps.length); } else if (showTooltip && showTooltip.message.includes("You are ready! Beware of treasure")) { setShowTooltip(null); setTutorialStep(tutorialSteps.length); } else if (gameState.playerLevel > 1 || gameState.hasLeveledUpOnce) { setShowTooltip(null); setTutorialStep(tutorialSteps.length); } const expDropIndex = gameState.expDrops.findIndex(drop => drop.x === x && drop.y === y); if (expDropIndex !== -1) { const expDrop = gameState.expDrops[expDropIndex]; const newPlayerExp = gameState.playerExp + expDrop.value; const newExpDrops = [...gameState.expDrops]; newExpDrops.splice(expDropIndex, 1); // Check if we've collected all experience points from all three monsters const totalMonstersDefeated = gameState.monstersDefeated; const remainingExpDrops = newExpDrops.length; const allMonsterExpCollected = totalMonstersDefeated === 3 && remainingExpDrops === 0; const isFirstExpCollected = gameState.expDrops.length === 1; if (allMonsterExpCollected && tutorialStep === 1 && !gameState.hasLeveledUpOnce) { setShowTooltip({ message: "Excellent! Your Knight is glowing with power - click him to level up, gain max HP, and fully heal!", highlight: false }); } else if (isFirstExpCollected && tutorialStep === 1 && !allMonsterExpCollected && !showTooltip?.message?.includes("Excellent!")) { setShowTooltip({ message: "Great! Now collect the remaining experience crystals to grow even stronger!", highlightExp: true }); } // Check if this was the last exp drop and all monsters are defeated const monstersDefeated = gameState.grid.every((row, y) => row.every((cell, x) => cell.type !== 'monster' || gameState.revealed[y][x]) ); if (newExpDrops.length === 0 && monstersDefeated) { // Calculate stars earned newStarsEarned = 1; // 1 star for defeating all monsters if (newChestsCollected >= Math.ceil(gameState.totalChests * 0.75)) newStarsEarned++; // 2nd star for 75% chests if (newPlayerLife >= 3) newStarsEarned++; // 3rd star for 3+ hearts // Save progress and only update stars if better than previous const newCompletedLevels = [...new Set([...gameState.completedLevels, gameState.currentGameLevel])]; localStorage.setItem('completedLevels', JSON.stringify(newCompletedLevels)); const existingStars = localStorage.getItem(`level${gameState.currentGameLevel}Stars`); const previousStars = existingStars ? parseInt(existingStars) : 0; if (newStarsEarned > previousStars) { localStorage.setItem(`level${gameState.currentGameLevel}Stars`, newStarsEarned); } // Set game as won setGameState(prev => ({ ...prev, completedLevels: newCompletedLevels, gameWon: true, starsEarned: newStarsEarned })); } // Create new grid with updated cell and surrounding cells const newGrid = gameState.grid.map(row => [...row]); newGrid[y][x] = { type: 'empty', level: 0 }; // Recalculate values for affected cells for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { const ny = y + dy; const nx = x + dx; if (ny >= 0 && ny < newGrid.length && nx >= 0 && nx < newGrid[0].length) { if (newGrid[ny][nx].type === 'empty') { let monsterSum = 0; // Count surrounding monsters for this cell for (let my = -1; my <= 1; my++) { for (let mx = -1; mx <= 1; mx++) { const sy = ny + my; const sx = nx + mx; if (sy >= 0 && sy < newGrid.length && sx >= 0 && sx < newGrid[0].length && newGrid[sy][sx].type === 'monster') { monsterSum += newGrid[sy][sx].level; } } } newGrid[ny][nx].level = monsterSum; } } } } setGameState(prev => ({ ...prev, grid: newGrid, playerExp: newPlayerExp, expDrops: newExpDrops })); return; } if (gameState.gameOver || gameState.gameWon || (gameState.revealed[y][x] && gameState.grid[y][x].type !== 'chest')) { return; } const newRevealed = [...gameState.revealed.map(row => [...row])]; let newChestState = [...gameState.chestState.map(row => [...row])]; let newGrid = [...gameState.grid.map(row => [...row])]; let newPlayerExp = gameState.playerExp; let newPlayerLevel = gameState.playerLevel; let newPlayerLife = gameState.playerLife; let newExpToNextLevel = gameState.expToNextLevel; let newGameOver = gameState.gameOver; let newGameWon = gameState.gameWon; let newMonstersDefeated = gameState.monstersDefeated; let newStarsEarned = 0; let newHalfHeart = gameState.halfHeart; let newChestsCollected = gameState.chestsCollected; const cell = gameState.grid[y][x]; if (cell.type === 'chest') { if (!gameState.revealed[y][x]) { newRevealed[y][x] = true; if (!newChestState[y][x]) { newChestState[y][x] = { opened: false, collected: false, content: gameState.chestState[y][x]?.content || 'gold' }; } } else if (!newChestState[y][x]?.opened) { newChestState[y][x] = { ...newChestState[y][x], opened: true }; } else if (newChestState[y][x]?.opened && !newChestState[y][x]?.collected) { if (newChestState[y][x].content === 'heart') { newPlayerLife = gameState.maxHearts; } else { newPlayerExp += 3; } newChestState[y][x].collected = true; newGrid[y][x] = { type: 'empty', level: 0 }; newChestsCollected++; } } else if (cell.type === 'monster') { if (newPlayerLife < cell.level && !gameState.isLevelingUp) { newPlayerLife = 0; newGameOver = true; // Store the enemy that killed the player gameState.killedByEnemy = cell.level; } else { const damage = cell.level; const expValue = cell.level; newPlayerLife -= damage; newMonstersDefeated++; const newExpDrops = [...gameState.expDrops]; newExpDrops.push({ x, y, value: expValue }); gameState.expDrops = newExpDrops; // Show tutorial messages during step 1 if (tutorialStep === 1) { if (newMonstersDefeated === 1) { setShowTooltip({ message: `Victory! You defeated a Level ${cell.level} monster, but the battle cost you ${cell.level} hearts. Watch your HP carefully!`, showHpHighlight: true }); // Update tooltip to guide player to collect exp setTimeout(() => { setShowTooltip({ message: "The monster dropped precious experience! Click the glowing crystal to grow stronger.", highlightExp: true }); }, 3000); } else { // Check if all surrounding cells are revealed but exp remains const allSurroundingCellsRevealed = tutorialSteps[1].highlight.every(([hx, hy]) => gameState.revealed[hy][hx] ); if (allSurroundingCellsRevealed && gameState.expDrops.length > 0 && !showTooltip?.message?.includes("Excellent!")) { setShowTooltip({ message: "Make sure to collect all experience crystals before proceeding!", highlightExp: true }); } } } } newRevealed[y][x] = true; } else if (cell.level === 0) { newRevealed[y][x] = true; const revealEmptyCells = (x, y) => { for (let dy = -1; dy <= 1; dy++) { for (let dx = -1; dx <= 1; dx++) { const ny = y + dy; const nx = x + dx; if (ny < 0 || ny >= (typeof gameState.gridSize === 'object' ? gameState.gridSize.height : gameState.gridSize) || nx < 0 || nx >= (typeof gameState.gridSize === 'object' ? gameState.gridSize.width : gameState.gridSize) || (dx === 0 && dy === 0) || newRevealed[ny][nx] || gameState.grid[ny][nx].type === 'chest') { continue; } if (gameState.grid[ny][nx].type !== 'chest') { newRevealed[ny][nx] = true; } if (gameState.grid[ny][nx].type === 'monster' && newPlayerLife >= gameState.grid[ny][nx].level) { const damage = gameState.grid[ny][nx].level; const expValue = gameState.grid[ny][nx].level; newPlayerLife -= damage; newMonstersDefeated++; const newExpDrops = gameState.expDrops.filter(drop => !(drop.x === nx && drop.y === ny)); newExpDrops.push({ x: nx, y: ny, value: expValue }); setGameState(prev => ({ ...prev, expDrops: newExpDrops })); } if (gameState.grid[ny][nx].level === 0 && gameState.grid[ny][nx].type === 'empty') { revealEmptyCells(nx, ny); } } } }; revealEmptyCells(x, y); } else { newRevealed[y][x] = true; } // Calculate win condition let monsterCount = 0; let allMonstersDefeated = true; for (let y = 0; y < gameState.grid.length; y++) { for (let x = 0; x < gameState.grid[0].length; x++) { if (gameState.grid[y][x].type === 'monster') { monsterCount++; if (!newRevealed[y][x]) { allMonstersDefeated = false; } } } } // Set gameWon if all monsters are defeated if (monsterCount > 0 && allMonstersDefeated) { newGameWon = true; // Calculate stars earned newStarsEarned = 1; // 1 star for defeating all monsters if (newChestsCollected >= Math.ceil(gameState.totalChests * 0.75)) newStarsEarned++; // 2nd star for 75% chests if (newPlayerLife >= 3) newStarsEarned++; // 3rd star for 3+ hearts // Save stars to localStorage only if better than previous const existingStars = localStorage.getItem(`level${gameState.currentGameLevel}Stars`); const previousStars = existingStars ? parseInt(existingStars) : 0; if (newStarsEarned > previousStars) { localStorage.setItem(`level${gameState.currentGameLevel}Stars`, newStarsEarned); } } // Update stars earned if game is won if (newGameWon) { newStarsEarned = 1; // 1 star for defeating all monsters if (newChestsCollected >= Math.ceil(gameState.totalChests * 0.75)) newStarsEarned++; // 2nd star for 75% chests if (newPlayerLife >= 3) newStarsEarned++; // 3rd star for 3+ hearts } setGameState({ ...gameState, grid: newGrid, revealed: newRevealed, chestState: newChestState, playerExp: newPlayerExp, playerLevel: newPlayerLevel, playerLife: newGameOver ? 0 : newPlayerLife, halfHeart: newHalfHeart, expToNextLevel: newExpToNextLevel, gameOver: newGameOver, gameWon: newGameWon, monstersDefeated: newMonstersDefeated, chestsCollected: newChestsCollected, starsEarned: newStarsEarned, totalChests: gameState.chestState.flat().filter(chest => chest !== null).length }); }; const setGameDifficulty = (diff) => { setDifficulty(diff); let size, monsters; switch (diff) { case 'easy': size = 9; monsters = 8; break; case 'normal': size = 12; monsters = 15; break; case 'hard': size = 16; monsters = 30; break; default: size = 9; monsters = 10; } initializeGame(size, monsters, gameState.currentGameLevel); }; const getCellColor = (cell, revealed, x, y) => { if (!cell || !revealed) return '#8b4513'; if (cell.type === 'chest' && gameState.chestState?.[y]?.[x]) { return gameState.chestState[y][x].opened ? '#DAA520' : '#CD853F'; } if (cell.type === 'monster' && cell.level) { const monsterColors = { 1: '#e04040', 2: '#c83232', 3: '#b02424', 4: '#982020', 5: '#801818', 6: '#681010', 7: '#500808', 8: '#380000' }; return monsterColors[cell.level] || '#ff0000'; } return cell.level === 0 ? '#4a3728' : '#000000'; }; const getTextColor = (cell) => { if (cell.type === 'monster') return 'white'; return cell.level === 0 ? '#e0e0e0' : 'white'; }; useEffect(() => { const initialSize = gameState.gridSize; const currentLevel = typeof gameState.currentGameLevel === 'number' ? gameState.currentGameLevel : (gameState.currentGameLevel === 'challenge' ? 'challenge' : 1); // Ensure initialSize is properly handled const initWidth = typeof initialSize === 'object' ? initialSize.width : initialSize; const initHeight = typeof initialSize === 'object' ? initialSize.height : initialSize; initializeGame(initWidth, initHeight, currentLevel); }, []); const calculateDefeatableMonsters = () => { let count = 0; for (let y = 0; y < (gameState.gridSize?.height || 9); y++) { for (let x = 0; x < (gameState.gridSize?.width || 9); x++) { if (gameState.grid[y][x].type === 'monster' && gameState.grid[y][x].level <= gameState.playerLevel) { count++; } } } return count; }; const defeatableMonsters = hasStarted ? calculateDefeatableMonsters() : 0; // Calculate if all monsters are defeated const allMonstersDefeated = hasStarted && gameState.grid.every((row, y) => row.every((cell, x) => cell.type !== 'monster' || gameState.revealed[y][x] ) ); return (

{menuState === 'main' ? (

Dungeon Sweeper

Coming Soon! Currently in Development

) : menuState === 'story' && !gameState.hasStarted ? (

Dungeon Sweeper

{Array.from({ length: 20 }, (_, i) => i + 1).map((level) => { const isCompleted = gameState.completedLevels.includes(level); const isLocked = !gameState.completedLevels.includes(level - 1); const levelStars = localStorage.getItem(`level${level}Stars`); const starsEarned = levelStars ? parseInt(levelStars) : 0; return (

{/* Remove duplicate stars rendering */}

); })}

) : ( <>

Dungeon Sweeper

{hasStarted && menuState === 'story' && (

Level {gameState.currentGameLevel}

)}

{menuState === 'story' && !isMobile && (

{[...Array(8)].map((_, level) => { const count = gameState.grid.flat().filter(cell => cell.type === 'monster' && cell.level === level + 1).length; if (count === 0) return null; return (

Lvl {level + 1}

x{count}

); })}

)} {hasStarted && (

{gameState.grid.map((row, y) => ( row.map((cell, x) => (

{ if (gameState.currentGameLevel === 1 && tutorialStep < tutorialSteps.length) { const currentStep = tutorialSteps[tutorialStep]; if (showTooltip?.message?.includes("You are ready! Beware of treasure") || currentStep.highlight.some(([hx, hy]) => hx === x && hy === y)) { handleCellClick(x, y); // For step 1 (showing the '5'), always progress if (tutorialStep === 0) { setTutorialStep(1); setShowTooltip({ message: tutorialSteps[1].message, highlight: tutorialSteps[1].highlight }); } // For all surrounding cells, check if they're revealed else if (tutorialStep === 1) { // Check if all surrounding cells are revealed const allSurroundingCellsRevealed = tutorialSteps[1].highlight.every(([hx, hy]) => gameState.revealed[hy][hx] ); // Check if all experience points have been collected const totalMonstersDefeated = gameState.monstersDefeated; const remainingExpDrops = gameState.expDrops.length; const allExpCollected = totalMonstersDefeated > 0 && remainingExpDrops === 0; } } } else { handleCellClick(x, y); } }} // Remove mouse enter/leave handlers as we want the tooltip to stay visible style={{ width: window.innerWidth <= 768 ? `${Math.min(32, (window.innerWidth - 40) / gameState.gridSize.width)}px` : '40px', height: window.innerWidth <= 768 ? `${Math.min(32, (window.innerWidth - 40) / gameState.gridSize.width)}px` : '40px', position: 'relative', cursor: gameState.currentGameLevel === 1 && gameState.playerLevel === 1 && tutorialStep < tutorialSteps.length && !showTooltip?.message?.includes("You are ready! Beware of treasure") && !tutorialSteps[tutorialStep].highlight.some(([hx, hy]) => hx === x && hy === y) ? 'not-allowed' : 'pointer', boxShadow: gameState.currentGameLevel === 1 && gameState.playerLevel === 1 && tutorialStep < tutorialSteps.length && !showTooltip?.message?.includes("You are ready! Beware of treasure") && tutorialSteps[tutorialStep].highlight.some(([hx, hy]) => hx === x && hy === y) ? '0 0 10px 3px #ffd700' : 'none', backgroundColor: getCellColor(cell, gameState.revealed[y][x], x, y), position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: gameState.gameOver || gameState.gameWon ? 'default' : 'pointer', fontWeight: 'bold', fontSize: '0.9rem', color: getTextColor(cell), userSelect: 'none', fontFamily: '"Press Start 2P", cursive' }}> {gameState.expDrops.some(drop => drop.x === x && drop.y === y) && (

)} {(gameState.revealed[y][x] || cell.isBoss) ? ( cell.type === 'chest' ? (

) : cell.type === 'monster' ? (

{cell.level}

) : (cell.level > 0 ? cell.level : '') ) : ''}

)) ))}

{ if (gameState.playerExp >= gameState.expToNextLevel && !gameState.isLevelingUp) { setGameState(prev => ({...prev, isLevelingUp: true})); const newExpToNextLevel = Math.floor(gameState.expToNextLevel * 1.3); const newMaxHearts = gameState.maxHearts + 1; // Add animation class const knight = document.getElementById('levelUpKnight'); knight.classList.add('leveling-up'); // Create spark effects const container = e.currentTarget; const numSparks = 12; const numRings = 3; // Add rotating stars const starsContainer = document.createElement('div'); starsContainer.className = 'rotating-stars'; for (let i = 0; i < 8; i++) { const star = document.createElement('div'); star.className = 'spark'; star.style.left = '50%'; star.style.top = '50%'; star.style.transform = `rotate(${i * 45}deg) translateX(30px)`; starsContainer.appendChild(star); } container.appendChild(starsContainer); // Create expanding rings for (let i = 0; i < numRings; i++) { setTimeout(() => { const ring = document.createElement('div'); ring.className = 'spark-ring'; ring.style.left = '50%'; ring.style.top = '50%'; container.appendChild(ring); setTimeout(() => ring.remove(), 800); }, i * 200); } // Create sparks for (let i = 0; i < numSparks; i++) { const spark = document.createElement('div'); spark.className = 'spark'; spark.style.left = '50%'; spark.style.top = '50%'; // Random angle and distance const angle = (i / numSparks) * 360; const distance = 20 + Math.random() * 20; spark.style.transform += ` rotate(${angle}deg) translateX(${distance}px)`; container.appendChild(spark); setTimeout(() => spark.remove(), 800); } // Remove animation class and cleanup setTimeout(() => { knight.classList.remove('leveling-up'); if (starsContainer) starsContainer.remove(); }, 1000); // Animate hearts filling up const currentHearts = gameState.playerLife; const heartsToFill = newMaxHearts - currentHearts; for (let i = 0; i < heartsToFill; i++) { setTimeout(() => { setFillingHearts(prev => [...prev, currentHearts + i]); if (i === heartsToFill - 1) { // Update game state after all hearts are filled setTimeout(() => { setGameState(prev => ({ ...prev, playerExp: prev.playerExp - prev.expToNextLevel, expToNextLevel: newExpToNextLevel, maxHearts: newMaxHearts, playerLife: newMaxHearts, playerLevel: prev.playerLevel + 1, isLevelingUp: false })); setFillingHearts([]); // Reset filling hearts }, 200); } }, i * 100); } // Show final tutorial message only after first level up if (gameState.currentGameLevel === 1 && !gameState.hasLeveledUpOnce) { setTimeout(() => { setShowTooltip({ message: "You are ready! Beware of treasure chests that will help you on your quest. They contain either gold for experience, or hearts to restore your health!", highlight: false }); setGameState(prev => ({ ...prev, hasLeveledUpOnce: true })); }, 1000); } } }} style={{ width: '48px', height: '48px', position: 'relative', cursor: gameState.playerExp >= gameState.expToNextLevel ? 'pointer' : 'not-allowed', opacity: gameState.playerExp >= gameState.expToNextLevel ? 1 : 0.7, transform: 'scale(1.5)', marginRight: '20px' }} >

0 ? knightSprite.toDataURL() : knightUnderwearSprite.toDataURL()})`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', animation: gameState.playerExp >= gameState.expToNextLevel ? 'pulse 1s infinite' : 'none', filter: gameState.playerExp >= gameState.expToNextLevel ? 'drop-shadow(0 0 5px #ffd700) drop-shadow(0 0 10px #ffd700)' : 'none' }} />

HP:

{Array(gameState.maxHearts || 5).fill(0).map((_, i) => (

))}

EXP:

{Array(gameState.expToNextLevel).fill(0).map((_, i) => (

))} {gameState.playerExp > gameState.expToNextLevel && (

)}

)} {gameState.gameOver && (

Game Over!

{(() => { const enemyNames = { 1: "Slime", 2: "Bat", 3: "Skeleton", 4: "Blue Wizard", 5: "Demon", 6: "Wizard", 7: "Reaper", 8: "Demon Lord", 9: "Fire Knight", 10: "Witch", 11: "Dark Knight", 13: "Final Boss" }; if (gameState.playerLife <= 0) { const enemyName = enemyNames[gameState.killedByEnemy] || "monster"; return `You were killed by a ${enemyName}!`; } return "You encountered a monster too powerful for you!"; })()}

)} {gameState.gameWon && (

{gameState.currentGameLevel === 'challenge' ? 'Nightmare Mode Complete!' : `Level ${gameState.currentGameLevel} Complete!`}

{Array(3).fill(0).map((_, i) => (

))}

{gameState.starsEarned >= 1 ? `✓ All ${gameState.monstersDefeated} monsters slain` : `✗ All ${gameState.monstersDefeated} monsters slain`}

{gameState.starsEarned >= 2 ? `✓ Chests: ${gameState.chestsCollected}/${gameState.totalChests}` : `✗ Chests: ${gameState.chestsCollected}/${gameState.totalChests}`}

{gameState.starsEarned === 3 ? `✓ Hearts: ${gameState.playerLife}/${gameState.maxHearts}` : `✗ Hearts: ${gameState.playerLife}/${gameState.maxHearts}`}

{gameState.currentGameLevel !== 'challenge' && gameState.currentGameLevel < 20 && ( )}

)} {/* Level indicator moved to title area */} {/* Tutorial Tooltip */} {showTooltip && gameState.currentGameLevel === 1 && (

{showTooltip.message} {tutorialStep === 1 && (

)}

)} )}

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