function MainComponent() { const [words, setWords] = React.useState([ "apple", "orange", "banana", "grape", "lemon", "cherry", "pear", "peach", "plum", "kiwi", "melon", "mango", "berry", "avocado", "pomegranate" ]); const [wordIndex, setWordIndex] = React.useState(Math.floor(Math.random() * 15)); const [input, setInput] = React.useState(""); const [isCorrect, setIsCorrect] = React.useState(null); const [notification, setNotification] = React.useState(""); const [score, setScore] = React.useState(0); const [timeRemaining, setTimeRemaining] = React.useState(30); React.useEffect(()=>{ if (timeRemaining > 0) { const timer = setInterval(()=>setTimeRemaining(timeRemaining - 1), 1000); return ()=>clearInterval(timer); } else { submitScore(); } }, [ timeRemaining ]); const word = words[wordIndex] || ""; const handleChange = (e)=>{ const value = e.target.value; setInput(value); if (value === word) { setIsCorrect(true); setScore(score + 1); setNotification("正解!"); setTimeout(()=>{ setInput(""); setIsCorrect(null); setWordIndex(Math.floor(Math.random() * words.length)); setNotification(""); }, 1000); } else if (word.startsWith(value)) { setIsCorrect(null); } else { setIsCorrect(false); } }; const submitScore = ()=>{ fetch('/api/db/score', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `score_table` (score) VALUES (?)', values: [ score ] }) }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "英単語タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-white p-4 rounded-lg shadow-md w-[300px]", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "入力する英単語:"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xl mb-4 text-[#333333]", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, word), /*#__PURE__*/ React.createElement("input", { type: "text", name: "typedWord", value: input, onChange: handleChange, className: `font-roboto border-2 p-2 w-full mb-4 ${isCorrect === false ? 'border-red-500' : 'border-gray-300'}`, placeholder: "ここに入力", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-green-500", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, notification), isCorrect === false && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-red-500", __source: { fileName: "", lineNumber: 66, columnNumber: 33 }, __self: this }, "間違い!"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg mt-2", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "スコア: ", score), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg mt-2", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "残り時間: ", timeRemaining, "秒"))); }