[{"_1":2,"_185":-5,"_186":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/app.$appId",{"_12":13},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_30":31,"_32":-5,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":57,"_58":57,"_59":60,"_61":57,"_62":57,"_63":57,"_64":57,"_65":57,"_66":57,"_67":17,"_68":17,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_94":95,"_146":17,"_147":148,"_104":31,"_106":183,"_184":17},"id","2e22d9a78acc8f8ce129","isMyApp",false,"name","pumppaint","description","Squeeze, splatter, and spray neon liquid art across your digital canvas with satisfying hydraulic pressure! Each pump unleashes a mesmerizing flow of prismatic paint that responds to your every click with oddly satisfying visceral feedback.","brief","","isLive",true,"isPublic","tags",[29],"👑","cover","https://cdn.dev.fun/snapshot/2e22d9a78acc8f8ce129/23728_16d7e14e.webp","cdnUrl","createdAt",["D",1741111660868],"updatedAt",["D",1741116111664],"lastCommitId",["B","23728"],"tier",1,"credits",74,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"65969926-c723-4717-8d40-7cf687a6f05e","uniqueId","w1fwKxoDX7xojcK1FF5S1A5eBdPTxWad87Arm7qVmFu","username","solanaWallet","displayName","w1f...mFu","bio","avatar","/avatar.svg","commitCount",11,"forkCount",0,"likeCount","runsCount",965,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","2vYNmUvjqMqtpoGGZB9ZLLwBgT6ZqbhNU1jBJdCApump","code","import { useState, useCallback, useRef, useEffect, useMemo } from 'react';\nimport { io } from 'socket.io-client';\nimport { StateClient } from '@devfunlabs/state-client';\n\n// Initialize socket connection\nconst socket = io('wss://ws.dev.fun/app-2e22d9a78acc8f8ce129');\n\n// Initialize state client for persistent storage\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '2e22d9a78acc8f8ce129'\n});\nexport default function App() {\n // Expanded to 300x300 grid size\n const ROWS = 300;\n const COLS = 300;\n // Added black as a layer underneath violet (before violet in the array)\n const COLORS = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0066FF', '#4B0082', '#000000', '#9400D3'];\n\n // Track connected users\n const [connectedUsers, setConnectedUsers] = useState(0);\n\n // Track total visitors\n const [totalVisitors, setTotalVisitors] = useState(0);\n\n // Track if initial grid state has been loaded\n const [initialStateLoaded, setInitialStateLoaded] = useState(false);\n\n // Track if we're currently loading state to prevent race conditions\n const isLoadingStateRef = useRef(false);\n\n // Define a uniform cell size to ensure perfect squares\n const CELL_SIZE = 10; // 10px per cell base size for better visibility\n\n // Calculate natural canvas dimensions based on grid size\n const NATURAL_WIDTH = COLS * CELL_SIZE;\n const NATURAL_HEIGHT = ROWS * CELL_SIZE;\n\n // Set viewport dimensions to match the natural canvas size\n // For height, constrain to a percentage of window size\n // For width, we'll adjust it dynamically based on the aspect ratio to avoid horizontal black bars\n const VIEWPORT_HEIGHT = Math.min(window.innerHeight * 0.85, NATURAL_HEIGHT);\n // Calculate width based on the grid aspect ratio to ensure snug fit\n const gridAspectRatio = COLS / ROWS;\n const VIEWPORT_WIDTH = Math.min(VIEWPORT_HEIGHT * gridAspectRatio, window.innerWidth * 0.7);\n\n // Drag state\n const [isDragging, setIsDragging] = useState(false);\n const [dragStartX, setDragStartX] = useState(0);\n const [dragStartY, setDragStartY] = useState(0);\n const [dragOffsetX, setDragOffsetX] = useState(0);\n const [dragOffsetY, setDragOffsetY] = useState(0);\n\n // Set default zoom level to 1 (natural size)\n const minZoomRef = useRef(1);\n\n // Initialize with natural canvas size (1:1 pixel ratio)\n useEffect(() => {\n // Calculate the natural dimensions of the canvas\n const totalWidth = COLS * CELL_SIZE;\n const totalHeight = ROWS * CELL_SIZE;\n\n // Ensure we have valid dimensions to prevent division by zero\n if (totalWidth <= 0 || totalHeight <= 0) {\n console.error('Invalid grid dimensions:', totalWidth, totalHeight);\n return;\n }\n\n // Calculate the minimum zoom level needed to fit the canvas in the viewport\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement ? viewportElement.clientWidth : VIEWPORT_WIDTH;\n const actualHeight = viewportElement ? viewportElement.clientHeight : VIEWPORT_HEIGHT;\n\n // Calculate zoom level needed to fit width and height\n const zoomWidth = actualWidth / totalWidth;\n const zoomHeight = actualHeight / totalHeight;\n\n // Use the smaller value to ensure the canvas fits completely\n // This ensures no black bars on the sides when zoomed all the way out\n const calculatedMinZoom = Math.min(zoomWidth, zoomHeight);\n\n // Adjust viewport width if needed to ensure snug fit\n if (viewportElement && Math.abs(zoomWidth - calculatedMinZoom) > 0.001) {\n // If height is the limiting factor, adjust width to match the aspect ratio\n viewportElement.style.width = `${totalWidth * calculatedMinZoom}px`;\n console.log('Adjusted viewport width for snug fit:', totalWidth * calculatedMinZoom);\n }\n\n // Log detailed diagnostics\n console.log('=== CANVAS NATURAL SIZE ===');\n console.log('Natural canvas dimensions:', totalWidth, 'x', totalHeight);\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('Cell size:', CELL_SIZE);\n console.log('Calculated minimum zoom:', calculatedMinZoom);\n\n // Set minimum zoom level to ensure canvas fills viewport exactly\n minZoomRef.current = calculatedMinZoom;\n setZoomLevel(calculatedMinZoom);\n }, []);\n\n // We'll use minZoomRef directly instead of exposing it as a constant\n // This ensures we always use the most up-to-date value\n const MAX_ZOOM = 10;\n const QUADRANT_ZOOM = 1.7; // Zoom level when clicking on a quadrant\n\n // Start with minimum zoom level (snug fit)\n // We'll initialize with 1 and update it once minZoom is calculated\n const [zoomLevel, setZoomLevel] = useState(1);\n\n // Update viewport when window size changes\n useEffect(() => {\n // Monitor viewport size changes\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n // Use ResizeObserver to detect actual viewport size changes\n const resizeObserver = new ResizeObserver(entries => {\n for (const entry of entries) {\n // Log viewport dimensions for debugging\n console.log('=== VIEWPORT RESIZED ===');\n console.log('New viewport dimensions:', entry.contentRect.width, 'x', entry.contentRect.height);\n console.log('Natural canvas dimensions:', COLS * CELL_SIZE, 'x', ROWS * CELL_SIZE);\n\n // No need to recalculate minZoom as we're using natural size (1:1)\n // Just reset position when viewport changes\n setDragOffsetX(0);\n setDragOffsetY(0);\n setFocusedQuadrant(null);\n }\n });\n\n // Start observing the viewport element\n resizeObserver.observe(viewportElement);\n\n // Clean up observer on unmount\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [VIEWPORT_WIDTH, VIEWPORT_HEIGHT, COLS, ROWS, CELL_SIZE]);\n\n // Debug info for canvas dimensions\n useEffect(() => {\n console.log('=== CANVAS DIMENSIONS DIAGNOSTICS ===');\n console.log('VIEWPORT_WIDTH:', VIEWPORT_WIDTH);\n console.log('VIEWPORT_HEIGHT:', VIEWPORT_HEIGHT);\n console.log('NATURAL_WIDTH:', NATURAL_WIDTH);\n console.log('NATURAL_HEIGHT:', NATURAL_HEIGHT);\n\n // Get actual viewport element dimensions\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n console.log('Actual viewport dimensions:', viewportElement.clientWidth, viewportElement.clientHeight);\n }\n console.log('Grid dimensions (pixels):', COLS * CELL_SIZE, 'x', ROWS * CELL_SIZE);\n console.log('Current zoomLevel:', zoomLevel);\n\n // Calculate and log scaled dimensions\n const scaledWidth = COLS * CELL_SIZE * zoomLevel;\n const scaledHeight = ROWS * CELL_SIZE * zoomLevel;\n console.log('Scaled dimensions at current zoom:', scaledWidth, 'x', scaledHeight);\n\n // Log viewport vs canvas size comparison\n console.log('Viewport to canvas ratio - Width:', VIEWPORT_WIDTH / (COLS * CELL_SIZE));\n console.log('Viewport to canvas ratio - Height:', VIEWPORT_HEIGHT / (ROWS * CELL_SIZE));\n }, [VIEWPORT_WIDTH, VIEWPORT_HEIGHT, NATURAL_WIDTH, NATURAL_HEIGHT, COLS, ROWS, CELL_SIZE, zoomLevel]);\n const [hoveredQuadrant, setHoveredQuadrant] = useState(null);\n const [focusedQuadrant, setFocusedQuadrant] = useState(null);\n const canvasRef = useRef(null);\n const viewportRef = useRef(null);\n const animationFrameRef = useRef(null);\n const lastRenderTimeRef = useRef(0);\n const throttleTimeRef = useRef(50); // ms between renders\n const gridRef = useRef(Array(ROWS).fill().map(() => Array(COLS).fill(0)));\n\n // Use a ref for grid to avoid re-renders, and a state for tracking changes\n const [gridVersion, setGridVersion] = useState(0);\n\n // Calculate how many cells are visible at QUADRANT_ZOOM (1.7x)\n const visibleCellsX = Math.floor(VIEWPORT_WIDTH / (CELL_SIZE * QUADRANT_ZOOM));\n const visibleCellsY = Math.floor(VIEWPORT_HEIGHT / (CELL_SIZE * QUADRANT_ZOOM));\n\n // Add a state to toggle between dig mode and zoom mode\n const [digMode, setDigMode] = useState(true);\n\n // Memoize sections to avoid recalculation on every render\n const {\n sections,\n sectionsX,\n sectionsY\n } = useMemo(() => {\n // Calculate how many sections we need horizontally and vertically\n const sectionsX = Math.ceil(COLS / visibleCellsX);\n const sectionsY = Math.ceil(ROWS / visibleCellsY);\n\n // Generate dynamic sections based on visible area at 1.7x zoom\n const sections = [];\n for (let y = 0; y < sectionsY; y++) {\n for (let x = 0; x < sectionsX; x++) {\n sections.push({\n id: y * sectionsX + x,\n name: `Section ${y * sectionsX + x + 1}`,\n startRow: y * visibleCellsY,\n endRow: Math.min((y + 1) * visibleCellsY, ROWS),\n startCol: x * visibleCellsX,\n endCol: Math.min((x + 1) * visibleCellsX, COLS)\n });\n }\n }\n return {\n sections,\n sectionsX,\n sectionsY\n };\n }, [COLS, ROWS, visibleCellsX, visibleCellsY]);\n\n // Function to calculate the maximum allowed drag offsets\n const calculateDragLimits = useCallback(() => {\n if (!viewportRef.current) return {\n minX: 0,\n maxX: 0,\n minY: 0,\n maxY: 0\n };\n const viewportWidth = viewportRef.current.clientWidth;\n const viewportHeight = viewportRef.current.clientHeight;\n\n // Calculate the scaled canvas size\n const scaledWidth = COLS * CELL_SIZE * zoomLevel;\n const scaledHeight = ROWS * CELL_SIZE * zoomLevel;\n\n // Calculate the base position (without drag)\n let baseX = (viewportWidth - scaledWidth) / 2;\n let baseY = (viewportHeight - scaledHeight) / 2;\n\n // Calculate the limits\n // If the canvas is smaller than the viewport, don't allow dragging\n // If the canvas is larger, allow dragging but not past the edges\n const minX = Math.min(0, viewportWidth - scaledWidth - baseX);\n const maxX = Math.max(0, -baseX);\n const minY = Math.min(0, viewportHeight - scaledHeight - baseY);\n const maxY = Math.max(0, -baseY);\n return {\n minX,\n maxX,\n minY,\n maxY\n };\n }, [COLS, ROWS, CELL_SIZE, zoomLevel]);\n\n // Function to clamp drag offsets within limits\n const clampDragOffsets = useCallback((offsetX, offsetY) => {\n const {\n minX,\n maxX,\n minY,\n maxY\n } = calculateDragLimits();\n return {\n x: Math.max(minX, Math.min(maxX, offsetX)),\n y: Math.max(minY, Math.min(maxY, offsetY))\n };\n }, [calculateDragLimits]);\n\n // Get the current canvas position and transform for accurate coordinate conversion\n // Simplified to ensure the canvas fills the viewport completely at minZoom\n const getCanvasTransform = useCallback(() => {\n // Get actual viewport dimensions from the DOM element with validation\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement ? viewportElement.clientWidth : VIEWPORT_WIDTH;\n const actualHeight = viewportElement ? viewportElement.clientHeight : VIEWPORT_HEIGHT;\n\n // Validate viewport dimensions\n if (actualWidth <= 0 || actualHeight <= 0) {\n console.error('TRANSFORM ERROR: Invalid viewport dimensions:', actualWidth, actualHeight);\n // Provide fallback values to prevent rendering errors\n return {\n posX: 0,\n posY: 0,\n cellSizeZoomed: CELL_SIZE\n };\n }\n\n // Get current minZoom directly from ref for accuracy with validation\n const currentMinZoom = minZoomRef.current;\n if (!currentMinZoom || isNaN(currentMinZoom) || currentMinZoom <= 0) {\n console.error('TRANSFORM ERROR: Invalid minZoom value:', currentMinZoom);\n // Provide fallback values to prevent rendering errors\n return {\n posX: 0,\n posY: 0,\n cellSizeZoomed: CELL_SIZE\n };\n }\n\n // Ensure zoom level is never below minZoom (defensive programming)\n const safeZoomLevel = Math.max(currentMinZoom, zoomLevel);\n if (safeZoomLevel !== zoomLevel) {\n console.warn('TRANSFORM WARNING: zoomLevel was below minZoom, using minZoom instead');\n }\n\n // Calculate the actual grid size based on cell size and zoom\n const gridWidth = COLS * CELL_SIZE * safeZoomLevel;\n const gridHeight = ROWS * CELL_SIZE * safeZoomLevel;\n\n // Validate calculated dimensions\n if (gridWidth <= 0 || gridHeight <= 0) {\n console.error('TRANSFORM ERROR: Invalid grid dimensions after zoom:', gridWidth, gridHeight);\n console.error('COLS:', COLS, 'ROWS:', ROWS, 'CELL_SIZE:', CELL_SIZE, 'zoomLevel:', safeZoomLevel);\n // Provide fallback values to prevent rendering errors\n return {\n posX: 0,\n posY: 0,\n cellSizeZoomed: CELL_SIZE\n };\n }\n\n // Calculate position offsets\n let posX = 0;\n let posY = 0;\n\n // At minZoom, position the canvas to fill the viewport completely\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n // Since we're using Math.max for minZoom calculation, the canvas will be larger than the viewport\n // Center it to ensure it fills the viewport completely\n posX = (actualWidth - gridWidth) / 2;\n posY = (actualHeight - gridHeight) / 2;\n } else {\n // When zoomed in, we can center the content\n if (focusedQuadrant !== null && sections[focusedQuadrant]) {\n const section = sections[focusedQuadrant];\n const centerCol = (section.startCol + section.endCol) / 2;\n const centerRow = (section.startRow + section.endRow) / 2;\n\n // Adjust position to center the focused section\n posX = actualWidth / 2 - centerCol * CELL_SIZE * safeZoomLevel;\n posY = actualHeight / 2 - centerRow * CELL_SIZE * safeZoomLevel;\n } else {\n // Center the grid when zoomed in but no quadrant is focused\n posX = (actualWidth - gridWidth) / 2;\n posY = (actualHeight - gridHeight) / 2;\n }\n\n // Apply drag offset only when zoomed in beyond minZoom\n // Clamp the drag offsets to prevent scrolling past canvas edges\n const clampedOffsets = clampDragOffsets(dragOffsetX, dragOffsetY);\n posX += clampedOffsets.x;\n posY += clampedOffsets.y;\n }\n\n // Log transform data when at minZoom for debugging\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n console.log('=== CANVAS TRANSFORM AT MIN_ZOOM ===');\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('Grid dimensions after zoom:', gridWidth, 'x', gridHeight);\n console.log('Position offsets:', posX, posY);\n console.log('Cell size after zoom:', CELL_SIZE * safeZoomLevel);\n console.log('Current minZoom:', currentMinZoom);\n\n // Verify full coverage\n const fillsViewport = gridWidth >= actualWidth && gridHeight >= actualHeight;\n console.log('Canvas fills viewport:', fillsViewport);\n if (!fillsViewport) {\n console.error('COVERAGE ERROR: The canvas does not completely fill the viewport!');\n } else {\n console.log('SUCCESS: Canvas fills viewport completely!');\n }\n }\n return {\n posX,\n posY,\n cellSizeZoomed: CELL_SIZE * safeZoomLevel\n };\n }, [COLS, ROWS, CELL_SIZE, VIEWPORT_WIDTH, VIEWPORT_HEIGHT, zoomLevel, focusedQuadrant, sections, dragOffsetX, dragOffsetY, clampDragOffsets]);\n\n // Calculate visible area based on current zoom and position\n // Simplified to ensure exact viewport filling at minZoom with no borders\n const getVisibleArea = useCallback(() => {\n if (!viewportRef.current) return {\n startRow: 0,\n endRow: ROWS,\n startCol: 0,\n endCol: COLS\n };\n\n // Get actual viewport dimensions from the DOM element\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement.clientWidth;\n const actualHeight = viewportElement.clientHeight;\n\n // Get current minZoom directly from ref for accuracy\n const currentMinZoom = minZoomRef.current || 1;\n\n // Ensure zoom level is never below minZoom (defensive programming)\n const safeZoomLevel = Math.max(currentMinZoom, zoomLevel);\n\n // Calculate the actual grid size based on cell size and zoom\n const gridWidth = COLS * CELL_SIZE * safeZoomLevel;\n const gridHeight = ROWS * CELL_SIZE * safeZoomLevel;\n\n // Calculate position offsets\n let positionX = 0;\n let positionY = 0;\n\n // At minZoom, position the canvas to fill the viewport exactly\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n // When at minimum zoom, the canvas should exactly fill the viewport in at least one dimension\n // This is guaranteed by our calculation of minZoomRef.current in the initialization useEffect\n\n // Center the canvas in the viewport\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n } else {\n // When zoomed in, we can center the content\n if (focusedQuadrant !== null && sections[focusedQuadrant]) {\n const section = sections[focusedQuadrant];\n const centerCol = (section.startCol + section.endCol) / 2;\n const centerRow = (section.startRow + section.endRow) / 2;\n\n // Adjust position to center the focused section\n positionX = actualWidth / 2 - centerCol * CELL_SIZE * safeZoomLevel;\n positionY = actualHeight / 2 - centerRow * CELL_SIZE * safeZoomLevel;\n } else {\n // Center the grid when zoomed in but no quadrant is focused\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n }\n\n // Apply drag offset only when zoomed in beyond minZoom\n // Clamp the drag offsets to prevent scrolling past canvas edges\n const clampedOffsets = clampDragOffsets(dragOffsetX, dragOffsetY);\n positionX += clampedOffsets.x;\n positionY += clampedOffsets.y;\n }\n\n // Log position data when at minZoom for debugging\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n console.log('Visible area at MIN_ZOOM:', {\n actualWidth,\n actualHeight,\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n currentMinZoom,\n safeZoomLevel\n });\n\n // Calculate viewport and grid aspects\n const viewportAspect = actualWidth / actualHeight;\n const gridAspect = COLS * CELL_SIZE / (ROWS * CELL_SIZE);\n console.log('Viewport aspect:', viewportAspect, 'Grid aspect:', gridAspect);\n\n // Check which dimension matches exactly\n const widthMatch = Math.abs(gridWidth - actualWidth) < 1;\n const heightMatch = Math.abs(gridHeight - actualHeight) < 1;\n console.log('Width matches viewport exactly:', widthMatch);\n console.log('Height matches viewport exactly:', heightMatch);\n\n // With our new approach, either width or height should match exactly\n if (!widthMatch && !heightMatch) {\n console.log('Canvas dimensions:', gridWidth, 'x', gridHeight);\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('SUCCESS: Canvas fits viewport exactly based on calculated minimum zoom!');\n } else {\n console.log('SUCCESS: Canvas fits viewport exactly in one dimension and is centered in the other!');\n }\n }\n\n // Calculate visible area in grid coordinates with safety limits\n // This ensures we don't try to render an impossibly large area\n const cellSizeZoomed = CELL_SIZE * safeZoomLevel;\n\n // Add padding but limit to reasonable values\n const padding = 5;\n // When zoomed all the way out, use a much larger value to ensure we see the entire grid\n const maxCellsPerDimension = safeZoomLevel <= 0.5 ? Math.max(COLS, ROWS) // Use the full grid size when zoomed out\n : Math.ceil(Math.max(VIEWPORT_WIDTH, VIEWPORT_HEIGHT) / cellSizeZoomed) + padding * 2;\n\n // Calculate initial values\n let startCol = Math.floor(-positionX / cellSizeZoomed) - padding;\n let endCol = Math.ceil((actualWidth - positionX) / cellSizeZoomed) + padding;\n let startRow = Math.floor(-positionY / cellSizeZoomed) - padding;\n let endRow = Math.ceil((actualHeight - positionY) / cellSizeZoomed) + padding;\n\n // When at minimum zoom, ALWAYS show the entire grid\n if (safeZoomLevel <= 0.5) {\n startCol = 0;\n endCol = COLS;\n startRow = 0;\n endRow = ROWS;\n console.log('At minimum zoom, showing entire grid:', ROWS, 'x', COLS);\n }\n // For other zoom levels, ensure the range isn't too large (prevent potential infinite loops)\n else if (endCol - startCol > maxCellsPerDimension) {\n const center = Math.floor((startCol + endCol) / 2);\n startCol = center - Math.floor(maxCellsPerDimension / 2);\n endCol = center + Math.ceil(maxCellsPerDimension / 2);\n }\n if (safeZoomLevel > 0.5 && endRow - startRow > maxCellsPerDimension) {\n const center = Math.floor((startRow + endRow) / 2);\n startRow = center - Math.floor(maxCellsPerDimension / 2);\n endRow = center + Math.ceil(maxCellsPerDimension / 2);\n }\n return {\n startRow,\n endRow,\n startCol,\n endCol,\n positionX,\n positionY\n };\n }, [COLS, ROWS, CELL_SIZE, VIEWPORT_WIDTH, VIEWPORT_HEIGHT, zoomLevel, focusedQuadrant, sections, dragOffsetX, dragOffsetY, clampDragOffsets]);\n\n // Optimized draw function that only renders visible cells\n const drawGrid = useCallback(() => {\n const now = performance.now();\n if (now - lastRenderTimeRef.current < throttleTimeRef.current) {\n // Schedule next frame if we're throttling\n animationFrameRef.current = requestAnimationFrame(drawGrid);\n return;\n }\n lastRenderTimeRef.current = now;\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n\n // Set canvas dimensions to match grid size (important for pixel-perfect rendering)\n canvas.width = COLS * CELL_SIZE;\n canvas.height = ROWS * CELL_SIZE;\n\n // Get the visible area to optimize rendering\n const {\n startRow,\n endRow,\n startCol,\n endCol\n } = getVisibleArea();\n\n // Fill the entire canvas with a pattern background first\n ctx.fillStyle = '#111';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // Draw a grid pattern on the entire canvas\n ctx.strokeStyle = 'rgba(30, 30, 30, 0.3)';\n ctx.beginPath();\n for (let c = 0; c < COLS; c += 5) {\n ctx.moveTo(c * CELL_SIZE, 0);\n ctx.lineTo(c * CELL_SIZE, canvas.height);\n }\n for (let r = 0; r < ROWS; r += 5) {\n ctx.moveTo(0, r * CELL_SIZE);\n ctx.lineTo(canvas.width, r * CELL_SIZE);\n }\n ctx.stroke();\n\n // Limit the rendering area to prevent infinite loops\n const MAX_CELLS_TO_RENDER = zoomLevel <= 0.5 ? 90000 : 10000; // Increased for zoomed out view\n const limitedStartRow = Math.max(startRow, 0);\n const limitedEndRow = Math.min(endRow, ROWS);\n const limitedStartCol = Math.max(startCol, 0);\n const limitedEndCol = Math.min(endCol, COLS);\n\n // Calculate total cells to render and further limit if needed\n const totalCells = (limitedEndRow - limitedStartRow) * (limitedEndCol - limitedStartCol);\n let finalStartRow = limitedStartRow;\n let finalEndRow = limitedEndRow;\n let finalStartCol = limitedStartCol;\n let finalEndCol = limitedEndCol;\n\n // When zoomed all the way out, try to render the entire grid or a much larger portion\n if (zoomLevel <= 0.5) {\n // At minimum zoom, prioritize showing the entire grid or as much as possible\n finalStartRow = 0;\n finalEndRow = ROWS;\n finalStartCol = 0;\n finalEndCol = COLS;\n } else if (totalCells > MAX_CELLS_TO_RENDER) {\n // If still too many cells, reduce the rendering area proportionally\n const scale = Math.sqrt(MAX_CELLS_TO_RENDER / totalCells);\n const rowRange = limitedEndRow - limitedStartRow;\n const colRange = limitedEndCol - limitedStartCol;\n const rowCenter = (limitedStartRow + limitedEndRow) / 2;\n const colCenter = (limitedStartCol + limitedEndCol) / 2;\n finalStartRow = Math.floor(rowCenter - rowRange * scale / 2);\n finalEndRow = Math.ceil(rowCenter + rowRange * scale / 2);\n finalStartCol = Math.floor(colCenter - colRange * scale / 2);\n finalEndCol = Math.ceil(colCenter + colRange * scale / 2);\n }\n\n // Draw only visible cells\n const grid = gridRef.current;\n for (let r = finalStartRow; r < finalEndRow; r++) {\n for (let c = finalStartCol; c < finalEndCol; c++) {\n if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {\n // Always render cells, even if value is 0\n const colorIndex = grid[r][c] % COLORS.length;\n if (grid[r][c] > 0) {\n // Only render colored cells\n ctx.fillStyle = COLORS[colorIndex];\n\n // When zoomed all the way out, make cells more visible by using a minimum size\n if (zoomLevel <= 0.5) {\n // Use a larger minimum size (5px) to ensure visibility at minimum zoom\n const minSize = 5;\n\n // Draw a slightly larger rectangle to ensure visibility\n // Remove the -0.5 offset which can cause pixel alignment issues\n ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, minSize, minSize);\n\n // Add a border to make the cell more visible\n ctx.strokeStyle = 'rgba(0,0,0,0.5)';\n ctx.lineWidth = 0.5;\n ctx.strokeRect(c * CELL_SIZE, r * CELL_SIZE, minSize, minSize);\n\n // Log for debugging\n if (r === finalStartRow && c === finalStartCol) {\n console.log('Rendering cell at minZoom:', {\n row: r,\n col: c,\n value: grid[r][c],\n colorIndex,\n color: COLORS[colorIndex],\n cellSize: minSize,\n zoomLevel\n });\n }\n } else {\n ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE, CELL_SIZE);\n }\n }\n }\n }\n }\n\n // Draw cell borders more efficiently (optional - can be disabled for better performance)\n if (zoomLevel > 0.5) {\n // Only draw borders when zoomed in enough\n ctx.strokeStyle = 'rgba(0,0,0,0.2)';\n ctx.beginPath();\n\n // Draw vertical lines\n for (let c = startCol; c <= endCol; c++) {\n if (c >= 0 && c <= COLS) {\n ctx.moveTo(c * CELL_SIZE, Math.max(0, startRow) * CELL_SIZE);\n ctx.lineTo(c * CELL_SIZE, Math.min(ROWS, endRow) * CELL_SIZE);\n }\n }\n\n // Draw horizontal lines\n for (let r = startRow; r <= endRow; r++) {\n if (r >= 0 && r <= ROWS) {\n ctx.moveTo(Math.max(0, startCol) * CELL_SIZE, r * CELL_SIZE);\n ctx.lineTo(Math.min(COLS, endCol) * CELL_SIZE, r * CELL_SIZE);\n }\n }\n ctx.stroke();\n }\n }, [COLORS, ROWS, COLS, CELL_SIZE, getVisibleArea, zoomLevel]);\n\n // Handle cell click to change color (dig through layers)\n const handleCellClick = useCallback((rowIndex, colIndex) => {\n // Update the grid reference directly without creating a new array\n const grid = gridRef.current;\n // Ensure we never have a 0 value (which would be invisible)\n // Start with 1 if the cell is currently 0, otherwise increment\n if (grid[rowIndex][colIndex] === 0) {\n grid[rowIndex][colIndex] = 1;\n } else {\n grid[rowIndex][colIndex] = grid[rowIndex][colIndex] % COLORS.length + 1;\n if (grid[rowIndex][colIndex] > COLORS.length) {\n grid[rowIndex][colIndex] = 1;\n }\n }\n\n // Log for debugging\n console.log('Cell clicked:', {\n row: rowIndex,\n col: colIndex,\n newValue: grid[rowIndex][colIndex],\n colorIndex: (grid[rowIndex][colIndex] - 1) % COLORS.length,\n color: COLORS[(grid[rowIndex][colIndex] - 1) % COLORS.length],\n zoomLevel,\n isMinZoom: zoomLevel <= 0.5\n });\n\n // Create a unique ID for this cell\n const cellId = `cell_${rowIndex}_${colIndex}`;\n\n // Store the cell state in the persistent storage - with improved retry logic\n const persistCellState = (retryCount = 0) => {\n // First try to update in case it exists\n stateClient.updateEntity('cells', cellId, {\n value: grid[rowIndex][colIndex]\n }).then(() => {\n console.log(`Cell ${cellId} updated successfully`);\n\n // Update the local cache after successful server update\n try {\n const cachedGrid = localStorage.getItem('pumpPaintGrid');\n if (cachedGrid) {\n const parsedGrid = JSON.parse(cachedGrid);\n if (parsedGrid[rowIndex] && parsedGrid[rowIndex][colIndex] !== undefined) {\n parsedGrid[rowIndex][colIndex] = grid[rowIndex][colIndex];\n localStorage.setItem('pumpPaintGrid', JSON.stringify(parsedGrid));\n }\n }\n } catch (cacheError) {\n console.error('Failed to update cache:', cacheError);\n }\n }).catch(updateErr => {\n console.log('Cell does not exist yet, creating new cell:', cellId);\n // If update fails, try to create it\n stateClient.createEntity('cells', {\n id: cellId,\n row: rowIndex,\n col: colIndex,\n value: grid[rowIndex][colIndex]\n }).then(() => {\n console.log(`Cell ${cellId} created successfully`);\n\n // Update the local cache after successful server create\n try {\n const cachedGrid = localStorage.getItem('pumpPaintGrid');\n if (cachedGrid) {\n const parsedGrid = JSON.parse(cachedGrid);\n if (parsedGrid[rowIndex] && parsedGrid[rowIndex][colIndex] !== undefined) {\n parsedGrid[rowIndex][colIndex] = grid[rowIndex][colIndex];\n localStorage.setItem('pumpPaintGrid', JSON.stringify(parsedGrid));\n }\n }\n } catch (cacheError) {\n console.error('Failed to update cache:', cacheError);\n }\n }).catch(createErr => {\n console.error('Failed to create cell state:', createErr);\n // Retry with exponential backoff\n if (retryCount < 5) {\n // Increased retry attempts\n setTimeout(() => {\n console.log(`Retrying cell state persistence (attempt ${retryCount + 1})`);\n persistCellState(retryCount + 1);\n }, Math.pow(2, retryCount) * 300); // Faster retries: 300ms, 600ms, 1.2s, 2.4s, 4.8s\n }\n });\n });\n };\n\n // Start persistence process immediately\n persistCellState();\n\n // Emit the change to other users\n socket.emit('cellUpdate', {\n row: rowIndex,\n col: colIndex,\n value: grid[rowIndex][colIndex]\n });\n\n // Increment version to trigger a re-render\n setGridVersion(v => v + 1);\n }, [COLORS.length, zoomLevel]);\n\n // Throttled mouse move handler with accurate coordinate conversion\n const lastMoveTimeRef = useRef(0);\n const handleMouseMove = useCallback(e => {\n // Throttle mouse move events for hover detection\n const now = performance.now();\n if (now - lastMoveTimeRef.current < 30) return; // 30ms throttle\n lastMoveTimeRef.current = now;\n const rect = viewportRef.current.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n // Get current canvas transform for accurate coordinate conversion\n const {\n posX,\n posY,\n cellSizeZoomed\n } = getCanvasTransform();\n\n // Convert to grid coordinates using the accurate position\n const gridX = Math.floor((mouseX - posX) / cellSizeZoomed);\n const gridY = Math.floor((mouseY - posY) / cellSizeZoomed);\n\n // Determine which section the mouse is over\n if (gridX >= 0 && gridX < COLS && gridY >= 0 && gridY < ROWS) {\n // Use binary search or lookup table for large section arrays\n let hoveredSection = -1;\n for (let i = 0; i < sections.length; i++) {\n const section = sections[i];\n if (gridX >= section.startCol && gridX < section.endCol && gridY >= section.startRow && gridY < section.endRow) {\n hoveredSection = i;\n break;\n }\n }\n setHoveredQuadrant(hoveredSection);\n } else {\n setHoveredQuadrant(null);\n }\n }, [COLS, ROWS, sections, getCanvasTransform]);\n\n // Accurate coordinate conversion that works with all zoom levels\n const handleCanvasClick = useCallback(e => {\n // Only process left clicks\n if (e.button !== 0) return;\n\n // Check if the click is on the joystick\n // This is a fallback in case stopPropagation doesn't work\n if (e.target.closest('.grid')) {\n return;\n }\n const rect = viewportRef.current.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n // Get current canvas transform for accurate coordinate conversion\n const {\n posX,\n posY,\n cellSizeZoomed\n } = getCanvasTransform();\n\n // Convert to grid coordinates using the accurate position\n const gridX = Math.floor((mouseX - posX) / cellSizeZoomed);\n const gridY = Math.floor((mouseY - posY) / cellSizeZoomed);\n\n // Check if we're in zoom mode and hovering over a quadrant\n if (!digMode && hoveredQuadrant !== null) {\n // Zoom into the quadrant\n setZoomLevel(QUADRANT_ZOOM);\n setFocusedQuadrant(hoveredQuadrant);\n return;\n }\n\n // Check bounds and update grid\n if (gridX >= 0 && gridX < COLS && gridY >= 0 && gridY < ROWS) {\n handleCellClick(gridY, gridX);\n }\n }, [COLS, ROWS, handleCellClick, hoveredQuadrant, digMode, QUADRANT_ZOOM, focusedQuadrant, getCanvasTransform]);\n\n // We're keeping the drag handlers for compatibility, but they're not the primary navigation method anymore\n // The 8-way joystick is now the recommended way to navigate\n const handleMouseDown = useCallback(e => {\n // Only start dragging on right-click (button 2)\n if (e.button === 2 && minZoomRef.current && zoomLevel > minZoomRef.current) {\n e.preventDefault();\n setIsDragging(true);\n setDragStartX(e.clientX);\n setDragStartY(e.clientY);\n\n // Capture mouse events outside the viewport\n document.addEventListener('mousemove', handleGlobalMouseMove);\n document.addEventListener('mouseup', handleGlobalMouseUp);\n }\n }, [zoomLevel]);\n\n // Global mouse move handler for dragging\n const handleGlobalMouseMove = useCallback(e => {\n if (isDragging) {\n const dx = e.clientX - dragStartX;\n const dy = e.clientY - dragStartY;\n\n // Apply drag limits\n const clampedOffsets = clampDragOffsets(dx, dy);\n setDragOffsetX(clampedOffsets.x);\n setDragOffsetY(clampedOffsets.y);\n }\n }, [isDragging, dragStartX, dragStartY, clampDragOffsets]);\n\n // Global mouse up handler\n const handleGlobalMouseUp = useCallback(() => {\n if (isDragging) {\n setIsDragging(false);\n\n // Remove global event listeners\n document.removeEventListener('mousemove', handleGlobalMouseMove);\n document.removeEventListener('mouseup', handleGlobalMouseUp);\n }\n }, [isDragging, handleGlobalMouseMove]);\n\n // Handle drag end\n const handleMouseUp = useCallback(() => {\n if (isDragging) {\n setIsDragging(false);\n\n // Remove global event listeners\n document.removeEventListener('mousemove', handleGlobalMouseMove);\n document.removeEventListener('mouseup', handleGlobalMouseUp);\n }\n }, [isDragging, handleGlobalMouseMove]);\n\n // Track touch points for pinch-to-zoom\n const [touchPoints, setTouchPoints] = useState([]);\n const [initialPinchDistance, setInitialPinchDistance] = useState(null);\n const [initialZoom, setInitialZoom] = useState(null);\n const [isPinching, setIsPinching] = useState(false);\n\n // Calculate distance between two touch points\n const getTouchDistance = touches => {\n if (touches.length < 2) return 0;\n const dx = touches[0].clientX - touches[1].clientX;\n const dy = touches[0].clientY - touches[1].clientY;\n return Math.sqrt(dx * dx + dy * dy);\n };\n\n // Get midpoint between two touch points\n const getTouchMidpoint = touches => {\n if (touches.length < 2) return {\n x: touches[0].clientX,\n y: touches[0].clientY\n };\n return {\n x: (touches[0].clientX + touches[1].clientX) / 2,\n y: (touches[0].clientY + touches[1].clientY) / 2\n };\n };\n\n // Handle touch events for mobile\n const handleTouchStart = useCallback(e => {\n // Store all touch points\n setTouchPoints(Array.from(e.touches));\n if (e.touches.length === 2) {\n // Start pinch gesture\n e.preventDefault();\n setIsPinching(true);\n setInitialPinchDistance(getTouchDistance(e.touches));\n setInitialZoom(zoomLevel);\n } else if (minZoomRef.current && zoomLevel > minZoomRef.current) {\n // Single touch - handle as drag\n const touch = e.touches[0];\n setIsDragging(true);\n setDragStartX(touch.clientX);\n setDragStartY(touch.clientY);\n\n // Capture touch events outside the viewport\n document.addEventListener('touchmove', handleGlobalTouchMove, {\n passive: false\n });\n document.addEventListener('touchend', handleGlobalTouchEnd);\n }\n }, [zoomLevel]);\n\n // Global touch move handler\n const handleGlobalTouchMove = useCallback(e => {\n // Update all touch points\n setTouchPoints(Array.from(e.touches));\n if (isPinching && e.touches.length === 2) {\n e.preventDefault();\n\n // Calculate new distance between touch points\n const currentDistance = getTouchDistance(e.touches);\n const scaleFactor = currentDistance / initialPinchDistance;\n\n // Calculate new zoom level\n const newZoom = Math.max(minZoomRef.current, Math.min(MAX_ZOOM, initialZoom * scaleFactor));\n\n // Apply new zoom level\n setZoomLevel(newZoom);\n } else if (isDragging) {\n e.preventDefault();\n const touch = e.touches[0];\n const dx = touch.clientX - dragStartX;\n const dy = touch.clientY - dragStartY;\n\n // Apply drag limits\n const clampedOffsets = clampDragOffsets(dx, dy);\n setDragOffsetX(clampedOffsets.x);\n setDragOffsetY(clampedOffsets.y);\n }\n }, [isDragging, isPinching, dragStartX, dragStartY, initialPinchDistance, initialZoom, MAX_ZOOM, clampDragOffsets]);\n\n // Global touch end handler\n const handleGlobalTouchEnd = useCallback(e => {\n // Update touch points\n setTouchPoints(Array.from(e.touches || []));\n if (isPinching && e.touches.length < 2) {\n setIsPinching(false);\n setInitialPinchDistance(null);\n setInitialZoom(null);\n }\n if (isDragging && e.touches.length === 0) {\n setIsDragging(false);\n\n // Remove global event listeners\n document.removeEventListener('touchmove', handleGlobalTouchMove);\n document.removeEventListener('touchend', handleGlobalTouchEnd);\n }\n }, [isDragging, isPinching, handleGlobalTouchMove]);\n const handleTouchMove = useCallback(e => {\n // Handle pinch gesture\n if (e.touches.length === 2) {\n if (!isPinching) {\n setIsPinching(true);\n setInitialPinchDistance(getTouchDistance(e.touches));\n setInitialZoom(zoomLevel);\n }\n\n // Let the global handler take care of the rest\n return;\n }\n\n // Handle drag\n if (isDragging && e.touches.length === 1) {\n e.preventDefault();\n const touch = e.touches[0];\n const dx = touch.clientX - dragStartX;\n const dy = touch.clientY - dragStartY;\n\n // Apply drag limits\n const clampedOffsets = clampDragOffsets(dx, dy);\n setDragOffsetX(clampedOffsets.x);\n setDragOffsetY(clampedOffsets.y);\n }\n }, [isDragging, isPinching, dragStartX, dragStartY, zoomLevel, clampDragOffsets]);\n const handleTouchEnd = useCallback(e => {\n // Update touch points\n setTouchPoints(Array.from(e.touches || []));\n if (isPinching && e.touches.length < 2) {\n setIsPinching(false);\n setInitialPinchDistance(null);\n setInitialZoom(null);\n }\n if (e.touches.length === 0) {\n setIsDragging(false);\n }\n }, [isPinching]);\n\n // Redraw grid when it changes\n useEffect(() => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n\n // Force immediate redraw when at minimum zoom to ensure visibility\n if (zoomLevel <= 0.5) {\n console.log('Forcing immediate redraw at minimum zoom');\n drawGrid();\n } else {\n animationFrameRef.current = requestAnimationFrame(drawGrid);\n }\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [gridVersion, zoomLevel, focusedQuadrant, drawGrid]);\n\n // Add wheel event listener for zooming with natural size as minimum\n useEffect(() => {\n const handleWheel = e => {\n e.preventDefault();\n\n // Use a slower zoom speed for more precise control\n const zoomSpeed = 0.05; // Reduced from 0.1 for finer control\n\n // Calculate new zoom level with strict clamping\n // Use minZoomRef.current as the minimum zoom level to ensure proper fit\n const newZoom = Math.max(minZoomRef.current, Math.min(MAX_ZOOM, zoomLevel + (e.deltaY < 0 ? zoomSpeed : -zoomSpeed)));\n\n // If we're zooming out to minimum zoom or below, reset to exact minZoom and reset offsets\n if (Math.abs(newZoom - minZoomRef.current) < 0.001) {\n setZoomLevel(minZoomRef.current);\n setDragOffsetX(0);\n setDragOffsetY(0);\n setFocusedQuadrant(null); // Reset focused quadrant when at min zoom\n\n // Log for debugging\n console.log(`=== ZOOMED TO MINIMUM (${minZoomRef.current.toFixed(4)}) ===`);\n return;\n }\n\n // Apply new zoom level\n setZoomLevel(newZoom);\n console.log('Current zoomLevel after wheel:', newZoom);\n };\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n viewportElement.addEventListener('wheel', handleWheel, {\n passive: false\n });\n }\n return () => {\n if (viewportElement) {\n viewportElement.removeEventListener('wheel', handleWheel);\n }\n };\n }, [MAX_ZOOM, zoomLevel, COLS, ROWS, CELL_SIZE]);\n\n // Cache for storing loaded cells in localStorage\n const initializeGridCache = useCallback(() => {\n try {\n // Try to load from localStorage first for instant display\n const cachedGrid = localStorage.getItem('pumpPaintGrid');\n if (cachedGrid) {\n const parsedGrid = JSON.parse(cachedGrid);\n console.log('Loaded grid from cache');\n\n // Initialize grid with cached state\n gridRef.current = parsedGrid;\n\n // Mark that we've loaded the initial state\n setInitialStateLoaded(true);\n // Trigger a re-render\n setGridVersion(v => v + 1);\n }\n } catch (error) {\n console.error('Failed to load from cache:', error);\n }\n }, []);\n\n // Load the initial grid state from persistent storage - optimized for speed\n const loadPersistedState = useCallback(async () => {\n // Prevent multiple simultaneous loading attempts\n if (isLoadingStateRef.current) {\n console.log('Already loading state, skipping duplicate request');\n return;\n }\n isLoadingStateRef.current = true;\n try {\n console.log('Loading persisted grid state...');\n\n // Use a batch approach to load cells faster\n const cells = await stateClient.getEntities('cells');\n console.log('Loaded cells from persistent storage:', cells ? cells.length : 0);\n if (cells && cells.length > 0) {\n // Initialize grid with persisted state\n const updatedGrid = Array(ROWS).fill().map(() => Array(COLS).fill(0));\n\n // Process cells in batches for better performance\n const processBatch = (startIdx, endIdx) => {\n for (let i = startIdx; i < endIdx && i < cells.length; i++) {\n const cell = cells[i];\n if (cell.row >= 0 && cell.row < ROWS && cell.col >= 0 && cell.col < COLS) {\n updatedGrid[cell.row][cell.col] = cell.value;\n }\n }\n };\n\n // Process in chunks of 1000 cells\n const BATCH_SIZE = 1000;\n for (let i = 0; i < cells.length; i += BATCH_SIZE) {\n processBatch(i, i + BATCH_SIZE);\n\n // If this is the first batch, update the grid immediately to show progress\n if (i === 0) {\n gridRef.current = updatedGrid;\n setGridVersion(v => v + 1);\n }\n }\n\n // Replace the entire grid reference with the updated grid\n gridRef.current = updatedGrid;\n\n // Cache the grid in localStorage for faster loading next time\n try {\n localStorage.setItem('pumpPaintGrid', JSON.stringify(updatedGrid));\n console.log('Grid cached successfully');\n } catch (cacheError) {\n console.error('Failed to cache grid:', cacheError);\n }\n\n // Mark that we've loaded the initial state\n setInitialStateLoaded(true);\n // Trigger a re-render\n setGridVersion(v => v + 1);\n console.log('Grid state updated from persistent storage');\n } else {\n // If no persisted state, request from socket as fallback\n console.log('No persisted state found, requesting from socket...');\n socket.emit('requestGridState');\n }\n\n // Load total visitors from persistent storage\n try {\n const visitorsData = await stateClient.getEntity('stats', 'totalVisitors');\n if (visitorsData && visitorsData.value !== undefined) {\n setTotalVisitors(visitorsData.value);\n console.log('Loaded total visitors:', visitorsData.value);\n }\n } catch (visitorsError) {\n console.error('Failed to load total visitors:', visitorsError);\n // Initialize with 0 if not found\n setTotalVisitors(0);\n }\n } catch (error) {\n console.error('Failed to load persisted state:', error);\n // Fallback to socket state\n socket.emit('requestGridState');\n } finally {\n isLoadingStateRef.current = false;\n }\n }, [ROWS, COLS]);\n\n // Force load persisted state immediately when component mounts\n useEffect(() => {\n console.log('Component mounted, loading persisted state immediately');\n\n // First load from cache for instant display\n initializeGridCache();\n\n // Then load from server without delay\n loadPersistedState();\n\n // Add event listener for beforeunload to ensure all changes are saved\n const handleBeforeUnload = () => {\n console.log('Page is about to unload, ensuring all changes are saved');\n // This is just for logging, actual saves happen in real-time\n };\n window.addEventListener('beforeunload', handleBeforeUnload);\n return () => {\n window.removeEventListener('beforeunload', handleBeforeUnload);\n };\n }, [loadPersistedState, initializeGridCache]);\n\n // Set up socket event listeners for real-time updates\n useEffect(() => {\n // Listen for user count updates\n socket.on('devfun:user_count', count => {\n setConnectedUsers(count);\n\n // When a new user connects, increment the total visitors counter\n // But only do this once when the component first mounts\n if (totalVisitors === 0) {\n stateClient.getEntity('stats', 'totalVisitors').then(data => {\n if (data && data.value) {\n // If we have a stored value, increment it by 1 for the new visitor\n const newTotal = data.value + 1;\n setTotalVisitors(newTotal);\n\n // Update the visitor count in persistent storage\n stateClient.updateEntity('stats', 'totalVisitors', {\n value: newTotal\n }).catch(err => {\n console.error('Failed to update total visitors:', err);\n });\n } else {\n // If no stored value exists yet, start with the current count + 1\n const newTotal = count;\n setTotalVisitors(newTotal);\n\n // Create the visitor count in persistent storage\n stateClient.createEntity('stats', {\n id: 'totalVisitors',\n value: newTotal\n }).catch(err => {\n console.error('Failed to create total visitors:', err);\n });\n }\n }).catch(err => {\n console.error('Failed to get total visitors:', err);\n // Start with current count if we can't get the stored value\n setTotalVisitors(count);\n stateClient.createEntity('stats', {\n id: 'totalVisitors',\n value: count\n }).catch(createErr => {\n console.error('Failed to create total visitors:', createErr);\n });\n });\n }\n });\n\n // Listen for cell updates from other users\n socket.on('cellUpdate', data => {\n const {\n row,\n col,\n value\n } = data;\n // Only update if the cell is within bounds\n if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {\n gridRef.current[row][col] = value;\n\n // Also update the persistent storage - try update first, then create if needed\n const cellId = `cell_${row}_${col}`;\n stateClient.updateEntity('cells', cellId, {\n value\n }).then(() => {\n console.log(`Cell ${cellId} updated from socket successfully`);\n\n // Update local cache for faster loading on refresh\n try {\n const cachedGrid = localStorage.getItem('pumpPaintGrid');\n if (cachedGrid) {\n const parsedGrid = JSON.parse(cachedGrid);\n if (parsedGrid[row] && parsedGrid[row][col] !== undefined) {\n parsedGrid[row][col] = value;\n localStorage.setItem('pumpPaintGrid', JSON.stringify(parsedGrid));\n }\n }\n } catch (cacheError) {\n console.error('Failed to update cache from socket:', cacheError);\n }\n }).catch(updateErr => {\n // If update fails, create the cell\n stateClient.createEntity('cells', {\n id: cellId,\n row,\n col,\n value\n }).then(() => {\n console.log(`Cell ${cellId} created from socket successfully`);\n\n // Update local cache for faster loading on refresh\n try {\n const cachedGrid = localStorage.getItem('pumpPaintGrid');\n if (cachedGrid) {\n const parsedGrid = JSON.parse(cachedGrid);\n if (parsedGrid[row] && parsedGrid[row][col] !== undefined) {\n parsedGrid[row][col] = value;\n localStorage.setItem('pumpPaintGrid', JSON.stringify(parsedGrid));\n }\n }\n } catch (cacheError) {\n console.error('Failed to update cache from socket:', cacheError);\n }\n }).catch(createErr => {\n console.error('Failed to persist cell from socket update:', createErr);\n });\n });\n\n // Trigger re-render\n setGridVersion(v => v + 1);\n }\n });\n\n // Listen for the full grid state response (fallback)\n socket.on('gridState', data => {\n console.log('Received grid state from socket:', data ? 'Data received' : 'No data');\n if (data && data.grid) {\n // Create a new grid to replace the current one\n const newGrid = Array(ROWS).fill().map(() => Array(COLS).fill(0));\n\n // Update the grid with the received state\n for (let r = 0; r < ROWS; r++) {\n for (let c = 0; c < COLS; c++) {\n if (data.grid[r] && data.grid[r][c] !== undefined) {\n newGrid[r][c] = data.grid[r][c];\n\n // Also store in persistent storage\n const cellId = `cell_${r}_${c}`;\n if (data.grid[r][c] > 0) {\n // Try update first, then create if needed\n stateClient.updateEntity('cells', cellId, {\n value: data.grid[r][c]\n }).catch(() => {\n stateClient.createEntity('cells', {\n id: cellId,\n row: r,\n col: c,\n value: data.grid[r][c]\n }).catch(createErr => {\n console.error('Failed to store socket state:', createErr);\n });\n });\n }\n }\n }\n }\n\n // Replace the entire grid reference with the new grid\n gridRef.current = newGrid;\n\n // Cache the complete grid for faster loading next time\n try {\n localStorage.setItem('pumpPaintGrid', JSON.stringify(newGrid));\n console.log('Grid cached from socket data');\n } catch (cacheError) {\n console.error('Failed to cache grid from socket:', cacheError);\n }\n\n // Mark that we've loaded the initial state\n setInitialStateLoaded(true);\n // Trigger a re-render\n setGridVersion(v => v + 1);\n console.log('Grid state updated from socket');\n }\n });\n\n // Request grid state from server on initial load\n if (!initialStateLoaded) {\n console.log('Requesting grid state from server...');\n socket.emit('requestGridState');\n }\n\n // Clean up listeners on unmount\n return () => {\n socket.off('devfun:user_count');\n socket.off('cellUpdate');\n socket.off('gridState');\n };\n }, [ROWS, COLS, initialStateLoaded, totalVisitors]);\n\n // Add context menu prevention to viewport\n useEffect(() => {\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n // Prevent context menu on right-click\n viewportElement.addEventListener('contextmenu', e => e.preventDefault());\n\n // Prevent default browser behavior for touch events\n document.addEventListener('touchmove', e => {\n if (isDragging) e.preventDefault();\n }, {\n passive: false\n });\n }\n return () => {\n if (viewportElement) {\n viewportElement.removeEventListener('contextmenu', e => e.preventDefault());\n }\n\n // Clean up global event listeners\n document.removeEventListener('mousemove', handleGlobalMouseMove);\n document.removeEventListener('mouseup', handleGlobalMouseUp);\n document.removeEventListener('touchmove', handleGlobalTouchMove);\n document.removeEventListener('touchend', handleGlobalTouchEnd);\n document.removeEventListener('touchmove', e => {\n if (isDragging) e.preventDefault();\n });\n };\n }, [handleGlobalMouseMove, handleGlobalMouseUp, handleGlobalTouchMove, handleGlobalTouchEnd, isDragging]);\n\n // Memoize grid dimensions and position calculations\n // Enhanced to use actual viewport dimensions and ensure proper full coverage\n const {\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n extendedWidth,\n extendedHeight\n } = useMemo(() => {\n // Get actual viewport dimensions from the DOM element\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement ? viewportElement.clientWidth : VIEWPORT_WIDTH;\n const actualHeight = viewportElement ? viewportElement.clientHeight : VIEWPORT_HEIGHT;\n\n // Get current minZoom directly from ref for accuracy\n const currentMinZoom = minZoomRef.current || 1;\n\n // Ensure zoom level is never below minZoom (defensive programming)\n const safeZoomLevel = Math.max(currentMinZoom, zoomLevel);\n\n // Calculate the actual grid size based on cell size and zoom\n const gridWidth = COLS * CELL_SIZE * safeZoomLevel;\n const gridHeight = ROWS * CELL_SIZE * safeZoomLevel;\n\n // Calculate extended dimensions to ensure canvas covers viewport when navigating\n // Make the canvas 3x the viewport size to ensure it covers all directions\n const extendedWidth = Math.max(gridWidth, actualWidth * 3);\n const extendedHeight = Math.max(gridHeight, actualHeight * 3);\n\n // Calculate position offsets based on aspect ratios\n let positionX = 0;\n let positionY = 0;\n\n // At minZoom, position the canvas to fill the viewport exactly\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n // When at minimum zoom, the canvas should exactly fill the viewport in at least one dimension\n // This is guaranteed by our calculation of minZoomRef.current in the initialization useEffect\n\n // Center the canvas in the viewport\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n } else {\n // When zoomed in beyond minZoom\n if (focusedQuadrant !== null && sections[focusedQuadrant]) {\n const section = sections[focusedQuadrant];\n const centerCol = (section.startCol + section.endCol) / 2;\n const centerRow = (section.startRow + section.endRow) / 2;\n\n // Adjust position to center the focused section\n positionX = actualWidth / 2 - centerCol * CELL_SIZE * safeZoomLevel;\n positionY = actualHeight / 2 - centerRow * CELL_SIZE * safeZoomLevel;\n } else {\n // Center the grid when zoomed in but no quadrant is focused\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n }\n\n // Apply drag offset only when zoomed in beyond minZoom\n // Clamp the drag offsets to prevent scrolling past canvas edges\n const clampedOffsets = clampDragOffsets(dragOffsetX, dragOffsetY);\n positionX += clampedOffsets.x;\n positionY += clampedOffsets.y;\n }\n\n // Log dimensions and position when at minZoom for debugging\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n console.log('Grid dimensions and position at MIN_ZOOM:', {\n actualWidth,\n actualHeight,\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n extendedWidth,\n extendedHeight,\n currentMinZoom,\n safeZoomLevel\n });\n\n // Calculate viewport and grid aspects\n const viewportAspect = actualWidth / actualHeight;\n const gridAspect = COLS * CELL_SIZE / (ROWS * CELL_SIZE);\n console.log('Viewport aspect:', viewportAspect, 'Grid aspect:', gridAspect);\n\n // Check which dimension matches exactly\n const widthMatch = Math.abs(gridWidth - actualWidth) < 1;\n const heightMatch = Math.abs(gridHeight - actualHeight) < 1;\n console.log('Width matches viewport exactly:', widthMatch);\n console.log('Height matches viewport exactly:', heightMatch);\n\n // With our new approach, either width or height should match exactly\n if (!widthMatch && !heightMatch) {\n console.log('Canvas dimensions:', gridWidth, 'x', gridHeight);\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('SUCCESS: Canvas fits viewport exactly based on calculated minimum zoom!');\n } else {\n console.log('SUCCESS: Canvas fits viewport exactly in one dimension and is centered in the other!');\n }\n }\n return {\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n extendedWidth,\n extendedHeight\n };\n }, [COLS, ROWS, CELL_SIZE, VIEWPORT_WIDTH, VIEWPORT_HEIGHT, zoomLevel, focusedQuadrant, sections, dragOffsetX, dragOffsetY, clampDragOffsets]);\n // Performance stats\n const [fps, setFps] = useState(0);\n const frameCountRef = useRef(0);\n const lastFpsUpdateRef = useRef(performance.now());\n\n // Update FPS counter\n useEffect(() => {\n const updateFps = () => {\n const now = performance.now();\n frameCountRef.current++;\n if (now - lastFpsUpdateRef.current >= 1000) {\n // Update every second\n setFps(Math.round(frameCountRef.current * 1000 / (now - lastFpsUpdateRef.current)));\n frameCountRef.current = 0;\n lastFpsUpdateRef.current = now;\n }\n requestAnimationFrame(updateFps);\n };\n const fpsId = requestAnimationFrame(updateFps);\n return () => cancelAnimationFrame(fpsId);\n }, []);\n\n // Get visible area stats for display\n const visibleArea = getVisibleArea();\n const visibleCellCount = (visibleArea.endRow - visibleArea.startRow) * (visibleArea.endCol - visibleArea.startCol);\n // State for copy button feedback\n const [copied, setCopied] = useState(false);\n\n // Function to copy contact address to clipboard\n const copyToClipboard = () => {\n navigator.clipboard.writeText(\"2vYNmUvjqMqtpoGGZB9ZLLwBgT6ZqbhNU1jBJdCApump\").then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds\n }).catch(err => {\n console.error('Failed to copy: ', err);\n });\n };\n return

\n {/* PumpFun link and contact address */}\n

Contact Address:

2vYNmUvjqMqtpoGGZB9ZLLwBgT6ZqbhNU1jBJdCApump

\n \n PumpFun Link\n

\n \n

\n {/* Mode toggle buttons in a box on the left side */}\n

\n {/* TRY ZOOM MODE text above the mode selection box */}\n

\n \n TRY ZOOM MODE!\n \n

MODE SELECTION

\n \n \n

\n {/* Clickable overlay that covers the entire viewport */}\n

\n \n {/* Canvas container with no centering at minZoom */}\n

\n {/* Extended canvas container to prevent seeing void */}\n

\n \n {/* 8-way joystick for navigation */}\n {minZoomRef.current && zoomLevel > minZoomRef.current &&

e.stopPropagation()} onMouseDown={e => e.stopPropagation()} onTouchStart={e => e.stopPropagation()} onMouseUp={e => e.stopPropagation()} onTouchEnd={e => e.stopPropagation()} onMouseMove={e => e.stopPropagation()} onTouchMove={e => e.stopPropagation()}>\n {/* Top row */}\n \n \n \n \n {/* Middle row */}\n \n

e.stopPropagation()} onMouseDown={e => e.stopPropagation()} onTouchStart={e => e.stopPropagation()}>\n •\n

