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); 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: 1, columnNumber: 1290 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 1, columnNumber: 1376 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "text-5xl mb-8", __source: { fileName: "", lineNumber: 1, columnNumber: 1414 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "font-silkscreen text-white inline-block", __source: { fileName: "", lineNumber: 1, columnNumber: 1456 }, __self: this }, " ", [ "Rock", "Paper", "Scissors" ].map((word, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "relative", __source: { fileName: "", lineNumber: 1, columnNumber: 1594 }, __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: 1, columnNumber: 1710 }, __self: this }, " ", letter, " ")), " ", index < 2 ? /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 1, columnNumber: 2063 }, __self: this }, ",") : "", " ")), " "), " "), " ", /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1, columnNumber: 2162 }, __self: this }, " ", choices.map((choice)=>/*#__PURE__*/ React.createElement("button", { key: choice, name: choice, className: "bg-[#EA3F9C] text-white font-silkscreen p-2 m-2 shadow-[0_4px_#2F2F93]", onClick: ()=>playGame(choice), disabled: !!userChoice, __source: { fileName: "", lineNumber: 1, columnNumber: 2217 }, __self: this }, " ", choice.charAt(0).toUpperCase() + choice.slice(1), " ")), " "), " ", /*#__PURE__*/ React.createElement("div", { className: "mt-8 font-silkscreen", __source: { fileName: "", lineNumber: 1, columnNumber: 2600 }, __self: this }, " ", /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 1, columnNumber: 2649 }, __self: this }, " ", /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 1, columnNumber: 2687 }, __self: this }, userChoiceText), " ", waitingForComputer && /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 1, columnNumber: 2791 }, __self: this }, " - ", waitingForComputerText), " "), " ", computerChoice && /*#__PURE__*/ React.createElement("div", { className: "animate-result", __source: { fileName: "", lineNumber: 1, columnNumber: 2930 }, __self: this }, " ", /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 1, columnNumber: 2977 }, __self: this }, " Computer chose: ", computerChoice, " "), " "), " ", result && /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-4 text-white", __source: { fileName: "", lineNumber: 1, columnNumber: 3139 }, __self: this }, result), " ", userChoice && /*#__PURE__*/ React.createElement("button", { className: "bg-[#00BFFF] text-black font-silkscreen p-2 mt-4", onClick: resetGame, __source: { fileName: "", lineNumber: 1, columnNumber: 3231 }, __self: this }, " Play Again "), " "), " "), " ", /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 1, columnNumber: 3456 }, __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; } `), " "); }