bug fixes

static/js/main.js

@@ -1,10 +1,25 @@
+// ==========================================
+// INIT & ASSETS
+// ==========================================
 async function loadAssets() {
     playerSprite.src = "assets/player.png";
-    if (gameConfig.backgrounds && gameConfig.backgrounds.length > 0) {
-        const bgName = gameConfig.backgrounds[0];
-        if (!bgName.startsWith("#")) bgSprite.src = "assets/" + bgName;
-    }
-    const promises = gameConfig.obstacles.map(def => {
+
+    // Hintergründe laden
+    const bgPromises = gameConfig.backgrounds.map((bgFile, index) => {
+        return new Promise((resolve) => {
+            const img = new Image();
+            img.src = "assets/" + bgFile;
+            img.onload = () => { bgSprites[index] = img; resolve(); };
+            img.onerror = () => {
+                console.warn("BG fehlt:", bgFile);
+                bgSprites[index] = null;
+                resolve();
+            };
+        });
+    });
+
+    // Hindernisse laden
+    const obsPromises = gameConfig.obstacles.map(def => {
         return new Promise((resolve) => {
             if (!def.image) { resolve(); return; }
             const img = new Image(); img.src = "assets/" + def.image;
@@ -12,26 +27,155 @@ async function loadAssets() {
             img.onerror = () => { resolve(); };
         });
     });
-    if (bgSprite.src) {
-        promises.push(new Promise(r => { bgSprite.onload = r; bgSprite.onerror = r; }));
-    }
-    await Promise.all(promises);
+
+    // Player laden (kleiner Promise Wrapper)
+    const pPromise = new Promise(r => {
+        playerSprite.onload = r;
+        playerSprite.onerror = r;
+    });
+
+    await Promise.all([pPromise, ...bgPromises, ...obsPromises]);
 }
 
+// ==========================================
+// START LOGIK
+// ==========================================
 window.startGameClick = async function() {
     if (!isLoaded) return;
     startScreen.style.display = 'none';
-    document.body.classList.add('game-active'); // Handy Rotate Check
+    document.body.classList.add('game-active');
     try {
         const sRes = await fetch('/api/start', {method:'POST'});
         const sData = await sRes.json();
         sessionID = sData.sessionId;
         rng = new PseudoRNG(sData.seed);
         isGameRunning = true;
+        // Wir resetten die Zeit, damit es keinen Sprung gibt
+        lastTime = performance.now();
         resize();
-    } catch(e) { location.reload(); }
+    } catch(e) {
+        alert("Start Fehler: " + e.message);
+        location.reload();
+    }
 };
 
+// ==========================================
+// SCORE EINTRAGEN
+// ==========================================
+window.submitScore = async function() {
+    const nameInput = document.getElementById('playerNameInput');
+    const name = nameInput.value;
+    const btn = document.getElementById('submitBtn');
+
+    if (!name) return alert("Namen eingeben!");
+    btn.disabled = true;
+
+    try {
+        const res = await fetch('/api/submit-name', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({ sessionId: sessionID, name: name })
+        });
+        if (!res.ok) throw new Error("Server Error");
+        const data = await res.json();
+
+        let myClaims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
+        myClaims.push({
+            name: name, score: Math.floor(score / 10), code: data.claimCode,
+            date: new Date().toLocaleString('de-DE'), sessionId: sessionID
+        });
+        localStorage.setItem('escape_claims', JSON.stringify(myClaims));
+
+        document.getElementById('inputSection').style.display = 'none';
+        loadLeaderboard();
+        alert(`Gespeichert! Code: ${data.claimCode}`);
+    } catch (e) {
+        alert("Fehler: " + e.message);
+        btn.disabled = false;
+    }
+};
+
+// ==========================================
+// MEINE CODES & LÖSCHEN
+// ==========================================
+window.showMyCodes = function() {
+    if(window.openModal) window.openModal('codes');
+    const listEl = document.getElementById('codesList');
+    if(!listEl) return;
+    const claims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
+
+    if (claims.length === 0) {
+        listEl.innerHTML = "<div style='padding:10px; text-align:center; color:#666;'>Keine Codes gespeichert.</div>";
+        return;
+    }
+
+    let html = "";
+    for (let i = claims.length - 1; i >= 0; i--) {
+        const c = claims[i];
+        const canDelete = c.sessionId ? true : false;
+        const btnStyle = canDelete ? "cursor:pointer; color:#ff4444; border-color:#ff4444;" : "cursor:not-allowed; color:gray; border-color:gray;";
+        const btnAttr = canDelete ? `onclick="deleteClaim(${i}, '${c.sessionId}', '${c.code}')"` : "disabled";
+
+        html += `
+        <div style="border-bottom:1px solid #444; padding:8px 0; display:flex; justify-content:space-between; align-items:center;">
+            <div style="text-align:left;">
+                <span style="color:#00e5ff; font-weight:bold; font-size:12px;">${c.code}</span> 
+                <span style="color:#ffcc00;">(${c.score} Pkt)</span><br>
+                <span style="color:#aaa; font-size:9px;">${c.name} • ${c.date}</span>
+            </div>
+            <button ${btnAttr} style="background:transparent; border:1px solid; padding:5px; font-size:9px; margin:0; ${btnStyle}">LÖSCHEN</button>
+        </div>`;
+    }
+    listEl.innerHTML = html;
+};
+
+window.deleteClaim = async function(index, sid, code) {
+    if(!confirm("Wirklich löschen?")) return;
+    try {
+        const res = await fetch('/api/claim/delete', {
+            method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ sessionId: sid, claimCode: code })
+        });
+        if (!res.ok) {
+            if(!confirm("Server Fehler (evtl. schon weg). Lokal löschen?")) return;
+        }
+        let claims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
+        claims.splice(index, 1);
+        localStorage.setItem('escape_claims', JSON.stringify(claims));
+        window.showMyCodes();
+        loadLeaderboard();
+    } catch(e) { alert("Verbindungsfehler!"); }
+};
+
+async function loadLeaderboard() {
+    try {
+        const res = await fetch(`/api/leaderboard?sessionId=${sessionID}`);
+        const entries = await res.json();
+        let html = "<h3>BESTENLISTE</h3>";
+        entries.forEach(e => {
+            const color = e.isMe ? "yellow" : "white";
+            html += `<div style="display:flex; justify-content:space-between; color:${color}; margin-bottom:5px;"><span>#${e.rank} ${e.name}</span><span>${Math.floor(e.score/10)}</span></div>`;
+        });
+        document.getElementById('leaderboard').innerHTML = html;
+    } catch(e) {}
+}
+
+async function loadStartScreenLeaderboard() {
+    try {
+        const listEl = document.getElementById('startLeaderboardList');
+        if (!listEl) return;
+        const res = await fetch('/api/leaderboard');
+        const entries = await res.json();
+        if (entries.length === 0) { listEl.innerHTML = "<div style='padding:20px'>Noch keine Scores.</div>"; return; }
+        let html = "";
+        entries.forEach(e => {
+            let icon = "#" + e.rank;
+            if (e.rank === 1) icon = "🥇"; if (e.rank === 2) icon = "🥈"; if (e.rank === 3) icon = "🥉";
+            html += `<div class="hof-entry"><span><span class="hof-rank">${icon}</span> ${e.name}</span><span class="hof-score">${Math.floor(e.score / 10)}</span></div>`;
+        });
+        listEl.innerHTML = html;
+    } catch (e) {}
+}
+
 function gameOver(reason) {
     if (isGameOver) return;
     isGameOver = true;
@@ -44,52 +188,71 @@ function gameOver(reason) {
     drawGame();
 }
 
+// ==========================================
+// DER FIXIERTE GAME LOOP
+// ==========================================
 function gameLoop(timestamp) {
     requestAnimationFrame(gameLoop);
 
-    if (!isLoaded || !isGameRunning || isGameOver) {
+    // 1. Wenn Assets noch nicht da sind, machen wir gar nichts
+    if (!isLoaded) return;
+
+    // 2. PHYSIK-LOGIK (Nur wenn Spiel läuft und nicht Game Over)
+    // Das hier sorgt dafür, dass der Dino stehen bleibt, wenn wir im Menü sind
+    if (isGameRunning && !isGameOver) {
+
+        if (!lastTime) lastTime = timestamp;
+        const deltaTime = timestamp - lastTime;
         lastTime = timestamp;
-        return;
+
+        if (deltaTime > 1000) { accumulator = 0; return; }
+
+        accumulator += deltaTime;
+
+        while (accumulator >= MS_PER_TICK) {
+            updateGameLogic();
+            currentTick++;
+            score++;
+            if (currentTick - lastSentTick >= CHUNK_SIZE) sendChunk();
+            accumulator -= MS_PER_TICK;
+        }
+
+        const scoreEl = document.getElementById('score');
+        if (scoreEl) scoreEl.innerText = Math.floor(score / 10);
     }
 
-    if (!lastTime) lastTime = timestamp;
-    const deltaTime = timestamp - lastTime;
-    lastTime = timestamp;
-
-    if (deltaTime > 1000) {
-        accumulator = 0;
-        return;
-    }
-
-    accumulator += deltaTime;
-
-    while (accumulator >= MS_PER_TICK) {
-        updateGameLogic();
-        currentTick++;
-        score++;
-
-        if (currentTick - lastSentTick >= CHUNK_SIZE) sendChunk();
-
-        accumulator -= MS_PER_TICK;
-    }
-
-    const scoreEl = document.getElementById('score');
-    if (scoreEl) scoreEl.innerText = Math.floor(score / 10);
-
+    // 3. RENDERING (IMMER!)
+    // Das hier war das Problem. Früher stand hier "return" wenn !isGameRunning.
+    // Jetzt malen wir immer. Wenn isGameRunning false ist, malt er einfach den Start-Zustand.
     drawGame();
 }
 
 async function initGame() {
     try {
         const cRes = await fetch('/api/config'); gameConfig = await cRes.json();
+
+        // Erst alles laden
         await loadAssets();
         await loadStartScreenLeaderboard();
+
         isLoaded = true;
-        if(loadingText) loadingText.style.display = 'none'; if(startBtn) startBtn.style.display = 'inline-block';
+        if(loadingText) loadingText.style.display = 'none';
+        if(startBtn) startBtn.style.display = 'inline-block';
+
         const savedHighscore = localStorage.getItem('escape_highscore') || 0;
-        const hsEl = document.getElementById('localHighscore'); if(hsEl) hsEl.innerText = savedHighscore;
+        const hsEl = document.getElementById('localHighscore');
+        if(hsEl) hsEl.innerText = savedHighscore;
+
+        // Loop starten (mit dummy timestamp start)
         requestAnimationFrame(gameLoop);
-    } catch(e) { if(loadingText) loadingText.innerText = "Fehler!"; }
+
+        // Initiales Zeichnen erzwingen (damit Hintergrund sofort da ist)
+        drawGame();
+
+    } catch(e) {
+        console.error(e);
+        if(loadingText) loadingText.innerText = "Ladefehler (siehe Konsole)";
+    }
 }
 
 initGame();