\n \n \n {/* Bottom row */}\n \n \n \n

}\n

\n \n {/* Side panel with controls and info */}\n

\n {/* Logo image */}\n

\n $\"PumpPaint$ \n

\n \n {/* Connected users indicator */}\n

Connected Pump Painters:

\n {connectedUsers}\n

Total Visitors:

\n {totalVisitors}\n

\n \n {/* Mode instructions */}\n

DRAW MODE: click to draw

ZOOM MODE: click to zoom

\n \n

ADDITIONAL CONTROLS:

scroll to zoom

use buttons to zoom

use joystick to navigate

\n \n {/* Zoom controls */}\n

\n \n \n \n

;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"socket.io-client\":\"4.7.1\",\"@devfunlabs/state-client\":\"0.8.1\"}}","appFunctions",[],"token",{"_18":79,"_80":81,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":40,"_93":40,"_69":70},"PUMPPAINT","symbol","PAINT","price",0.00000336,"marketcap",3531.6169,"image","https://pump.mypinata.cloud/ipfs/QmPCau8kisSX4CMSD3ezuBf6TJDp6sCHi7HJynwP3sKYfj?img-width=256&img-dpr=2","website","https://dev.fun/p/2e22d9a78acc8f8ce129","twitter","https://x.com/pumppaint","devCount","appCount","upstreamApp",{"_14":96,"_33":97,"_35":98,"_99":100,"_18":101,"_20":102,"_22":-5,"_69":103,"_104":105,"_106":107,"_32":-5,"_39":40,"_41":108,"_109":110,"_111":17,"_26":25,"_67":25,"_68":17,"_112":17,"_113":25,"_114":17,"_54":115,"_56":40,"_58":57,"_59":116,"_64":57,"_62":57,"_61":57,"_117":118,"_119":-5,"_37":120,"_121":122,"_143":17,"_24":17,"_63":57,"_27":144},"c18cd630ab10971c4890",["D",1740907208018],["D",1756250222924],"template","web","depthdigger","Excavate through mysterious obsidian to unearth a prismatic brick universe beneath! Each click chips away at reality, revealing vibrant rainbow layers waiting to be discovered in this oddly satisfying digital archaeology experience.","CniPCE4b3s8gSUPhUiyMjXnytrEqUrMfSsnbBjLCpump","snapshot","https://cdn.dev.fun/snapshot/c18cd630ab10971c4890/23693_636124fe.webp","ogImage","https://cdn.dev.fun/og/image/c18cd630ab10971c4890/420ae257.webp",18,"featureScore","0","isAutomated","isTagHot","isTagMoney","isTagCrown",164,37,"userId","eda55de0-9e54-4a4d-82d8-d3f7818f0472","upstreamAppId",["B","23693"],"lastCommit",{"_14":120,"_33":123,"_124":125,"_126":127,"_71":128,"_73":74,"_129":130,"_131":132,"_133":127,"_104":105,"_32":-5,"_134":17,"_135":17,"_136":25,"_99":100,"_137":-5,"_138":-5,"_139":-5,"_6":96,"_117":118,"_140":141,"_75":142},["D",1741111547436],"input","take out the click counter","output","<<<<<<< OLD\n // Track total visitors and clicks\n const [totalVisitors, setTotalVisitors] = useState(0);\n const [totalClicks, setTotalClicks] = useState(0);\n=======\n // Track total visitors\n const [totalVisitors, setTotalVisitors] = useState(0);\n>>>>>>> NEW\n\n<<<<<<< OLD\n // Listen for cell updates from other users\n socket.on('cellUpdate', data => {\n const {\n row,\n col,\n value\n } = data;\n // Only update if the cell is within bounds\n if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {\n gridRef.current[row][col] = value;\n\n // Also update the persistent storage\n const cellId = `cell_${row}_${col}`;\n stateClient.createEntity('cells', {\n id: cellId,\n row,\n col,\n value\n }).catch(err => {\n // If cell already exists, update it instead\n stateClient.updateEntity('cells', cellId, {\n value\n }).catch(updateErr => {\n console.error('Failed to update cell state from socket:', updateErr);\n });\n });\n\n // Trigger re-render\n setGridVersion(v => v + 1);\n }\n });\n=======\n // Listen for cell updates from other users\n socket.on('cellUpdate', data => {\n const {\n row,\n col,\n value\n } = data;\n // Only update if the cell is within bounds\n if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {\n gridRef.current[row][col] = value;\n\n // Also update the persistent storage\n const cellId = `cell_${row}_${col}`;\n stateClient.createEntity('cells', {\n id: cellId,\n row,\n col,\n value\n }).catch(err => {\n // If cell already exists, update it instead\n stateClient.updateEntity('cells', cellId, {\n value\n }).catch(updateErr => {\n console.error('Failed to update cell state from socket:', updateErr);\n });\n });\n\n // Trigger re-render\n setGridVersion(v => v + 1);\n }\n });\n>>>>>>> NEW\n\n<<<<<<< OLD\n // Handle cell click to change color (dig through layers)\n const handleCellClick = useCallback((rowIndex, colIndex) => {\n // Update the grid reference directly without creating a new array\n const grid = gridRef.current;\n // Ensure we never have a 0 value (which would be invisible)\n // Start with 1 if the cell is currently 0, otherwise increment\n if (grid[rowIndex][colIndex] === 0) {\n grid[rowIndex][colIndex] = 1;\n } else {\n grid[rowIndex][colIndex] = grid[rowIndex][colIndex] % COLORS.length + 1;\n if (grid[rowIndex][colIndex] > COLORS.length) {\n grid[rowIndex][colIndex] = 1;\n }\n }\n\n // Emit a click event to the socket to increment the global click counter\n // This will be received by the server and broadcast to all clients\n socket.emit('userClick');\n\n // We don't increment locally anymore - we'll wait for the server's broadcast\n // This ensures all users see the same count\n\n // Log for debugging\n console.log('Cell clicked:', {\n row: rowIndex,\n col: colIndex,\n newValue: grid[rowIndex][colIndex],\n colorIndex: (grid[rowIndex][colIndex] - 1) % COLORS.length,\n color: COLORS[(grid[rowIndex][colIndex] - 1) % COLORS.length],\n zoomLevel,\n isMinZoom: zoomLevel <= 0.5\n });\n=======\n // Handle cell click to change color (dig through layers)\n const handleCellClick = useCallback((rowIndex, colIndex) => {\n // Update the grid reference directly without creating a new array\n const grid = gridRef.current;\n // Ensure we never have a 0 value (which would be invisible)\n // Start with 1 if the cell is currently 0, otherwise increment\n if (grid[rowIndex][colIndex] === 0) {\n grid[rowIndex][colIndex] = 1;\n } else {\n grid[rowIndex][colIndex] = grid[rowIndex][colIndex] % COLORS.length + 1;\n if (grid[rowIndex][colIndex] > COLORS.length) {\n grid[rowIndex][colIndex] = 1;\n }\n }\n\n // Log for debugging\n console.log('Cell clicked:', {\n row: rowIndex,\n col: colIndex,\n newValue: grid[rowIndex][colIndex],\n colorIndex: (grid[rowIndex][colIndex] - 1) % COLORS.length,\n color: COLORS[(grid[rowIndex][colIndex] - 1) % COLORS.length],\n zoomLevel,\n isMinZoom: zoomLevel <= 0.5\n });\n>>>>>>> NEW\n\n<<<<<<< OLD\n // Listen for global click events from all users\n socket.on('globalClickUpdate', totalClickCount => {\n console.log('Received global click update:', totalClickCount);\n\n // Always update the local state with the server's value\n // This ensures all users see the same count\n setTotalClicks(totalClickCount);\n\n // Update the click count in persistent storage\n // We use updateEntity first to avoid race conditions\n stateClient.updateEntity('stats', 'totalClicks', {\n value: totalClickCount\n }).catch(err => {\n // If update fails (entity doesn't exist), create it\n stateClient.createEntity('stats', {\n id: 'totalClicks',\n value: totalClickCount\n }).catch(createErr => {\n console.error('Failed to persist total clicks:', createErr);\n });\n });\n });\n=======\n>>>>>>> NEW\n\n<<<<<<< OLD\n // Load total clicks from persistent storage\n try {\n const clicksData = await stateClient.getEntity('stats', 'totalClicks');\n if (clicksData && clicksData.value !== undefined) {\n setTotalClicks(clicksData.value);\n console.log('Loaded total clicks:', clicksData.value);\n\n // Request the latest click count from the server to ensure we're in sync\n socket.emit('requestClickCount');\n } else {\n // If no click data exists, request from server\n socket.emit('requestClickCount');\n }\n } catch (clicksError) {\n console.error('Failed to load total clicks:', clicksError);\n // Request the latest click count from the server\n socket.emit('requestClickCount');\n }\n=======\n>>>>>>> NEW\n\n<<<<<<< OLD\n // Listen for click count response from server\n socket.on('clickCountResponse', count => {\n console.log('Received click count from server:', count);\n setTotalClicks(count);\n\n // Update persistent storage with server's value\n stateClient.updateEntity('stats', 'totalClicks', {\n value: count\n }).catch(err => {\n stateClient.createEntity('stats', {\n id: 'totalClicks',\n value: count\n }).catch(createErr => {\n console.error('Failed to persist click count from server:', createErr);\n });\n });\n });\n=======\n>>>>>>> NEW\n\n<<<<<<< OLD\n socket.off('globalClickUpdate');\n socket.off('clickCountResponse');\n=======\n>>>>>>> NEW\n\n<<<<<<< OLD\n

Total Visitors:

\n {totalVisitors}\n

Total Clicks:

\n {totalClicks}\n

\n=======\n

Total Visitors:

\n {totalVisitors}\n

\n>>>>>>> NEW","import { useState, useCallback, useRef, useEffect, useMemo } from 'react';\nimport { io } from 'socket.io-client';\nimport { StateClient } from '@devfunlabs/state-client';\n\n// Initialize socket connection\nconst socket = io('wss://ws.dev.fun/app-c18cd630ab10971c4890');\n\n// Initialize state client for persistent storage\nconst stateClient = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: 'c18cd630ab10971c4890'\n});\nexport default function App() {\n // Expanded to 300x300 grid size\n const ROWS = 300;\n const COLS = 300;\n // Removed black from the colors, using only vibrant rainbow colors\n const COLORS = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0066FF', '#4B0082', '#9400D3'];\n\n // Track connected users\n const [connectedUsers, setConnectedUsers] = useState(0);\n\n // Track total visitors\n const [totalVisitors, setTotalVisitors] = useState(0);\n\n // Track if initial grid state has been loaded\n const [initialStateLoaded, setInitialStateLoaded] = useState(false);\n\n // Define a uniform cell size to ensure perfect squares\n const CELL_SIZE = 10; // 10px per cell base size for better visibility\n\n // Calculate natural canvas dimensions based on grid size\n const NATURAL_WIDTH = COLS * CELL_SIZE;\n const NATURAL_HEIGHT = ROWS * CELL_SIZE;\n\n // Set viewport dimensions to match the natural canvas size\n // For height, constrain to a percentage of window size\n // For width, we'll adjust it dynamically based on the aspect ratio to avoid horizontal black bars\n const VIEWPORT_HEIGHT = Math.min(window.innerHeight * 0.85, NATURAL_HEIGHT);\n // Calculate width based on the grid aspect ratio to ensure snug fit\n const gridAspectRatio = COLS / ROWS;\n const VIEWPORT_WIDTH = Math.min(VIEWPORT_HEIGHT * gridAspectRatio, window.innerWidth * 0.7);\n\n // Drag state\n const [isDragging, setIsDragging] = useState(false);\n const [dragStartX, setDragStartX] = useState(0);\n const [dragStartY, setDragStartY] = useState(0);\n const [dragOffsetX, setDragOffsetX] = useState(0);\n const [dragOffsetY, setDragOffsetY] = useState(0);\n\n // Set default zoom level to 1 (natural size)\n const minZoomRef = useRef(1);\n\n // Initialize with natural canvas size (1:1 pixel ratio)\n useEffect(() => {\n // Calculate the natural dimensions of the canvas\n const totalWidth = COLS * CELL_SIZE;\n const totalHeight = ROWS * CELL_SIZE;\n\n // Ensure we have valid dimensions to prevent division by zero\n if (totalWidth <= 0 || totalHeight <= 0) {\n console.error('Invalid grid dimensions:', totalWidth, totalHeight);\n return;\n }\n\n // Calculate the minimum zoom level needed to fit the canvas in the viewport\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement ? viewportElement.clientWidth : VIEWPORT_WIDTH;\n const actualHeight = viewportElement ? viewportElement.clientHeight : VIEWPORT_HEIGHT;\n\n // Calculate zoom level needed to fit width and height\n const zoomWidth = actualWidth / totalWidth;\n const zoomHeight = actualHeight / totalHeight;\n\n // Use the smaller value to ensure the canvas fits completely\n // This ensures no black bars on the sides when zoomed all the way out\n const calculatedMinZoom = Math.min(zoomWidth, zoomHeight);\n\n // Adjust viewport width if needed to ensure snug fit\n if (viewportElement && Math.abs(zoomWidth - calculatedMinZoom) > 0.001) {\n // If height is the limiting factor, adjust width to match the aspect ratio\n viewportElement.style.width = `${totalWidth * calculatedMinZoom}px`;\n console.log('Adjusted viewport width for snug fit:', totalWidth * calculatedMinZoom);\n }\n\n // Log detailed diagnostics\n console.log('=== CANVAS NATURAL SIZE ===');\n console.log('Natural canvas dimensions:', totalWidth, 'x', totalHeight);\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('Cell size:', CELL_SIZE);\n console.log('Calculated minimum zoom:', calculatedMinZoom);\n\n // Set minimum zoom level to ensure canvas fills viewport exactly\n minZoomRef.current = calculatedMinZoom;\n setZoomLevel(calculatedMinZoom);\n }, []);\n\n // We'll use minZoomRef directly instead of exposing it as a constant\n // This ensures we always use the most up-to-date value\n const MAX_ZOOM = 10;\n const QUADRANT_ZOOM = 1.7; // Zoom level when clicking on a quadrant\n\n // Start with minimum zoom level (snug fit)\n // We'll initialize with 1 and update it once minZoom is calculated\n const [zoomLevel, setZoomLevel] = useState(1);\n\n // Update viewport when window size changes\n useEffect(() => {\n // Monitor viewport size changes\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n // Use ResizeObserver to detect actual viewport size changes\n const resizeObserver = new ResizeObserver(entries => {\n for (const entry of entries) {\n // Log viewport dimensions for debugging\n console.log('=== VIEWPORT RESIZED ===');\n console.log('New viewport dimensions:', entry.contentRect.width, 'x', entry.contentRect.height);\n console.log('Natural canvas dimensions:', COLS * CELL_SIZE, 'x', ROWS * CELL_SIZE);\n\n // No need to recalculate minZoom as we're using natural size (1:1)\n // Just reset position when viewport changes\n setDragOffsetX(0);\n setDragOffsetY(0);\n setFocusedQuadrant(null);\n }\n });\n\n // Start observing the viewport element\n resizeObserver.observe(viewportElement);\n\n // Clean up observer on unmount\n return () => {\n resizeObserver.disconnect();\n };\n }\n }, [VIEWPORT_WIDTH, VIEWPORT_HEIGHT, COLS, ROWS, CELL_SIZE]);\n\n // Debug info for canvas dimensions\n useEffect(() => {\n console.log('=== CANVAS DIMENSIONS DIAGNOSTICS ===');\n console.log('VIEWPORT_WIDTH:', VIEWPORT_WIDTH);\n console.log('VIEWPORT_HEIGHT:', VIEWPORT_HEIGHT);\n console.log('NATURAL_WIDTH:', NATURAL_WIDTH);\n console.log('NATURAL_HEIGHT:', NATURAL_HEIGHT);\n\n // Get actual viewport element dimensions\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n console.log('Actual viewport dimensions:', viewportElement.clientWidth, viewportElement.clientHeight);\n }\n console.log('Grid dimensions (pixels):', COLS * CELL_SIZE, 'x', ROWS * CELL_SIZE);\n console.log('Current zoomLevel:', zoomLevel);\n\n // Calculate and log scaled dimensions\n const scaledWidth = COLS * CELL_SIZE * zoomLevel;\n const scaledHeight = ROWS * CELL_SIZE * zoomLevel;\n console.log('Scaled dimensions at current zoom:', scaledWidth, 'x', scaledHeight);\n\n // Log viewport vs canvas size comparison\n console.log('Viewport to canvas ratio - Width:', VIEWPORT_WIDTH / (COLS * CELL_SIZE));\n console.log('Viewport to canvas ratio - Height:', VIEWPORT_HEIGHT / (ROWS * CELL_SIZE));\n }, [VIEWPORT_WIDTH, VIEWPORT_HEIGHT, NATURAL_WIDTH, NATURAL_HEIGHT, COLS, ROWS, CELL_SIZE, zoomLevel]);\n const [hoveredQuadrant, setHoveredQuadrant] = useState(null);\n const [focusedQuadrant, setFocusedQuadrant] = useState(null);\n const canvasRef = useRef(null);\n const viewportRef = useRef(null);\n const animationFrameRef = useRef(null);\n const lastRenderTimeRef = useRef(0);\n const throttleTimeRef = useRef(50); // ms between renders\n const gridRef = useRef(Array(ROWS).fill().map(() => Array(COLS).fill(0)));\n\n // Use a ref for grid to avoid re-renders, and a state for tracking changes\n const [gridVersion, setGridVersion] = useState(0);\n\n // Calculate how many cells are visible at QUADRANT_ZOOM (1.7x)\n const visibleCellsX = Math.floor(VIEWPORT_WIDTH / (CELL_SIZE * QUADRANT_ZOOM));\n const visibleCellsY = Math.floor(VIEWPORT_HEIGHT / (CELL_SIZE * QUADRANT_ZOOM));\n\n // Add a state to toggle between dig mode and zoom mode\n const [digMode, setDigMode] = useState(true);\n\n // Memoize sections to avoid recalculation on every render\n const {\n sections,\n sectionsX,\n sectionsY\n } = useMemo(() => {\n // Calculate how many sections we need horizontally and vertically\n const sectionsX = Math.ceil(COLS / visibleCellsX);\n const sectionsY = Math.ceil(ROWS / visibleCellsY);\n\n // Generate dynamic sections based on visible area at 1.7x zoom\n const sections = [];\n for (let y = 0; y < sectionsY; y++) {\n for (let x = 0; x < sectionsX; x++) {\n sections.push({\n id: y * sectionsX + x,\n name: `Section ${y * sectionsX + x + 1}`,\n startRow: y * visibleCellsY,\n endRow: Math.min((y + 1) * visibleCellsY, ROWS),\n startCol: x * visibleCellsX,\n endCol: Math.min((x + 1) * visibleCellsX, COLS)\n });\n }\n }\n return {\n sections,\n sectionsX,\n sectionsY\n };\n }, [COLS, ROWS, visibleCellsX, visibleCellsY]);\n\n // Function to calculate the maximum allowed drag offsets\n const calculateDragLimits = useCallback(() => {\n if (!viewportRef.current) return {\n minX: 0,\n maxX: 0,\n minY: 0,\n maxY: 0\n };\n const viewportWidth = viewportRef.current.clientWidth;\n const viewportHeight = viewportRef.current.clientHeight;\n\n // Calculate the scaled canvas size\n const scaledWidth = COLS * CELL_SIZE * zoomLevel;\n const scaledHeight = ROWS * CELL_SIZE * zoomLevel;\n\n // Calculate the base position (without drag)\n let baseX = (viewportWidth - scaledWidth) / 2;\n let baseY = (viewportHeight - scaledHeight) / 2;\n\n // Calculate the limits\n // If the canvas is smaller than the viewport, don't allow dragging\n // If the canvas is larger, allow dragging but not past the edges\n const minX = Math.min(0, viewportWidth - scaledWidth - baseX);\n const maxX = Math.max(0, -baseX);\n const minY = Math.min(0, viewportHeight - scaledHeight - baseY);\n const maxY = Math.max(0, -baseY);\n return {\n minX,\n maxX,\n minY,\n maxY\n };\n }, [COLS, ROWS, CELL_SIZE, zoomLevel]);\n\n // Function to clamp drag offsets within limits\n const clampDragOffsets = useCallback((offsetX, offsetY) => {\n const {\n minX,\n maxX,\n minY,\n maxY\n } = calculateDragLimits();\n return {\n x: Math.max(minX, Math.min(maxX, offsetX)),\n y: Math.max(minY, Math.min(maxY, offsetY))\n };\n }, [calculateDragLimits]);\n\n // Get the current canvas position and transform for accurate coordinate conversion\n // Simplified to ensure the canvas fills the viewport completely at minZoom\n const getCanvasTransform = useCallback(() => {\n // Get actual viewport dimensions from the DOM element with validation\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement ? viewportElement.clientWidth : VIEWPORT_WIDTH;\n const actualHeight = viewportElement ? viewportElement.clientHeight : VIEWPORT_HEIGHT;\n\n // Validate viewport dimensions\n if (actualWidth <= 0 || actualHeight <= 0) {\n console.error('TRANSFORM ERROR: Invalid viewport dimensions:', actualWidth, actualHeight);\n // Provide fallback values to prevent rendering errors\n return {\n posX: 0,\n posY: 0,\n cellSizeZoomed: CELL_SIZE\n };\n }\n\n // Get current minZoom directly from ref for accuracy with validation\n const currentMinZoom = minZoomRef.current;\n if (!currentMinZoom || isNaN(currentMinZoom) || currentMinZoom <= 0) {\n console.error('TRANSFORM ERROR: Invalid minZoom value:', currentMinZoom);\n // Provide fallback values to prevent rendering errors\n return {\n posX: 0,\n posY: 0,\n cellSizeZoomed: CELL_SIZE\n };\n }\n\n // Ensure zoom level is never below minZoom (defensive programming)\n const safeZoomLevel = Math.max(currentMinZoom, zoomLevel);\n if (safeZoomLevel !== zoomLevel) {\n console.warn('TRANSFORM WARNING: zoomLevel was below minZoom, using minZoom instead');\n }\n\n // Calculate the actual grid size based on cell size and zoom\n const gridWidth = COLS * CELL_SIZE * safeZoomLevel;\n const gridHeight = ROWS * CELL_SIZE * safeZoomLevel;\n\n // Validate calculated dimensions\n if (gridWidth <= 0 || gridHeight <= 0) {\n console.error('TRANSFORM ERROR: Invalid grid dimensions after zoom:', gridWidth, gridHeight);\n console.error('COLS:', COLS, 'ROWS:', ROWS, 'CELL_SIZE:', CELL_SIZE, 'zoomLevel:', safeZoomLevel);\n // Provide fallback values to prevent rendering errors\n return {\n posX: 0,\n posY: 0,\n cellSizeZoomed: CELL_SIZE\n };\n }\n\n // Calculate position offsets\n let posX = 0;\n let posY = 0;\n\n // At minZoom, position the canvas to fill the viewport completely\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n // Since we're using Math.max for minZoom calculation, the canvas will be larger than the viewport\n // Center it to ensure it fills the viewport completely\n posX = (actualWidth - gridWidth) / 2;\n posY = (actualHeight - gridHeight) / 2;\n } else {\n // When zoomed in, we can center the content\n if (focusedQuadrant !== null && sections[focusedQuadrant]) {\n const section = sections[focusedQuadrant];\n const centerCol = (section.startCol + section.endCol) / 2;\n const centerRow = (section.startRow + section.endRow) / 2;\n\n // Adjust position to center the focused section\n posX = actualWidth / 2 - centerCol * CELL_SIZE * safeZoomLevel;\n posY = actualHeight / 2 - centerRow * CELL_SIZE * safeZoomLevel;\n } else {\n // Center the grid when zoomed in but no quadrant is focused\n posX = (actualWidth - gridWidth) / 2;\n posY = (actualHeight - gridHeight) / 2;\n }\n\n // Apply drag offset only when zoomed in beyond minZoom\n // Clamp the drag offsets to prevent scrolling past canvas edges\n const clampedOffsets = clampDragOffsets(dragOffsetX, dragOffsetY);\n posX += clampedOffsets.x;\n posY += clampedOffsets.y;\n }\n\n // Log transform data when at minZoom for debugging\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n console.log('=== CANVAS TRANSFORM AT MIN_ZOOM ===');\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('Grid dimensions after zoom:', gridWidth, 'x', gridHeight);\n console.log('Position offsets:', posX, posY);\n console.log('Cell size after zoom:', CELL_SIZE * safeZoomLevel);\n console.log('Current minZoom:', currentMinZoom);\n\n // Verify full coverage\n const fillsViewport = gridWidth >= actualWidth && gridHeight >= actualHeight;\n console.log('Canvas fills viewport:', fillsViewport);\n if (!fillsViewport) {\n console.error('COVERAGE ERROR: The canvas does not completely fill the viewport!');\n } else {\n console.log('SUCCESS: Canvas fills viewport completely!');\n }\n }\n return {\n posX,\n posY,\n cellSizeZoomed: CELL_SIZE * safeZoomLevel\n };\n }, [COLS, ROWS, CELL_SIZE, VIEWPORT_WIDTH, VIEWPORT_HEIGHT, zoomLevel, focusedQuadrant, sections, dragOffsetX, dragOffsetY, clampDragOffsets]);\n\n // Calculate visible area based on current zoom and position\n // Simplified to ensure exact viewport filling at minZoom with no borders\n const getVisibleArea = useCallback(() => {\n if (!viewportRef.current) return {\n startRow: 0,\n endRow: ROWS,\n startCol: 0,\n endCol: COLS\n };\n\n // Get actual viewport dimensions from the DOM element\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement.clientWidth;\n const actualHeight = viewportElement.clientHeight;\n\n // Get current minZoom directly from ref for accuracy\n const currentMinZoom = minZoomRef.current || 1;\n\n // Ensure zoom level is never below minZoom (defensive programming)\n const safeZoomLevel = Math.max(currentMinZoom, zoomLevel);\n\n // Calculate the actual grid size based on cell size and zoom\n const gridWidth = COLS * CELL_SIZE * safeZoomLevel;\n const gridHeight = ROWS * CELL_SIZE * safeZoomLevel;\n\n // Calculate position offsets\n let positionX = 0;\n let positionY = 0;\n\n // At minZoom, position the canvas to fill the viewport exactly\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n // When at minimum zoom, the canvas should exactly fill the viewport in at least one dimension\n // This is guaranteed by our calculation of minZoomRef.current in the initialization useEffect\n\n // Center the canvas in the viewport\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n } else {\n // When zoomed in, we can center the content\n if (focusedQuadrant !== null && sections[focusedQuadrant]) {\n const section = sections[focusedQuadrant];\n const centerCol = (section.startCol + section.endCol) / 2;\n const centerRow = (section.startRow + section.endRow) / 2;\n\n // Adjust position to center the focused section\n positionX = actualWidth / 2 - centerCol * CELL_SIZE * safeZoomLevel;\n positionY = actualHeight / 2 - centerRow * CELL_SIZE * safeZoomLevel;\n } else {\n // Center the grid when zoomed in but no quadrant is focused\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n }\n\n // Apply drag offset only when zoomed in beyond minZoom\n // Clamp the drag offsets to prevent scrolling past canvas edges\n const clampedOffsets = clampDragOffsets(dragOffsetX, dragOffsetY);\n positionX += clampedOffsets.x;\n positionY += clampedOffsets.y;\n }\n\n // Log position data when at minZoom for debugging\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n console.log('Visible area at MIN_ZOOM:', {\n actualWidth,\n actualHeight,\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n currentMinZoom,\n safeZoomLevel\n });\n\n // Calculate viewport and grid aspects\n const viewportAspect = actualWidth / actualHeight;\n const gridAspect = COLS * CELL_SIZE / (ROWS * CELL_SIZE);\n console.log('Viewport aspect:', viewportAspect, 'Grid aspect:', gridAspect);\n\n // Check which dimension matches exactly\n const widthMatch = Math.abs(gridWidth - actualWidth) < 1;\n const heightMatch = Math.abs(gridHeight - actualHeight) < 1;\n console.log('Width matches viewport exactly:', widthMatch);\n console.log('Height matches viewport exactly:', heightMatch);\n\n // With our new approach, either width or height should match exactly\n if (!widthMatch && !heightMatch) {\n console.log('Canvas dimensions:', gridWidth, 'x', gridHeight);\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('SUCCESS: Canvas fits viewport exactly based on calculated minimum zoom!');\n } else {\n console.log('SUCCESS: Canvas fits viewport exactly in one dimension and is centered in the other!');\n }\n }\n\n // Calculate visible area in grid coordinates with safety limits\n // This ensures we don't try to render an impossibly large area\n const cellSizeZoomed = CELL_SIZE * safeZoomLevel;\n\n // Add padding but limit to reasonable values\n const padding = 5;\n // When zoomed all the way out, use a much larger value to ensure we see the entire grid\n const maxCellsPerDimension = safeZoomLevel <= 0.5 ? Math.max(COLS, ROWS) // Use the full grid size when zoomed out\n : Math.ceil(Math.max(VIEWPORT_WIDTH, VIEWPORT_HEIGHT) / cellSizeZoomed) + padding * 2;\n\n // Calculate initial values\n let startCol = Math.floor(-positionX / cellSizeZoomed) - padding;\n let endCol = Math.ceil((actualWidth - positionX) / cellSizeZoomed) + padding;\n let startRow = Math.floor(-positionY / cellSizeZoomed) - padding;\n let endRow = Math.ceil((actualHeight - positionY) / cellSizeZoomed) + padding;\n\n // When at minimum zoom, ALWAYS show the entire grid\n if (safeZoomLevel <= 0.5) {\n startCol = 0;\n endCol = COLS;\n startRow = 0;\n endRow = ROWS;\n console.log('At minimum zoom, showing entire grid:', ROWS, 'x', COLS);\n }\n // For other zoom levels, ensure the range isn't too large (prevent potential infinite loops)\n else if (endCol - startCol > maxCellsPerDimension) {\n const center = Math.floor((startCol + endCol) / 2);\n startCol = center - Math.floor(maxCellsPerDimension / 2);\n endCol = center + Math.ceil(maxCellsPerDimension / 2);\n }\n if (safeZoomLevel > 0.5 && endRow - startRow > maxCellsPerDimension) {\n const center = Math.floor((startRow + endRow) / 2);\n startRow = center - Math.floor(maxCellsPerDimension / 2);\n endRow = center + Math.ceil(maxCellsPerDimension / 2);\n }\n return {\n startRow,\n endRow,\n startCol,\n endCol,\n positionX,\n positionY\n };\n }, [COLS, ROWS, CELL_SIZE, VIEWPORT_WIDTH, VIEWPORT_HEIGHT, zoomLevel, focusedQuadrant, sections, dragOffsetX, dragOffsetY, clampDragOffsets]);\n\n // Optimized draw function that only renders visible cells\n const drawGrid = useCallback(() => {\n const now = performance.now();\n if (now - lastRenderTimeRef.current < throttleTimeRef.current) {\n // Schedule next frame if we're throttling\n animationFrameRef.current = requestAnimationFrame(drawGrid);\n return;\n }\n lastRenderTimeRef.current = now;\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext('2d');\n\n // Set canvas dimensions to match grid size (important for pixel-perfect rendering)\n canvas.width = COLS * CELL_SIZE;\n canvas.height = ROWS * CELL_SIZE;\n\n // Get the visible area to optimize rendering\n const {\n startRow,\n endRow,\n startCol,\n endCol\n } = getVisibleArea();\n\n // Fill the entire canvas with a pattern background first\n ctx.fillStyle = '#111';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n // Draw a grid pattern on the entire canvas\n ctx.strokeStyle = 'rgba(30, 30, 30, 0.3)';\n ctx.beginPath();\n for (let c = 0; c < COLS; c += 5) {\n ctx.moveTo(c * CELL_SIZE, 0);\n ctx.lineTo(c * CELL_SIZE, canvas.height);\n }\n for (let r = 0; r < ROWS; r += 5) {\n ctx.moveTo(0, r * CELL_SIZE);\n ctx.lineTo(canvas.width, r * CELL_SIZE);\n }\n ctx.stroke();\n\n // Limit the rendering area to prevent infinite loops\n const MAX_CELLS_TO_RENDER = zoomLevel <= 0.5 ? 90000 : 10000; // Increased for zoomed out view\n const limitedStartRow = Math.max(startRow, 0);\n const limitedEndRow = Math.min(endRow, ROWS);\n const limitedStartCol = Math.max(startCol, 0);\n const limitedEndCol = Math.min(endCol, COLS);\n\n // Calculate total cells to render and further limit if needed\n const totalCells = (limitedEndRow - limitedStartRow) * (limitedEndCol - limitedStartCol);\n let finalStartRow = limitedStartRow;\n let finalEndRow = limitedEndRow;\n let finalStartCol = limitedStartCol;\n let finalEndCol = limitedEndCol;\n\n // When zoomed all the way out, try to render the entire grid or a much larger portion\n if (zoomLevel <= 0.5) {\n // At minimum zoom, prioritize showing the entire grid or as much as possible\n finalStartRow = 0;\n finalEndRow = ROWS;\n finalStartCol = 0;\n finalEndCol = COLS;\n } else if (totalCells > MAX_CELLS_TO_RENDER) {\n // If still too many cells, reduce the rendering area proportionally\n const scale = Math.sqrt(MAX_CELLS_TO_RENDER / totalCells);\n const rowRange = limitedEndRow - limitedStartRow;\n const colRange = limitedEndCol - limitedStartCol;\n const rowCenter = (limitedStartRow + limitedEndRow) / 2;\n const colCenter = (limitedStartCol + limitedEndCol) / 2;\n finalStartRow = Math.floor(rowCenter - rowRange * scale / 2);\n finalEndRow = Math.ceil(rowCenter + rowRange * scale / 2);\n finalStartCol = Math.floor(colCenter - colRange * scale / 2);\n finalEndCol = Math.ceil(colCenter + colRange * scale / 2);\n }\n\n // Draw only visible cells\n const grid = gridRef.current;\n for (let r = finalStartRow; r < finalEndRow; r++) {\n for (let c = finalStartCol; c < finalEndCol; c++) {\n if (r >= 0 && r < ROWS && c >= 0 && c < COLS) {\n // Always render cells, even if value is 0\n const colorIndex = grid[r][c] % COLORS.length;\n if (grid[r][c] > 0) {\n // Only render colored cells\n ctx.fillStyle = COLORS[colorIndex];\n\n // When zoomed all the way out, make cells more visible by using a minimum size\n if (zoomLevel <= 0.5) {\n // Use a larger minimum size (5px) to ensure visibility at minimum zoom\n const minSize = 5;\n\n // Draw a slightly larger rectangle to ensure visibility\n // Remove the -0.5 offset which can cause pixel alignment issues\n ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, minSize, minSize);\n\n // Add a border to make the cell more visible\n ctx.strokeStyle = 'rgba(0,0,0,0.5)';\n ctx.lineWidth = 0.5;\n ctx.strokeRect(c * CELL_SIZE, r * CELL_SIZE, minSize, minSize);\n\n // Log for debugging\n if (r === finalStartRow && c === finalStartCol) {\n console.log('Rendering cell at minZoom:', {\n row: r,\n col: c,\n value: grid[r][c],\n colorIndex,\n color: COLORS[colorIndex],\n cellSize: minSize,\n zoomLevel\n });\n }\n } else {\n ctx.fillRect(c * CELL_SIZE, r * CELL_SIZE, CELL_SIZE, CELL_SIZE);\n }\n }\n }\n }\n }\n\n // Draw cell borders more efficiently (optional - can be disabled for better performance)\n if (zoomLevel > 0.5) {\n // Only draw borders when zoomed in enough\n ctx.strokeStyle = 'rgba(0,0,0,0.2)';\n ctx.beginPath();\n\n // Draw vertical lines\n for (let c = startCol; c <= endCol; c++) {\n if (c >= 0 && c <= COLS) {\n ctx.moveTo(c * CELL_SIZE, Math.max(0, startRow) * CELL_SIZE);\n ctx.lineTo(c * CELL_SIZE, Math.min(ROWS, endRow) * CELL_SIZE);\n }\n }\n\n // Draw horizontal lines\n for (let r = startRow; r <= endRow; r++) {\n if (r >= 0 && r <= ROWS) {\n ctx.moveTo(Math.max(0, startCol) * CELL_SIZE, r * CELL_SIZE);\n ctx.lineTo(Math.min(COLS, endCol) * CELL_SIZE, r * CELL_SIZE);\n }\n }\n ctx.stroke();\n }\n }, [COLORS, ROWS, COLS, CELL_SIZE, getVisibleArea, zoomLevel]);\n\n // Handle cell click to change color (dig through layers)\n const handleCellClick = useCallback((rowIndex, colIndex) => {\n // Update the grid reference directly without creating a new array\n const grid = gridRef.current;\n // Ensure we never have a 0 value (which would be invisible)\n // Start with 1 if the cell is currently 0, otherwise increment\n if (grid[rowIndex][colIndex] === 0) {\n grid[rowIndex][colIndex] = 1;\n } else {\n grid[rowIndex][colIndex] = grid[rowIndex][colIndex] % COLORS.length + 1;\n if (grid[rowIndex][colIndex] > COLORS.length) {\n grid[rowIndex][colIndex] = 1;\n }\n }\n\n // Log for debugging\n console.log('Cell clicked:', {\n row: rowIndex,\n col: colIndex,\n newValue: grid[rowIndex][colIndex],\n colorIndex: (grid[rowIndex][colIndex] - 1) % COLORS.length,\n color: COLORS[(grid[rowIndex][colIndex] - 1) % COLORS.length],\n zoomLevel,\n isMinZoom: zoomLevel <= 0.5\n });\n\n // Create a unique ID for this cell\n const cellId = `cell_${rowIndex}_${colIndex}`;\n\n // Store the cell state in the persistent storage\n stateClient.createEntity('cells', {\n id: cellId,\n row: rowIndex,\n col: colIndex,\n value: grid[rowIndex][colIndex]\n }).catch(err => {\n // If cell already exists, update it instead\n stateClient.updateEntity('cells', cellId, {\n value: grid[rowIndex][colIndex]\n }).catch(updateErr => {\n console.error('Failed to update cell state:', updateErr);\n });\n });\n\n // Emit the change to other users\n socket.emit('cellUpdate', {\n row: rowIndex,\n col: colIndex,\n value: grid[rowIndex][colIndex]\n });\n\n // Increment version to trigger a re-render\n setGridVersion(v => v + 1);\n }, [COLORS.length, zoomLevel]);\n\n // Throttled mouse move handler with accurate coordinate conversion\n const lastMoveTimeRef = useRef(0);\n const handleMouseMove = useCallback(e => {\n // Throttle mouse move events for hover detection\n const now = performance.now();\n if (now - lastMoveTimeRef.current < 30) return; // 30ms throttle\n lastMoveTimeRef.current = now;\n const rect = viewportRef.current.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n // Get current canvas transform for accurate coordinate conversion\n const {\n posX,\n posY,\n cellSizeZoomed\n } = getCanvasTransform();\n\n // Convert to grid coordinates using the accurate position\n const gridX = Math.floor((mouseX - posX) / cellSizeZoomed);\n const gridY = Math.floor((mouseY - posY) / cellSizeZoomed);\n\n // Determine which section the mouse is over\n if (gridX >= 0 && gridX < COLS && gridY >= 0 && gridY < ROWS) {\n // Use binary search or lookup table for large section arrays\n let hoveredSection = -1;\n for (let i = 0; i < sections.length; i++) {\n const section = sections[i];\n if (gridX >= section.startCol && gridX < section.endCol && gridY >= section.startRow && gridY < section.endRow) {\n hoveredSection = i;\n break;\n }\n }\n setHoveredQuadrant(hoveredSection);\n } else {\n setHoveredQuadrant(null);\n }\n }, [COLS, ROWS, sections, getCanvasTransform]);\n\n // Accurate coordinate conversion that works with all zoom levels\n const handleCanvasClick = useCallback(e => {\n // Only process left clicks\n if (e.button !== 0) return;\n\n // Check if the click is on the joystick\n // This is a fallback in case stopPropagation doesn't work\n if (e.target.closest('.grid')) {\n return;\n }\n const rect = viewportRef.current.getBoundingClientRect();\n const mouseX = e.clientX - rect.left;\n const mouseY = e.clientY - rect.top;\n\n // Get current canvas transform for accurate coordinate conversion\n const {\n posX,\n posY,\n cellSizeZoomed\n } = getCanvasTransform();\n\n // Convert to grid coordinates using the accurate position\n const gridX = Math.floor((mouseX - posX) / cellSizeZoomed);\n const gridY = Math.floor((mouseY - posY) / cellSizeZoomed);\n\n // Check if we're in zoom mode and hovering over a quadrant\n if (!digMode && hoveredQuadrant !== null) {\n // Zoom into the quadrant\n setZoomLevel(QUADRANT_ZOOM);\n setFocusedQuadrant(hoveredQuadrant);\n return;\n }\n\n // Check bounds and update grid\n if (gridX >= 0 && gridX < COLS && gridY >= 0 && gridY < ROWS) {\n handleCellClick(gridY, gridX);\n }\n }, [COLS, ROWS, handleCellClick, hoveredQuadrant, digMode, QUADRANT_ZOOM, focusedQuadrant, getCanvasTransform]);\n\n // We're keeping the drag handlers for compatibility, but they're not the primary navigation method anymore\n // The 8-way joystick is now the recommended way to navigate\n const handleMouseDown = useCallback(e => {\n // Only start dragging on right-click (button 2)\n if (e.button === 2 && minZoomRef.current && zoomLevel > minZoomRef.current) {\n e.preventDefault();\n setIsDragging(true);\n setDragStartX(e.clientX);\n setDragStartY(e.clientY);\n\n // Capture mouse events outside the viewport\n document.addEventListener('mousemove', handleGlobalMouseMove);\n document.addEventListener('mouseup', handleGlobalMouseUp);\n }\n }, [zoomLevel]);\n\n // Global mouse move handler for dragging\n const handleGlobalMouseMove = useCallback(e => {\n if (isDragging) {\n const dx = e.clientX - dragStartX;\n const dy = e.clientY - dragStartY;\n\n // Apply drag limits\n const clampedOffsets = clampDragOffsets(dx, dy);\n setDragOffsetX(clampedOffsets.x);\n setDragOffsetY(clampedOffsets.y);\n }\n }, [isDragging, dragStartX, dragStartY, clampDragOffsets]);\n\n // Global mouse up handler\n const handleGlobalMouseUp = useCallback(() => {\n if (isDragging) {\n setIsDragging(false);\n\n // Remove global event listeners\n document.removeEventListener('mousemove', handleGlobalMouseMove);\n document.removeEventListener('mouseup', handleGlobalMouseUp);\n }\n }, [isDragging, handleGlobalMouseMove]);\n\n // Handle drag end\n const handleMouseUp = useCallback(() => {\n if (isDragging) {\n setIsDragging(false);\n\n // Remove global event listeners\n document.removeEventListener('mousemove', handleGlobalMouseMove);\n document.removeEventListener('mouseup', handleGlobalMouseUp);\n }\n }, [isDragging, handleGlobalMouseMove]);\n\n // Track touch points for pinch-to-zoom\n const [touchPoints, setTouchPoints] = useState([]);\n const [initialPinchDistance, setInitialPinchDistance] = useState(null);\n const [initialZoom, setInitialZoom] = useState(null);\n const [isPinching, setIsPinching] = useState(false);\n\n // Calculate distance between two touch points\n const getTouchDistance = touches => {\n if (touches.length < 2) return 0;\n const dx = touches[0].clientX - touches[1].clientX;\n const dy = touches[0].clientY - touches[1].clientY;\n return Math.sqrt(dx * dx + dy * dy);\n };\n\n // Get midpoint between two touch points\n const getTouchMidpoint = touches => {\n if (touches.length < 2) return {\n x: touches[0].clientX,\n y: touches[0].clientY\n };\n return {\n x: (touches[0].clientX + touches[1].clientX) / 2,\n y: (touches[0].clientY + touches[1].clientY) / 2\n };\n };\n\n // Handle touch events for mobile\n const handleTouchStart = useCallback(e => {\n // Store all touch points\n setTouchPoints(Array.from(e.touches));\n if (e.touches.length === 2) {\n // Start pinch gesture\n e.preventDefault();\n setIsPinching(true);\n setInitialPinchDistance(getTouchDistance(e.touches));\n setInitialZoom(zoomLevel);\n } else if (minZoomRef.current && zoomLevel > minZoomRef.current) {\n // Single touch - handle as drag\n const touch = e.touches[0];\n setIsDragging(true);\n setDragStartX(touch.clientX);\n setDragStartY(touch.clientY);\n\n // Capture touch events outside the viewport\n document.addEventListener('touchmove', handleGlobalTouchMove, {\n passive: false\n });\n document.addEventListener('touchend', handleGlobalTouchEnd);\n }\n }, [zoomLevel]);\n\n // Global touch move handler\n const handleGlobalTouchMove = useCallback(e => {\n // Update all touch points\n setTouchPoints(Array.from(e.touches));\n if (isPinching && e.touches.length === 2) {\n e.preventDefault();\n\n // Calculate new distance between touch points\n const currentDistance = getTouchDistance(e.touches);\n const scaleFactor = currentDistance / initialPinchDistance;\n\n // Calculate new zoom level\n const newZoom = Math.max(minZoomRef.current, Math.min(MAX_ZOOM, initialZoom * scaleFactor));\n\n // Apply new zoom level\n setZoomLevel(newZoom);\n } else if (isDragging) {\n e.preventDefault();\n const touch = e.touches[0];\n const dx = touch.clientX - dragStartX;\n const dy = touch.clientY - dragStartY;\n\n // Apply drag limits\n const clampedOffsets = clampDragOffsets(dx, dy);\n setDragOffsetX(clampedOffsets.x);\n setDragOffsetY(clampedOffsets.y);\n }\n }, [isDragging, isPinching, dragStartX, dragStartY, initialPinchDistance, initialZoom, MAX_ZOOM, clampDragOffsets]);\n\n // Global touch end handler\n const handleGlobalTouchEnd = useCallback(e => {\n // Update touch points\n setTouchPoints(Array.from(e.touches || []));\n if (isPinching && e.touches.length < 2) {\n setIsPinching(false);\n setInitialPinchDistance(null);\n setInitialZoom(null);\n }\n if (isDragging && e.touches.length === 0) {\n setIsDragging(false);\n\n // Remove global event listeners\n document.removeEventListener('touchmove', handleGlobalTouchMove);\n document.removeEventListener('touchend', handleGlobalTouchEnd);\n }\n }, [isDragging, isPinching, handleGlobalTouchMove]);\n const handleTouchMove = useCallback(e => {\n // Handle pinch gesture\n if (e.touches.length === 2) {\n if (!isPinching) {\n setIsPinching(true);\n setInitialPinchDistance(getTouchDistance(e.touches));\n setInitialZoom(zoomLevel);\n }\n\n // Let the global handler take care of the rest\n return;\n }\n\n // Handle drag\n if (isDragging && e.touches.length === 1) {\n e.preventDefault();\n const touch = e.touches[0];\n const dx = touch.clientX - dragStartX;\n const dy = touch.clientY - dragStartY;\n\n // Apply drag limits\n const clampedOffsets = clampDragOffsets(dx, dy);\n setDragOffsetX(clampedOffsets.x);\n setDragOffsetY(clampedOffsets.y);\n }\n }, [isDragging, isPinching, dragStartX, dragStartY, zoomLevel, clampDragOffsets]);\n const handleTouchEnd = useCallback(e => {\n // Update touch points\n setTouchPoints(Array.from(e.touches || []));\n if (isPinching && e.touches.length < 2) {\n setIsPinching(false);\n setInitialPinchDistance(null);\n setInitialZoom(null);\n }\n if (e.touches.length === 0) {\n setIsDragging(false);\n }\n }, [isPinching]);\n\n // Redraw grid when it changes\n useEffect(() => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n\n // Force immediate redraw when at minimum zoom to ensure visibility\n if (zoomLevel <= 0.5) {\n console.log('Forcing immediate redraw at minimum zoom');\n drawGrid();\n } else {\n animationFrameRef.current = requestAnimationFrame(drawGrid);\n }\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [gridVersion, zoomLevel, focusedQuadrant, drawGrid]);\n\n // Add wheel event listener for zooming with natural size as minimum\n useEffect(() => {\n const handleWheel = e => {\n e.preventDefault();\n\n // Use a slower zoom speed for more precise control\n const zoomSpeed = 0.05; // Reduced from 0.1 for finer control\n\n // Calculate new zoom level with strict clamping\n // Use minZoomRef.current as the minimum zoom level to ensure proper fit\n const newZoom = Math.max(minZoomRef.current, Math.min(MAX_ZOOM, zoomLevel + (e.deltaY < 0 ? zoomSpeed : -zoomSpeed)));\n\n // If we're zooming out to minimum zoom or below, reset to exact minZoom and reset offsets\n if (Math.abs(newZoom - minZoomRef.current) < 0.001) {\n setZoomLevel(minZoomRef.current);\n setDragOffsetX(0);\n setDragOffsetY(0);\n setFocusedQuadrant(null); // Reset focused quadrant when at min zoom\n\n // Log for debugging\n console.log(`=== ZOOMED TO MINIMUM (${minZoomRef.current.toFixed(4)}) ===`);\n return;\n }\n\n // Apply new zoom level\n setZoomLevel(newZoom);\n console.log('Current zoomLevel after wheel:', newZoom);\n };\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n viewportElement.addEventListener('wheel', handleWheel, {\n passive: false\n });\n }\n return () => {\n if (viewportElement) {\n viewportElement.removeEventListener('wheel', handleWheel);\n }\n };\n }, [MAX_ZOOM, zoomLevel, COLS, ROWS, CELL_SIZE]);\n\n // Set up socket event listeners for real-time updates\n useEffect(() => {\n // Listen for user count updates\n socket.on('devfun:user_count', count => {\n setConnectedUsers(count);\n\n // When a new user connects, increment the total visitors counter\n // But only do this once when the component first mounts\n if (totalVisitors === 0) {\n stateClient.getEntity('stats', 'totalVisitors').then(data => {\n if (data && data.value) {\n // If we have a stored value, increment it by 1 for the new visitor\n const newTotal = data.value + 1;\n setTotalVisitors(newTotal);\n\n // Update the visitor count in persistent storage\n stateClient.updateEntity('stats', 'totalVisitors', {\n value: newTotal\n }).catch(err => {\n console.error('Failed to update total visitors:', err);\n });\n } else {\n // If no stored value exists yet, start with the current count + 1\n const newTotal = count;\n setTotalVisitors(newTotal);\n\n // Create the visitor count in persistent storage\n stateClient.createEntity('stats', {\n id: 'totalVisitors',\n value: newTotal\n }).catch(err => {\n console.error('Failed to create total visitors:', err);\n });\n }\n }).catch(err => {\n console.error('Failed to get total visitors:', err);\n // Start with current count if we can't get the stored value\n setTotalVisitors(count);\n stateClient.createEntity('stats', {\n id: 'totalVisitors',\n value: count\n }).catch(createErr => {\n console.error('Failed to create total visitors:', createErr);\n });\n });\n }\n });\n\n // Listen for cell updates from other users\n socket.on('cellUpdate', data => {\n const {\n row,\n col,\n value\n } = data;\n // Only update if the cell is within bounds\n if (row >= 0 && row < ROWS && col >= 0 && col < COLS) {\n gridRef.current[row][col] = value;\n\n // Also update the persistent storage\n const cellId = `cell_${row}_${col}`;\n stateClient.createEntity('cells', {\n id: cellId,\n row,\n col,\n value\n }).catch(err => {\n // If cell already exists, update it instead\n stateClient.updateEntity('cells', cellId, {\n value\n }).catch(updateErr => {\n console.error('Failed to update cell state from socket:', updateErr);\n });\n });\n\n // Trigger re-render\n setGridVersion(v => v + 1);\n }\n });\n\n // Load the initial grid state from persistent storage\n const loadPersistedState = async () => {\n try {\n console.log('Loading persisted grid state...');\n const cells = await stateClient.getEntities('cells');\n console.log('Loaded cells from persistent storage:', cells ? cells.length : 0);\n if (cells && cells.length > 0) {\n // Initialize grid with persisted state\n cells.forEach(cell => {\n if (cell.row >= 0 && cell.row < ROWS && cell.col >= 0 && cell.col < COLS) {\n gridRef.current[cell.row][cell.col] = cell.value;\n }\n });\n\n // Mark that we've loaded the initial state\n setInitialStateLoaded(true);\n // Trigger a re-render\n setGridVersion(v => v + 1);\n console.log('Grid state updated from persistent storage');\n } else {\n // If no persisted state, request from socket as fallback\n console.log('No persisted state found, requesting from socket...');\n socket.emit('requestGridState');\n }\n\n // Load total visitors from persistent storage\n try {\n const visitorsData = await stateClient.getEntity('stats', 'totalVisitors');\n if (visitorsData && visitorsData.value !== undefined) {\n setTotalVisitors(visitorsData.value);\n console.log('Loaded total visitors:', visitorsData.value);\n }\n } catch (visitorsError) {\n console.error('Failed to load total visitors:', visitorsError);\n // Initialize with 0 if not found\n setTotalVisitors(0);\n }\n } catch (error) {\n console.error('Failed to load persisted state:', error);\n // Fallback to socket state\n socket.emit('requestGridState');\n }\n };\n\n // Load persisted state when component mounts\n if (!initialStateLoaded) {\n loadPersistedState();\n }\n\n // Listen for the full grid state response (fallback)\n socket.on('gridState', data => {\n console.log('Received grid state from socket:', data ? 'Data received' : 'No data');\n if (data && data.grid && !initialStateLoaded) {\n // Update the grid with the received state\n for (let r = 0; r < ROWS; r++) {\n for (let c = 0; c < COLS; c++) {\n if (data.grid[r] && data.grid[r][c] !== undefined) {\n gridRef.current[r][c] = data.grid[r][c];\n\n // Also store in persistent storage\n const cellId = `cell_${r}_${c}`;\n if (data.grid[r][c] > 0) {\n stateClient.createEntity('cells', {\n id: cellId,\n row: r,\n col: c,\n value: data.grid[r][c]\n }).catch(err => {\n // If cell already exists, update it\n stateClient.updateEntity('cells', cellId, {\n value: data.grid[r][c]\n }).catch(updateErr => {\n console.error('Failed to store socket state:', updateErr);\n });\n });\n }\n }\n }\n }\n // Mark that we've loaded the initial state\n setInitialStateLoaded(true);\n // Trigger a re-render\n setGridVersion(v => v + 1);\n console.log('Grid state updated from socket');\n }\n });\n\n // Clean up listeners on unmount\n return () => {\n socket.off('devfun:user_count');\n socket.off('cellUpdate');\n socket.off('gridState');\n };\n }, [ROWS, COLS, initialStateLoaded]);\n\n // Add context menu prevention to viewport\n useEffect(() => {\n const viewportElement = viewportRef.current;\n if (viewportElement) {\n // Prevent context menu on right-click\n viewportElement.addEventListener('contextmenu', e => e.preventDefault());\n\n // Prevent default browser behavior for touch events\n document.addEventListener('touchmove', e => {\n if (isDragging) e.preventDefault();\n }, {\n passive: false\n });\n }\n return () => {\n if (viewportElement) {\n viewportElement.removeEventListener('contextmenu', e => e.preventDefault());\n }\n\n // Clean up global event listeners\n document.removeEventListener('mousemove', handleGlobalMouseMove);\n document.removeEventListener('mouseup', handleGlobalMouseUp);\n document.removeEventListener('touchmove', handleGlobalTouchMove);\n document.removeEventListener('touchend', handleGlobalTouchEnd);\n document.removeEventListener('touchmove', e => {\n if (isDragging) e.preventDefault();\n });\n };\n }, [handleGlobalMouseMove, handleGlobalMouseUp, handleGlobalTouchMove, handleGlobalTouchEnd, isDragging]);\n\n // Memoize grid dimensions and position calculations\n // Enhanced to use actual viewport dimensions and ensure proper full coverage\n const {\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n extendedWidth,\n extendedHeight\n } = useMemo(() => {\n // Get actual viewport dimensions from the DOM element\n const viewportElement = viewportRef.current;\n const actualWidth = viewportElement ? viewportElement.clientWidth : VIEWPORT_WIDTH;\n const actualHeight = viewportElement ? viewportElement.clientHeight : VIEWPORT_HEIGHT;\n\n // Get current minZoom directly from ref for accuracy\n const currentMinZoom = minZoomRef.current || 1;\n\n // Ensure zoom level is never below minZoom (defensive programming)\n const safeZoomLevel = Math.max(currentMinZoom, zoomLevel);\n\n // Calculate the actual grid size based on cell size and zoom\n const gridWidth = COLS * CELL_SIZE * safeZoomLevel;\n const gridHeight = ROWS * CELL_SIZE * safeZoomLevel;\n\n // Calculate extended dimensions to ensure canvas covers viewport when navigating\n // Make the canvas 3x the viewport size to ensure it covers all directions\n const extendedWidth = Math.max(gridWidth, actualWidth * 3);\n const extendedHeight = Math.max(gridHeight, actualHeight * 3);\n\n // Calculate position offsets based on aspect ratios\n let positionX = 0;\n let positionY = 0;\n\n // At minZoom, position the canvas to fill the viewport exactly\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n // When at minimum zoom, the canvas should exactly fill the viewport in at least one dimension\n // This is guaranteed by our calculation of minZoomRef.current in the initialization useEffect\n\n // Center the canvas in the viewport\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n } else {\n // When zoomed in beyond minZoom\n if (focusedQuadrant !== null && sections[focusedQuadrant]) {\n const section = sections[focusedQuadrant];\n const centerCol = (section.startCol + section.endCol) / 2;\n const centerRow = (section.startRow + section.endRow) / 2;\n\n // Adjust position to center the focused section\n positionX = actualWidth / 2 - centerCol * CELL_SIZE * safeZoomLevel;\n positionY = actualHeight / 2 - centerRow * CELL_SIZE * safeZoomLevel;\n } else {\n // Center the grid when zoomed in but no quadrant is focused\n positionX = (actualWidth - gridWidth) / 2;\n positionY = (actualHeight - gridHeight) / 2;\n }\n\n // Apply drag offset only when zoomed in beyond minZoom\n // Clamp the drag offsets to prevent scrolling past canvas edges\n const clampedOffsets = clampDragOffsets(dragOffsetX, dragOffsetY);\n positionX += clampedOffsets.x;\n positionY += clampedOffsets.y;\n }\n\n // Log dimensions and position when at minZoom for debugging\n if (Math.abs(safeZoomLevel - currentMinZoom) < 0.001) {\n console.log('Grid dimensions and position at MIN_ZOOM:', {\n actualWidth,\n actualHeight,\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n extendedWidth,\n extendedHeight,\n currentMinZoom,\n safeZoomLevel\n });\n\n // Calculate viewport and grid aspects\n const viewportAspect = actualWidth / actualHeight;\n const gridAspect = COLS * CELL_SIZE / (ROWS * CELL_SIZE);\n console.log('Viewport aspect:', viewportAspect, 'Grid aspect:', gridAspect);\n\n // Check which dimension matches exactly\n const widthMatch = Math.abs(gridWidth - actualWidth) < 1;\n const heightMatch = Math.abs(gridHeight - actualHeight) < 1;\n console.log('Width matches viewport exactly:', widthMatch);\n console.log('Height matches viewport exactly:', heightMatch);\n\n // With our new approach, either width or height should match exactly\n if (!widthMatch && !heightMatch) {\n console.log('Canvas dimensions:', gridWidth, 'x', gridHeight);\n console.log('Viewport dimensions:', actualWidth, 'x', actualHeight);\n console.log('SUCCESS: Canvas fits viewport exactly based on calculated minimum zoom!');\n } else {\n console.log('SUCCESS: Canvas fits viewport exactly in one dimension and is centered in the other!');\n }\n }\n return {\n gridWidth,\n gridHeight,\n positionX,\n positionY,\n extendedWidth,\n extendedHeight\n };\n }, [COLS, ROWS, CELL_SIZE, VIEWPORT_WIDTH, VIEWPORT_HEIGHT, zoomLevel, focusedQuadrant, sections, dragOffsetX, dragOffsetY, clampDragOffsets]);\n // Performance stats\n const [fps, setFps] = useState(0);\n const frameCountRef = useRef(0);\n const lastFpsUpdateRef = useRef(performance.now());\n\n // Update FPS counter\n useEffect(() => {\n const updateFps = () => {\n const now = performance.now();\n frameCountRef.current++;\n if (now - lastFpsUpdateRef.current >= 1000) {\n // Update every second\n setFps(Math.round(frameCountRef.current * 1000 / (now - lastFpsUpdateRef.current)));\n frameCountRef.current = 0;\n lastFpsUpdateRef.current = now;\n }\n requestAnimationFrame(updateFps);\n };\n const fpsId = requestAnimationFrame(updateFps);\n return () => cancelAnimationFrame(fpsId);\n }, []);\n\n // Get visible area stats for display\n const visibleArea = getVisibleArea();\n const visibleCellCount = (visibleArea.endRow - visibleArea.startRow) * (visibleArea.endCol - visibleArea.startCol);\n return

\n {/* Mode toggle buttons in a box on the left side */}\n

MODE SELECTION

\n \n \n

\n {/* Clickable overlay that covers the entire viewport */}\n

\n \n {/* Canvas container with no centering at minZoom */}\n

\n {/* Extended canvas container to prevent seeing void */}\n

\n \n {/* 8-way joystick for navigation */}\n {minZoomRef.current && zoomLevel > minZoomRef.current &&

e.stopPropagation()} onMouseDown={e => e.stopPropagation()} onTouchStart={e => e.stopPropagation()}>\n •\n

\n \n \n {/* Bottom row */}\n \n \n \n

}\n

