function MainComponent() { const [randomText, setRandomText] = React.useState("ランダムな文章や単語をここに表示"); const [userInput, setUserInput] = React.useState(""); const [correctCount, setCorrectCount] = React.useState(0); const [wrongCount, setWrongCount] = React.useState(0); const [score, setScore] = React.useState(0); const [WPM, setWPM] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(60); const [bestScores, setBestScores] = React.useState([ 0 ]); const [gameMode, setGameMode] = React.useState("unlimited"); const [isGameRunning, setIsGameRunning] = React.useState(false); React.useEffect(()=>{ let timer; if (isGameRunning && timeLeft > 0) { timer = setInterval(()=>setTimeLeft(timeLeft - 1), 1000); } else if (timeLeft === 0) { endGame(); } return ()=>clearInterval(timer); }, [ isGameRunning, timeLeft ]); const startGame = ()=>{ setIsGameRunning(true); setTimeLeft(gameMode === "timed" ? 60 : Infinity); setUserInput(""); setCorrectCount(0); setWrongCount(0); setScore(0); setWPM(0); setRandomText(generateRandomText()); }; const endGame = ()=>{ setIsGameRunning(false); const newWPM = calculateWPM(); setWPM(newWPM); setBestScores((prevScores)=>[ ...prevScores, newWPM ]); }; const handleInputChange = (e)=>{ const value = e.target.value; setUserInput(value); let correct = 0; let wrong = 0; for(let i = 0; i < value.length; i++){ if (value[i] === randomText[i]) { correct++; } else { wrong++; } } setCorrectCount(correct); setWrongCount(wrong); setScore(correct - wrong); }; const generateRandomText = ()=>{ const texts = [ "ランダムな文章1", "ランダムな文章2", "ランダムな文章3" ]; return texts[Math.floor(Math.random() * texts.length)]; }; const calculateWPM = ()=>{ const wordsTyped = correctCount / 5; const minutes = (60 - timeLeft) / 60; return Math.round(wordsTyped / minutes); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "ゲーム開始"), /*#__PURE__*/ React.createElement("button", { onClick: endGame, className: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "ゲーム終了")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "p-2 bg-gray-200 rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, randomText), /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full p-2 mt-2 border border-gray-300 rounded", rows: "3", placeholder: "ここにタイプしてください", value: userInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-green-500", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "正確なタイプ: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 90, columnNumber: 49 }, __self: this }, correctCount)), /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "間違ったタイプ: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 91, columnNumber: 48 }, __self: this }, wrongCount))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "スコア: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, score)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "WPM: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, WPM))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "タイマー: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 100, columnNumber: 20 }, __self: this }, timeLeft)), /*#__PURE__*/ React.createElement("select", { name: "gameMode", className: "border border-gray-300 rounded p-2", value: gameMode, onChange: (e)=>setGameMode(e.target.value), __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "unlimited", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "無制限モード"), /*#__PURE__*/ React.createElement("option", { value: "timed", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "タイムアタックモード"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "ベストスコア"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, bestScores.map((score, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-1", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, score, " WPM")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "ゲームモード選択"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "設定")))); }