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("引き分けです！"); } else if (user === "rock" && computer === "scissors" || user === "paper" && computer === "rock" || user === "scissors" && computer === "paper") { setResult("あなたの勝ちです！"); } else { setResult("あなたの負けです！"); } }; const resetGame = ()=>{ setUserChoice(null); setComputerChoice(null); setResult(""); }; const waitingForComputerText = "コンピューターを待っています..."; const userChoiceText = userChoice ? `あなたの選択: ${userChoice}` : "じゃんけん..."; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-full h-screen bg-[#87CEEB]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-5xl mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-silkscreen text-white inline-block", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "じゃんけん".split("").map((letter, letterIndex)=>/*#__PURE__*/ React.createElement("span", { key: letterIndex, className: "text-white inline-block", style: { animationDelay: `${letterIndex * 0.1}s` }, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, letter)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, choices.map((choice, index)=>/*#__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: 59, columnNumber: 13 }, __self: this }, choice === "scissors" ? "はさみ" : choice.charAt(0).toUpperCase() + choice.slice(1)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 font-silkscreen", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, userChoiceText), waitingForComputer && /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, " - ", waitingForComputerText)), computerChoice && /*#__PURE__*/ React.createElement("div", { className: "animate-result", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "コンピューターの選択: ", computerChoice)), result && /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-4 text-white", __source: { fileName: "", lineNumber: 84, columnNumber: 22 }, __self: this }, result), userChoice && /*#__PURE__*/ React.createElement("button", { className: "bg-[#87CEEB] text-black font-silkscreen p-2 mt-4", onClick: resetGame, __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "もう一度"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __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; } `)); }