function Player({ status = "playing" }) { const getPlayerColor = ()=>{ switch(status){ case "win": return "bg-blue-500"; case "lose": return "bg-red-500"; default: return "bg-white"; } }; return /*#__PURE__*/ React.createElement("div", { className: `w-[50px] h-[50px] rounded-full border-2 border-gray-800 ${getPlayerColor()}`, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }); } function PlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 p-8 bg-gray-900", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Player, { __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Player, { status: "win", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Player, { status: "lose", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function Monster({ playerPosition }) { const [monsterPosition, setMonsterPosition] = useState({ x: 100, y: 100 }); useEffect(()=>{ const interval = setInterval(()=>{ if (playerPosition) { const dx = playerPosition.x - monsterPosition.x; const dy = playerPosition.y - monsterPosition.y; const speed = 1; setMonsterPosition((prev)=>({ x: prev.x + (dx > 0 ? speed : -speed), y: prev.y + (dy > 0 ? speed : -speed) })); } }, 50); return ()=>clearInterval(interval); }, [ playerPosition, monsterPosition ]); return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[600px] bg-[#121212]", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[50px] h-[50px] rounded-full bg-[#ff0000]", style: { left: `${monsterPosition.x}px`, top: `${monsterPosition.y}px`, transition: "all 0.05s linear" }, __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function MonsterStory() { const [playerPos, setPlayerPos] = useState({ x: 300, y: 300 }); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Monster, { playerPosition: playerPos, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function Timer({ onTimeUp }) { const [timeLeft, setTimeLeft] = useState(60); const [isBlue, setIsBlue] = useState(false); useEffect(()=>{ if (timeLeft === 0) { setIsBlue(true); return; } const timer = setInterval(()=>{ setTimeLeft((prev)=>prev - 1); }, 1000); return ()=>clearInterval(timer); }, [ timeLeft ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-roboto mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, timeLeft), /*#__PURE__*/ React.createElement(React.Fragment, null)); } function TimerStory() { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Timer, { __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function Maze({ level = 1, onComplete }) { const [playerPos, setPlayerPos] = useState({ x: 0, y: 0 }); const [showWin, setShowWin] = useState(false); const mazeSize = Math.min(5 + level, 15); const walls = useMemo(()=>{ const wallArray = []; for(let i = 0; i < mazeSize * level; i++){ wallArray.push({ x: Math.floor(Math.random() * (mazeSize - 2)) + 1, y: Math.floor(Math.random() * (mazeSize - 2)) + 1 }); } return wallArray; }, [ level, mazeSize ]); const goal = useMemo(()=>({ x: mazeSize - 1, y: mazeSize - 1 }), [ mazeSize ]); useEffect(()=>{ const handleKeyPress = (e)=>{ const newPos = { ...playerPos }; switch(e.key){ case "ArrowUp": if (playerPos.y > 0) newPos.y--; break; case "ArrowDown": if (playerPos.y < mazeSize - 1) newPos.y++; break; case "ArrowLeft": if (playerPos.x > 0) newPos.x--; break; case "ArrowRight": if (playerPos.x < mazeSize - 1) newPos.x++; break; } const hitWall = walls.some((wall)=>wall.x === newPos.x && wall.y === newPos.y); if (!hitWall) { setPlayerPos(newPos); } if (newPos.x === goal.x && newPos.y === goal.y) { setShowWin(true); onComplete?.(); } }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, [ playerPos, walls, goal, mazeSize, onComplete ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "レベル ", level)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative bg-[#f0f0f0] rounded-lg overflow-hidden", style: { width: `${mazeSize * 40}px`, height: `${mazeSize * 40}px` }, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, walls.map((wall, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "absolute bg-[#333] rounded", style: { width: "38px", height: "38px", left: `${wall.x * 40}px`, top: `${wall.y * 40}px` }, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bg-[#4CAF50] rounded", style: { width: "38px", height: "38px", left: `${goal.x * 40}px`, top: `${goal.y * 40}px` }, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bg-[#2196F3] rounded", style: { width: "38px", height: "38px", left: `${playerPos.x * 40}px`, top: `${playerPos.y * 40}px`, transition: "all 0.2s" }, __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }))), showWin && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4 font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#4CAF50]", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "クリア！"))); } function MazeStory() { const [level, setLevel] = useState(1); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Maze, { level: level, onComplete: ()=>setLevel((prev)=>prev + 1), __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "h-screen w-full flex flex-col items-center justify-center bg-[url('https://ucarecdn.com/33d3ed19-f2d2-4b55-9dab-63edff57b1ef/-/format/auto/')] bg-cover bg-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl mb-8 font-serif text-white drop-shadow-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "ゆきの冒険"), /*#__PURE__*/ React.createElement("a", { href: "/game", className: "bg-white/80 hover:bg-white px-12 py-4 rounded-lg text-2xl font-serif text-gray-800 transition-all duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "スタート")); }