add pics

static/js/render.js

@@ -44,46 +44,53 @@ resize();
 // --- DRAWING ---
 
 function drawGame() {
-    // Alles löschen
     ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
 
-    // Background
+    // --- BACKGROUND ---
+    // Hier war der Check schon drin, das ist gut
     if (bgSprite.complete && bgSprite.naturalHeight !== 0) {
-        // Hintergrundbild exakt auf 800x400 skalieren
         ctx.drawImage(bgSprite, 0, 0, GAME_WIDTH, GAME_HEIGHT);
     } else {
-        // Fallback Farbe
         ctx.fillStyle = "#f0f0f0";
         ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
     }
 
-    // Boden
     ctx.fillStyle = "rgba(60, 60, 60, 0.8)";
     ctx.fillRect(0, GROUND_Y, GAME_WIDTH, 50);
 
-    // Hindernisse
+    // --- HINDERNISSE (HIER WAR DER FEHLER) ---
     obstacles.forEach(obs => {
         const img = sprites[obs.def.id];
-        if (img) {
+
+        // FIX: Wir prüfen jetzt strikt, ob das Bild wirklich bereit ist
+        if (img && img.complete && img.naturalHeight !== 0) {
             ctx.drawImage(img, obs.x, obs.y, obs.def.width, obs.def.height);
         } else {
-            ctx.fillStyle = obs.def.color;
+            // Fallback: Wenn Bild fehlt/kaputt -> Farbiges Rechteck
+            // Wir prüfen auf Typ Coin, damit Coins gold sind, auch wenn Bild fehlt
+            if (obs.def.type === "coin") ctx.fillStyle = "gold";
+            else ctx.fillStyle = obs.def.color;
+
             ctx.fillRect(obs.x, obs.y, obs.def.width, obs.def.height);
         }
+
         if(obs.speech) drawSpeechBubble(obs.x, obs.y, obs.speech);
     });
-
-    // Debug Rahmen (Server Hitboxen)
+    
+    /*
+    // --- DEBUG ---
     ctx.strokeStyle = isGameOver ? "red" : "lime";
     ctx.lineWidth = 2;
     serverObstacles.forEach(srvObs => {
         ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h);
     });
+     */
 
-    // Spieler
+    // --- PLAYER ---
     const drawY = isCrouching ? player.y + 25 : player.y;
     const drawH = isCrouching ? 25 : 50;
 
+    // Hier war der Check auch schon korrekt
     if (playerSprite.complete && playerSprite.naturalHeight !== 0) {
         ctx.drawImage(playerSprite, player.x, drawY, player.w, drawH);
     } else {
@@ -91,13 +98,31 @@ function drawGame() {
         ctx.fillRect(player.x, drawY, player.w, drawH);
     }
 
-    // Game Over Overlay (Dunkelheit)
+    // --- POWERUP UI (Oben Links) ---
+    if (isGameRunning && !isGameOver) {
+        ctx.fillStyle = "black";
+        ctx.font = "bold 10px monospace";
+        ctx.textAlign = "left";
+        let statusText = "";
+        if(godModeLives > 0) statusText += `🛡️ x${godModeLives} `;
+        if(hasBat) statusText += `⚾ BAT `;
+        if(bootTicks > 0) statusText += `👟 ${(bootTicks/60).toFixed(1)}s`;
+
+        // Drift Anzeige
+        if (obstacles.length > 0 && serverObstacles.length > 0) {
+            const drift = Math.abs(obstacles[0].x - serverObstacles[0].x).toFixed(1);
+            statusText += ` | Drift: ${drift}px`;
+        }
+        ctx.fillText(statusText, 10, 40);
+    }
+
     if (isGameOver) {
         ctx.fillStyle = "rgba(0,0,0,0.7)";
         ctx.fillRect(0,0,GAME_WIDTH, GAME_HEIGHT);
     }
 }
 
+// Sprechblasen Helper
 function drawSpeechBubble(x, y, text) {
     const bX = x-20; const bY = y-40; const bW = 120; const bH = 30;
     ctx.fillStyle="white"; ctx.fillRect(bX,bY,bW,bH);