function MainComponent({ textData }) { const [timeLimit, setTimeLimit] = React.useState(null); const [isGameStarted, setIsGameStarted] = React.useState(false); const [currentText, setCurrentText] = React.useState(null); const [typedText, setTypedText] = React.useState(""); const [score, setScore] = React.useState(0); const [remainingTime, setRemainingTime] = React.useState(0); let timer = null; const startGame = ()=>{ setIsGameStarted(true); setCurrentText(textData[Math.floor(Math.random() * textData.length)]); setScore(0); setTypedText(""); setRemainingTime(timeLimit * 60); timer = setInterval(()=>{ setRemainingTime((prev)=>{ if (prev <= 1) { clearInterval(timer); endGame(); } return prev - 1; }); }, 1000); }; const endGame = ()=>{ setIsGameStarted(false); clearInterval(timer); }; const handleChange = (e)=>{ const value = e.target.value; setTypedText(value); if (value === currentText.word) { setScore((prev)=>prev + 1); setCurrentText(textData[Math.floor(Math.random() * textData.length)]); setTypedText(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#f0f0f0] flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, isGameStarted ? /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white shadow-lg rounded-lg p-6 relative", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-red-500 text-lg font-bold", onClick: endGame, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "終了"), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg mb-6 text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, currentText.word), /*#__PURE__*/ React.createElement("p", { className: "text-md text-gray-600", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, currentText.reading)), /*#__PURE__*/ React.createElement("input", { type: "text", name: "typingInput", value: typedText, onChange: handleChange, className: "w-full p-3 border border-gray-300 rounded-lg", placeholder: "ここにタイピングしてください...", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-6", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "残り時間: ", remainingTime, "s"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "スコア: ", score))) : /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "制限時間"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 justify-center", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-full", onClick: ()=>setTimeLimit(1), __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "1分"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-full", onClick: ()=>setTimeLimit(2), __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "2分"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-full", onClick: ()=>setTimeLimit(3), __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "3分"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-full", onClick: ()=>setTimeLimit(4), __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "4分"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-full", onClick: ()=>setTimeLimit(5), __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "5分"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-6 py-3 rounded-full text-lg font-semibold", onClick: startGame, disabled: !timeLimit, __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "ゲームスタート")))); } function StoryComponent() { const textData = [ { word: "朝三暮四", reading: "ちょうさんぼし" }, { word: "英単語", reading: "えいたんご" }, { word: "モッツァレラチーズ", reading: "もっつぁれらちーず" }, { word: "猫", reading: "ねこ" }, { word: "犬", reading: "いぬ" }, { word: "魚", reading: "さかな" }, { word: "山", reading: "やま" }, { word: "川", reading: "かわ" }, { word: "田", reading: "た" }, { word: "木", reading: "き" }, { word: "花", reading: "はな" }, { word: "鳥", reading: "とり" }, { word: "ヒラメとカレイ", reading: "ひらめとかれい" }, { word: "北海道", reading: "ほっかいどう" }, { word: "沖縄", reading: "おきなわ" }, { word: "養蚕の場所、ようさんあるわ。", reading: "ようさんのばしょ、ようさんあるわ。" }, { word: "江戸幕府をつくったのは徳川家康である", reading: "えどばくふをつくったのはとくがわいえやすである" } ]; return /*#__PURE__*/ React.createElement(MainComponent, { textData: textData, __source: { fileName: "", lineNumber: 144, columnNumber: 10 }, __self: this }); }