function MainComponent() { const [count, setCount] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); const [selectedTime, setSelectedTime] = React.useState(15); const [timeLeft, setTimeLeft] = React.useState(15); const [playerName, setPlayerName] = React.useState(''); const [highScores, setHighScores] = React.useState([ { duration: 15, scores: [] }, { duration: 30, scores: [] }, { duration: 45, scores: [] }, { duration: 60, scores: [] }, { duration: 300, scores: [] }, { duration: 600, scores: [] }, { duration: 1500, scores: [] } ]); const [currentPage, setCurrentPage] = React.useState('home'); React.useEffect(()=>{ let interval = null; if (isRunning && timeLeft > 0) { interval = setInterval(()=>{ setTimeLeft((prev)=>prev - 1); }, 1000); setIntervalId(interval); } else if (timeLeft === 0) { setIsRunning(false); updateHighScore(selectedTime, count); if (interval) clearInterval(interval); } return ()=>{ if (interval) clearInterval(interval); }; }, [ isRunning, timeLeft ]); React.useEffect(()=>{ const onSpaceBar = (e)=>{ if (e.code === 'Space' && isRunning) { setCount((prevCount)=>prevCount + 1); } }; window.addEventListener('keydown', onSpaceBar); return ()=>window.removeEventListener('keydown', onSpaceBar); }, [ isRunning ]); const updateHighScore = (duration, newScore)=>{ setHighScores((prevScores)=>prevScores.map((scoreEntry)=>scoreEntry.duration === duration ? { ...scoreEntry, scores: [ ...scoreEntry.scores, { name: playerName, score: newScore } ].sort((a, b)=>b.score - a.score).slice(0, 999) } : scoreEntry)); }; const handlePlayerNameChange = (event)=>{ setPlayerName(event.target.value); }; const handleDurationChange = (event)=>{ const duration = Number(event.target.value); setSelectedTime(duration); setTimeLeft(duration); }; const handleStartClick = ()=>{ setCurrentPage('game'); setIsRunning(true); setCount(0); }; const handleClose = ()=>{ setIsRunning(false); setTimeLeft(selectedTime); }; const handleNextClick = ()=>{ setCurrentPage('selection'); }; const durationToString = (duration)=>{ if (duration < 60) return `${duration} sec`; if (duration < 3600) return `${Math.floor(duration / 60)} min`; return `${Math.floor(duration / 3600)} hr`; }; const rankPosition = (duration)=>{ const scores = highScores.find((scoreEntry)=>scoreEntry.duration === duration)?.scores || []; const playerScoreIndex = scores.findIndex((score)=>score.name === playerName); return playerScoreIndex !== -1 ? playerScoreIndex + 1 : '-'; }; const scoreRow = (score, index)=>/*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center space-x-2 border-b py-1", key: index, __source: { fileName: "", lineNumber: 99, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, score.name), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, score.score)); const currentPageContent = ()=>{ switch(currentPage){ case 'home': return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl mb-8 font-roboto", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Spacebar Clicker Homepage"), /*#__PURE__*/ React.createElement("input", { name: "playerName", type: "text", placeholder: "Enter your name", className: "border p-1 w-[200px] text-center", value: playerName, onChange: handlePlayerNameChange, __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }), playerName && /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white p-1 mt-2", onClick: handleNextClick, __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "Next ➡️")); case 'selection': return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Select Duration"), /*#__PURE__*/ React.createElement("select", { name: "duration", className: "border p-1", value: selectedTime, onChange: handleDurationChange, __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, highScores.map((scoreEntry)=>/*#__PURE__*/ React.createElement("option", { key: scoreEntry.duration, value: scoreEntry.duration, __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, durationToString(scoreEntry.duration)))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white p-1", onClick: handleStartClick, __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, "Start")); case 'game': const countdownToShow = timeLeft > 0 ? `${timeLeft}s` : "Time's up!"; const scoreToShow = isRunning ? `Score: ${count}` : "Start clicking!"; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl mb-4 font-roboto", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "Spacebar Challenge"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, countdownToShow), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, scoreToShow), /*#__PURE__*/ React.createElement("button", { className: `bg-red-500 text-white p-1 mt-2 ${!isRunning ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, onClick: handleClose, disabled: !isRunning, __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, "Stop")); default: return null; } }; const showHighScoresSection = currentPage !== 'game' && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full", __source: { fileName: "", lineNumber: 177, columnNumber: 5 }, __self: this }, highScores.map((scoreEntry, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `p-2 w-full ${idx > 0 ? 'mt-4' : ''}`, __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-1 font-roboto", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, durationToString(scoreEntry.duration)), /*#__PURE__*/ React.createElement("div", { className: "text-xs mb-1 font-roboto", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "Rank: ", rankPosition(scoreEntry.duration), " of ", scoreEntry.scores.length), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto max-h-[140px]", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, scoreEntry.scores.map(scoreRow))))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2 pt-10", __source: { fileName: "", lineNumber: 191, columnNumber: 5 }, __self: this }, currentPageContent(), showHighScoresSection); }

Spacebar Clicker Homepage

15 sec

30 sec

45 sec

1 min

5 min

10 min

25 min