[{"_1":2,"_133":-5,"_134":-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":17,"_25":26,"_27":28,"_30":31,"_32":-5,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_5":43,"_54":55,"_56":40,"_57":58,"_59":60,"_61":58,"_62":58,"_63":58,"_64":58,"_65":58,"_66":58,"_67":26,"_68":17,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_95":-5,"_96":17,"_97":98,"_129":31,"_130":131,"_132":17},"id","c18cd630ab10971c4890","isMyApp",false,"name","depthdigger","description","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.","brief","","isLive","isPublic",true,"tags",[29],"💰","cover","https://cdn.dev.fun/snapshot/c18cd630ab10971c4890/23693_636124fe.webp","cdnUrl","createdAt",["D",1740907208018],"updatedAt",["D",1741111547436],"lastCommitId",["B","23693"],"tier",1,"credits",18,{"_14":44,"_45":46,"_47":-5,"_48":46,"_49":50,"_51":-5,"_52":53},"eda55de0-9e54-4a4d-82d8-d3f7818f0472","uniqueId","EjA21SPNZGRve9bgePBgrPQh7GUgjxcLzhjaAK6y7WJX","username","solanaWallet","displayName","EjA...WJX","bio","avatar","/avatar.svg","commitCount",164,"forkCount","likeCount",0,"runsCount",37,"downvoteCount","upvoteCount","upvoteRate","commentCount","reportCount","visitorCount","isArchived","isRenamed","contractAddress","CniPCE4b3s8gSUPhUiyMjXnytrEqUrMfSsnbBjLCpump","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-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()} 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":93,"_94":93,"_69":70},"PWEASE","symbol","pwease","price",0.003952,"marketcap",3952527,"image","https://pump.mypinata.cloud/ipfs/QmboNoCSu87DLgnqqf3LVWCUF2zZtzpSE5LtAa3tx8hUUG?img-width=256&img-dpr=2","website","https://pweasetoken.com/","twitter","https://x.com/TheMisterFrog/status/1895669466786402519","devCount",5,"appCount","upstreamApp","isLordOfDev","analytics",[99,103,105,107,109,111,113,115,117,119,121,123,125,127],{"_100":101,"_102":58},"day","2025-08-13","runCount",{"_100":104,"_102":58},"2025-08-14",{"_100":106,"_102":58},"2025-08-15",{"_100":108,"_102":58},"2025-08-16",{"_100":110,"_102":58},"2025-08-17",{"_100":112,"_102":58},"2025-08-18",{"_100":114,"_102":58},"2025-08-19",{"_100":116,"_102":58},"2025-08-20",{"_100":118,"_102":58},"2025-08-21",{"_100":120,"_102":58},"2025-08-22",{"_100":122,"_102":58},"2025-08-23",{"_100":124,"_102":58},"2025-08-24",{"_100":126,"_102":58},"2025-08-25",{"_100":128,"_102":58},"2025-08-26","snapshot","ogImage","https://cdn.dev.fun/og/image/c18cd630ab10971c4890/420ae257.webp","isDevbase","actionData","errors"]

say something