function MainComponent() { const [text, setText] = React.useState(""); const [typedText, setTypedText] = React.useState(""); const [score, setScore] = React.useState(0); const [timer, setTimer] = React.useState(60); const [gameStatus, setGameStatus] = React.useState('start'); React.useEffect(()=>{ if (timer > 0 && gameStatus === 'in-progress') { setTimeout(()=>setTimer(timer - 1), 1000); } else if (timer === 0) { setGameStatus('finished'); } }, [ timer, gameStatus ]); const startGame = async ()=>{ const response = await fetch('https://api.randomtext.me'); const data = await response.json(); setText(data.text_out.replace(/<[^>]+>/g, '')); setGameStatus('in-progress'); setTimer(60); setTypedText(''); setScore(0); }; const handleTyping = (e)=>{ const typedValue = e.target.value; setTypedText(typedValue); if (text.startsWith(typedValue)) { setScore(score + 1); } }; const retry = ()=>{ setGameStatus('start'); setText(''); setTypedText(''); setTimer(60); setScore(0); }; let feedbackColor = text.startsWith(typedText) ? 'text-green-500' : 'text-red-500'; let displayText = gameStatus === 'start' ? 'ゲームを始める' : text; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center bg-[#F6EFDF] min-h-screen font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, gameStatus !== 'finished' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[20px] font-bold my-4", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, "Timer: ", timer, " seconds"), /*#__PURE__*/ React.createElement("div", { className: "text-[20px] font-bold my-4", __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("div", { className: `text-[24px] ${feedbackColor} my-4`, __source: { fileName: "", lineNumber: 51, columnNumber: 21 }, __self: this }, displayText), gameStatus === 'in-progress' && /*#__PURE__*/ React.createElement("input", { type: "text", value: typedText, onChange: handleTyping, className: "w-[500px] h-[50px] border border-gray-300 p-2", autoFocus: true, __source: { fileName: "", lineNumber: 53, columnNumber: 25 }, __self: this })), gameStatus === 'start' && /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-blue-500 text-white px-4 py-2 my-4", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "Start"), gameStatus === 'finished' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[20px] font-bold my-4", __source: { fileName: "", lineNumber: 68, columnNumber: 21 }, __self: this }, "Final Score: ", score), /*#__PURE__*/ React.createElement("button", { onClick: retry, className: "bg-blue-500 text-white px-4 py-2 my-4 w-[150px] h-[50px]", __source: { fileName: "", lineNumber: 69, columnNumber: 21 }, __self: this }, "再挑戦"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameStatus('start'), className: "bg-red-500 text-white px-4 py-2 my-4 w-[150px] h-[50px]", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, "終了"))); }