function RockPaperScissorsGame({ title, onButtonClick }) { return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#0000FF]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-4xl font-silkscreen", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, title.split("").map((char, index)=>{ const style = { animation: `wave 1s infinite ${index / 10}s`, textShadow: "1px 1px 2px black" }; return /*#__PURE__*/ React.createElement("span", { key: index, className: "inline-block", style: style, __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, char); })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-x-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "rock", onClick: ()=>onButtonClick('rock'), __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Rock"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "paper", onClick: ()=>onButtonClick('paper'), __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Paper"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "scissors", onClick: ()=>onButtonClick('scissors'), __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Scissors"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } `)); } function RockPaperScissorsGameStory() { const handleButtonClick = (choice)=>{ alert(`You chose ${choice}`); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RockPaperScissorsGame, { title: "Rock Paper Scissors", onButtonClick: handleButtonClick, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function RockPaperScissorsGame2({ title, onSelect }) { const chars = title.split(""); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#0000FF]", __source: { fileName: "", lineNumber: 4, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-4xl font-silkscreen", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, chars.map((char, index)=>{ const delay = `${index / 10}s`; const textShadow = "1px 1px 2px black"; return /*#__PURE__*/ React.createElement("span", { key: index, className: "inline-block", style: { animation: `wave 1s infinite ${delay}`, textShadow }, __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, char); })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-x-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "rock", onClick: ()=>onSelect("rock"), __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Rock"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "paper", onClick: ()=>onSelect("paper"), __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Paper"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "scissors", onClick: ()=>onSelect("scissors"), __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Scissors"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } `)); } function RockPaperScissorsGame2Story() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RockPaperScissorsGame2, { title: "Rock Paper Scissors", onSelect: (choice)=>console.log(choice), __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userChoice, setUserChoice] = React.useState(""); const [computerChoice, setComputerChoice] = React.useState(""); const [result, setResult] = React.useState(""); const choices = [ "rock", "paper", "scissors" ]; const title = "Rock, Paper, Scissors"; const getResult = (user, computer)=>{ if (user === computer) return "It's a draw!"; if (user === "rock" && computer === "scissors" || user === "scissors" && computer === "paper" || user === "paper" && computer === "rock") { return "You Win!"; } return "Computer Wins!"; }; const handleClick = (choice)=>{ setUserChoice(choice); setResult("Waiting for computer..."); setTimeout(()=>{ const randomChoice = choices[Math.floor(Math.random() * choices.length)]; setComputerChoice(randomChoice); setResult(getResult(choice, randomChoice)); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center min-h-screen bg-[#0000FF]", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-4xl font-silkscreen", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, title.split("").map((char, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "inline-block", style: { animation: `wave 1s infinite ${index / 10}s`, textShadow: "1px 1px 2px black" }, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, char))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-x-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "rock", onClick: ()=>handleClick("rock"), __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Rock"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "paper", onClick: ()=>handleClick("paper"), __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Paper"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#EA3F9C] text-white font-silkscreen shadow-[0_4px_2px_#2F2F93] px-6 py-2", name: "scissors", onClick: ()=>handleClick("scissors"), __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Scissors")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-silkscreen text-white text-lg", style: { textShadow: "1px 1px 2px black" }, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, `Your choice: ${userChoice}`), /*#__PURE__*/ React.createElement("p", { className: "font-silkscreen text-white text-lg", style: { textShadow: "1px 1px 2px black" }, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, `Computer choice: ${computerChoice}`), /*#__PURE__*/ React.createElement("p", { className: "font-silkscreen text-white text-lg", style: { textShadow: "1px 1px 2px black" }, __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, result))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, ` @keyframes wave { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } `)); }