function MainComponent() { const [selectedResource, setSelectedResource] = React.useState(null); const [showInfo, setShowInfo] = React.useState(false); const [zoom, setZoom] = React.useState(1); const [checkedResources, setCheckedResources] = React.useState({}); const resources = [ { type: 'wood', icon: 'fas fa-tree text-green-700', title: '木材', position: 'top-1/4 left-1/3' }, { type: 'ore', icon: 'fas fa-gem text-blue-500', title: '鉱石', position: 'top-1/2 left-2/3' }, { type: 'food', icon: 'fas fa-drumstick-bite text-red-600', title: '食料', position: 'bottom-1/4 right-1/4' }, { type: 'water', icon: 'fas fa-tint text-blue-400', title: '水', position: 'top-1/3 right-1/3' } ]; const handleResourceClick = (resource)=>{ setSelectedResource(resource); setShowInfo(true); }; const closeInfo = ()=>{ setShowInfo(false); }; const handleZoomIn = ()=>{ setZoom((prev)=>Math.min(prev + 0.1, 2)); }; const handleZoomOut = ()=>{ setZoom((prev)=>Math.max(prev - 0.1, 0.5)); }; const handleCheckResource = (type)=>{ setCheckedResources((prev)=>({ ...prev, [type]: !prev[type] })); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "ゲーム物資マップ"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[calc(100vh-120px)] bg-[#e0f2fe] rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('/map-background.jpg')] bg-cover bg-center", style: { transform: `scale(${zoom})`, transition: 'transform 0.3s ease' }, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), resources.map((resource, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute ${resource.position} cursor-pointer transform hover:scale-110 transition-transform`, onClick: ()=>handleResourceClick(resource), style: { transform: `scale(${zoom})`, transition: 'transform 0.3s ease' }, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${resource.icon} text-4xl ${checkedResources[resource.type] ? 'opacity-50' : ''}`, title: resource.title, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-4 bg-white bg-opacity-80 p-2 rounded-lg shadow", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "凡例"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-1 font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, resources.map((resource, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${resource.icon} mr-2 ${checkedResources[resource.type] ? 'opacity-50' : ''}`, __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }), resource.title, /*#__PURE__*/ React.createElement("input", { type: "checkbox", className: "ml-2", checked: checkedResources[resource.type] || false, onChange: ()=>handleCheckResource(resource.type), __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }))))), showInfo && selectedResource && /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, selectedResource.title, "の情報"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "この", selectedResource.title, "は豊富です。収集してください。"), /*#__PURE__*/ React.createElement("button", { onClick: closeInfo, className: "mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "閉じる")), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 flex space-x-2", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleZoomIn, className: "bg-white p-2 rounded-full shadow hover:bg-gray-100", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search-plus", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleZoomOut, className: "bg-white p-2 rounded-full shadow hover:bg-gray-100", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search-minus", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }))))); }