add Keycloak, add better canvas

client/src/components/auth-banner.tsx

@@ -0,0 +1,58 @@
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getAuthStatus, type AuthStatus } from "@/lib/config";
+
+export function AuthBanner() {
+  const [authStatus, setAuthStatus] = useState<AuthStatus | null>(null);
+
+  useEffect(() => {
+    getAuthStatus().then(setAuthStatus);
+  }, []);
+
+  if (!authStatus?.keycloakEnabled) {
+    return null;
+  }
+
+  if (authStatus.authenticated) {
+    return (
+      <div className="bg-green-50 border-b border-green-200 p-3">
+        <div className="flex items-center justify-between max-w-7xl mx-auto">
+          <div className="flex items-center gap-2">
+            <span className="text-green-700 font-medium">
+              Angemeldet als {authStatus.user?.username}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => window.location.href = "/logout"}
+            className="border-green-300 text-green-700 hover:bg-green-100"
+          >
+            Abmelden
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-blue-50 border-b border-blue-200 p-3">
+      <div className="flex items-center justify-between max-w-7xl mx-auto">
+        <div className="flex items-center gap-2">
+          <span className="text-blue-700">
+            Melde dich an, um Pixel zu platzieren
+          </span>
+        </div>
+        <Button
+          onClick={() => window.location.href = "/login"}
+          className="bg-blue-600 hover:bg-blue-700 text-white"
+          size="sm"
+        >
+          Anmelden
+        </Button>
+      </div>
+    </div>
+  );
+}

client/src/index.css

@@ -131,31 +131,49 @@
   100% { background-position: 20px 20px; }
 }
 
-/* Smooth scrolling für den gesamten Container */
-.scroll-smooth {
-  scroll-behavior: smooth;
-}
-
-/* Canvas zoom transitions */
-.canvas-zoom {
-  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Geschmeidiges Mausrad-Scrolling */
+/* Canvas container optimiert für glattes Zoomen */
 .canvas-container {
-  scroll-behavior: smooth;
+  scroll-behavior: auto; /* Für präzises Zoom-Verhalten */
 }
 
-/* Optimierte Pixel-Hover-Effekte */
-.pixel {
-  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, opacity 0.1s ease-out;
+.canvas-container:not(:hover) {
+  scroll-behavior: smooth; /* Smooth nur wenn nicht gehovered */
 }
 
-.pixel:hover {
-  transform: scale(1.1);
-  z-index: 10;
-  position: relative;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+/* Zoom Controls */
+.canvas-container * {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+/* Optimierte Performance für große Canvas */
+.canvas-container canvas {
+  will-change: transform;
+  backface-visibility: hidden;
+}
+
+/* Smooth transitions für UI Elemente */
+.zoom-controls {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+/* Pixel-perfekte Rendering */
+canvas {
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+/* Verbesserte Hover-Effekte */
+.canvas-container:hover {
+  cursor: crosshair;
+}
+
+/* Info Panel Styling */
+.info-panel {
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 /* Pixel-Vorschau */

client/src/lib/config.ts

@@ -29,7 +29,7 @@ export const COLORS = [
   "#ffb470", // Beige
   "#000000", // Black
   "#515252", // Dark Gray
-  "#898d90", // Gray
+  "#898989", // Gray
   "#d4d7d9", // Light Gray
   "#ffffff", // White
 ] as const;
@@ -39,7 +39,7 @@ export const DEFAULT_SELECTED_COLOR = "#be0039"; // Official r/place red
 export function generateUserId(): string {
   const stored = localStorage.getItem("r-place-user-id");
   if (stored) return stored;
-  
+
   const newId = `User#${Math.floor(Math.random() * 10000)}`;
   localStorage.setItem("r-place-user-id", newId);
   return newId;
@@ -48,3 +48,24 @@ export function generateUserId(): string {
 export function getUsername(): string {
   return generateUserId();
 }
+
+export const API_BASE = "/api";
+
+export interface AuthStatus {
+  authenticated: boolean;
+  keycloakEnabled: boolean;
+  user?: {
+    userId: string;
+    username: string;
+  };
+}
+
+export async function getAuthStatus(): Promise<AuthStatus> {
+  try {
+    const response = await fetch(`${API_BASE}/auth/status`);
+    return await response.json();
+  } catch (error) {
+    console.error("Failed to get auth status:", error);
+    return { authenticated: false, keycloakEnabled: false };
+  }
+}

client/src/pages/canvas.tsx

@@ -11,6 +11,7 @@ import { useToast } from "@/hooks/use-toast";
 import { DEFAULT_SELECTED_COLOR, generateUserId, getUsername } from "@/lib/config";
 import { Pixel, CanvasConfig, InsertPixel, WSMessage } from "@shared/schema";
 import { apiRequest } from "@/lib/queryClient";
+import { AuthBanner } from "@/components/auth-banner";
 
 export default function CanvasPage() {
   const [selectedColor, setSelectedColor] = useState(DEFAULT_SELECTED_COLOR);
@@ -41,15 +42,15 @@ export default function CanvasPage() {
         // Invalidate pixels cache to refetch
         queryClient.invalidateQueries({ queryKey: ['/api/pixels'] });
         queryClient.invalidateQueries({ queryKey: ['/api/recent'] });
-        
+
         //toast({
         //  title: "Pixel placed",
         //  description: `${message.data.username} placed a pixel at (${message.data.x}, ${message.data.y})`,
         //  });
         //break;
-      
 
-        
+
+
       case "cooldown_update":
         if (message.data.userId === userId) {
           setCooldownSeconds(message.data.remainingSeconds);
@@ -116,7 +117,7 @@ export default function CanvasPage() {
         console.error("Failed to fetch cooldown:", error);
       }
     };
-    
+
     if (userId) {
       fetchCooldown();
     }
@@ -124,7 +125,7 @@ export default function CanvasPage() {
 
   const handlePixelClick = (x: number, y: number) => {
     if (cooldownSeconds > 0) return;
-    
+
     placePixelMutation.mutate({
       x,
       y,
@@ -146,6 +147,7 @@ export default function CanvasPage() {
 
   return (
     <div className="h-screen flex flex-col bg-canvas-bg text-white">
+      <AuthBanner />
       {/* Header */}
       <header className="bg-panel-bg border-b border-gray-700 px-4 py-3 flex items-center justify-between">
         <div className="flex items-center space-x-4">
@@ -156,7 +158,7 @@ export default function CanvasPage() {
             <span>users online</span>
           </div>
         </div>
-        
+
         <div className="flex items-center space-x-3">
 
 
@@ -180,7 +182,7 @@ export default function CanvasPage() {
           onPixelClick={handlePixelClick}
           cooldownActive={cooldownSeconds > 0}
         />
-        
+
         <ColorPalette
           selectedColor={selectedColor}
           onColorSelect={setSelectedColor}
@@ -190,4 +192,4 @@ export default function CanvasPage() {
       </div>
     </div>
   );
-}
+}