function MainComponent() { const [highScore, setHighScore] = React.useState(100); const [timer, setTimer] = React.useState(60); const [score, setScore] = React.useState(0); const [randomWord, setRandomWord] = React.useState("ランダム単語"); const [isGameActive, setIsGameActive] = React.useState(false); const [isGameOver, setIsGameOver] = React.useState(false); const fetchRandomWord = async ()=>{ // Fetch random word from ChatGPT API }; const startGame = ()=>{ setIsGameActive(true); setIsGameOver(false); setScore(0); setTimer(60); fetchRandomWord(); const countdown = setInterval(()=>{ setTimer((prevTimer)=>{ if (prevTimer === 1) { clearInterval(countdown); endGame(); return 0; } return prevTimer - 1; }); }, 1000); }; const endGame = ()=>{ setIsGameActive(false); setIsGameOver(true); if (score > highScore) { setHighScore(score); } }; const handleTyping = (e)=>{ if (!isGameActive) return; const typedValue = e.target.value; if (typedValue === randomWord) { setScore((prevScore)=>prevScore + 10); e.target.value = ""; fetchRandomWord(); } else if (randomWord.startsWith(typedValue)) { // Correct Typing } else { setScore((prevScore)=>prevScore - 1); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px]", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center font-roboto mb-8", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "ダイナミックタイピングマスター"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "ハイスコア: ", highScore)), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "mb-4 px-4 py-2 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "スタート"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-gray-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "設定")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-gray-100 text-center font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-3xl", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, randomWord)), /*#__PURE__*/ React.createElement("input", { type: "text", name: "type-area", className: "w-full p-2 border border-gray-300 rounded", placeholder: "タイピングエリア", onChange: handleTyping, disabled: !isGameActive, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "タイマー: ", timer, "秒"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "スコア: ", score))), isGameOver && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "スコア: ", score), score > highScore && /*#__PURE__*/ React.createElement("p", { className: "mb-4 text-lg font-roboto", __source: { fileName: "", lineNumber: 89, columnNumber: 35 }, __self: this }, "新記録!"), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "mb-2 px-4 py-2 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "もう一度プレイ"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-gray-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "ホームに戻る")))); }