function MainComponent() { const [score, setScore] = useState(0); const [timeLeft, setTimeLeft] = useState(60); const [gameOver, setGameOver] = useState(false); const [foundDifferences, setFoundDifferences] = useState(new Set()); const differences = [ { x: 150, y: 100 }, { x: 300, y: 200 }, { x: 200, y: 300 }, { x: 400, y: 150 }, { x: 250, y: 250 } ]; useEffect(()=>{ if (timeLeft > 0 && !gameOver) { const timer = setInterval(()=>{ setTimeLeft((prev)=>prev - 1); }, 1000); return ()=>clearInterval(timer); } else if (timeLeft === 0) { setGameOver(true); } }, [ timeLeft, gameOver ]); const handleClick = (e, imageNum)=>{ if (gameOver) return; const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; differences.forEach((diff, index)=>{ if (!foundDifferences.has(index)) { const distance = Math.sqrt(Math.pow(x - diff.x, 2) + Math.pow(y - diff.y, 2)); if (distance < 30) { setScore((prev)=>prev + 1); setFoundDifferences((prev)=>new Set([ ...prev, index ])); } } }); }; const restartGame = ()=>{ setScore(0); setTimeLeft(60); setGameOver(false); setFoundDifferences(new Set()); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8 bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "スコア: ", score), /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "残り時間: ", timeLeft, "秒"), /*#__PURE__*/ React.createElement("button", { onClick: restartGame, className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "リスタート")), gameOver ? /*#__PURE__*/ React.createElement("div", { className: "text-center bg-white p-12 rounded-lg shadow", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "ゲームオーバー！"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl mb-6", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "最終スコア: ", score), /*#__PURE__*/ React.createElement("button", { onClick: restartGame, className: "bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-lg text-xl", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "もう一度プレイ")) : /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 justify-center", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/image1.jpg", alt: "左の画像", className: "w-[500px] h-[400px] object-cover cursor-pointer", onClick: (e)=>handleClick(e, 1), __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/image2.jpg", alt: "右の画像", className: "w-[500px] h-[400px] object-cover cursor-pointer", onClick: (e)=>handleClick(e, 2), __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }))))); }