function MainComponent() { const [selectedDominoes, setSelectedDominoes] = useState([]); const [workspaceOrder, setWorkspaceOrder] = useState([]); const [abelDominoes, setAbelDominoes] = useState([]); const [classicDominoes, setClassicDominoes] = useState([]); const [ghostDominoes, setGhostDominoes] = useState([]); const [sectionErrors, setSectionErrors] = useState({ abel: null, classic: null, ghost: null }); const [loadingStates, setLoadingStates] = useState({ abel: true, classic: true, ghost: true }); const [loading, setLoading] = useState(true); const [isFullscreen, setIsFullscreen] = useState(false); const [imagesPerRow, setImagesPerRow] = useState(4); const [abelLoadingAttempt, setAbelLoadingAttempt] = useState(0); const [loadingStartTime, setLoadingStartTime] = useState(null); useEffect(()=>{ const fetchDominoes1 = async (type)=>{ const maxRetries = type === 'ABEL' ? 5 : 3; const baseDelay = type === 'ABEL' ? 1500 : 1000; for(let attempt = 1; attempt <= maxRetries; attempt++){ try { setLoadingStates((prev)=>({ ...prev, [type.toLowerCase()]: true })); if (type === 'ABEL') { setAbelLoadingAttempt(attempt); setLoadingStartTime(Date.now()); } console.log(`Attempting to fetch ${type} dominoes (attempt ${attempt}/${maxRetries})`); const response = await fetch("/api/get-dominoes", { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ notation_type: type }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (!data || data.length === 0) { throw new Error(`No ${type} dominoes found in response`); } switch(type){ case 'ABEL': setAbelDominoes(data); setLoading(false); break; case 'Classic': setClassicDominoes(data); break; case 'Ghost': setGhostDominoes(data); break; } setSectionErrors((prev)=>({ ...prev, [type.toLowerCase()]: null })); setLoadingStates((prev)=>({ ...prev, [type.toLowerCase()]: false })); return; } catch (error) { console.error(`Error fetching ${type} dominoes (attempt ${attempt}/${maxRetries}):`, error); if (attempt === maxRetries) { setSectionErrors((prev)=>({ ...prev, [type.toLowerCase()]: error.message })); setLoadingStates((prev)=>({ ...prev, [type.toLowerCase()]: false })); if (type === 'ABEL') { setLoading(false); } if (type === 'Ghost' || type === 'Classic') { setTimeout(()=>fetchDominoes1(type), baseDelay * 2); } } else { await new Promise((resolve)=>setTimeout(resolve, baseDelay * Math.pow(1.5, attempt - 1))); } } } }; const loadDominoes = async ()=>{ await fetchDominoes1('ABEL'); await new Promise((resolve)=>setTimeout(resolve, 500)); await fetchDominoes1('Classic'); await new Promise((resolve)=>setTimeout(resolve, 500)); await fetchDominoes1('Ghost'); }; loadDominoes(); }, []); useEffect(()=>{ const handleFullscreenChange = ()=>{ setIsFullscreen(!!document.fullscreenElement); }; document.addEventListener('fullscreenchange', handleFullscreenChange); document.addEventListener('webkitfullscreenchange', handleFullscreenChange); document.addEventListener('mozfullscreenchange', handleFullscreenChange); document.addEventListener('MSFullscreenChange', handleFullscreenChange); return ()=>{ document.removeEventListener('fullscreenchange', handleFullscreenChange); document.removeEventListener('webkitfullscreenchange', handleFullscreenChange); document.removeEventListener('mozfullscreenchange', handleFullscreenChange); document.removeEventListener('MSFullscreenChange', handleFullscreenChange); }; }, []); const handleSelect = (domino)=>{ setSelectedDominoes([ ...selectedDominoes, domino ]); setWorkspaceOrder([ ...workspaceOrder, domino.id ]); }; const handleClear = ()=>{ setSelectedDominoes([]); setWorkspaceOrder([]); }; const toggleFullscreen = async ()=>{ const workspace = document.getElementById('workspace'); try { if (!document.fullscreenElement) { if (workspace.requestFullscreen) { await workspace.requestFullscreen(); } else if (workspace.webkitRequestFullscreen) { await workspace.webkitRequestFullscreen(); } else if (workspace.msRequestFullscreen) { await workspace.msRequestFullscreen(); } else if (workspace.mozRequestFullScreen) { await workspace.mozRequestFullScreen(); } } else { if (document.exitFullscreen) { await document.exitFullscreen(); } else if (document.webkitExitFullscreen) { await document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { await document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { await document.mozCancelFullScreen(); } } } catch (error) { console.error('Error toggling fullscreen:', error); } }; if (loading) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 159, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-gray-900 dark:border-white border-t-transparent", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-xl font-inter text-gray-900 dark:text-white", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, "Loading ABEL Dominoes..."), loadingStartTime && Date.now() - loadingStartTime > 5000 && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 dark:text-gray-400 max-w-md text-center", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "The loading is taking longer than usual. We're trying our best to fetch the dominoes. Please wait..."), abelLoadingAttempt > 1 && /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, "Attempt ", abelLoadingAttempt, " of 5..."))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 dark:bg-gray-900 p-8", __source: { fileName: "", lineNumber: 178, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white mb-8 text-center font-inter", __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }, "ABEL Teaching Board"), /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 182, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.abeldominoes.com", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-2 px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-lg transition-colors shadow-lg", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, "Visit ABEL Dominoes Official Website"), /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("polyline", { points: "15 3 21 3 21 9", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("line", { x1: "10", y1: "14", x2: "21", y2: "3", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 197, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 199, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, "ABEL Notation"), sectionErrors.abel && /*#__PURE__*/ React.createElement("button", { onClick: ()=>fetchDominoes('ABEL'), className: "flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg transition-colors shadow-lg", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this })), "Reload ABEL Dominoes")), sectionErrors.abel ? /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 215, columnNumber: 15 }, __self: this }, "Error Loading ABEL Dominoes"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, sectionErrors.abel), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm", __source: { fileName: "", lineNumber: 217, columnNumber: 15 }, __self: this }, "Please try reloading the dominoes using the button above.")) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-8", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, abelDominoes.filter((d)=>!d.is_white).map((domino)=>{ const whiteVersion = abelDominoes.find((d)=>d.is_white && d.label === domino.label); return /*#__PURE__*/ React.createElement("div", { key: domino.id, className: "flex flex-col items-center gap-4", __source: { fileName: "", lineNumber: 228, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 229, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: domino.image_url, alt: `Domino ${domino.label}`, className: "w-full max-w-[200px] h-auto rounded-lg mb-2", __source: { fileName: "", lineNumber: 230, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelect(domino), className: "bg-gray-900 hover:bg-gray-700 text-white px-4 py-2 rounded-md font-inter transition-colors", __source: { fileName: "", lineNumber: 235, columnNumber: 25 }, __self: this }, "Select")), whiteVersion && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 244, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: whiteVersion.image_url, alt: `Domino ${whiteVersion.label} (blanc)`, className: "w-full max-w-[200px] h-auto rounded-lg mb-2", __source: { fileName: "", lineNumber: 245, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelect(whiteVersion), className: "bg-gray-900 hover:bg-gray-700 text-white px-4 py-2 rounded-md font-inter transition-colors", __source: { fileName: "", lineNumber: 250, columnNumber: 27 }, __self: this }, "Select"))); }))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 264, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 265, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 266, columnNumber: 13 }, __self: this }, "Classic Notation"), sectionErrors.classic && /*#__PURE__*/ React.createElement("button", { onClick: ()=>fetchDominoes('Classic'), className: "flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg transition-colors shadow-lg", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 8.003 0 01-15.357-2m15.357 2H15", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this })), "Reload Classic Dominoes")), sectionErrors.classic ? /*#__PURE__*/ React.createElement("div", { className: "bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4 rounded", __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 281, columnNumber: 15 }, __self: this }, "Error Loading Classic Dominoes"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, sectionErrors.classic), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, "Please try reloading the dominoes using the button above.")) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-8", __source: { fileName: "", lineNumber: 286, columnNumber: 13 }, __self: this }, classicDominoes.map((domino)=>/*#__PURE__*/ React.createElement("div", { key: domino.id, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 288, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: domino.image_url, alt: `Classic Domino ${domino.label}`, className: "w-full max-w-[200px] h-auto rounded-lg mb-2", __source: { fileName: "", lineNumber: 289, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelect(domino), className: "bg-gray-900 hover:bg-gray-700 text-white px-4 py-2 rounded-md font-inter transition-colors", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, "Select"))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 305, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 306, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 307, columnNumber: 13 }, __self: this }, "Ghost Notes"), sectionErrors.ghost && /*#__PURE__*/ React.createElement("button", { onClick: ()=>fetchDominoes('Ghost'), className: "px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md font-inter transition-colors", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, "Retry Loading")), sectionErrors.ghost ? /*#__PURE__*/ React.createElement("div", { className: "text-red-600 mb-4", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, sectionErrors.ghost) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-8", __source: { fileName: "", lineNumber: 320, columnNumber: 13 }, __self: this }, ghostDominoes.map((domino)=>/*#__PURE__*/ React.createElement("div", { key: domino.id, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 322, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: domino.image_url, alt: `Ghost Domino ${domino.label}`, className: "w-full max-w-[200px] h-auto rounded-lg mb-2", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelect(domino), className: "bg-gray-900 hover:bg-gray-700 text-white px-4 py-2 rounded-md font-inter transition-colors", __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, "Select")))))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex gap-4 justify-center", __source: { fileName: "", lineNumber: 340, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleClear, className: "border border-gray-200 text-gray-900 hover:bg-gray-900 hover:text-white px-6 py-2 rounded-md font-inter transition-colors", __source: { fileName: "", lineNumber: 341, columnNumber: 9 }, __self: this }, "Clear Selection")), /*#__PURE__*/ React.createElement("div", { id: "workspace", className: `mt-8 ${isFullscreen ? 'fixed inset-0 z-50 bg-gray-100 dark:bg-gray-900 p-8 overflow-auto' : ''}`, __source: { fileName: "", lineNumber: 348, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 349, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 350, columnNumber: 11 }, __self: this }, "Workspace"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 353, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 354, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imagesPerRow", className: "text-gray-900 dark:text-white font-inter", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }, "Images per row:"), /*#__PURE__*/ React.createElement("select", { id: "imagesPerRow", value: imagesPerRow, onChange: (e)=>setImagesPerRow(Number(e.target.value)), className: "px-2 py-1 rounded-md border border-gray-300 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white font-inter focus:outline-none focus:ring-2 focus:ring-gray-500", name: "imagesPerRow", __source: { fileName: "", lineNumber: 358, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 365, columnNumber: 17 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 366, columnNumber: 17 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("option", { value: "3", __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, "3"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 368, columnNumber: 17 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("option", { value: "5", __source: { fileName: "", lineNumber: 369, columnNumber: 17 }, __self: this }, "5"), /*#__PURE__*/ React.createElement("option", { value: "6", __source: { fileName: "", lineNumber: 370, columnNumber: 17 }, __self: this }, "6"), /*#__PURE__*/ React.createElement("option", { value: "7", __source: { fileName: "", lineNumber: 371, columnNumber: 17 }, __self: this }, "7"), /*#__PURE__*/ React.createElement("option", { value: "8", __source: { fileName: "", lineNumber: 372, columnNumber: 17 }, __self: this }, "8"), /*#__PURE__*/ React.createElement("option", { value: "9", __source: { fileName: "", lineNumber: 373, columnNumber: 17 }, __self: this }, "9"), /*#__PURE__*/ React.createElement("option", { value: "10", __source: { fileName: "", lineNumber: 374, columnNumber: 17 }, __self: this }, "10"), /*#__PURE__*/ React.createElement("option", { value: "11", __source: { fileName: "", lineNumber: 375, columnNumber: 17 }, __self: this }, "11"), /*#__PURE__*/ React.createElement("option", { value: "12", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this }, "12"))), /*#__PURE__*/ React.createElement("button", { onClick: toggleFullscreen, className: "p-2 hover:bg-gray-100 rounded-lg transition-colors", "aria-label": isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen', __source: { fileName: "", lineNumber: 379, columnNumber: 13 }, __self: this }, isFullscreen ? /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 385, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this })) : /*#__PURE__*/ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 min-h-[200px] border-2 border-gray-300 rounded-lg bg-gray-200 dark:bg-gray-800", style: { display: 'grid', gridTemplateColumns: `repeat(${imagesPerRow}, minmax(0, 1fr))`, gap: '1rem' }, __source: { fileName: "", lineNumber: 396, columnNumber: 9 }, __self: this }, workspaceOrder.map((id, index)=>{ const domino = selectedDominoes[index]; return /*#__PURE__*/ React.createElement("div", { key: `workspace-${id}-${index}`, className: "relative", __source: { fileName: "", lineNumber: 407, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: domino.image_url, alt: `Domino ${domino.label} in workspace`, className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 408, columnNumber: 17 }, __self: this })); })))); }