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 buttonColors = { rock: 'bg-[#D9EAD3]', paper: 'bg-[#CFE2F3]', scissors: 'bg-[#F4CCCC]' }; const playGame = (choice)=>{ setUserChoice(choice); setWaitingForComputer(true); let computer = choices[Math.floor(Math.random() * 3)]; setTimeout(()=>{ 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 waitingForComputerText = "Waiting for computer..."; const userChoiceText = userChoice ? `You chose: ${userChoice}` : "Choose your weapon!"; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full h-screen bg-[#00BFFF]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-5xl mb-8", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-silkscreen text-white inline-block", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, [ "Rock", "Paper", "Scissors" ].map((word, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "relative", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, [ ...word ].map((letter, letterIndex)=>/*#__PURE__*/ React.createElement("span", { key: letterIndex, className: "text-white inline-block", style: { animationDelay: `${index * 0.5 + letterIndex * 0.1}s` }, __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, letter)), index < 2 ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 62, columnNumber: 30 }, __self: this }, ",") : "")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, choices.map((choice)=>/*#__PURE__*/ React.createElement("button", { key: choice, name: choice, className: `${buttonColors[choice]} text-white font-silkscreen p-2 m-2 shadow-[0_4px_#2F2F93]`, onClick: ()=>playGame(choice), disabled: !!userChoice, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, choice.charAt(0).toUpperCase() + choice.slice(1)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 font-silkscreen", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, userChoiceText), waitingForComputer && /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, " - ", waitingForComputerText)), computerChoice && /*#__PURE__*/ React.createElement("div", { className: "animate-result", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "Computer chose: ", computerChoice)), result && /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-4 text-white", __source: { fileName: "", lineNumber: 94, columnNumber: 22 }, __self: this }, result), userChoice && /*#__PURE__*/ React.createElement("button", { className: "bg-[#00BFFF] text-black font-silkscreen p-2 mt-4", onClick: resetGame, __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Play Again"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } .text-white { color: white; text-shadow: 2px 2px black; animation: wave 2s ease-in-out infinite; } @keyframes resultAnimation { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } .animate-result { animation: resultAnimation 1s ease forwards; } `)); }