function MainComponent() { const [guess, setGuess] = React.useState(''); const [attempts, setAttempts] = React.useState([]); const [attemptCount, setAttemptCount] = React.useState(1); const secretWord = "CRANE"; const maxAttempts = 6; const handleChange = (e)=>setGuess(e.target.value.toUpperCase()); const handleSubmit = (e)=>{ e.preventDefault(); if (guess.length !== 5 || attemptCount > maxAttempts) return; const feedback = secretWord.split('').map((char, index)=>{ if (guess[index] === char) return { char, color: "green-500" }; if (secretWord.includes(guess[index])) return { char: guess[index], color: "yellow-500" }; return { char: guess[index], color: "gray-500" }; }); setAttempts([ ...attempts, feedback ]); setAttemptCount(attemptCount + 1); setGuess(''); if (guess === secretWord) { alert("Congratulations! You've guessed the word!"); } else if (attemptCount === maxAttempts) { alert("Sorry, you've run out of attempts. The correct word was " + secretWord); } }; const handlePlayAgain = ()=>{ setGuess(''); setAttempts([]); setAttemptCount(1); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] flex flex-col items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl mb-5", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, "Word Guessing Game"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Guess the Word"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "guess", className: "border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none w-full", value: guess, onChange: handleChange, placeholder: "Enter guess here...", maxLength: "5", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 py-2 px-4 bg-blue-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Submit Guess")), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, attempts.map((attempt, index)=>/*#__PURE__*/ React.createElement("p", { key: index, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Attempt ", index + 1, ": ", attempt.map(({ char, color })=>/*#__PURE__*/ React.createElement("span", { className: `text-${color}`, __source: { fileName: "", lineNumber: 43, columnNumber: 83 }, __self: this }, char))))), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Guess Attempts: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 47, columnNumber: 30 }, __self: this }, attemptCount - 1, "/", maxAttempts)))), /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePlayAgain, className: "py-2 px-4 bg-green-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Play Again"))); }