function MainComponent() { const [gameState, setGameState] = React.useState({ gameStarted: false, gameOver: false, clickTimes: [], score: 0, playerName: "" }); const [buttonPosition, setButtonPosition] = React.useState({ top: "40%", left: "50%" }); React.useEffect(()=>{ if (gameState.gameStarted && !gameState.gameOver) { getRandomPosition(); } }, [ gameState.gameStarted, gameState.gameOver, gameState.score ]); const startGame = ()=>{ setGameState({ gameStarted: true, gameOver: false, clickTimes: [], score: 0, playerName: gameState.playerName }); }; const resetGame = ()=>{ setGameState({ ...gameState, gameStarted: false, gameOver: false }); }; const getRandomPosition = ()=>{ const top = `${Math.random() * 80 + 10}%`; const left = `${Math.random() * 80 + 10}%`; setButtonPosition({ top, left }); }; const checkGameOver = (currentTime)=>{ const { clickTimes } = gameState; if (clickTimes.length >= 2 && currentTime - clickTimes[clickTimes.length - 1] >= clickTimes[clickTimes.length - 1] - clickTimes[clickTimes.length - 2]) { setGameState({ ...gameState, gameOver: true }); return true; } return false; }; const handleClick = ()=>{ if (gameState.gameOver || !gameState.gameStarted) return; const currentTime = Date.now(); if (!checkGameOver(currentTime)) { setGameState({ ...gameState, clickTimes: [ ...gameState.clickTimes, currentTime ], score: gameState.score + 1 }); } }; const handleNameChange = (event)=>{ setGameState({ ...gameState, playerName: event.target.value }); }; const intervalDisplay = gameState.clickTimes.length > 1 ? `${((gameState.clickTimes[gameState.clickTimes.length - 1] - gameState.clickTimes[gameState.clickTimes.length - 2]) / 1000).toFixed(2)}s` : 'N/A'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, !gameState.gameStarted && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Enter your name to start the game:"), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); startGame(); }, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "playerName", value: gameState.playerName, onChange: handleNameChange, placeholder: "Your Name", className: "px-4 py-2 border-2 border-gray-300 rounded mr-4 font-roboto", required: true, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded font-roboto focus:outline-none", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Start Game"))), gameState.gameStarted && !gameState.gameOver && /*#__PURE__*/ React.createElement("div", { onClick: handleClick, className: "w-20 h-20 bg-green-500 rounded-full cursor-pointer absolute", style: buttonPosition, __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-roboto absolute -top-10 left-1/2 transform -translate-x-1/2", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "Time: ", intervalDisplay, " | Score: ", gameState.score)), gameState.gameOver && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Game Over! ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 109, columnNumber: 24 }, __self: this }), " Score: ", gameState.score, " ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 109, columnNumber: 56 }, __self: this }), "Player: ", gameState.playerName), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "mt-4 px-4 py-2 bg-red-500 hover:bg-red-700 text-white rounded font-roboto focus:outline-none", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "Play Again"))); }