function MainComponent() { const [gameStarted, setGameStarted] = React.useState(false); const [timeLeft, setTimeLeft] = React.useState(30); const [score, setScore] = React.useState(0); const [highScore, setHighScore] = React.useState(parseInt(localStorage.getItem("highScore")) || 0); const [blocks, setBlocks] = React.useState([]); const [blockHits, setBlockHits] = React.useState([]); const [characterImage, setCharacterImage] = React.useState("https://ucarecdn.com/db19d21b-58ba-462d-af72-e3aa97702cdd/"); const [brokenBlocks, setBrokenBlocks] = React.useState([]); const [treasures, setTreasures] = React.useState([]); const [characterPosition, setCharacterPosition] = React.useState(0); const visibleBlocks = 64; const totalBlocks = 64; const handleKeyDown = React.useCallback((e)=>{ if (!gameStarted) return; let newPosition = characterPosition; let canMove = false; switch(e.key){ case "ArrowUp": if (newPosition >= 8) { const targetBlock = blocks[newPosition - 8]; if (!targetBlock?.isStone && !brokenBlocks.includes(newPosition - 8)) { newPosition -= 8; canMove = true; } } break; case "ArrowDown": if (newPosition < 56) { const targetBlock = blocks[newPosition + 8]; if (!targetBlock?.isStone && !brokenBlocks.includes(newPosition + 8)) { newPosition += 8; canMove = true; } } break; case "ArrowLeft": if (newPosition % 8 !== 0) { const targetBlock = blocks[newPosition - 1]; if (!targetBlock?.isStone && !brokenBlocks.includes(newPosition - 1)) { newPosition -= 1; canMove = true; } } break; case "ArrowRight": if (newPosition % 8 !== 7) { const targetBlock = blocks[newPosition + 1]; if (!targetBlock?.isStone && !brokenBlocks.includes(newPosition + 1)) { newPosition += 1; canMove = true; } } break; default: return; } if (canMove) { setCharacterPosition(newPosition); if (treasures.includes(newPosition)) { handleTreasureClick(newPosition); } } }, [ characterPosition, gameStarted, brokenBlocks, treasures, blocks ]); const handleBlockClick = (index)=>{ const isAdjacent = index === characterPosition - 1 || index === characterPosition + 1 || index === characterPosition - 8 || index === characterPosition + 8; if (!gameStarted || index < 0 || index >= totalBlocks || blocks[index].isStone || brokenBlocks.includes(index) || !isAdjacent) return; setBlockHits((prevHits)=>{ const updatedHits = prevHits.slice(); updatedHits[index] += 1; if (updatedHits[index] >= 5) { setBrokenBlocks((prev)=>[ ...prev, index ]); if (blocks[index].hasTreasure) { setScore((prev)=>prev + (blocks[index].isRare ? 10 : 5)); } updatedHits[index] = 5; new Audio("/sounds/break.mp3").play(); } return updatedHits; }); }; const handleTreasureClick = (index)=>{ if (!brokenBlocks.includes(index)) return; setTreasures((prev)=>prev.filter((i)=>i !== index)); setScore((prev)=>prev + (blocks[index].isRare ? 10 : 5)); new Audio("/sounds/treasure.mp3").play(); }; React.useEffect(()=>{ let interval; if (gameStarted) { interval = setInterval(()=>{ setTimeLeft((prev)=>{ if (prev > 0) return prev - 1; clearInterval(interval); setGameStarted(false); return 0; }); }, 1000); } return ()=>clearInterval(interval); }, [ gameStarted ]); React.useEffect(()=>{ if (!gameStarted) return; const newBlocks = Array.from({ length: totalBlocks }, ()=>({ hasTreasure: Math.random() > 0.7, isRare: Math.random() > 0.9, isStone: Math.random() > 0.8 })); setBlocks(newBlocks); setBlockHits(Array.from({ length: totalBlocks }).fill(0)); setCharacterImage("https://ucarecdn.com/db19d21b-58ba-462d-af72-e3aa97702cdd/"); }, [ gameStarted ]); const resetGame = async ()=>{ setGameStarted(true); setTimeLeft(30); setScore(0); setBrokenBlocks([]); setTreasures([]); setBlockHits(Array.from({ length: totalBlocks }).fill(0)); setCharacterPosition(0); }; React.useEffect(()=>{ window.addEventListener("keydown", handleKeyDown); return ()=>window.removeEventListener("keydown", handleKeyDown); }, [ handleKeyDown ]); React.useEffect(()=>{ if (score > highScore) { setHighScore(score); localStorage.setItem("highScore", score.toString()); } }, [ score, highScore ]); const displayedBlocks = blocks; const displayedHits = blockHits; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center font-crimson-text relative", __source: { fileName: "", lineNumber: 180, columnNumber: 5 }, __self: this }, !gameStarted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/923659e0-4a84-4e1d-bb2d-a4d1b9aed8ac/", alt: "Ice dungeon background", className: "absolute inset-0 w-full h-full object-cover", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this })) : /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/2e375f37-237e-41fb-b25c-59cad8c41bf0/", alt: "Ice dungeon game background", className: "absolute inset-0 w-full h-full object-cover", __source: { fileName: "", lineNumber: 191, columnNumber: 9 }, __self: this }), !gameStarted ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center z-20 space-y-8", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-7xl text-white mb-4 font-bold font-game-title text-center px-8 py-6 bg-blue-900 bg-opacity-70 rounded-xl border-4 border-blue-300 shadow-lg transform hover:scale-105 transition-transform tracking-wider", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, "❄️ 氷ダンジョンで宝探し ❄️"), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-blue-500 hover:bg-blue-600 text-white text-3xl font-bold py-6 px-16 rounded-full transform hover:scale-110 transition-all duration-200 shadow-lg border-4 border-blue-300", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, "Start Game")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-2xl text-white mb-4 absolute top-0 left-1/2 -translate-x-1/2 z-10 bg-blue-900 bg-opacity-70 px-4 py-2 rounded-b-lg", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, "⏰ Time Left: ", timeLeft, "s"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-8 gap-2 z-10", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, displayedBlocks.map((block, index)=>{ const progress = displayedHits[index] / 5 * 100; const isCharacterPosition = index === characterPosition; const isBroken = brokenBlocks.includes(index); const hasTreasure = block.hasTreasure; return /*#__PURE__*/ React.createElement("div", { key: index, className: `w-[50px] h-[50px] relative ${block.isStone ? "bg-gray-600" : isBroken ? "bg-transparent" : "bg-blue-200 opacity-70"} shadow-lg ${progress >= 100 && !block.isStone ? "ice-break" : ""}`, onClick: ()=>{ if (!block.isStone && !isBroken) { handleBlockClick(index); } }, __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, hasTreasure && !isBroken && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl sparkle opacity-50", __source: { fileName: "", lineNumber: 240, columnNumber: 21 }, __self: this }, "💎"), block.isStone && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl", __source: { fileName: "", lineNumber: 245, columnNumber: 21 }, __self: this }, "🪨"), progress > 0 && progress < 100 && !block.isStone && /*#__PURE__*/ React.createElement("svg", { className: "absolute inset-0 w-full h-full -rotate-90", __source: { fileName: "", lineNumber: 250, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "25", cy: "25", r: "20", fill: "none", stroke: "#ef4444", strokeWidth: "5", strokeDasharray: `${progress / 100 * 125.6} 125.6`, className: "transform origin-center", __source: { fileName: "", lineNumber: 251, columnNumber: 23 }, __self: this })), isCharacterPosition && !isBroken && !block.isStone && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 z-50", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/db19d21b-58ba-462d-af72-e3aa97702cdd/", alt: "Player character", className: "w-full h-full object-contain", style: { pointerEvents: "none" }, __source: { fileName: "", lineNumber: 265, columnNumber: 23 }, __self: this }))); })), /*#__PURE__*/ React.createElement("div", { className: "text-xl text-white mt-4 z-10 bg-blue-900 bg-opacity-70 px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, "💎 Score: ", score), timeLeft === 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white bg-opacity-80 p-4 rounded shadow-lg z-10", __source: { fileName: "", lineNumber: 281, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl text-black", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, "Game Over!"), /*#__PURE__*/ React.createElement("div", { className: "text-xl text-black", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, "Final Score: ", score), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameStarted(false), className: "bg-green-500 text-white p-2 mt-2 rounded", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, "Retry"))), timeLeft !== 0 && gameStarted && /*#__PURE__*/ React.createElement("div", { className: "text-xl text-white absolute top-5 right-5 z-10 bg-blue-900 bg-opacity-70 px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 295, columnNumber: 9 }, __self: this }, "🏆 High Score: ", highScore), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 299, columnNumber: 7 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap'); .font-game-title { font-family: 'DotGothic16', sans-serif; } .sparkle { animation: sparkle 0.8s infinite alternate; } @keyframes sparkle { from { opacity: 0.8; } to { opacity: 1; transform: scale(1.1); } } .ice-break { animation: break-effect 0.5s forwards; background: transparent !important; } @keyframes break-effect { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 0.3; } 100% { transform: scale(0); opacity: 0; } } .treasure-collect { cursor: pointer; transition: transform 0.2s; } .treasure-collect:hover { transform: scale(1.2); } `)); }