function FarmImageViewer({ cropId, src }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: `畑で育っている作物${cropId}`, className: "w-full h-[200px] object-cover mb-3", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function FarmImageViewerStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FarmImageViewer, { cropId: 1, src: "./field.png", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FarmImageViewer, { cropId: 2, src: "./field.png", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [crops, setCrops] = React.useState([ { id: 1, name: "作物1", growth: 0, watered: false, fertilized: false }, { id: 2, name: "作物2", growth: 0, watered: false, fertilized: false }, { id: 3, name: "作物3", growth: 0, watered: false, fertilized: false } ]); React.useEffect(()=>{ const interval = setInterval(()=>{ setCrops((prevCrops)=>prevCrops.map((crop)=>({ ...crop, growth: crop.growth + (crop.watered ? 2 : 1) + (crop.fertilized ? 2 : 0), watered: false, fertilized: false }))); }, 5000); return ()=>clearInterval(interval); }, []); const waterCrop = (id)=>{ setCrops((prevCrops)=>prevCrops.map((crop)=>crop.id === id ? { ...crop, watered: true } : crop)); }; const fertilizeCrop = (id)=>{ setCrops((prevCrops)=>prevCrops.map((crop)=>crop.id === id ? { ...crop, fertilized: true } : crop)); }; const harvestCrop = (id)=>{ setCrops((prevCrops)=>prevCrops.map((crop)=>crop.id === id ? { ...crop, growth: 0 } : crop)); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f0f4c3] min-h-screen p-5", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-5", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "農業ゲーム")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-10 flex-wrap", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, crops.map((crop)=>{ const growthText = `成長: ${crop.growth}`; return /*#__PURE__*/ React.createElement("div", { key: crop.id, className: "w-[300px] h-[400px] bg-green-200 p-3 rounded-lg", onClick: ()=>harvestCrop(crop.id), __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-3", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, crop.name), /*#__PURE__*/ React.createElement(FarmImageViewer, { cropId: crop.id, src: `./field.png`, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-3", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, growthText), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 w-full mb-2", onClick: (e)=>{ e.stopPropagation(); waterCrop(crop.id); }, name: "waterCrop", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "水やり"), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white py-2 px-4 rounded hover:bg-yellow-700 w-full mb-2", onClick: (e)=>{ e.stopPropagation(); fertilizeCrop(crop.id); }, name: "fertilizeCrop", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "肥料をあげる")); }))); }