\n {children}\n

{children}

\n {children}\n

\n {}\n

\n \n \n \n PIXEL BATTLE\n \n \n\n

\n \n \n \n \n Game Info\n \n\n \n \n \n \n Toggle Minimap\n \n\n \n \n \n \n Leaderboard\n \n

\n\n \n \n {appData.syncStatus === 'connected' ? 'ONLINE' : 'OFFLINE'}\n \n

\n\n

\n {appData.activePlayers > 0 && \n \n {appData.activePlayers} players\n }\n \n

\n\n

\n {}\n

\n {}\n \n \n \n \n Color Palette\n \n \n \n {}\n

\n {COLOR_PALETTE.flatMap(cat => cat.colors).find(c => c.hex === gameState.selectedColor)?.name || 'Custom'}\n

{gameState.selectedColor}

\n\n {}\n

\n \n \n {getSelectedCategory().name}\n \n \n

\n\n {}\n

\n {getSelectedCategory().colors.map(colorObj => \n \n setGameState(prev => ({\n ...prev,\n selectedColor: colorObj.hex\n }))} className={cn(\"aspect-square rounded-md border-2 transition-all\", gameState.selectedColor === colorObj.hex ? \"border-emerald-400 shadow-lg shadow-emerald-400/25\" : \"border-slate-600 hover:border-slate-500\")} style={{\n backgroundColor: colorObj.hex\n }} />\n \n \n {colorObj.name} ({colorObj.hex})\n \n )}\n

\n\n {}\n

\n {COLOR_PALETTE.map((category, idx) => \n \n setUIState(prev => ({\n ...prev,\n selectedColorCategory: idx\n }))} className={cn(\"w-5 h-5 rounded border transition-all\", uiState.selectedColorCategory === idx ? \"border-emerald-400 shadow-sm shadow-emerald-400/50\" : \"border-slate-600\")} style={{\n backgroundColor: category.colors[1]?.hex || category.colors[0].hex\n }} />\n \n {category.name}\n )}\n

\n \n \n\n {}\n \n \n \n \n Cooldown\n \n \n \n 0 ? [1, 1.02, 1] : 1,\n borderColor: gameState.cooldown > 0 ? [\"rgb(34 197 94)\", \"rgb(251 191 36)\", \"rgb(34 197 94)\"] : \"rgb(34 197 94)\"\n }} transition={{\n duration: 1,\n repeat: gameState.cooldown > 0 ? Infinity : 0\n }} className=\"p-4 rounded-lg border bg-slate-800/50 text-center\">\n

0 ? \"text-amber-400\" : \"text-emerald-400\")}>\n {gameState.cooldown > 0 ? formatTime(gameState.cooldown) : \"READY!\"}\n

\n \n \n \n

\n\n {}\n

\n {}\n

\n \n \n \n

\n\n {}\n

\n \n PIXEL-GRID.EXE [{GRID_SIZE}×{GRID_SIZE}]\n \n \n ZOOM: {Math.round(camera.zoomLevel * 100)}%\n \n

\n\n {}\n {!gameState.mapDataLoaded ?

\n \n

\n Loading {GRID_SIZE}×{GRID_SIZE} battlefield...\n

\n\n {}\n \n {appData.notification && \n \n \n {appData.notification.message}\n \n \n }\n \n\n {}\n \n {!connected && \n \n \n Connect your Solana wallet to place pixels on the grid\n \n \n }\n \n\n {}\n \n\n {}\n \n

\n \n

\n \n \n

\n \n \n \n \n \n

\n \n \n PIXEL·WARS\n \n {isAdmin && setShowAdminPanel(!showAdminPanel)}>\n \n }\n setShowInfo(!showInfo)}>\n \n \n setShowMinimap(!showMinimap)}>\n \n \n setShowEffects(!showEffects)}>\n {showEffects ? : }\n \n setShowGridLines(!showGridLines)}>\n \n \n setShowLeaderboard(!showLeaderboard)}>\n \n \n

\n \n \n {syncStatus === 'connected' ? 'SYNCED' : 'OFFLINE'}\n \n

\n {userProfile && connected && \n \n \n {userProfile.pixelsPlaced > 0 ? `${userProfile.pixelsPlaced} PIXEL${userProfile.pixelsPlaced !== 1 ? 'S' : ''}` : 'NEW PLAYER'}\n \n }\n \n

\n {}\n \n {showLeaderboard && setShowLeaderboard(false)}>\n e.stopPropagation()}>\n

\n \n PIXEL WARS LEADERBOARD\n

\n setShowLeaderboard(false)}>\n ×\n \n

