function MainComponent() { const [userChoice, setUserChoice] = React.useState(''); const [computerChoice, setComputerChoice] = React.useState(''); const [result, setResult] = React.useState(''); const choices = [ 'Rock', 'Paper', 'Scissors' ]; const determineWinner = (user, computer)=>{ if (user === computer) { return "It's a draw!"; } else if (user === 'Rock' && computer === 'Scissors' || user === 'Paper' && computer === 'Rock' || user === 'Scissors' && computer === 'Paper') { return 'You win!'; } else { return 'Computer wins!'; } }; const play = (choice)=>{ const randomChoice = choices[Math.floor(Math.random() * choices.length)]; setUserChoice(choice); setResult('waiting for computer...'); setTimeout(()=>{ setComputerChoice(randomChoice); setResult(determineWinner(choice, randomChoice)); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#00BFFF] font-silkscreen", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-[40px]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, 'Rock, Paper, Scissors'.split("").map((char, index)=>/*#__PURE__*/ React.createElement("span", { key: index, style: { animation: `wave 1.5s infinite`, animationDelay: `${index / 5}s` }, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, char))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, choices.map((choice, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-[#EA3F9C] text-white py-2 px-4 mx-2 shadow-[#2F2F93] outline-black outline outline-offset-2", onClick: ()=>play(choice), __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, choice))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-white", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Your selection: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 54, columnNumber: 27 }, __self: this }, userChoice), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, result.startsWith('waiting') ? result : `waiting for computer...`), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Computer's choice: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 56, columnNumber: 33 }, __self: this }, result.startsWith('waiting') ? '' : computerChoice)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Winner: ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 22 }, __self: this }, result.startsWith('waiting') || result === 'waiting for computer...' ? '' : result)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } `)); }