function JapaneseTypingGame({ userInput, handleChange, placeholder }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "typingInput", className: "w-full px-4 py-2 border border-[#D1D5DB] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#4F46E5] transition duration-150", placeholder: placeholder, autoComplete: "off", lang: "ja", value: userInput, onChange: handleChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function JapaneseTypingGameStory() { const [userInput, setUserInput] = React.useState(""); const handleChange = (event)=>{ setUserInput(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(JapaneseTypingGame, { userInput: userInput, handleChange: handleChange, placeholder: "ここに入力", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function MainComponent() { const [textList, setTextList] = React.useState([ "リンゴ", "バナナ", "パソコン", "プログラミング", "東京", "リアクト", "タイピング", "忍者", "サムライ", "江戸" ]); const [currentWordIndex, setCurrentWordIndex] = React.useState(0); const [startTime, setStartTime] = React.useState(null); const [elapsedTime, setElapsedTime] = React.useState(0); const [userInput, setUserInput] = React.useState(""); const [isFinished, setIsFinished] = React.useState(false); React.useEffect(()=>{ let interval = null; if (startTime && !isFinished) { interval = setInterval(()=>{ setElapsedTime(Math.floor((Date.now() - startTime) / 1000)); }, 1000); } return ()=>interval && clearInterval(interval); }, [ startTime, isFinished ]); const handleChange = (e)=>{ if (!startTime) setStartTime(Date.now()); const currentValue = e.target.value; setUserInput(currentValue); if (textList[currentWordIndex] === currentValue) { setUserInput(""); if (currentWordIndex < textList.length - 1) { setCurrentWordIndex(currentWordIndex + 1); } else { setIsFinished(true); alert(`完了! 所要時間: ${elapsedTime} 秒`); resetGame(); } } }; const resetGame = ()=>{ setCurrentWordIndex(0); setStartTime(null); setElapsedTime(0); setIsFinished(false); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFC0CB] min-h-screen flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-4xl font-bold font-roboto text-[#121212] animate-bounce", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "タイピングゲーム"), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-[#FDE68A] to-[#FCA5A5] shadow-lg rounded-lg p-8 flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-roboto mb-4 text-[#121212]", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, currentWordIndex + 1, " / ", textList.length, " 🎯"), /*#__PURE__*/ React.createElement("div", { className: "border-b border-[#121212] w-full mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-xl font-roboto text-[#121212] pb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, textList[currentWordIndex])), /*#__PURE__*/ React.createElement(JapaneseTypingGame, { userInput: userInput, handleChange: handleChange, placeholder: "ここに入力", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), isFinished && /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 24 }, __self: this }, "お疲れさまでした！")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } `)); }