function MainComponent({ phrase, userInput, onInputChange, gameActive, results, startGame, endGame }) { const hasError = userInput && phrase !== userInput; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f4f4f8] w-full min-h-screen p-8", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded p-6 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#333] text-3xl mb-6", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Typing Practice Game"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-[#666]", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Type the following:"), /*#__PURE__*/ React.createElement("p", { className: "font-mono bg-[#e0e0e0] p-3 rounded mt-2", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, phrase)), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "typingInput", className: `w-full font-mono p-3 rounded border ${hasError ? 'border-red-500' : 'border-gray-300'}`, value: userInput, onChange: onInputChange, autoFocus: true, disabled: !gameActive, __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center space-x-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)), results && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 font-roboto text-sm", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Accuracy: ", results.accuracy, "%"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Words per minute: ", results.wpm)))); } function StoryComponent() { const [userInput, setUserInput] = React.useState(""); const [gameActive, setGameActive] = React.useState(false); const [results, setResults] = React.useState(null); const phrase = "Example sentence for typing"; const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const startGame = ()=>{ setGameActive(true); setUserInput(""); setResults(null); }; const endGame = ()=>{ setGameActive(false); setResults({ accuracy: 100, wpm: 80 }); // Placeholder for actual calculation }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { phrase: phrase, userInput: userInput, onInputChange: handleInputChange, gameActive: gameActive, results: results, startGame: startGame, endGame: endGame, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); }