\n \n {/* Side panel with controls and info */}\n

\n {/* Logo image */}\n

\n $\"PumpPaint$ \n

\n \n {/* Connected users indicator */}\n

Connected Pump Painters:

\n {connectedUsers}\n

Total Visitors:

\n {totalVisitors}\n

\n \n {/* Mode instructions */}\n

DRAW MODE: click to draw

ZOOM MODE: click to zoom

\n \n

ADDITIONAL CONTROLS:

scroll to zoom

use buttons to zoom

use joystick to navigate

\n \n {/* Zoom controls */}\n

\n \n \n \n

;\n}","thinking","The latest requirement is to \"take out the click counter\". Looking at the current code, I need to:\n\n1. Identify all parts related to the click counter\n2. Remove the click counter UI element\n3. Remove the click counter state and related socket events\n4. Remove any click counter related functionality\n\nLet me find all the parts related to the click counter:\n\n1. State:\n - `const [totalClicks, setTotalClicks] = useState(0);` - This state variable tracks the total clicks\n\n2. Socket events:\n - `socket.on('globalClickUpdate', totalClickCount => {...})` - Listens for global click updates\n - `socket.emit('userClick');` - Emits a click event when a user clicks\n - `socket.on('clickCountResponse', count => {...})` - Listens for click count responses\n - `socket.emit('requestClickCount');` - Requests the current click count\n\n3. StateClient operations:\n - Several operations related to storing and retrieving the click count from persistent storage\n\n4. UI:\n - The \"Total Clicks\" display in the side panel\n\nI need to remove all of these elements while keeping the rest of the functionality intact. I'll make sure to keep the visitor counter and connected users counter.","changelog","Removed the click counter from the interface and all related functionality! The app now focuses on connected users and total visitors only.","diff","isRephrased","isDebug","isSuccess","error","devbaseSchema","devbaseInsight","messageId",["B","83033"],[],"isDraft",[145],"💰","isLordOfDev","analytics",[149,153,155,157,159,161,163,165,167,169,171,173,175,177,179,180,181],{"_150":151,"_152":57},"day","2025-08-12","runCount",{"_150":154,"_152":57},"2025-08-13",{"_150":156,"_152":57},"2025-08-14",{"_150":158,"_152":57},"2025-08-15",{"_150":160,"_152":57},"2025-08-16",{"_150":162,"_152":57},"2025-08-17",{"_150":164,"_152":57},"2025-08-18",{"_150":166,"_152":57},"2025-08-19",{"_150":168,"_152":57},"2025-08-20",{"_150":170,"_152":57},"2025-08-21",{"_150":172,"_152":57},"2025-08-22",{"_150":174,"_152":57},"2025-08-23",{"_150":176,"_152":57},"2025-08-24",{"_150":178,"_152":57},"2025-08-25",{"_150":154,"_152":40},{"_150":162,"_152":40},{"_150":182,"_152":40},"2025-08-26","https://cdn.dev.fun/og/image/2e22d9a78acc8f8ce129/4293494f.webp","isDevbase","actionData","errors"]

say something