\n {}\n

\n \n PIXEL MASTERS\n

\n {}\n

PLAYER

PIXELS

\n {}\n

\n {getTopPlayers.length > 0 ? getTopPlayers.map((player, index) => \n

\n {index === 0 ? : index === 1 ? : index === 2 ? : {index + 1}}\n

\n \n {player.username || (player.id ? `${player.id.slice(0, 6)}...${player.id.slice(-4)}` : 'Unknown Player')}\n \n

\n {player.pixelsPlaced || 0}\n

\n ) : loading ?

\n \n

Loading leaderboard data...

\n No players found. Be the first to place pixels!\n

}\n

\n {}\n {userProfile &&

\n YOUR RANKING\n

\n {getUserRank}\n

\n \n {userProfile.username || (userProfile.id ? `${userProfile.id.slice(0, 6)}...${userProfile.id.slice(-4)}` : 'Unknown Player')} (YOU)\n \n

\n {userProfile.pixelsPlaced || 0}\n

}\n

\n Leaderboard updates in real-time as players place pixels\n

\n \n }\n \n

\n \n COLOR PALETTE\n

\n {}\n

\n {COLOR_PALETTE.flatMap(cat => cat.colors).find(c => c.hex === selectedColor)?.name || 'Custom'}\n

\n {selectedColor}\n

\n {}\n

\n setSelectedColorCategory(prev => Math.max(0, prev - 1))}>\n ◀\n \n

\n {getSelectedCategory().name.toUpperCase()}\n

\n setSelectedColorCategory(prev => Math.min(COLOR_PALETTE.length - 1, prev + 1))}>\n ▶\n \n

\n {}\n

\n {getSelectedCategory().colors.map(colorObj =>

\n setSelectedColor(colorObj.hex)} onMouseEnter={e => handleColorHover(e, colorObj)} onMouseLeave={handleColorLeave} />\n

\n {colorObj.name}\n

)}\n

\n {}\n

\n {COLOR_PALETTE.map((category, idx) => setSelectedColorCategory(idx)} title={category.name} />)}\n

\n {colorTooltip &&

\n {colorTooltip.color.name} ({colorTooltip.color.hex})\n

}\n

\n \n COOLDOWN\n

\n 0 ? [0.9, 1, 0.9] : 1,\n borderColor: cooldown > 0 ? [THEME.border.primary, THEME.accent.primary, THEME.border.primary] : THEME.border.primary\n }} transition={{\n duration: cooldown > 0 ? 2 : 0,\n repeat: cooldown > 0 ? Infinity : 0,\n ease: \"linear\"\n }} className=\"p-3 flex items-center gap-2\" style={{\n backgroundColor: THEME.bg.secondary,\n border: `1px solid ${THEME.border.primary}`\n }}>\n 0 ? '#ff9900' : THEME.accent.primary\n }} />\n

0 ? '#ff9900' : THEME.accent.highlight\n }}>\n {cooldown > 0 ? formatTime(cooldown) : \"READY!\"}\n

\n \n

\n {}\n {}\n {}\n

\n \n {}\n

\n handleZoom(1)}>\n \n \n handleZoom(-1)}>\n \n \n

