function MainComponent() { const [difficulty, setDifficulty] = React.useState("初級"); const [mode, setMode] = React.useState("タイムアタック"); const [text, setText] = React.useState("表示されるテキスト"); const [input, setInput] = React.useState(""); const [score, setScore] = React.useState({ speed: 0, accuracy: 0, points: 0 }); const [highScores, setHighScores] = React.useState([ { name: "---", score: 0 } ]); const [words, setWords] = React.useState([ "テキスト1", "テキスト2", "テキスト3" ]); const [currentIndex, setCurrentIndex] = React.useState(0); function startGame() { const randomWords = words.sort(()=>0.5 - Math.random()); setWords(randomWords); setText(randomWords[0]); } function handleInputChange(e) { const { value } = e.target; setInput(value); if (value === text) { setInput(""); const nextIndex = currentIndex + 1; setText(words[nextIndex] || "ゲーム終了"); setCurrentIndex(nextIndex); if (nextIndex >= words.length) { finishGame(); } else { setScore({ ...score, points: score.points + 10 }); } } } function finishGame() { const newHighScores = [ ...highScores, { name: "Player", score: score.points } ]; setHighScores(newHighScores.sort((a, b)=>b.score - a.score).slice(0, 5)); setText("ゲーム終了"); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full h-full bg-[#f0f0f0] font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "難易度設定:"), /*#__PURE__*/ React.createElement("select", { name: "difficulty", value: difficulty, onChange: (e)=>setDifficulty(e.target.value), className: "p-2 border rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, [ "初級", "中級", "上級" ].map((level)=>/*#__PURE__*/ React.createElement("option", { key: level, value: level, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, level)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "ゲームモード:"), /*#__PURE__*/ React.createElement("select", { name: "mode", value: mode, onChange: (e)=>setMode(e.target.value), className: "p-2 border rounded", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, [ "タイムアタック", "サバイバル" ].map((mode)=>/*#__PURE__*/ React.createElement("option", { key: mode, value: mode, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, mode)))), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-blue-500 text-white p-4 rounded mb-8", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, "ゲームを開始"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-[500px]", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, text), /*#__PURE__*/ React.createElement("input", { name: "typing", type: "text", value: input, onChange: handleInputChange, className: "w-full p-4 border rounded text-lg mb-4", placeholder: "ここにタイピングしてください", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-[500px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, "スコアと記録"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "タイピング速度: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 96, columnNumber: 21 }, __self: this }, score.speed), " wpm"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "正確さ: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, score.accuracy), " %"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "スコア: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, score.points))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-[500px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "ハイスコアランキング"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal pl-8", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, highScores.map((hs, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, hs.name, ": ", hs.score, " points")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-[500px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, "ゲームのルール"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "ゲームのルールや操作方法の説明・・・・"))); }