function LevelSelector({ selectedMode = "tutorial", onModeSelect = ()=>{} }) { const [items, setItems] = useState([]); const [placeholderContent, setPlaceholderContent] = useState(Array.from({ length: 5 }).fill(null)); const handleDrop = (index)=>(e)=>{ const filterData = e.dataTransfer.getData("text/plain"); const newContent = [ ...placeholderContent ]; newContent[index] = filterData; setPlaceholderContent(newContent); const filterJsonData = e.dataTransfer.getData("application/json"); if (filterJsonData) { try { const newFilter = JSON.parse(filterJsonData); setItems([ ...items, newFilter ]); } catch (error) { console.error("Invalid filter data"); } } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full min-h-screen bg-[#f5f5f5] font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "md:w-64 p-4 bg-white border-r border-gray-200 space-y-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-6 bg-[#f8f9fa] rounded-lg mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Choisissez votre niveau"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onModeSelect("tutorial"), className: `px-6 py-3 rounded-lg transition-colors ${selectedMode === "tutorial" ? "bg-[#4CAF50] text-white" : "bg-white border border-[#4CAF50] text-[#4CAF50] hover:bg-[#4CAF50] hover:text-white"}`, __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-graduation-cap mr-2", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), "Tutoriel"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onModeSelect("advanced"), className: `px-6 py-3 rounded-lg transition-colors ${selectedMode === "advanced" ? "bg-[#2196F3] text-white" : "bg-white border border-[#2196F3] text-[#2196F3] hover:bg-[#2196F3] hover:text-white"}`, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-star mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), "Avancé"))), /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-1.jpg", label: "Filtre à sable", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-2.jpg", label: "Filtre à cartouche", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-3.jpg", label: "Filtre à diatomées", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-6", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, placeholderContent.map((content, index)=>/*#__PURE__*/ React.createElement(PlaceholderSpot, { key: index, onDrop: handleDrop(index), __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, content && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 29 }, __self: this }, content)))), /*#__PURE__*/ React.createElement(PlaceholderSpot, { onDrop: handleDrop, __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement(FilterElement, { key: index, image: item.image, label: item.label, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this })))))); } function LevelSelectorStory() { const [mode, setMode] = useState("tutorial"); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(LevelSelector, { selectedMode: mode, onModeSelect: setMode, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this })); } function PlaceholderSpot({ onDrop, children }) { const [isDraggingOver, setIsDraggingOver] = useState(false); const handleDragOver = (e)=>{ e.preventDefault(); setIsDraggingOver(true); }; const handleDragLeave = ()=>{ setIsDraggingOver(false); }; const handleDrop = (e)=>{ e.preventDefault(); setIsDraggingOver(false); onDrop?.(e); }; return /*#__PURE__*/ React.createElement("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, className: `min-h-[200px] rounded-lg border-2 border-dashed p-4 transition-all ${isDraggingOver ? "border-blue-500 bg-blue-50" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, children || /*#__PURE__*/ React.createElement("div", { className: "flex h-full items-center justify-center text-gray-500", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Déposez vos filtres ici")); } function PlaceholderSpotStory() { const [items, setItems] = useState([]); const handleDrop = (e)=>{ const filterData = e.dataTransfer.getData("application/json"); if (filterData) { try { const newFilter = JSON.parse(filterData); setItems([ ...items, newFilter ]); } catch (error) { console.error("Invalid filter data"); } } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PlaceholderSpot, { onDrop: handleDrop, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))); } function GameBoard({ selectedFilters = [], onFilterChange = ()=>{} }) { const [placeholderContent, setPlaceholderContent] = useState(Array.from({ length: 5 }).fill(null)); const handleDrop = (index)=>(e)=>{ const filterData = e.dataTransfer.getData("text/plain"); const newContent = [ ...placeholderContent ]; newContent[index] = filterData; setPlaceholderContent(newContent); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full min-h-screen bg-[#f5f5f5] font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "md:w-64 p-4 bg-white border-r border-gray-200", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-1.jpg", label: "Filtre à sable", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-2.jpg", label: "Filtre à cartouche", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-3.jpg", label: "Filtre à diatomées", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, placeholderContent.map((content, index)=>/*#__PURE__*/ React.createElement(PlaceholderSpot, { key: index, onDrop: handleDrop(index), __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, content && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 27, columnNumber: 27 }, __self: this }, content)))))); } function GameBoardStory() { const [filters, setFilters] = useState([]); return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameBoard, { selectedFilters: filters, onFilterChange: setFilters, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function FilterElement({ image, label, onDragStart }) { const handleDragStart = (e)=>{ e.dataTransfer.setData("text/plain", label); if (onDragStart) onDragStart(e); }; return /*#__PURE__*/ React.createElement("div", { draggable: true, onDragStart: handleDragStart, className: "inline-flex flex-col items-center bg-white rounded-lg shadow-md p-4 cursor-move hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image || "/filtration-equipment.jpg", alt: "Équipement de filtration", className: "w-[120px] h-[120px] object-contain mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-700", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, label || "Filtre")); } function FilterElementStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 space-y-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-1.jpg", label: "Filtre à sable", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-2.jpg", label: "Filtre à cartouche", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/filter-3.jpg", label: "Filtre à diatomées", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function MainComponent() { const [success, setSuccess] = useState(false); const [error, setError] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f5f5f5] p-4 md:p-8", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl md:text-4xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Le Jeu des Filtres"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-gray-600", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "Placez les filtres dans le bon ordre pour réussir le niveau")), /*#__PURE__*/ React.createElement(LevelSelector, { __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4 md:p-6 mt-8", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/4", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-row md:flex-col gap-4 overflow-x-auto md:overflow-visible", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(FilterElement, { image: "/pump.jpg", label: "Pump", __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/f3m30.jpg", label: "F3M30", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/fse.jpg", label: "FSE", __source: { fileName: "", lineNumber: 25, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(FilterElement, { image: "/dca.jpg", label: "DCA", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 justify-center", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(PlaceholderSpot, { __source: { fileName: "", lineNumber: 32, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(PlaceholderSpot, { __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(PlaceholderSpot, { __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement(PlaceholderSpot, { __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }))))), success && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-green-100 text-green-700 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Bravo ! Vous avez réussi !"), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-100 text-red-700 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Oups ! Ce n'est pas le bon ordre, essayez encore !"))); }