\n {\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n const gridWidthPixels = GRID_SIZE * PIXEL_SIZE;\n const gridHeightPixels = GRID_SIZE * PIXEL_SIZE;\n const widthRatio = viewportWidth * 0.85 / gridWidthPixels;\n const heightRatio = viewportHeight * 0.85 / gridHeightPixels;\n const newZoom = Math.max(MIN_ZOOM, Math.min(widthRatio, heightRatio) * 0.6);\n setZoomLevel(newZoom);\n const canvas = canvasRef.current;\n if (!canvas) return;\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n const gridWidth = GRID_SIZE * PIXEL_SIZE * newZoom;\n const gridHeight = GRID_SIZE * PIXEL_SIZE * newZoom;\n const centerX = (canvasWidth - gridWidth) / 2;\n const centerY = (canvasHeight - gridHeight) / 2;\n setPanPosition({\n x: centerX,\n y: centerY\n });\n setNotification({\n message: \"Full map view\",\n color: THEME.accent.primary\n });\n setTimeout(() => setNotification(null), 1500);\n }}>\n \n \n {}\n {}\n

\n PIXEL-GRID.EXE [{GRID_SIZE}x{GRID_SIZE}]\n \n ZOOM: {Math.round(zoomLevel * 100)}%\n \n

\n {!mapDataLoaded ?

\n \n

\n Loading 1000×1000 map data from server...\n

\n (This may take longer due to the expanded battlefield size)\n

\n {}\n setShowSelectedPanel(!showSelectedPanel)}>\n {showSelectedPanel ? <>\n \n HIDE INFO\n : <>\n \n SHOW INFO\n }\n \n {selectedPosition && showSelectedPanel && (() => {\n const canvas = canvasRef.current;\n if (!canvas) return null;\n const posStyle = {\n right: 20,\n bottom: 20,\n transformOrigin: 'bottom right'\n };\n return \n

\n \n SELECTED POSITION\n

\n X-POS\n {selectedPosition.x}\n

\n Y-POS\n {selectedPosition.y}\n

\n {(() => {\n const pixelData = grid[selectedPosition.y]?.[selectedPosition.x];\n if (pixelData && typeof pixelData === 'object' && pixelData.wallet) {\n return `OWNER: ${pixelData.wallet.slice(0, 4)}...${pixelData.wallet.slice(-3)}`;\n }\n return 'STATUS: UNCLAIMED';\n })()}\n

\n placePixel(selectedPosition.x, selectedPosition.y)}>\n DEPLOY PIXEL\n \n setSelectedPosition(null)}>\n CLOSE\n \n ;\n })()}\n {showMinimap && \n

\n MAP.SYS\n \n 1000×1000\n \n

}\n \n {showInfo && setShowInfo(false)}>\n e.stopPropagation()}>\n

\n \n PIXELWARS COMMAND CENTER\n

\n setShowInfo(false)}>\n ×\n \n

\n {}\n

\n \n MISSION BRIEFING\n

\n Welcome to PIXEL WARS, commander! This is a massive 1000×1000 pixel battlefield where every pixel matters.\n

\n Connect your Solana wallet to stake your claim in this digital turf war. Place colored pixels strategically to create art, claim territory, and rise through the ranks.\n

\n Every pixel you place is recorded on-chain, making your mark permanent. Defend your territory, form alliances, and dominate the leaderboard!\n

\n {}\n

\n \n BATTLEFIELD CONTROLS\n

NAVIGATION

\n \n \n MOUSE WHEEL: Zoom in/out\n \n

\n \n \n CLICK+DRAG: Pan around map\n \n

\n \n \n SHIFT+DRAG: Alternative panning\n \n

\n \n \n MINIMAP CLICK: Jump to location\n \n

PIXEL PLACEMENT

\n \n \n CLICK: Select position\n \n

\n \n \n CLICK AGAIN: Place pixel\n \n

\n \n \n COOLDOWN: 1 second between pixels\n \n

INTERFACE CONTROLS

\n \n \n INFO: Show this guide\n \n

\n \n \n MAP: Toggle minimap\n \n

\n \n \n FLAG: Show territories\n \n

\n \n \n EYE: Toggle visual effects\n \n

\n \n \n GRID: Toggle grid lines\n \n

\n \n \n TROPHY: View leaderboard\n \n

\n \n \n \n +/-: Zoom controls\n \n

\n \n \n MAXIMIZE: Full map view\n \n

\n {}\n

\n \n TACTICAL ADVANTAGES\n

