Merge pull request 'better Game' (#6) from add-new-player-skin into main

Reviewed-on: #6

config.go

@@ -42,13 +42,14 @@ func initGameConfig() {
 			{ID: "desk", Type: "obstacle", Width: 40, Height: 30, Color: "#8B4513", Image: "desk1.png"},
 			{ID: "teacher", Type: "teacher", Width: 30, Height: 60, Color: "#000080", Image: "teacher1.png", CanTalk: true, SpeechLines: []string{"Halt!", "Handy weg!"}},
 			{ID: "trashcan", Type: "obstacle", Width: 25, Height: 35, Color: "#555", Image: "trash1.png"},
-			{ID: "eraser", Type: "obstacle", Width: 30, Height: 20, Color: "#fff", Image: "eraser1.png", YOffset: 45.0},
+			{ID: "eraser", Type: "obstacle", Width: 30, Height: 20, Color: "#fff", Image: "eraser1.png", YOffset: 35.0},
 
-			// --- BOSS OBJEKTE (Kommen häufiger im Bosskampf) ---
 			{ID: "principal", Type: "teacher", Width: 40, Height: 70, Color: "#000", Image: "principal1.png", CanTalk: true, SpeechLines: []string{"EXMATRIKULATION!"}},
 
 			// --- COINS ---
-			{ID: "coin", Type: "coin", Width: 20, Height: 20, Color: "gold", Image: "coin1.png", YOffset: 20.0},
+			{ID: "coin0", Type: "coin", Width: 20, Height: 20, Color: "gold", Image: "coin1.png", YOffset: 40.0},
+			{ID: "coin1", Type: "coin", Width: 20, Height: 20, Color: "gold", Image: "coin1.png", YOffset: 50.0},
+			{ID: "coin2", Type: "coin", Width: 20, Height: 20, Color: "gold", Image: "coin1.png", YOffset: 60.0},
 
 			// --- POWERUPS ---
 			{ID: "p_god", Type: "powerup", Width: 30, Height: 30, Color: "cyan", Image: "powerup_god1.png", YOffset: 20.0},   // Godmode
@@ -56,7 +57,7 @@ func initGameConfig() {
 			{ID: "p_boot", Type: "powerup", Width: 30, Height: 30, Color: "lime", Image: "powerup_boot1.png", YOffset: 20.0}, // Boots
 		},
 		// Mehrere Hintergründe für Level-Wechsel
-		Backgrounds: []string{"gym-background.jpg", "school-background.jpg", "school2-background.jpg"},
+		Backgrounds: []string{"school-background.jpg", "gym-background.jpg", "school2-background.jpg"},
 	}
 	log.Println("✅ Config mit Powerups geladen")
 }

simulation.go

