function MainComponent() { const symbols = [ "🍒", "🔔", "🍋", "⭐", "🍉" ]; const [reels, setReels] = React.useState([ [ "🍒", "🔔", "🍋" ], [ "🔔", "🍋", "🍒" ], [ "🍋", "🍉", "⭐" ] ]); const [points, setPoints] = React.useState(100); const [message, setMessage] = React.useState(""); const spinReels = ()=>{ const newReels = [ [ getRandomSymbol(), getRandomSymbol(), getRandomSymbol() ], [ getRandomSymbol(), getRandomSymbol(), getRandomSymbol() ], [ getRandomSymbol(), getRandomSymbol(), getRandomSymbol() ] ]; setReels(newReels); calculateResult(newReels); }; const getRandomSymbol = ()=>symbols[Math.floor(Math.random() * symbols.length)]; const calculateResult = (newReels)=>{ const firstSymbols = newReels.map((reel)=>reel[0]); const isWinning = firstSymbols.every((symbol, i, arr)=>symbol === arr[0]); if (isWinning) { setPoints(points + 10); setMessage("You Win!"); } else { setPoints(points - 5); setMessage("You Lose!"); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 max-w-[400px] bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "border-b pb-4 mb-6 bg-[#20232a] text-white", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl text-center mb-2", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "スロットゲーム")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, reels.map((reel, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mx-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, reel.map((symbol, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-20 h-20 flex items-center justify-center bg-white border", style: { animation: "spin 1s" }, __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-4xl", __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this }, symbol)))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: spinReels, className: "px-6 py-2 bg-[#20232a] text-white font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "スピン")), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "ポイント: ", points), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, message)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: translateY(-100%); } to { transform: translateY(0); } } `)); }