\n
→
\n
Place pixels strategically to claim and defend territory
\n
\n
→
\n
Use the minimap to quickly navigate to different areas
\n
\n
→
\n
Toggle territory view to see your claimed pixels highlighted
\n
\n
→
\n
Check the leaderboard regularly to see your ranking
\n
\n
→
\n
The more pixels you place, the higher your rank will climb
\n

\n setShowInfo(false)}>\n C:\\\\> DEPLOY TO BATTLEFIELD\n \n \n }\n \n \n {!connected && \n

\n ! CONNECTION REQUIRED !\n

\n You must connect your Solana wallet to place pixels on the grid\n

\n \n

\n }\n {}\n {notification && \n

\n {notification.message}\n }\n \n {}\n \n {showAdminPanel && isAdmin && \n e.stopPropagation()}>\n {}\n

\n \n PIXELWARS ADMIN CONTROL CENTER\n \n ADMIN: {publicKey && `${publicKey.toString().slice(0, 6)}...${publicKey.toString().slice(-4)}`}\n \n

\n setShowAdminPanel(false)}>\n ×\n \n

\n {}\n

\n \n CONTROLS\n

\n {\n setNotification({\n message: \"Reconnecting to server...\",\n color: THEME.accent.primary\n });\n socket.disconnect();\n setTimeout(() => {\n socket.connect();\n setNotification({\n message: \"Reconnected to server\",\n color: THEME.accent.highlight\n });\n setTimeout(() => setNotification(null), 2000);\n }, 1000);\n }}>\n \n RECONNECT SOCKET\n \n {\n setNotification({\n message: \"Requesting full canvas update...\",\n color: THEME.accent.primary\n });\n socket.emit('request_canvas_state');\n setTimeout(() => {\n setNotification({\n message: \"Canvas update requested\",\n color: THEME.accent.highlight\n });\n setTimeout(() => setNotification(null), 2000);\n }, 500);\n }}>\n \n REFRESH CANVAS\n \n {\n setNotification({\n message: \"Syncing leaderboard...\",\n color: THEME.accent.primary\n });\n syncLeaderboard();\n setTimeout(() => {\n setNotification({\n message: \"Leaderboard synced\",\n color: THEME.accent.highlight\n });\n setTimeout(() => setNotification(null), 2000);\n }, 500);\n }}>\n \n SYNC LEADERBOARD\n \n {\n if (Object.keys(changedPixelsRef.current).length > 0) {\n const count = Object.keys(changedPixelsRef.current).length;\n setNotification({\n message: `Sending ${count} differential updates...`,\n color: THEME.accent.primary\n });\n sendDifferentialUpdates();\n setTimeout(() => {\n setNotification({\n message: \"Differential updates sent\",\n color: THEME.accent.highlight\n });\n setTimeout(() => setNotification(null), 2000);\n }, 500);\n } else {\n setNotification({\n message: \"No pending updates to send\",\n color: \"#FF9500\"\n });\n setTimeout(() => setNotification(null), 2000);\n }\n }}>\n \n FORCE SYNC\n \n

\n \n DATA MANAGEMENT\n

\n {\n setAdminSelectedEntity('profiles');\n setAdminLoading(true);\n stateClient.getEntities('profiles').then(data => {\n setAdminEntityData(data || []);\n setAdminLoading(false);\n }).catch(err => {\n console.error(\"Error fetching profiles:\", err);\n setAdminEntityData([]);\n setAdminLoading(false);\n });\n }}>\n PROFILES\n \n {\n setAdminSelectedEntity('pixels');\n setAdminLoading(true);\n setNotification({\n message: \"Loading pixels (this may take a moment)...\",\n color: THEME.accent.primary\n });\n stateClient.getEntities('pixels', {}, {\n limit: 100\n }).then(data => {\n setAdminEntityData(data || []);\n setAdminLoading(false);\n setNotification({\n message: `Loaded ${data?.length || 0} recent pixels (limited to 100)`,\n color: THEME.accent.highlight\n });\n setTimeout(() => setNotification(null), 2000);\n }).catch(err => {\n console.error(\"Error fetching pixels:\", err);\n setAdminEntityData([]);\n setAdminLoading(false);\n setNotification({\n message: \"Error loading pixels\",\n color: \"#FF3B30\"\n });\n setTimeout(() => setNotification(null), 2000);\n });\n }}>\n PIXELS\n \n {\n setAdminSelectedEntity('canvas');\n setAdminLoading(true);\n stateClient.getEntities('canvas').then(data => {\n setAdminEntityData(data || []);\n setAdminLoading(false);\n }).catch(err => {\n console.error(\"Error fetching canvas:\", err);\n setAdminEntityData([]);\n setAdminLoading(false);\n });\n }}>\n CANVAS\n \n

\n \n SYSTEM STATUS\n

\n CONNECTION:\n

\n \n {syncStatus === 'connected' ? 'ONLINE' : 'OFFLINE'}\n

\n SYNC STATUS:\n

\n {mapSyncing ? : }\n {mapSyncing ? 'SYNCING...' : 'SYNCED'}\n

\n PENDING UPDATES:\n

0 ? '#FF9500' : THEME.accent.highlight,\n display: 'flex',\n alignItems: 'center',\n gap: '4px'\n }}>\n {Object.keys(changedPixelsRef.current).length > 0 ? : }\n {Object.keys(changedPixelsRef.current).length > 0 ? `${Object.keys(changedPixelsRef.current).length} PENDING` : 'NONE PENDING'}\n

\n ACTIVE PLAYERS:\n

0 ? THEME.accent.highlight : THEME.text.primary,\n display: 'flex',\n alignItems: 'center',\n gap: '4px'\n }}>\n \n {activePlayers > 0 ? activePlayers : 'NONE ONLINE'}\n

\n {}\n

\n \n {adminSelectedEntity.toUpperCase()} DATABASE\n {adminLoading && }\n {!adminLoading && \n ({adminEntityData.length} records)\n }\n

\n {}\n {adminEditItem &&

\n \n EDITING {adminSelectedEntity.toUpperCase()} RECORD\n

\n setAdminEditItem(null)}>\n ×\n \n

\n                                {JSON.stringify(adminEditItem, null, 2)}\n

\n {\n if (confirm(`Are you sure you want to delete this ${adminSelectedEntity.slice(0, -1)}?`)) {\n setAdminLoading(true);\n stateClient.deleteEntity(adminSelectedEntity, adminEditItem.id).then(() => {\n setNotification({\n message: `${adminSelectedEntity.slice(0, -1)} deleted successfully`,\n color: THEME.accent.highlight\n });\n setAdminEditItem(null);\n return stateClient.getEntities(adminSelectedEntity, {}, adminSelectedEntity === 'pixels' ? {\n limit: 100\n } : undefined);\n }).then(data => {\n setAdminEntityData(data || []);\n setAdminLoading(false);\n setTimeout(() => setNotification(null), 2000);\n }).catch(err => {\n console.error(`Error deleting ${adminSelectedEntity}:`, err);\n setNotification({\n message: `Error deleting ${adminSelectedEntity.slice(0, -1)}`,\n color: \"#FF3B30\"\n });\n setAdminLoading(false);\n setTimeout(() => setNotification(null), 2000);\n });\n }\n }}>\n \n DELETE\n \n {\n setAdminLoading(true);\n stateClient.updateEntity(adminSelectedEntity, adminEditItem.id, adminEditItem).then(() => {\n setNotification({\n message: `${adminSelectedEntity.slice(0, -1)} updated successfully`,\n color: THEME.accent.highlight\n });\n setAdminEditItem(null);\n return stateClient.getEntities(adminSelectedEntity, {}, adminSelectedEntity === 'pixels' ? {\n limit: 100\n } : undefined);\n }).then(data => {\n setAdminEntityData(data || []);\n setAdminLoading(false);\n setTimeout(() => setNotification(null), 2000);\n }).catch(err => {\n console.error(`Error updating ${adminSelectedEntity}:`, err);\n setNotification({\n message: `Error updating ${adminSelectedEntity.slice(0, -1)}`,\n color: \"#FF3B30\"\n });\n setAdminLoading(false);\n setTimeout(() => setNotification(null), 2000);\n });\n }}>\n \n SAVE CHANGES\n \n

}\n {}\n {adminLoading ?

\n \n

\n LOADING DATA...\n

: adminEntityData.length === 0 ?

\n \n

\n NO RECORDS FOUND\n

\n {adminSelectedEntity === 'profiles' &&

\n \n \n \n \n \n \n \n \n \n \n \n {adminEntityData.map((profile, index) => \n \n \n \n \n \n )}\n \n

ID (Wallet)	Username	Pixels	Last Active	Actions
\n \n \n {`${profile.id.slice(0, 6)}...${profile.id.slice(-4)}`}\n \n {\n navigator.clipboard.writeText(profile.id);\n setNotification({\n message: \"Wallet address copied to clipboard\",\n color: THEME.accent.primary\n });\n setTimeout(() => setNotification(null), 2000);\n }}>\n \n \n \n \n {profile.id}\n \n	\n {profile.username \|\| \"N/A\"}\n	\n {profile.pixelsPlaced \|\| 0}\n	\n {profile.lastActive ? new Date(profile.lastActive).toLocaleString() : \"N/A\"}\n	\n setAdminEditItem({\n ...profile\n })}>\n \n EDIT\n \n

}\n {adminSelectedEntity === 'pixels' &&

\n \n \n \n \n \n \n \n \n \n \n \n \n {adminEntityData.map((pixel, index) => \n \n \n \n \n \n \n )}\n \n

ID	Position	Color	Owner	Timestamp	Actions
\n {pixel.id}\n	\n X: {pixel.x}, Y: {pixel.y}\n	\n \n \n \n {pixel.color}\n \n \n	\n \n \n {pixel.wallet ? `${pixel.wallet.slice(0, 6)}...${pixel.wallet.slice(-4)}` : \"N/A\"}\n \n {pixel.wallet && {\n navigator.clipboard.writeText(pixel.wallet);\n setNotification({\n message: \"Wallet address copied to clipboard\",\n color: THEME.accent.primary\n });\n setTimeout(() => setNotification(null), 2000);\n }}>\n \n }\n \n	\n {pixel.timestamp ? new Date(pixel.timestamp).toLocaleString() : \"N/A\"}\n	\n setAdminEditItem({\n ...pixel\n })}>\n \n EDIT\n \n

}\n {adminSelectedEntity === 'canvas' &&

\n {adminEntityData.map((canvas, index) =>

\n Canvas ID: {canvas.id}\n

\n Last Updated: {canvas.lastUpdated ? new Date(canvas.lastUpdated).toLocaleString() : \"N/A\"}\n

\n {\n const dataSize = JSON.stringify(canvas.data).length;\n const compressedSize = (dataSize / 1024).toFixed(2);\n setNotification({\n message: `Canvas data size: ${compressedSize} KB, Pixel count: ${Object.keys(canvas.data || {}).length}`,\n color: THEME.accent.primary\n });\n setTimeout(() => setNotification(null), 4000);\n }}>\n \n VIEW DATA SIZE\n \n setAdminEditItem({\n ...canvas\n })}>\n \n EDIT CANVAS\n \n

)}\n

}\n

\n \n }\n \n

\n \n

\n {children}\n

\n {children}\n

Navigation

Pixel Placement

\n \n PIXEL WARS LEADERBOARD\n

\n \n COLOR PALETTE\n

\n \n COOLDOWN\n

\n \n PIXELWARS COMMAND CENTER\n

\n \n MISSION BRIEFING\n

\n \n BATTLEFIELD CONTROLS\n

NAVIGATION

PIXEL PLACEMENT

INTERFACE CONTROLS

\n \n TACTICAL ADVANTAGES\n

\n \n PIXELWARS ADMIN CONTROL CENTER\n \n ADMIN: {publicKey && `${publicKey.toString().slice(0, 6)}...${publicKey.toString().slice(-4)}`}\n \n

\n \n CONTROLS\n

\n \n DATA MANAGEMENT\n

\n \n SYSTEM STATUS\n

\n \n {adminSelectedEntity.toUpperCase()} DATABASE\n {adminLoading && }\n {!adminLoading && \n ({adminEntityData.length} records)\n }\n

\n \n EDITING {adminSelectedEntity.toUpperCase()} RECORD\n

say something