function TypingPracticeApp({ theme, text, difficulty, score, completedGoals, onTextChange, onBlur, onStart, onDifficultyChange, onSaveProgress, onThemeChange }) { const difficultyOptions = [ "初心者", "中級者", "上級者" ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f4f4f9] text-[#333] min-h-screen", style: { backgroundColor: theme }, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 bg-[#0077cc] text-white", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "タイピングゲーム")), /*#__PURE__*/ React.createElement("main", { className: "p-4 space-y-6", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, "練習を開始"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-[200px] p-2 border border-[#ccc]", placeholder: "ここにテキストを入力...", name: "typingPracticeArea", value: text, onChange: onTextChange, onBlur: onBlur, __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-blue-500 text-white", onClick: onStart, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "新しいセッションを開始します")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "難易度設定"), /*#__PURE__*/ React.createElement("select", { className: "p-2 border border-[#ccc]", name: "difficultyLevel", value: difficulty, onChange: onDifficultyChange, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, difficultyOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, __source: { fileName: "", lineNumber: 30, columnNumber: 46 }, __self: this }, option)))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "スコアボード"), /*#__PURE__*/ React.createElement("p", { className: "p-2 border bg-white", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "スコア: ", score)), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "進捗管理"), /*#__PURE__*/ React.createElement("ul", { className: "p-2 border bg-white", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, completedGoals.map((goal, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, goal))), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-blue-500 text-white", onClick: onSaveProgress, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "進捗を保存")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "カスタマイズオプション"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "テーマ色:"), /*#__PURE__*/ React.createElement("input", { type: "color", className: "border p-1", name: "themeColor", value: theme, onChange: onThemeChange, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "マルチプレイヤーオプション"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "友達とプレイ"), /*#__PURE__*/ React.createElement("p", { className: "pt-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "リアルタイムの通信を設定するコードは未実装です。")))); } function TypingPracticeAppStory() { const props = { theme: '#f4f4f9', text: '', difficulty: '初心者', score: 0, completedGoals: [], onTextChange: ()=>{}, onBlur: ()=>{}, onStart: ()=>{}, onDifficultyChange: ()=>{}, onSaveProgress: ()=>{}, onThemeChange: ()=>{} }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TypingPracticeApp, { ...props, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this })); } function MainComponent() { const [text, setText] = React.useState(""); const [score, setScore] = React.useState(0); const [completedGoals, setCompletedGoals] = React.useState([]); const [difficulty, setDifficulty] = React.useState("初心者"); const [theme, setTheme] = React.useState("#ffffff"); const [inputStartTime, setInputStartTime] = React.useState(null); const [inputEndTime, setInputEndTime] = React.useState(null); const [players, setPlayers] = React.useState([]); const [isMultiplayer, setIsMultiplayer] = React.useState(false); const handleTextChange = (event)=>{ setText(event.target.value); if (!inputStartTime) { setInputStartTime(Date.now()); } }; const calculateScore = ()=>{ const endTime = Date.now(); const timeTaken = (endTime - inputStartTime) / 1000; const words = text.trim().split(/\s+/).length; const speed = words / (timeTaken / 60); let accuracyScore = 100; setScore(Math.round(speed * accuracyScore)); setInputEndTime(endTime); }; const startNewSession = ()=>{ setText(""); setScore(0); setInputStartTime(null); setInputEndTime(null); }; const handleDifficultyChange = (event)=>{ setDifficulty(event.target.value); startNewSession(); }; const handleThemeChange = (event)=>{ setTheme(event.target.value); }; const updateGoals = ()=>{ const newGoal = `Completed ${difficulty} level with a score of ${score}`; setCompletedGoals([ ...completedGoals, newGoal ]); }; const handleMultiplayerToggle = ()=>{ setIsMultiplayer(!isMultiplayer); }; const joinGame = ()=>{ setPlayers([ ...players, { id: players.length + 1, name: `Player ${players.length + 1}`, score: 0 } ]); }; const startMultiplayerGame = ()=>{ if (!isMultiplayer) { setIsMultiplayer(true); } joinGame(); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f4f4f9] text-[#333] min-h-screen", style: { backgroundColor: theme }, __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 bg-[#0077cc] text-white", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "タイピングゲーム")), /*#__PURE__*/ React.createElement("main", { className: "p-4 space-y-6", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "練習を開始"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-[200px] p-2 border border-[#ccc]", placeholder: "ここにテキストを入力...", name: "typingPracticeArea", value: text, onChange: handleTextChange, onBlur: calculateScore, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-blue-500 text-white", onClick: startNewSession, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "新しいセッションを開始")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "難易度設定"), /*#__PURE__*/ React.createElement("select", { className: "p-2 border border-[#ccc]", name: "difficultyLevel", value: difficulty, onChange: handleDifficultyChange, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "初心者"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "中級者"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "上級者"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, "スコアボード"), /*#__PURE__*/ React.createElement("p", { className: "p-2 border bg-white", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "スコア: ", score)), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "進捗管理"), /*#__PURE__*/ React.createElement("ul", { className: "p-2 border bg-white", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, completedGoals.map((goal, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, goal))), /*#__PURE__*/ React.createElement("button", { className: "mt-2 p-2 bg-blue-500 text-white", onClick: updateGoals, __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "進捗を保存")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "カスタマイズオプション"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "テーマ色:"), /*#__PURE__*/ React.createElement("input", { type: "color", className: "border p-1", name: "themeColor", value: theme, onChange: handleThemeChange, __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "マルチプレイヤーオプション"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white", onClick: handleMultiplayerToggle, __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, isMultiplayer ? 'マルチプレイを終了' : '友達とプレイ'), isMultiplayer && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-green-500 text-white", onClick: startMultiplayerGame, __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "ゲームに参加"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 p-2 border bg-white", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, players.map((player)=>/*#__PURE__*/ React.createElement("li", { key: player.id, __source: { fileName: "", lineNumber: 126, columnNumber: 19 }, __self: this }, "ID: ", player.id, ", Name: ", player.name, ", Score: ", player.score))))))); }