function MainComponent() { const [inputText, setInputText] = React.useState(''); const [score, setScore] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(60); const [wpm, setWpm] = React.useState(0); const [accuracy, setAccuracy] = React.useState(0); const sampleText = "Sample typing text goes here."; const totalChars = sampleText.length; React.useEffect(()=>{ if (timeLeft > 0) { const timer = setInterval(()=>{ setTimeLeft(timeLeft - 1); }, 1000); return ()=>clearInterval(timer); } }, [ timeLeft ]); const handleChange = (e)=>{ const value = e.target.value; const correctChars = value.split('').filter((char, idx)=>char === sampleText[idx]).length; setInputText(value); setScore(correctChars); setWpm((correctChars / 5 / ((60 - timeLeft) / 60)).toFixed(2)); setAccuracy((correctChars / totalChars * 100).toFixed(2)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow w-full max-w-[600px]", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#666] mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, sampleText), /*#__PURE__*/ React.createElement("input", { type: "text", name: "typingInput", className: "w-full p-2 border border-gray-300 rounded", placeholder: "ここにテキストを入力してください", value: inputText, onChange: handleChange, disabled: timeLeft <= 0, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#333]", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "スコア: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 44, columnNumber: 18 }, __self: this }, score)), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#333]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "制限時間: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, timeLeft, "秒")), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#333]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "速度: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, wpm, " WPM")), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#333]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "正確さ: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 53, columnNumber: 18 }, __self: this }, accuracy, "%"))))); }