function StylishButton({ text, icon, color, onClick }) { const bgColor = { yellow: "bg-[#F8E44F]", purple: "bg-[#C1BFF9]", teal: "bg-[#7EE7D6]" }[color] || "bg-[#F8E44F]"; const roundedClass = icon ? "rounded-full" : "rounded-[6px]"; return /*#__PURE__*/ React.createElement("button", { className: `font-poppins text-black border-2 border-black ${bgColor} ${roundedClass} px-4 py-2`, onClick: onClick, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, icon && /*#__PURE__*/ React.createElement("i", { className: `fas ${icon} mr-2 text-black`, __source: { fileName: "", lineNumber: 17, columnNumber: 18 }, __self: this }), text)); } function StylishButtonStory() { const handleClick = ()=>{ alert("Button clicked!"); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StylishButton, { text: "Click me", icon: "fa-star", color: "yellow", onClick: handleClick, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Purple Button", icon: "fa-heart", color: "purple", onClick: handleClick, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StylishButton, { text: "Teal No Icon", color: "teal", onClick: handleClick, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [gameState, setGameState] = React.useState("ready"); const [playerChoice, setPlayerChoice] = React.useState(null); const [computerChoice, setComputerChoice] = React.useState(null); const [result, setResult] = React.useState(null); const choices = [ "rock", "paper", "scissors" ]; const getComputerChoice = ()=>{ return choices[Math.floor(Math.random() * 3)]; }; const handleChoice = (choice)=>{ if (gameState !== "ready") return; setPlayerChoice(choice); const compChoice = getComputerChoice(); setComputerChoice(compChoice); setGameState("result"); determineWinner(choice, compChoice); }; const determineWinner = (player, computer)=>{ if (player === computer) { setResult("draw"); } else if (player === "rock" && computer === "scissors" || player === "paper" && computer === "rock" || player === "scissors" && computer === "paper") { setResult("win"); } else { setResult("lose"); } }; const resetGame = ()=>{ setGameState("ready"); setPlayerChoice(null); setComputerChoice(null); setResult(null); }; const choiceIcons = { rock: "✊", paper: "✋", scissors: "✌️" }; const choiceColors = { rock: "bg-gradient-to-r from-[#FF69B4] to-[#FF1493]", paper: "bg-gradient-to-r from-[#4B0082] to-[#8A2BE2]", scissors: "bg-gradient-to-r from-[#00CED1] to-[#20B2AA]" }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen font-futura bg-cover bg-center relative", style: { backgroundImage: "url(https://ucarecdn.com/4dc83146-3b71-43ea-a5b4-5d8bbc645c22/)" }, __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white bg-opacity-90 p-12 rounded-2xl w-full max-w-4xl shadow-2xl border-4 border-[#FF69B4]", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold mb-12 text-center text-[#FF69B4] tracking-wider", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "じゃんけんゲーム"), gameState === "ready" && /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-10 text-center font-bold text-[#4B0082] animate-bounce", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "じゃんけん、、、"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-8 mb-12", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, choices.map((choice)=>/*#__PURE__*/ React.createElement("button", { key: choice, onClick: ()=>handleChoice(choice), className: `${choiceColors[choice]} text-white rounded-full p-8 flex flex-col items-center justify-center w-44 h-44 text-6xl focus:outline-none transform transition-all duration-300 hover:scale-110 hover:shadow-xl ${gameState !== "ready" ? "opacity-50 cursor-not-allowed" : "hover:rotate-3"}`, disabled: gameState !== "ready", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, choiceIcons[choice]), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, choice === "rock" ? "グー" : choice === "paper" ? "パー" : "チョキ")))), gameState === "result" && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-5xl mb-8 font-bold text-[#4B0082]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "ポン！"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-16 mb-12", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center transform transition-all duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-4 font-bold text-[#FF69B4]", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "あなた"), /*#__PURE__*/ React.createElement("div", { className: `${choiceColors[playerChoice]} text-white rounded-full p-10 w-48 h-48 flex items-center justify-center text-7xl shadow-lg transform transition-all duration-300 hover:rotate-3`, __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, choiceIcons[playerChoice])), /*#__PURE__*/ React.createElement("div", { className: "text-center transform transition-all duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-4 font-bold text-[#4B0082]", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, "相手"), /*#__PURE__*/ React.createElement("div", { className: `${choiceColors[computerChoice]} text-white rounded-full p-10 w-48 h-48 flex items-center justify-center text-7xl shadow-lg transform transition-all duration-300 hover:rotate-3`, __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, choiceIcons[computerChoice]))), /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-10 font-bold", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, result === "win" && /*#__PURE__*/ React.createElement("span", { className: "text-[#FF69B4]", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, "勝ち！🎉"), result === "lose" && /*#__PURE__*/ React.createElement("span", { className: "text-[#4B0082]", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, "負け！😢"), result === "draw" && /*#__PURE__*/ React.createElement("span", { className: "text-[#20B2AA]", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, "あいこ！🤝")), /*#__PURE__*/ React.createElement("button", { onClick: resetGame, className: "bg-gradient-to-r from-[#FF69B4] to-[#FF1493] text-white rounded-full px-12 py-5 text-2xl font-bold focus:outline-none transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:rotate-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "もう一回！"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } `)); }