function MainComponent() { const [position, setPosition] = React.useState("center"); const [score, setScore] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(30); const [gameRunning, setGameRunning] = React.useState(false); const [highScore, setHighScore] = React.useState(0); const [gameOver, setGameOver] = React.useState(false); const timerRef = React.useRef(null); const moveTimeoutRef = React.useRef(null); const audioRef = React.useRef(null); React.useEffect(()=>{ if (gameRunning && timeLeft > 0) { timerRef.current = setInterval(()=>{ setTimeLeft((prev)=>prev - 1); }, 1000); } else if (timeLeft === 0) { clearInterval(timerRef.current); if (score > highScore) setHighScore(score); setGameRunning(false); } return ()=>clearInterval(timerRef.current); }, [ gameRunning, timeLeft, score, highScore ]); const handlePlayerMove = ()=>{ if (!gameRunning || gameOver) return; if (moveTimeoutRef.current) { setGameOver(true); setGameRunning(false); if (audioRef.current) audioRef.current.pause(); return; } const nextPosition = position === "center" ? score % 4 === 0 || score % 4 === 3 ? "left" : "right" : "center"; setPosition(nextPosition); setScore((prev)=>prev + 1); moveTimeoutRef.current = setTimeout(()=>{ moveTimeoutRef.current = null; }, 500); }; const handleStartGame = ()=>{ setScore(0); setTimeLeft(30); setGameRunning(true); setGameOver(false); setPosition("center"); if (audioRef.current) audioRef.current.play(); }; const handleResetGame = ()=>{ setScore(0); setTimeLeft(30); setGameRunning(false); setPosition("center"); setGameOver(false); if (audioRef.current) audioRef.current.pause(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-5 w-full h-[600px] bg-gray-200", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full mb-5 text-xl font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Time Left: ", timeLeft < 10 ? `0${timeLeft}` : timeLeft, " s"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Score: ", score)), /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-center w-full h-[500px] bg-white", onClick: handlePlayerMove, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-[25%] w-[2px] h-full bg-black", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-[75%] w-[2px] h-full bg-black", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `absolute ${position === "left" ? "left-[10%]" : position === "center" ? "left-[47%]" : "left-[84%]"} top-[50%] fa fa-male text-4xl`, style: { transition: 'left 0.5s' }, __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mt-5", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleStartGame, className: "px-4 py-2 bg-blue-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Start Game"), /*#__PURE__*/ React.createElement("button", { onClick: handleResetGame, className: "px-4 py-2 bg-gray-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Reset Game")), /*#__PURE__*/ React.createElement("div", { className: "mt-5 text-lg font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, "High Score: ", highScore), gameOver && /*#__PURE__*/ React.createElement("div", { className: "mt-5 text-4xl font-roboto text-red-500", __source: { fileName: "", lineNumber: 93, columnNumber: 20 }, __self: this }, "骨折"), /*#__PURE__*/ React.createElement("div", { className: "absolute left-[10%] top-[50%] text-xl font-roboto transform -translate-y-1/2", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "南青山"), /*#__PURE__*/ React.createElement("div", { className: "absolute right-[10%] top-[50%] text-xl font-roboto transform -translate-y-1/2", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, "表参道"), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, loop: true, __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "/background-music.mp3", type: "audio/mpeg", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this })); }