add music, better sync, particles

static/js/render.js

@@ -1,113 +1,177 @@
+// ==========================================
+// RESIZE LOGIK (LETTERBOXING)
+// ==========================================
 function resize() {
-    // 1. INTERNE SPIEL-AUFLÖSUNG ERZWINGEN
-    // Das behebt den "Zoom/Nur Ecke sichtbar" Fehler
+    // 1. Interne Auflösung fixieren
     canvas.width = GAME_WIDTH;  // 800
     canvas.height = GAME_HEIGHT; // 400
 
-    // 2. Verfügbaren Platz im Browser berechnen (Minus etwas Rand)
+    // 2. Verfügbaren Platz berechnen
     const windowWidth = window.innerWidth - 20;
     const windowHeight = window.innerHeight - 20;
 
-    const targetRatio = GAME_WIDTH / GAME_HEIGHT; // 2.0
+    const targetRatio = GAME_WIDTH / GAME_HEIGHT;
     const windowRatio = windowWidth / windowHeight;
 
     let finalWidth, finalHeight;
 
-    // 3. Letterboxing berechnen
+    // 3. Skalierung berechnen (Aspect Ratio erhalten)
     if (windowRatio < targetRatio) {
-        // Screen ist schmaler (z.B. Handy Portrait) -> Breite limitiert
         finalWidth = windowWidth;
         finalHeight = windowWidth / targetRatio;
     } else {
-        // Screen ist breiter (z.B. Desktop) -> Höhe limitiert
         finalHeight = windowHeight;
         finalWidth = finalHeight * targetRatio;
     }
 
-    // 4. Größe auf den CONTAINER anwenden
+    // 4. Container Größe setzen (Canvas füllt Container via CSS)
     if (container) {
         container.style.width = `${Math.floor(finalWidth)}px`;
         container.style.height = `${Math.floor(finalHeight)}px`;
     }
-
-    // Hinweis: Wir setzen KEINE style.width/height auf das Canvas Element selbst.
-    // Das Canvas erbt "width: 100%; height: 100%" vom CSS und füllt den Container.
 }
 
-// Event Listener
 window.addEventListener('resize', resize);
-
-// Einmal sofort ausführen
 resize();
 
 
