Improve canvas zooming and scrolling with mouse wheel for smoother interaction

Implement mouse wheel zooming and smooth scrolling for the canvas component, enhance WebSocket connection management with automatic reconnection and keep-alive pings, and refine CSS for pixel hover effects.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0385ea33-cde8-4bbd-8fce-8d192d30eb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/870d08ce-da3b-4822-9874-c2fe2b7628b1/0385ea33-cde8-4bbd-8fce-8d192d30eb41/PVrRiEe

server/routes.ts

@@ -128,20 +128,42 @@ export async function registerRoutes(app: Express): Promise<Server> {
     });
   }
 
-  wss.on('connection', (ws) => {
+  wss.on('connection', (ws, req) => {
+    console.log(`New WebSocket connection from ${req.socket.remoteAddress}`);
     connectedUsers.add(ws);
     broadcastUserCount();
 
-    ws.on('close', () => {
+    // Send current user count immediately
+    ws.send(JSON.stringify({
+      type: "user_count",
+      data: { count: connectedUsers.size },
+    }));
+
+    ws.on('close', (code, reason) => {
+      console.log(`WebSocket disconnected: ${code} ${reason}`);
       connectedUsers.delete(ws);
       broadcastUserCount();
     });
 
-    ws.on('error', () => {
+    ws.on('error', (error) => {
+      console.error('WebSocket error:', error);
       connectedUsers.delete(ws);
       broadcastUserCount();
     });
+
+    ws.on('pong', () => {
+      // Keep connection alive
+    });
   });
 
+  // Keep connections alive with ping/pong
+  const pingInterval = setInterval(() => {
+    connectedUsers.forEach(ws => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.ping();
+      }
+    });
+  }, 30000);
+
   return httpServer;
 }