const bubbleTypes = { copper: { value: 1, probability: 0.9 }, silver: { value: 100, probability: 0.08 }, gold: { value: 1000, probability: 0.02 } }; let goldenTimeActive = false; function handler({ action, giftValue, currentPoints }) { if (action === 'generateBubble') { const rand = Math.random(); let bubble; if (goldenTimeActive) { bubble = rand < 0.5 ? 'gold' : rand < 0.75 ? 'silver' : 'copper'; } else { if (rand < bubbleTypes.gold.probability) { bubble = 'gold'; } else if (rand < bubbleTypes.gold.probability + bubbleTypes.silver.probability) { bubble = 'silver'; } else { bubble = 'copper'; } } return { bubble, effect: bubble === 'gold' ? 'goldenFlash' : null }; } else if (action === 'sendGift') { let bubble; if (giftValue >= 1000) { bubble = 'gold'; } else if (giftValue >= 100) { bubble = 'silver'; } else { bubble = 'copper'; } return { bubble, effect: bubble === 'gold' ? 'goldenFlash' : null }; } else if (action === 'upgradeFactory') { const upgradeCost = 1000; if (currentPoints >= upgradeCost) { const newPoints = currentPoints - upgradeCost; return { upgraded: true, newPoints }; } return { upgraded: false, newPoints: currentPoints }; } else if (action === 'getRanking') { const ranking = [ { user: 'User1', points: 5000 }, { user: 'User2', points: 3000 }, { user: 'User3', points: 2000 } ]; return { ranking }; } else if (action === 'goldenTime') { goldenTimeActive = true; setTimeout(()=>goldenTimeActive = false, 30000); return { goldenTime: true }; } return null; } function MainComponent() { const ranking = handler({ action: 'getRanking' }).ranking; const [points, setPoints] = React.useState(0); const [bubbles, setBubbles] = React.useState([]); const generateBubble = ()=>{ const result = handler({ action: 'generateBubble' }); setBubbles((prevBubbles)=>[ ...prevBubbles, { type: result.bubble, id: Date.now() } ]); }; const sendGift = ()=>{ const result = handler({ action: 'sendGift', giftValue: 100 }); setBubbles((prevBubbles)=>[ ...prevBubbles, { type: result.bubble, id: Date.now() } ]); }; const upgradeFactory = ()=>{ const result = handler({ action: 'upgradeFactory', currentPoints: points }); if (result.upgraded) { setPoints(result.newPoints); } }; const activateGoldenTime = ()=>{ handler({ action: 'goldenTime' }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-5 font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-5 rounded-lg shadow-lg w-full max-w-[600px] mx-auto mb-5", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-5", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, "ドリームバブル・ファクトリー"), /*#__PURE__*/ React.createElement("button", { onClick: generateBubble, className: "mb-3 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "バブル生成"), /*#__PURE__*/ React.createElement("button", { onClick: sendGift, className: "mb-3 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "ギフトを送る"), /*#__PURE__*/ React.createElement("button", { onClick: upgradeFactory, className: "mb-3 px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "工場をアップグレード"), /*#__PURE__*/ React.createElement("button", { onClick: activateGoldenTime, className: "mb-3 px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "ゴールデンタイムを有効にする")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-5 rounded-lg shadow-lg w-full max-w-[600px] mx-auto mb-5", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, bubbles.map((bubble)=>/*#__PURE__*/ React.createElement("div", { key: bubble.id, className: `bubble bubble-${bubble.type}`, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-5 rounded-lg shadow-lg w-full max-w-[600px] mx-auto", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "ランキング"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, ranking.map((rank, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, rank.user), ": ", /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 102, columnNumber: 63 }, __self: this }, rank.points, " ポイント"))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, ` .bubble { width: 20px; height: 20px; border-radius: 50%; position: absolute; animation: float 5s linear infinite; } .bubble-copper { background-color: bronze; } .bubble-silver { background-color: silver; } .bubble-gold { background-color: gold; animation: flash 1s; } @keyframes float { 0% { transform: translateY(0); } 100% { transform: translateY(-100vh); } } @keyframes flash { 0%, 100% { background-color: gold; } 50% { background-color: lightgoldenrodyellow; } } `)); }