function MainComponent() { const [userChoice, setUserChoice] = React.useState(""); const [computerChoice, setComputerChoice] = React.useState(""); const [result, setResult] = React.useState(""); const [leaderboard, setLeaderboard] = React.useState({ wins: 0, losses: 0, draws: 0 }); const choices = [ "rock", "paper", "scissors" ]; const outcomes = { rock: { winsAgainst: "scissors", losesAgainst: "paper", iconClass: "fa-hand-rock", emoji: "🪨" }, paper: { winsAgainst: "rock", losesAgainst: "scissors", iconClass: "fa-hand-paper", emoji: "📄" }, scissors: { winsAgainst: "paper", losesAgainst: "rock", iconClass: "fa-hand-scissors", emoji: "✂️" } }; const onClickHandler = (choice)=>{ setUserChoice(choice); const randomIndex = Math.floor(Math.random() * choices.length); const computerOption = choices[randomIndex]; setComputerChoice(computerOption); determineWinner(choice, computerOption); }; const determineWinner = (user, computer)=>{ if (user === computer) { setResult("It's a draw!"); setLeaderboard((prev)=>({ ...prev, draws: prev.draws + 1 })); } else if (outcomes[user].winsAgainst === computer) { setResult("You win!"); setLeaderboard((prev)=>({ ...prev, wins: prev.wins + 1 })); } else { setResult("You lose!"); setLeaderboard((prev)=>({ ...prev, losses: prev.losses + 1 })); } }; const buttons = choices.map((choice)=>/*#__PURE__*/ React.createElement("button", { key: choice, className: "font-roboto bg-[#D3D3D3] py-2 px-4 rounded-full transition duration-300 ease-in-out", onClick: ()=>onClickHandler(choice), __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${outcomes[choice].iconClass} fa-2x`, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#000000]", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-bold mb-8 text-white", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Rock, Paper, Scissors"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4 mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, buttons), /*#__PURE__*/ React.createElement("div", { className: "text-lg mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, userChoice && /*#__PURE__*/ React.createElement("div", { className: "text-md text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Your choice: ", outcomes[userChoice].emoji, " ", userChoice), computerChoice && /*#__PURE__*/ React.createElement("div", { className: "text-md text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Computer's choice: ", outcomes[computerChoice].emoji, " ", computerChoice), result && /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold text-white", __source: { fileName: "", lineNumber: 62, columnNumber: 22 }, __self: this }, result))), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] p-4 bg-[#1c1c1c] text-white absolute right-0 top-0 h-full", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Leaderboard"), /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Wins: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, leaderboard.wins)), /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Losses: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, leaderboard.losses)), /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Draws: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 76, columnNumber: 18 }, __self: this }, leaderboard.draws)))); }