-// --- DRAWING ---
-
-function drawGame() {
+// ==========================================
+// DRAWING LOOP (MIT INTERPOLATION)
+// ==========================================
+// alpha (0.0 bis 1.0) gibt an, wie weit wir zeitlich zwischen zwei Physik-Ticks sind.
+function drawGame(alpha = 1.0) {
+    // 1. Canvas leeren
     ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
 
+    // ===============================================
+    // HINTERGRUND
+    // ===============================================
     let currentBg = null;
-
     if (bgSprites.length > 0) {
+        // Wechselt alle 10.000 Punkte
         const changeInterval = 10000;
-
         const currentRawIndex = Math.floor(score / changeInterval);
-
-        if (currentRawIndex > maxRawBgIndex) {
-            maxRawBgIndex = currentRawIndex;
-        }
+        if (currentRawIndex > maxRawBgIndex) maxRawBgIndex = currentRawIndex;
         const bgIndex = maxRawBgIndex % bgSprites.length;
-
         currentBg = bgSprites[bgIndex];
     }
 
-
-
     if (currentBg && currentBg.complete && currentBg.naturalHeight !== 0) {
         ctx.drawImage(currentBg, 0, 0, GAME_WIDTH, GAME_HEIGHT);
     } else {
-        // Fallback
         ctx.fillStyle = "#f0f0f0";
         ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
     }
 
-    // --- BODEN ---
-    // Halb-transparent, damit er über dem Hintergrund liegt
+    // ===============================================
+    // BODEN
+    // ===============================================
     ctx.fillStyle = "rgba(60, 60, 60, 0.8)";
     ctx.fillRect(0, GROUND_Y, GAME_WIDTH, 50);
 
-    // --- HINDERNISSE ---
-    obstacles.forEach(obs => {
-        const img = sprites[obs.def.id];
+    // ===============================================
+    // PLATTFORMEN (Interpoliert)
+    // ===============================================
+    platforms.forEach(p => {
+        // Interpolierte X-Position
+        const rX = (p.prevX !== undefined) ? lerp(p.prevX, p.x, alpha) : p.x;
+        const rY = p.y;
 
-        // Prüfen ob Bild geladen ist
-        if (img && img.complete && img.naturalHeight !== 0) {
-            ctx.drawImage(img, obs.x, obs.y, obs.def.width, obs.def.height);
-        } else {
-            // Fallback Farbe (Münzen Gold, Rest aus Config)
-            if (obs.def.type === "coin") ctx.fillStyle = "gold";
-            else ctx.fillStyle = obs.def.color || "red";
-
-            ctx.fillRect(obs.x, obs.y, obs.def.width, obs.def.height);
-        }
-
-        if(obs.speech) drawSpeechBubble(obs.x, obs.y, obs.speech);
+        // Holz-Optik
+        ctx.fillStyle = "#5D4037";
+        ctx.fillRect(rX, rY, p.w, p.h);
+        ctx.fillStyle = "#8D6E63";
+        ctx.fillRect(rX, rY, p.w, 5); // Highlight oben
     });
 
-    // --- DEBUG RAHMEN (Server Hitboxen) ---
-    // Grün im Spiel, Rot bei Tod
-    if (DEBUG_SYNC == true) {
-        ctx.strokeStyle = isGameOver ? "red" : "lime";
-        ctx.lineWidth = 2;
-        serverObstacles.forEach(srvObs => {
-            ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h);
-        });
+    // ===============================================
+    // HINDERNISSE (Interpoliert)
+    // ===============================================
+    obstacles.forEach(obs => {
+        const def = obs.def || {};
+        const img = sprites[def.id];
+
+        // Interpolation
+        const rX = (obs.prevX !== undefined) ? lerp(obs.prevX, obs.x, alpha) : obs.x;
+        const rY = obs.y;
+
+        // Hitbox Dimensionen
+        const hbw = def.width || obs.w || 30;
+        const hbh = def.height || obs.h || 30;
+
+        if (img && img.complete && img.naturalHeight !== 0) {
+            // --- BILD VORHANDEN ---
+            // Editor-Werte anwenden
+            const scale = def.imgScale || 1.0;
+            const offX  = def.imgOffsetX || 0.0;
+            const offY  = def.imgOffsetY || 0.0;
+
+            // 1. Skalierte Größe
+            const drawW = hbw * scale;
+            const drawH = hbh * scale;
+
+            // 2. Positionierung (Zentriert & Unten Bündig zur Hitbox)
+            const baseX = rX + (hbw - drawW) / 2;
+            const baseY = rY + (hbh - drawH);
+
+            // 3. Zeichnen
+            ctx.drawImage(img, baseX + offX, baseY + offY, drawW, drawH);
+
+        } else {
+            // --- FALLBACK (KEIN BILD) ---
+            // Magenta als Warnung, Gold für Coins
+            let color = "#FF00FF";
+            if (def.type === "coin") color = "gold";
+            else if (def.color) color = def.color;
+
+            ctx.fillStyle = color;
+            ctx.fillRect(rX, rY, hbw, hbh);
+
+            // Rahmen & Text
+            ctx.strokeStyle = "rgba(255,255,255,0.5)"; ctx.lineWidth = 2;
+            ctx.strokeRect(rX, rY, hbw, hbh);
+            ctx.fillStyle = "white"; ctx.font = "bold 10px monospace";
+            ctx.fillText(def.id || "?", rX, rY - 5);
+        }
+
+        // --- DEBUG HITBOX (Client) ---
+        if (typeof DEBUG_SYNC !== 'undefined' && DEBUG_SYNC) {
+            ctx.strokeStyle = "rgba(0,255,0,0.5)"; // Grün transparent
+            ctx.lineWidth = 1;
+            ctx.strokeRect(rX, rY, hbw, hbh);
+        }
+
+        // Sprechblase
+        if(obs.speech) drawSpeechBubble(rX, rY, obs.speech);
+    });
+
+    // ===============================================
+    // DEBUG: SERVER STATE (Cyan)
+    // ===============================================
+    // Zeigt an, wo der Server die Objekte sieht (ohne Interpolation)
+    if (typeof DEBUG_SYNC !== 'undefined' && DEBUG_SYNC) {
+        if (serverObstacles) {
+            ctx.strokeStyle = "cyan";
+            ctx.lineWidth = 1;
+            serverObstacles.forEach(sObj => {
+                // Wir müssen hier die Latenz-Korrektur aus network.js abziehen,
+                // um zu sehen, wo network.js sie hingeschoben hat?
+                // Nein, serverObstacles enthält die Rohdaten.
+                // Wenn wir wissen wollen, wo der Server "jetzt" ist, müssten wir schätzen.
+                // Wir zeichnen einfach Raw, das hinkt optisch meist hinterher.
+                ctx.strokeRect(sObj.x, sObj.y, sObj.w, sObj.h);
+            });
+        }
     }
 
+    // ===============================================
+    // SPIELER (Interpoliert)
+    // ===============================================
+    // Interpolierte Y-Position
+    let rPlayerY = lerp(player.prevY !== undefined ? player.prevY : player.y, player.y, alpha);
 
-    // --- SPIELER ---
-    // Y-Position und Höhe anpassen für Ducken
-    const drawY = isCrouching ? player.y + 25 : player.y;
+    // Ducken Anpassung
+    const drawY = isCrouching ? rPlayerY + 25 : rPlayerY;
     const drawH = isCrouching ? 25 : 50;
 
     if (playerSprite.complete && playerSprite.naturalHeight !== 0) {
@@ -117,7 +181,16 @@ function drawGame() {
         ctx.fillRect(player.x, drawY, player.w, drawH);
     }
 
-    // --- HUD (Powerup Status oben links) ---
+    // ===============================================
+    // PARTIKEL (Visuelle Effekte)
+    // ===============================================
+    if (typeof drawParticles === 'function') {
+        drawParticles();
+    }
+
+    // ===============================================
+    // HUD (Statusanzeige)
+    // ===============================================
     if (isGameRunning && !isGameOver) {
         ctx.fillStyle = "black";
         ctx.font = "bold 10px monospace";
@@ -128,30 +201,29 @@ function drawGame() {
         if(hasBat) statusText += `⚾ BAT `;
         if(bootTicks > 0) statusText += `👟 ${(bootTicks/60).toFixed(1)}s`;
 
-        // Drift Info (nur wenn Objekte da sind)
-        if (DEBUG_SYNC == true && length > 0 && serverObstacles.length > 0) {
-            const drift = Math.abs(obstacles[0].x - serverObstacles[0].x).toFixed(1);
-            statusText += ` | Drift: ${drift}px`; // Einkommentieren für Debugging
-        }
-
         if(statusText !== "") {
             ctx.fillText(statusText, 10, 40);
         }
     }
 
-    // --- GAME OVER OVERLAY ---
+    // ===============================================
+    // GAME OVER OVERLAY
+    // ===============================================
     if (isGameOver) {
-        // Dunkler Schleier über alles
         ctx.fillStyle = "rgba(0,0,0,0.7)";
         ctx.fillRect(0,0,GAME_WIDTH, GAME_HEIGHT);
     }
 }
 
-// Sprechblasen Helper
+// Helper: Sprechblase zeichnen
 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);
-    ctx.strokeRect(bX,bY,bW,bH);
-    ctx.fillStyle="black"; ctx.font="10px Arial"; ctx.textAlign="center";
-    ctx.fillText(text, bX+bW/2, bY+20);
+    const bX = x - 20;
+    const bY = y - 40;
+    const bW = 120;
+    const bH = 30;
+
+    ctx.fillStyle = "white"; ctx.fillRect(bX, bY, bW, bH);
+    ctx.strokeStyle = "black"; ctx.lineWidth = 1; ctx.strokeRect(bX, bY, bW, bH);
+    ctx.fillStyle = "black"; ctx.font = "10px Arial"; ctx.textAlign = "center";
+    ctx.fillText(text, bX + bW/2, bY + 20);
 }