Add a visual preview of the next pixel placement

Implement a pixel preview feature on hover, showing the selected color before committing the pixel placement.

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/ZegP3fv

client/src/components/canvas.tsx

@@ -25,6 +25,7 @@ export function Canvas({
   const [zoom, setZoom] = useState(1);
   const [pixelSize, setPixelSize] = useState(8);
   const [mouseCoords, setMouseCoords] = useState<{x: number, y: number} | null>(null);
+  const [previewPixel, setPreviewPixel] = useState<{x: number, y: number} | null>(null);
 
   // Create pixel map for O(1) lookup
   const pixelMap = new Map<string, string>();
@@ -39,10 +40,14 @@ export function Canvas({
 
   const handlePixelMouseEnter = (x: number, y: number) => {
     setMouseCoords({ x, y });
+    if (!cooldownActive) {
+      setPreviewPixel({ x, y });
+    }
   };
 
   const handlePixelMouseLeave = () => {
     setMouseCoords(null);
+    setPreviewPixel(null);
   };
 
   const handleZoomIn = () => {
@@ -136,19 +141,24 @@ export function Canvas({
           {Array.from({ length: canvasHeight }, (_, y) =>
             Array.from({ length: canvasWidth }, (_, x) => {
               const pixelColor = pixelMap.get(`${x},${y}`) || "#FFFFFF";
+              const isPreview = previewPixel && previewPixel.x === x && previewPixel.y === y;
+              const previewColor = isPreview && !cooldownActive ? selectedColor : pixelColor;
+              
               return (
                 <div
                   key={`${x}-${y}`}
                   className={cn(
                     "pixel cursor-pointer hover:scale-110 hover:z-10 absolute",
-                    cooldownActive && "cursor-not-allowed"
+                    cooldownActive && "cursor-not-allowed",
+                    isPreview && !cooldownActive && "pixel-preview"
                   )}
                   style={{ 
-                    backgroundColor: pixelColor,
+                    backgroundColor: previewColor,
                     width: `${pixelSize}px`,
                     height: `${pixelSize}px`,
                     left: `${x * pixelSize}px`,
-                    top: `${y * pixelSize}px`
+                    top: `${y * pixelSize}px`,
+                    opacity: isPreview && !cooldownActive ? 0.7 : 1
                   }}
                   onClick={() => handlePixelClick(x, y)}
                   onMouseEnter={() => handlePixelMouseEnter(x, y)}
@@ -178,6 +188,11 @@ export function Canvas({
             Mouse: ({mouseCoords.x}, {mouseCoords.y})
           </div>
         )}
+        {previewPixel && !cooldownActive && (
+          <div className="text-xs text-blue-400 mt-1">
+            Vorschau: {selectedColor}
+          </div>
+        )}
       </div>
 
       {/* Zoom Controls */}