function MainComponent() { const [userChoice, setUserChoice] = React.useState(null); const [computerChoice, setComputerChoice] = React.useState(null); const [waitingForComputer, setWaitingForComputer] = React.useState(false); const [result, setResult] = React.useState(""); const choices = [ "rock", "paper", "scissors" ]; const playGame = (choice)=>{ setUserChoice(choice); setWaitingForComputer(true); setTimeout(()=>{ let computer = choices[Math.floor(Math.random() * 3)]; setComputerChoice(computer); setWaitingForComputer(false); determineWinner(choice, computer); }, 1000); }; const determineWinner = (user, computer)=>{ if (user === computer) { setResult("It's a tie!"); } else if (user === "rock" && computer === "scissors" || user === "paper" && computer === "rock" || user === "scissors" && computer === "paper") { setResult("You win!"); } else { setResult("You lose!"); } }; const resetGame = ()=>{ setUserChoice(null); setComputerChoice(null); setResult(""); }; const title = "Rock, Paper, Scissors".split(", ").map((word, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "relative inline-block", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, [ ...word ].map((letter, letterIndex)=>/*#__PURE__*/ React.createElement("span", { key: letterIndex, className: "font-silkscreen text-[#FF1493] inline-block", style: { animationName: 'wave', animationDuration: `${word.length * 0.3}s`, animationIterationCount: 'infinite', animationTimingFunction: 'ease-in-out', animationDelay: `${index * 0.3 + letterIndex * 0.07}s` }, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, letter)))); const renderChoices = choices.map((choice)=>/*#__PURE__*/ React.createElement("button", { key: choice, name: choice, className: "font-silkscreen bg-[#EA3F9C] text-white p-2 m-2 shadow-[0_4px_#2F2F93]", onClick: ()=>playGame(choice), disabled: !!userChoice, __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, choice.charAt(0).toUpperCase() + choice.slice(1))); return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full h-screen bg-[#00BFFF]", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, renderChoices), /*#__PURE__*/ React.createElement("div", { className: "mt-8 font-silkscreen", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, userChoice && /*#__PURE__*/ React.createElement("div", { className: "text-lg text-white", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "You chose: ", userChoice), waitingForComputer && /*#__PURE__*/ React.createElement("div", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "- Waiting for computer..."), computerChoice && /*#__PURE__*/ React.createElement("div", { className: "animate-result text-lg text-white", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Computer chose: ", computerChoice), result && /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-4 text-white", __source: { fileName: "", lineNumber: 90, columnNumber: 22 }, __self: this }, result), userChoice && /*#__PURE__*/ React.createElement("button", { className: "font-silkscreen bg-[#00BFFF] text-black p-2 mt-4", onClick: resetGame, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Play Again"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .text-white { color: white; text-shadow: 2px 2px black; } @keyframes resultAnimation { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animate-result { animation: resultAnimation 1s ease forwards; } `)); }