@@ -47,8 +47,8 @@ func simulateChunk(sessionID string, inputs []Input, totalTicks int, vals map[st
 
 	for i := 0; i < totalTicks; i++ {
 
-		currentSpeed := BaseSpeed + (float64(score)/500.0)*0.5
-		if currentSpeed > 12.0 {
+		currentSpeed := BaseSpeed + (float64(score)/750.0)*0.5
+		if currentSpeed > 14.0 {
 			currentSpeed = 12.0
 		}
 

static/index.html

@@ -145,12 +145,12 @@
     function openModal(id) {
         document.getElementById('modal-' + id).style.display = 'flex';
     }
+
     function closeModal() {
         const modals = document.querySelectorAll('.modal-overlay');
         modals.forEach(el => el.style.display = 'none');
     }
-
-    // Schließen wenn man daneben klickt
+    
     window.onclick = function(event) {
         if (event.target.classList.contains('modal-overlay')) {
             closeModal();

static/js/logic.js

@@ -1,7 +1,7 @@
 function updateGameLogic() {
     // 1. Speed Berechnung (Sync mit Server!)
-    let currentSpeed = BASE_SPEED + (score / 500.0) * 0.5;
-    if (currentSpeed > 12.0) currentSpeed = 12.0;
+    let currentSpeed = BASE_SPEED + (score / 750.0) * 0.5;
+    if (currentSpeed > 14.0) currentSpeed = 14.0;
 
     // 2. Input & Sprung
     if (isCrouching) inputLog.push({ t: currentTick - lastSentTick, act: "DUCK" });

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();

static/js/render.js

@@ -44,53 +44,71 @@ resize();
 // --- DRAWING ---
 
 function drawGame() {
+    // 1. Alles löschen
     ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
 
-    // --- BACKGROUND ---
-    // Hier war der Check schon drin, das ist gut
-    if (bgSprite.complete && bgSprite.naturalHeight !== 0) {
-        ctx.drawImage(bgSprite, 0, 0, GAME_WIDTH, GAME_HEIGHT);
+    // --- HINTERGRUND (Level-Wechsel) ---
+    let currentBg = null;
+
+    // Haben wir Hintergründe geladen?
+    if (bgSprites.length > 0) {
+        // Wechsel alle 2000 Punkte (Server-Score) = 200 Punkte (Anzeige)
+        const changeInterval = 10000;
+
+        // Berechne Index: 0-1999 -> 0, 2000-3999 -> 1, etc.
+        // Das % (Modulo) sorgt dafür, dass es wieder von vorne anfängt, wenn die Bilder ausgehen
+        const bgIndex = Math.floor(score / changeInterval) % bgSprites.length;
+
+        currentBg = bgSprites[bgIndex];
+    }
+
+
+    if (currentBg && currentBg.complete && currentBg.naturalHeight !== 0) {
+        ctx.drawImage(currentBg, 0, 0, GAME_WIDTH, GAME_HEIGHT);
     } else {
+        // Fallback: Hellgrau, falls Bild fehlt
         ctx.fillStyle = "#f0f0f0";
         ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
     }
 
+    // --- BODEN ---
+    // Halb-transparent, damit er über dem Hintergrund liegt
     ctx.fillStyle = "rgba(60, 60, 60, 0.8)";
     ctx.fillRect(0, GROUND_Y, GAME_WIDTH, 50);
 
-    // --- HINDERNISSE (HIER WAR DER FEHLER) ---
+    // --- HINDERNISSE ---
     obstacles.forEach(obs => {
         const img = sprites[obs.def.id];
 
-        // FIX: Wir prüfen jetzt strikt, ob das Bild wirklich bereit ist
+        // 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: Wenn Bild fehlt/kaputt -> Farbiges Rechteck
-            // Wir prüfen auf Typ Coin, damit Coins gold sind, auch wenn Bild fehlt
+            // Fallback Farbe (Münzen Gold, Rest aus Config)
             if (obs.def.type === "coin") ctx.fillStyle = "gold";
-            else ctx.fillStyle = obs.def.color;
+            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);
     });
-    
     /*
-    // --- DEBUG ---
+    // --- DEBUG RAHMEN (Server Hitboxen) ---
+    // Grün im Spiel, Rot bei Tod
     ctx.strokeStyle = isGameOver ? "red" : "lime";
     ctx.lineWidth = 2;
     serverObstacles.forEach(srvObs => {
         ctx.strokeRect(srvObs.x, srvObs.y, srvObs.w, srvObs.h);
     });
-     */
+    */
 
-    // --- PLAYER ---
+
+    // --- SPIELER ---
+    // Y-Position und Höhe anpassen für Ducken
     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 {
@@ -98,27 +116,31 @@ function drawGame() {
         ctx.fillRect(player.x, drawY, player.w, drawH);
     }
 
-    // --- POWERUP UI (Oben Links) ---
+    // --- HUD (Powerup Status 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
-        /*
+        // Drift Info (nur wenn Objekte da sind)
         if (obstacles.length > 0 && serverObstacles.length > 0) {
             const drift = Math.abs(obstacles[0].x - serverObstacles[0].x).toFixed(1);
-            statusText += ` | Drift: ${drift}px`;
+            // statusText += ` | Drift: ${drift}px`; // Einkommentieren für Debugging
+        }
+
+        if(statusText !== "") {
+            ctx.fillText(statusText, 10, 40);
         }
-         */
-        ctx.fillText(statusText, 10, 40);
     }
 
+    // --- 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);
     }

static/js/state.js

@@ -28,7 +28,7 @@ let accumulator = 0;
 let sprites = {};
 let playerSprite = new Image();
 let bgSprite = new Image();
-
+let bgSprites = [];
 // Spiel-Objekte
 let player = {
     x: 50, y: 300, w: 30, h: 50, color: "red",

static/style.css

@@ -367,12 +367,21 @@ input {
 
     /* 1. Haupt-Container: Alles zentrieren! */
     #startScreen {
-        flex-direction: row; /* Nebeneinander lassen, da Bildschirm breit ist */
-        align-items: center; /* Vertikal mittig */
-        justify-content: center; /* Horizontal mittig */
-        gap: 20px; /* Abstand zwischen Menü und Leaderboard */
-        padding: 10px;
-        overflow-y: auto; /* Scrollen erlauben zur Sicherheit */
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        background:
+                linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+                url('assets/school-background.jpg');
+
+        background-size: cover;
+        background-position: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 10;
+        box-sizing: border-box;
+        padding: 20px;
     }
 
     /* 2. Linke Seite (Menü) zentrieren */
@@ -419,9 +428,16 @@ input {
 
     /* 8. Game Over Screen auch zentrieren */
     #gameOverScreen {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        background: rgba(0, 0, 0, 0.9);
+        display: flex;
         justify-content: center;
         align-items: center;
-        padding-top: 0;
+        z-index: 10;
+        box-sizing: border-box;
+        padding: 20px;
     }
     #inputSection { margin: 5px 0; }
     input { padding: 5px; font-size: 12px; width: 150px; margin-bottom: 5px; }