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

client/src/components/canvas.tsx

@@ -57,6 +57,21 @@ export function Canvas({
     setZoom(1);
   };
 
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    
+    const zoomFactor = 1.1;
+    const delta = e.deltaY;
+    
+    if (delta < 0) {
+      // Rein zoomen
+      setZoom(prev => Math.min(prev * zoomFactor, 3));
+    } else {
+      // Raus zoomen  
+      setZoom(prev => Math.max(prev / zoomFactor, 0.5));
+    }
+  };
+
   useEffect(() => {
     setPixelSize(Math.max(2, 8 * zoom));
   }, [zoom]);
@@ -71,11 +86,12 @@ export function Canvas({
     <div className="flex-1 relative bg-canvas-bg overflow-hidden">
       <div 
         ref={containerRef}
-        className="w-full h-full overflow-auto p-8"
+        className="w-full h-full overflow-auto p-8 scroll-smooth canvas-container"
+        onWheel={handleWheel}
         data-testid="canvas-container"
       >
         {/* Coordinate System Container */}
-        <div className="relative inline-block">
+        <div className="relative inline-block canvas-zoom">
           {/* Top X-axis coordinates */}
           <div className="flex ml-8 mb-1">
             {Array.from({ length: Math.ceil(canvasWidth / 10) }, (_, i) => (
@@ -124,7 +140,7 @@ export function Canvas({
                 <div
                   key={`${x}-${y}`}
                   className={cn(
-                    "pixel cursor-pointer transition-all duration-100 hover:scale-110 hover:z-10 absolute",
+                    "pixel cursor-pointer hover:scale-110 hover:z-10 absolute",
                     cooldownActive && "cursor-not-allowed"
                   )}
                   style={{