function MainComponent() { const [hibaris, setHibaris] = React.useState(Array.from({ length: 5 }).map((_, index)=>({ id: index, status: 'egg', name: `ひばり ${index + 1}` }))); const hatchHibari = (id)=>{ setHibaris(hibaris.map((hibari)=>hibari.id === id ? { ...hibari, status: 'hatched' } : hibari)); }; const exchangeHibari = (id)=>{ setHibaris(hibaris.filter((hibari)=>hibari.id !== id)); }; const departHibari = (id)=>{ setHibaris(hibaris.map((hibari)=>hibari.id === id ? { ...hibari, status: 'departed' } : hibari)); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f0f0f0] flex flex-col items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "ひばり育成シミュレーションゲーム"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, hibaris.map((hibari)=>/*#__PURE__*/ React.createElement("div", { key: hibari.id, className: "bg-white rounded-xl shadow-lg p-6 w-[300px]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/hibari.jpg", alt: `${hibari.name}`, className: "w-[200px] h-[200px] mx-auto mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#666] mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, hibari.name), hibari.status === 'egg' && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>hatchHibari(hibari.id), className: "bg-blue-500 text-white py-2 px-4 rounded mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 17 }, __self: this }, "孵化する"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>exchangeHibari(hibari.id), className: "bg-green-500 text-white py-2 px-4 rounded mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "卵料理クーポンに交換")), hibari.status === 'hatched' && /*#__PURE__*/ React.createElement("button", { onClick: ()=>departHibari(hibari.id), className: "bg-red-500 text-white py-2 px-4 rounded mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, "お別れ"), /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 text-white py-2 px-4 rounded mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "着せ替え")))), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white py-2 px-4 rounded mt-8", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "ひばり脱走イベント確認"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } `)); }

ひばり育成シミュレーションゲーム

ひばり 1

ひばり 2

ひばり 3

ひばり 4

ひばり 5