Keine Codes gespeichert.
";
- return;
- }
-
- const sortedClaims = rawClaims
- .map((item, index) => ({ ...item, originalIndex: index }))
- .sort((a, b) => b.score - a.score);
-
- let html = "";
-
-
- sortedClaims.forEach(c => {
- 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(${c.originalIndex}, '${c.sessionId}', '${c.code}')"` : "disabled";
-
- let rankIcon = "📄";
- if (c.score >= 10000) rankIcon = "🔥";
- if (c.score >= 5000) rankIcon = "⭐";
-
- html += `
- Noch keine Einträge.
";
entries.forEach(e => {
- const color = e.isMe ? "yellow" : "white";
- const bgStyle = e.isMe ? "background:rgba(255,255,0,0.1);" : "";
-
- const betterThanMe = e.rank - 1;
- let infoText = "";
-
- if (e.isMe && betterThanMe > 0) {
- infoText = `
-
- #${e.rank} ${e.name.toUpperCase()}
- ${Math.floor(e.score/10)}
-
- ${infoText}
+
+ #${e.rank} ${e.name}
+ ${Math.floor(e.score/10)}
`;
-
- if(e.rank === 3 && entries.length > 3 && !entries[3].isMe) {
- html += "
...
";
- }
});
document.getElementById('leaderboard').innerHTML = html;
- } catch(e) { console.error(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 = "
Noch keine Scores.
"; 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 += `
${icon} ${e.name}${Math.floor(e.score / 10)}
`;
- });
- listEl.innerHTML = html;
- } catch (e) {}
-}
-
-function gameOver(reason) {
- if (isGameOver) return;
- isGameOver = true;
- const finalScoreVal = Math.floor(score / 10);
- const currentHighscore = localStorage.getItem('escape_highscore') || 0;
- if (finalScoreVal > currentHighscore) localStorage.setItem('escape_highscore', finalScoreVal);
- gameOverScreen.style.display = 'flex';
- document.getElementById('finalScore').innerText = finalScoreVal;
- loadLeaderboard();
- drawGame();
+ } catch(e) {
+ console.error("Leaderboard Error:", e);
+ }
}
// ==========================================
-// DER FIXIERTE GAME LOOP
+// 4. GAME LOOP
// ==========================================
function gameLoop(timestamp) {
requestAnimationFrame(gameLoop);
- // 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;
@@ -254,28 +170,34 @@ function gameLoop(timestamp) {
updateGameLogic();
currentTick++;
score++;
- if (currentTick - lastSentTick >= CHUNK_SIZE) sendChunk();
accumulator -= MS_PER_TICK;
}
+ const alpha = accumulator / MS_PER_TICK;
+
+ // Score im HUD
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();
+ drawGame(isGameRunning ? accumulator / MS_PER_TICK : 1.0);
}
+// ==========================================
+// 5. INIT
+// ==========================================
async function initGame() {
try {
- const cRes = await fetch('/api/config'); gameConfig = await cRes.json();
+ const cRes = await fetch('/api/config');
+ gameConfig = await cRes.json();
- // Erst alles laden
await loadAssets();
await loadStartScreenLeaderboard();
+ if (typeof getMuteState === 'function') {
+ updateMuteIcon(getMuteState());
+ }
+
isLoaded = true;
if(loadingText) loadingText.style.display = 'none';
if(startBtn) startBtn.style.display = 'inline-block';
@@ -284,10 +206,7 @@ async function initGame() {
const hsEl = document.getElementById('localHighscore');
if(hsEl) hsEl.innerText = savedHighscore;
- // Loop starten (mit dummy timestamp start)
requestAnimationFrame(gameLoop);
-
- // Initiales Zeichnen erzwingen (damit Hintergrund sofort da ist)
drawGame();
} catch(e) {
@@ -296,4 +215,147 @@ async function initGame() {
}
}
+// Helper: Mini-Leaderboard auf Startseite
+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 = "
Keine Scores.
"; 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 += `
${icon} ${e.name}${Math.floor(e.score / 10)}
`;
+ });
+ listEl.innerHTML = html;
+ } catch (e) {}
+}
+
+// Audio Toggle Funktion für den Button
+window.toggleAudioClick = function() {
+ // 1. Audio umschalten (in audio.js)
+ const muted = toggleMute();
+
+ // 2. Button Icon updaten
+ updateMuteIcon(muted);
+
+ // 3. Fokus vom Button nehmen (damit Space nicht den Button drückt, sondern springt)
+ document.getElementById('mute-btn').blur();
+};
+
+function updateMuteIcon(isMuted) {
+ const btn = document.getElementById('mute-btn');
+ if (btn) {
+ btn.innerText = isMuted ? "🔇" : "🔊";
+ btn.style.color = isMuted ? "#ff4444" : "white";
+ btn.style.borderColor = isMuted ? "#ff4444" : "#555";
+ }
+}
+
+// ==========================================
+// MEINE CODES (LOCAL STORAGE)
+// ==========================================
+
+// 1. Codes anzeigen (Wird vom Button im Startscreen aufgerufen)
+window.showMyCodes = function() {
+ // Modal öffnen
+ openModal('codes');
+
+ const listEl = document.getElementById('codesList');
+ if(!listEl) return;
+
+ // Daten aus dem Browser-Speicher holen
+ const rawClaims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
+
+ if (rawClaims.length === 0) {
+ listEl.innerHTML = "
Keine Codes gespeichert.
";
+ return;
+ }
+
+ // Sortieren nach Score (Höchster zuerst)
+ const sortedClaims = rawClaims
+ .map((item, index) => ({ ...item, originalIndex: index }))
+ .sort((a, b) => b.score - a.score);
+
+ let html = "";
+
+ sortedClaims.forEach(c => {
+ // Icons basierend auf Score
+ let rankIcon = "📄";
+ if (c.score >= 5000) rankIcon = "⭐";
+ if (c.score >= 10000) rankIcon = "🔥";
+ if (c.score >= 20000) rankIcon = "👑";
+
+ html += `
+
+
+ ${rankIcon} ${c.code}
+ (${c.score} Pkt)
+ ${c.name} • ${c.date}
+
+
+
`;
+ });
+
+ listEl.innerHTML = html;
+};
+
+// 2. Code löschen (Lokal und auf Server)
+window.deleteClaim = async function(sid, code) {
+ if(!confirm("Eintrag wirklich löschen?")) return;
+
+ // Versuch, es auf dem Server zu löschen
+ try {
+ await fetch('/api/claim/delete', {
+ method: 'POST',
+ headers: {'Content-Type': 'application/json'},
+ body: JSON.stringify({ sessionId: sid, claimCode: code })
+ });
+ } catch(e) {
+ console.warn("Server Delete fehlgeschlagen (vielleicht schon weg), lösche lokal...");
+ }
+
+ // Lokal löschen
+ let claims = JSON.parse(localStorage.getItem('escape_claims') || '[]');
+ // Wir filtern den Eintrag raus, der die gleiche SessionID UND den gleichen Code hat
+ claims = claims.filter(c => c.code !== code);
+
+ localStorage.setItem('escape_claims', JSON.stringify(claims));
+
+ // Liste aktualisieren
+ window.showMyCodes();
+
+ // Leaderboard aktualisieren (falls im Hintergrund sichtbar)
+ if(document.getElementById('startLeaderboardList')) {
+ loadStartScreenLeaderboard();
+ }
+};
+
+// ==========================================
+// MODAL LOGIK (Fenster auf/zu)
+// ==========================================
+window.openModal = function(id) {
+ const el = document.getElementById('modal-' + id);
+ if(el) el.style.display = 'flex';
+}
+
+window.closeModal = function() {
+ const modals = document.querySelectorAll('.modal-overlay');
+ modals.forEach(el => el.style.display = 'none');
+}
+
+// Klick nebendran schließt Modal
+window.onclick = function(event) {
+ if (event.target.classList.contains('modal-overlay')) {
+ closeModal();
+ }
+}
+
initGame();
\ No newline at end of file
diff --git a/static/js/network.js b/static/js/network.js
index 1a9106a..246c7d4 100644
--- a/static/js/network.js
+++ b/static/js/network.js
@@ -1,199 +1,377 @@
-async function sendChunk() {
- const ticksToSend = currentTick - lastSentTick;
- if (ticksToSend <= 0) return;
+// ==========================================
+// NETZWERK LOGIK (WEBSOCKET + RTT SYNC)
+// ==========================================
+/*
+ GLOBALE VARIABLEN (aus state.js):
+ - socket
+ - obstacleBuffer, platformBuffer
+ - currentLatencyMs, pingInterval
+ - isGameRunning, isGameOver
+ - score, currentTick
+*/
- const snapshotobstacles = JSON.parse(JSON.stringify(obstacles));
+function connectGame() {
+ // Alte Verbindung schließen
+ if (socket) {
+ socket.close();
+ }
- const payload = {
- sessionId: sessionID,
- inputs: [...inputLog],
- totalTicks: ticksToSend
+ // Ping Timer stoppen falls aktiv
+ if (typeof pingInterval !== 'undefined' && pingInterval) {
+ clearInterval(pingInterval);
+ }
+
+ // Protokoll automatisch wählen (ws:// oder wss://)
+ const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+ const url = proto + "//" + location.host + "/ws";
+
+ console.log("Verbinde zu:", url);
+ socket = new WebSocket(url);
+
+ // --- 1. VERBINDUNG GEÖFFNET ---
+ socket.onopen = () => {
+ console.log("🟢 WS Verbunden. Spiel startet.");
+
+ // Alles zurücksetzen
+ obstacleBuffer = [];
+ platformBuffer = [];
+ obstacles = [];
+ platforms = [];
+ currentLatencyMs = 0; // Reset Latenz
+
+ isGameRunning = true;
+ isGameOver = false;
+ isLoaded = true;
+
+ // PING LOOP STARTEN (Jede Sekunde messen)
+ pingInterval = setInterval(sendPing, 1000);
+
+ // Game Loop anwerfen
+ requestAnimationFrame(gameLoop);
};
- inputLog = [];
- lastSentTick = currentTick;
+ // --- 2. NACHRICHT VOM SERVER ---
+ socket.onmessage = (event) => {
+ try {
+ const msg = JSON.parse(event.data);
- try {
- const res = await fetch('/api/validate', {
- method: 'POST',
- headers: {'Content-Type': 'application/json'},
- body: JSON.stringify(payload)
- });
+ // A. PONG (Latenzmessung)
+ if (msg.type === "pong") {
+ const now = Date.now();
+ const sentTime = msg.ts; // Server schickt unseren Timestamp zurück
- const data = await res.json();
+ // Round Trip Time (Hin + Zurück)
+ const rtt = now - sentTime;
- // Update für visuelles Debugging
- if (data.serverObs) {
- serverObstacles = data.serverObs;
+ // One Way Latency (Latenz in eine Richtung)
+ const latency = rtt / 2;
- if (typeof DEBUG_SYNC !== 'undefined' && DEBUG_SYNC) {
- compareState(snapshotobstacles, data.serverObs);
- }
-
- if (data.powerups) {
- const sTick = data.serverTick;
-
- if (lastPowerupTick > sTick) {
+ // Glätten (Exponential Moving Average), damit Werte nicht springen
+ // Wenn es der erste Wert ist, nehmen wir ihn direkt.
+ if (currentLatencyMs === 0) {
+ currentLatencyMs = latency;
} else {
- godModeLives = data.powerups.godLives;
- hasBat = data.powerups.hasBat;
- bootTicks = data.powerups.bootTicks;
+ // 90% alter Wert, 10% neuer Wert
+ currentLatencyMs = (currentLatencyMs * 0.9) + (latency * 0.1);
+ }
+
+ // Optional: Debugging im Log
+ // console.log(`📡 Ping: ${rtt}ms | Latenz: ${currentLatencyMs.toFixed(1)}ms`);
+ }
+
+ // B. CHUNK (Objekte empfangen)
+ if (msg.type === "chunk") {
+
+ // 1. CLOCK SYNC (Die Zeitmaschine)
+ // Wenn der Server bei Tick 204 ist und wir bei 182, müssen wir aufholen!
+ // Wir addieren die geschätzte Latenz (in Ticks) auf die Serverzeit.
+ // 60 FPS = 16ms/Tick. 20 TPS = 50ms/Tick.
+
+ const msPerTick = 1000 / 20; // WICHTIG: Wir laufen auf 20 TPS Basis!
+ const latencyInTicks = Math.floor(currentLatencyMs / msPerTick);
+
+ // Ziel-Zeit: Server-Zeit + Übertragungsweg
+ const targetTick = msg.serverTick + latencyInTicks;
+ const drift = targetTick - currentTick;
+
+ // Wenn wir mehr als 2 Ticks abweichen -> Korrigieren
+ if (Math.abs(drift) > 2) {
+ // console.log(`⏰ Clock Sync: ${currentTick} -> ${targetTick} (Drift: ${drift})`);
+ currentTick = targetTick; // Harter Sync, damit Physik stimmt
+ }
+
+ // 2. PIXEL KORREKTUR (Sanfter!)
+ // Wir berechnen den Speed
+ let sTick = msg.serverTick;
+ // Formel aus logic.js (Base 15 + Zeit)
+ let currentSpeedPerTick = 15.0 + (sTick / 1000.0) * 1.5;
+ if (currentSpeedPerTick > 36) currentSpeedPerTick = 36;
+
+ const speedPerMs = currentSpeedPerTick / msPerTick; // Speed pro MS
+
+ // Korrektur: Latenz * Speed
+ // FIX: Wir kappen die Korrektur bei max 100px, damit Objekte nicht "teleportieren".
+ let dynamicCorrection = (currentLatencyMs * speedPerMs) + 5;
+ if (dynamicCorrection > 100) dynamicCorrection = 100; // Limit
+
+ // Puffer füllen (mit Limit)
+ if (msg.obstacles) {
+ msg.obstacles.forEach(o => {
+ o.x -= dynamicCorrection;
+ // Init für Interpolation
+ o.prevX = o.x;
+ obstacleBuffer.push(o);
+ });
+ }
+
+ if (msg.platforms) {
+ msg.platforms.forEach(p => {
+ p.x -= dynamicCorrection;
+ p.prevX = p.x;
+ platformBuffer.push(p);
+ });
+ }
+
+ if (msg.score !== undefined) score = msg.score;
+
+ // Powerups übernehmen (für Anzeige)
+ if (msg.powerups) {
+ godModeLives = msg.powerups.godLives;
+ hasBat = msg.powerups.hasBat;
+ bootTicks = msg.powerups.bootTicks;
}
}
- // Sync Spawning Timer
- if (data.NextSpawnTick) {
- if (Math.abs(nextSpawnTick - data.nextSpawnTick) > 5) {
- console.log("Sync Spawn Timer:", nextSpawnTick, "->", data.NextSpawnTick);
- nextSpawnTick = data.nextSpawnTick;
+ if (msg.type === "init") {
+ console.log("📩 INIT EMPFANGEN:", msg); // <--- DEBUG LOG
+
+ if (msg.sessionId) {
+ sessionID = msg.sessionId; // Globale Variable setzen
+ console.log("🔑 Session ID gesetzt auf:", sessionID);
+ } else {
+ console.error("❌ INIT FEHLER: Keine sessionId im Paket!", msg);
}
}
- }
+ // C. TOD (Server Authoritative)
+ if (msg.type === "dead") {
+ console.log("💀 Server sagt: Game Over");
- if (data.status === "dead") {
- console.error("💀 SERVER KILL", data);
- gameOver("Vom Server gestoppt");
- } else {
- const sScore = data.verifiedScore;
- // Score Korrektur
- if (Math.abs(score - sScore) > 200) {
- console.warn(`⚠️ SCORE DRIFT: Client=${score} Server=${sScore}`);
- score = sScore;
+ if (msg.score) score = msg.score;
+
+ // Verbindung sauber trennen
+ socket.close();
+ if (pingInterval) clearInterval(pingInterval);
+
+ gameOver("Vom Server gestoppt");
}
+
+ if (msg.type === "debug_sync") {
+
+
+
+ // 1. CLIENT SPEED BERECHNEN (Formel aus logic.js)
+ // Wir nutzen hier 'score', da logic.js das auch tut
+ let clientSpeed = BASE_SPEED + (currentTick / 1000.0) * 1.5;
+ if (clientSpeed > 36.0) clientSpeed = 36.0;
+
+ // 2. SERVER SPEED HOLEN
+ let serverSpeed = msg.currentSpeed || 0;
+
+ // 3. DIFF BERECHNEN
+ let diffSpeed = clientSpeed - serverSpeed;
+ let speedIcon = Math.abs(diffSpeed) < 0.01 ? "✅" : "❌";
+
+ console.group(`📊 SYNC REPORT (Tick: ${currentTick} vs Server: ${msg.serverTick})`);
+
+ // --- DER NEUE SPEED CHECK ---
+ console.log(`🚀 SPEED CHECK: ${speedIcon}`);
+ console.log(` Client: ${clientSpeed.toFixed(4)} px/tick (Basis: Tick ${currentTick})`);
+ console.log(` Server: ${serverSpeed.toFixed(4)} px/tick (Basis: Tick ${msg.serverTick})`);
+
+ if (Math.abs(diffSpeed) > 0.01) {
+ console.warn(`⚠️ ACHTUNG: Geschwindigkeiten weichen ab! Diff: ${diffSpeed.toFixed(4)}`);
+ console.warn("Ursache: Client nutzt 'Score', Server nutzt 'Ticks'. Sind diese synchron?");
+ }
+ // -----------------------------
+
+ // 1. Hindernisse vergleichen
+ generateSyncTable("Obstacles", obstacles, msg.obstacles);
+
+ // 2. Plattformen vergleichen
+ generateSyncTable("Platforms", platforms, msg.platforms);
+
+ console.groupEnd();
+ }
+
+ } catch (e) {
+ console.error("Fehler beim Verarbeiten der Nachricht:", e);
}
+ };
- } catch (e) {
- console.error("Netzwerkfehler:", e);
+ // --- 3. VERBINDUNG GETRENNT ---
+ socket.onclose = () => {
+ console.log("🔴 WS Verbindung getrennt.");
+ if (pingInterval) clearInterval(pingInterval);
+ };
+
+ socket.onerror = (error) => {
+ console.error("WS Fehler:", error);
+ };
+}
+
+// ==========================================
+// PING SENDEN
+// ==========================================
+function sendPing() {
+ if (socket && socket.readyState === WebSocket.OPEN) {
+ // Wir senden den aktuellen Zeitstempel
+ // Der Server muss diesen im "tick" Feld zurückschicken (siehe websocket.go)
+ socket.send(JSON.stringify({
+ type: "ping",
+ tick: Date.now() // Timestamp als Integer
+ }));
}
}
-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 })
- });
- 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();
- } catch (e) {}
-};
-
-async function loadLeaderboard() {
- const res = await fetch(`/api/leaderboard?sessionId=${sessionID}`);
- const entries = await res.json();
- let html = "
BESTENLISTE
";
- entries.forEach(e => {
- const color = e.isMe ? "yellow" : "white";
- html += `
- #${e.rank} ${e.name}${Math.floor(e.score/10)}
`;
- });
- document.getElementById('leaderboard').innerHTML = html;
-}
-
-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 = "
Noch keine Scores.
"; 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 += `
${icon} ${e.name}${Math.floor(e.score / 10)}
`;
- });
- listEl.innerHTML = html;
- } catch (e) {}
-}
-
-function compareState(clientObs, serverObs) {
- // 1. Anzahl prüfen
- if (clientObs.length !== serverObs.length) {
- console.error(`🚨 ANZAHL MISMATCH! Client: ${clientObs.length}, Server: ${serverObs.length}`);
+// ==========================================
+// INPUT SENDEN
+// ==========================================
+function sendInput(type, action) {
+ if (socket && socket.readyState === WebSocket.OPEN) {
+ socket.send(JSON.stringify({
+ type: "input",
+ input: action
+ }));
}
+}
+
+// Helper für die Tabelle
+function generateSyncTable(label, clientList, serverList) {
+ if (!serverList) serverList = [];
+
+ console.log(`--- ${label} Analyse (Ping: ${Math.round(currentLatencyMs)}ms) ---`);
const report = [];
- const maxLen = Math.max(clientObs.length, serverObs.length);
- let hasMajorDrift = false;
+ const matchedServerIndices = new Set();
- for (let i = 0; i < maxLen; i++) {
- const cli = clientObs[i];
- const srv = serverObs[i];
+ // 1. Parameter für Latenz-Korrektur berechnen
+ // Damit wir wissen: "Wo MÜSSTE das Server-Objekt auf dem Client sein?"
+ const msPerTick = 50; // Bei 20 TPS
- let drift = 0;
- let status = "✅ OK";
+ // Speed Schätzung (gleiche Formel wie in logic.js)
+ let debugSpeed = 15.0 + (score / 1000.0) * 1.5;
+ if (debugSpeed > 36) debugSpeed = 36;
- // Client Objekt vorbereiten
- let cID = "---";
- let cX = 0;
- if (cli) {
- cID = cli.def.id; // Struktur beachten: cli.def.id
- cX = cli.x;
- }
+ const speedPerMs = debugSpeed / msPerTick;
- // Server Objekt vorbereiten
- let sID = "---";
- let sX = 0;
- if (srv) {
- sID = srv.id; // Struktur vom Server: srv.id
- sX = srv.x;
- }
+ // Pixel, die das Objekt wegen Ping weiter "links" sein müsste
+ const latencyPx = currentLatencyMs * speedPerMs;
- // Vergleich
- if (cli && srv) {
- // IDs unterschiedlich? (z.B. Tisch vs Lehrer)
- if (cID !== sID) {
- status = "❌ ID ERROR";
- hasMajorDrift = true;
- } else {
- drift = cX - sX;
- if (Math.abs(drift) > SYNC_TOLERANCE) {
- status = "⚠️ DRIFT";
- hasMajorDrift = true;
- }
+ // 2. Client Objekte durchgehen
+ clientList.forEach((cObj) => {
+ let bestMatch = null;
+ let bestDist = 9999;
+ let bestSIdx = -1;
+
+ // ID sicherstellen
+ const cID = cObj.def ? cObj.def.id : (cObj.id || "unknown");
+
+ // Passendes Server-Objekt suchen
+ serverList.forEach((sObj, sIdx) => {
+ if (matchedServerIndices.has(sIdx)) return;
+
+ const sID = sObj.id || "unknown";
+
+ // Match Kriterien:
+ // 1. Gleiche ID (oder Plattform)
+ // 2. Nähe (Wir vergleichen hier die korrigierte Position!)
+ const sPosCorrected = sObj.x - latencyPx;
+ const dist = Math.abs(cObj.x - sPosCorrected);
+
+ const isTypeMatch = (label === "Platforms") || (cID === sID);
+
+ // Toleranter Suchradius (500px), falls Drift groß ist
+ if (isTypeMatch && dist < bestDist && dist < 500) {
+ bestDist = dist;
+ bestMatch = sObj;
+ bestSIdx = sIdx;
}
- } else {
- status = "❌ MISSING";
- hasMajorDrift = true;
+ });
+
+ // Datenzeile bauen
+ let serverXRaw = "---";
+ let serverXCorrected = "---";
+ let diffReal = "---";
+ let status = "👻 GHOST (Client only)";
+
+ if (bestMatch) {
+ matchedServerIndices.add(bestSIdx);
+
+ serverXRaw = bestMatch.x;
+ serverXCorrected = bestMatch.x - latencyPx; // Hier rechnen wir den Ping raus
+
+ // Der "Wahrs" Drift: Differenz nach Latenz-Abzug
+ diffReal = cObj.x - serverXCorrected;
+
+ // Status Bestimmung
+ const absDiff = Math.abs(diffReal);
+ if (absDiff < 20) status = "✅ PERFECT";
+ else if (absDiff < 60) status = "🆗 OK";
+ else if (absDiff < 150) status = "⚠️ DRIFT";
+ else status = "🔥 BROKEN";
}
- // In Tabelle eintragen
report.push({
- Index: i,
- Status: status,
- "C-ID": cID,
- "S-ID": sID,
- "C-Pos": cX.toFixed(1),
- "S-Pos": sX.toFixed(1),
- "Drift (px)": drift.toFixed(2)
+ "ID": cID,
+ "Client X": Math.round(cObj.x),
+ "Server X (Raw)": Math.round(serverXRaw),
+ "Server X (Sim)": Math.round(serverXCorrected), // Wo es sein sollte
+ "Diff (Real)": typeof diffReal === 'number' ? Math.round(diffReal) : "---",
+ "Status": status
});
- }
+ });
- // Nur loggen, wenn Fehler da sind oder alle 5 Sekunden (Tick 300)
- if (hasMajorDrift || currentTick % 300 === 0) {
- if (hasMajorDrift) console.warn("--- SYNC PROBLEME GEFUNDEN ---");
- else console.log("--- Sync Check (Routine) ---");
+ // 3. Fehlende Server Objekte finden
+ serverList.forEach((sObj, sIdx) => {
+ if (!matchedServerIndices.has(sIdx)) {
+ // Prüfen, ob es vielleicht einfach noch unsichtbar ist (Zukunft)
+ const sPosCorrected = sObj.x - latencyPx;
+ let status = "❌ MISSING";
- console.table(report); // Das erstellt eine super lesbare Tabelle im Browser
+ if (sPosCorrected > 850) status = "🔮 FUTURE (Buffer)"; // Noch rechts vom Screen
+ if (sPosCorrected < -100) status = "🗑️ OLD (Server lag)"; // Schon links raus
+
+ report.push({
+ "ID": sObj.id || "?",
+ "Client X": "---",
+ "Server X (Raw)": Math.round(sObj.x),
+ "Server X (Sim)": Math.round(sPosCorrected),
+ "Diff (Real)": "---",
+ "Status": status
+ });
+ }
+ });
+
+ // 4. Sortieren nach Position (links nach rechts)
+ report.sort((a, b) => {
+ const valA = (typeof a["Client X"] === 'number') ? a["Client X"] : a["Server X (Sim)"];
+ const valB = (typeof b["Client X"] === 'number') ? b["Client X"] : b["Server X (Sim)"];
+ return valA - valB;
+ });
+
+ if (report.length > 0) console.table(report);
+ else console.log("Leer.");
+}
+
+function sendPhysicsSync(y, vy) {
+ if (socket && socket.readyState === WebSocket.OPEN) {
+ socket.send(JSON.stringify({
+ type: "sync",
+ y: y,
+ vy: vy,
+ tick: currentTick
+ }));
}
}
\ No newline at end of file
diff --git a/static/js/particles.js b/static/js/particles.js
new file mode 100644
index 0000000..e222f0a
--- /dev/null
+++ b/static/js/particles.js
@@ -0,0 +1,88 @@
+// Globale Partikel-Liste (muss in state.js bekannt sein oder hier exportiert)
+// Wir nutzen die globale Variable 'particles' (fügen wir gleich in state.js hinzu)
+
+class Particle {
+ constructor(x, y, type) {
+ this.x = x;
+ this.y = y;
+ this.life = 1.0; // 1.0 = 100% Leben
+ this.type = type; // 'dust', 'sparkle', 'explosion'
+
+ // Zufällige Geschwindigkeit
+ const angle = Math.random() * Math.PI * 2;
+ let speed = Math.random() * 2;
+
+ if (type === 'dust') {
+ // Staub fliegt eher nach oben/hinten
+ this.vx = -2 + Math.random();
+ this.vy = -1 - Math.random();
+ this.decay = 0.05; // Verschwindet schnell
+ this.color = '#ddd';
+ this.size = Math.random() * 4 + 2;
+ }
+ else if (type === 'sparkle') {
+ // Münzen glitzern in alle Richtungen
+ speed = Math.random() * 4 + 2;
+ this.vx = Math.cos(angle) * speed;
+ this.vy = Math.sin(angle) * speed;
+ this.decay = 0.03;
+ this.color = '#ffcc00';
+ this.size = Math.random() * 3 + 1;
+ }
+ else if (type === 'explosion') {
+ // Tod
+ speed = Math.random() * 6 + 2;
+ this.vx = Math.cos(angle) * speed;
+ this.vy = Math.sin(angle) * speed;
+ this.decay = 0.02;
+ this.color = Math.random() > 0.5 ? '#ff4444' : '#ffaa00';
+ this.size = Math.random() * 6 + 3;
+ }
+ }
+
+ update() {
+ this.x += this.vx;
+ this.y += this.vy;
+
+ // Physik
+ if (this.type !== 'sparkle') this.vy += 0.2; // Schwerkraft für Staub/Explosion
+
+ // Reibung
+ this.vx *= 0.95;
+ this.vy *= 0.95;
+
+ this.life -= this.decay;
+ }
+
+ draw(ctx) {
+ ctx.globalAlpha = this.life;
+ ctx.fillStyle = this.color;
+
+ // Quadratische Partikel (schneller zu zeichnen)
+ ctx.fillRect(this.x, this.y, this.size, this.size);
+
+ ctx.globalAlpha = 1.0;
+ }
+}
+
+// --- API ---
+
+function spawnParticles(x, y, type, count = 5) {
+ for(let i=0; i
= 0; i--) {
+ particles[i].update();
+ if (particles[i].life <= 0) {
+ particles.splice(i, 1);
+ }
+ }
+}
+
+function drawParticles() {
+ particles.forEach(p => p.draw(ctx));
+}
\ No newline at end of file
diff --git a/static/js/render.js b/static/js/render.js
index 0b41bdd..7be7ee5 100644
--- a/static/js/render.js
+++ b/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);
}
\ No newline at end of file
diff --git a/static/js/state.js b/static/js/state.js
index 80701ab..cdf9dee 100644
--- a/static/js/state.js
+++ b/static/js/state.js
@@ -1,51 +1,79 @@
-// Globale Status-Variablen
-let gameConfig = null;
-let isLoaded = false;
-let isGameRunning = false;
-let isGameOver = false;
-let sessionID = null;
+// ==========================================
+// GLOBALE STATUS VARIABLEN
+// ==========================================
-let rng = null;
-let score = 0;
-let currentTick = 0;
-let lastSentTick = 0;
-let inputLog = [];
-let isCrouching = false;
+// --- Konfiguration & Flags ---
+let gameConfig = null; // Wird von /api/config geladen
+let isLoaded = false; // Sind Assets geladen?
+let isGameRunning = false; // Läuft der Game Loop?
+let isGameOver = false; // Ist der Spieler tot?
+let sessionID = null; // UUID der aktuellen Session
-// Powerups Client State
+// --- NETZWERK & STREAMING (NEU) ---
+let socket = null; // Die WebSocket Verbindung
+let obstacleBuffer = []; // Warteschlange für kommende Hindernisse
+let platformBuffer = []; // Warteschlange für kommende Plattformen
+
+// --- SPIELZUSTAND ---
+let score = 0; // Aktueller Punktestand (vom Server diktiert)
+let currentTick = 0; // Zeit-Einheit des Spiels
+
+// --- POWERUPS (Client Visuals) ---
let godModeLives = 0;
let hasBat = false;
let bootTicks = 0;
-// Hintergrund
-let currentBgIndex = 0;
-let maxRawBgIndex = 0;
+// --- HINTERGRUND ---
+let maxRawBgIndex = 0; // Welcher Hintergrund wird gezeigt?
-// Tick Time
+// --- GAME LOOP TIMING ---
let lastTime = 0;
let accumulator = 0;
-let lastPowerupTick = -9999;
-let nextSpawnTick = 0;
-// Grafiken
-let sprites = {};
+// --- GRAFIKEN ---
+let sprites = {}; // Cache für Hindernis-Bilder
let playerSprite = new Image();
-let bgSprite = new Image();
-let bgSprites = [];
-// Spiel-Objekte
+let bgSprites = []; // Array der Hintergrund-Bilder
+
+// --- ENTITIES (Render-Listen) ---
let player = {
- x: 50, y: 300, w: 30, h: 50, color: "red",
- vy: 0, grounded: false
+ x: 50,
+ y: 300,
+ w: 30,
+ h: 50,
+ color: "red",
+ vy: 0,
+ grounded: false,
+ prevY: 300
};
+let particles = [];
+
+// Diese Listen werden von logic.js aus dem Buffer gefüllt und von render.js gezeichnet
let obstacles = [];
-let serverObstacles = [];
+let platforms = [];
-// HTML Elemente (Caching)
+// Debug-Daten (optional, falls der Server Debug-Infos schickt)
+let serverObstacles = [];
+let serverPlatforms = [];
+
+let currentLatencyMs = 0; // Aktuelle Latenz in Millisekunden
+let pingInterval = null; // Timer für den Ping
+
+// --- INPUT STATE ---
+let isCrouching = false;
+
+// ==========================================
+// HTML ELEMENTE (Caching)
+// ==========================================
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const container = document.getElementById('game-container');
+
+// UI Elemente
const startScreen = document.getElementById('startScreen');
const startBtn = document.getElementById('startBtn');
const loadingText = document.getElementById('loadingText');
-const gameOverScreen = document.getElementById('gameOverScreen');
\ No newline at end of file
+const gameOverScreen = document.getElementById('gameOverScreen');
+const scoreDisplay = document.getElementById('score');
+const highscoreDisplay = document.getElementById('localHighscore');
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 3dd2515..ead5f01 100644
--- a/static/style.css
+++ b/static/style.css
@@ -362,4 +362,32 @@ input {
@media screen and (orientation: portrait) {
#rotate-overlay { display: flex; }
#game-container { display: none !important; }
+}
+
+/* ... bestehende Styles ... */
+
+#mute-btn {
+ position: fixed;
+ top: 10px;
+ left: 10px;
+ z-index: 100; /* Über allem */
+ background: rgba(0, 0, 0, 0.5);
+ border: 2px solid #555;
+ color: white;
+ font-size: 20px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ cursor: pointer;
+ padding: 0;
+ margin: 0; /* Override default button margin */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+
+#mute-btn:hover {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: white;
}
\ No newline at end of file
diff --git a/types.go b/types.go
index 233c878..bfdc1b5 100644
--- a/types.go
+++ b/types.go
@@ -10,14 +10,46 @@ type ObstacleDef struct {
CanTalk bool `json:"canTalk"`
SpeechLines []string `json:"speechLines"`
YOffset float64 `json:"yOffset"`
+ ImgScale float64 `json:"imgScale"`
+ ImgOffsetX float64 `json:"imgOffsetX"`
+ ImgOffsetY float64 `json:"imgOffsetY"`
+}
+
+type ChunkObstacle struct {
+ ID string `json:"id"`
+ Type string `json:"type"`
+ X float64 `json:"x"`
+ Y float64 `json:"y"`
+ Width float64 `json:"w"`
+ Height float64 `json:"h"`
+ Color string `json:"color"`
+ ImgScale float64 `json:"imgScale"`
+ ImgOffsetX float64 `json:"imgOffsetX"`
+ ImgOffsetY float64 `json:"imgOffsetY"`
+}
+
+type PlatformDef struct {
+ X float64 `json:"x"`
+ Y float64 `json:"y"`
+ Width float64 `json:"w"`
+ Height float64 `json:"h"`
+ Type string `json:"type"`
+}
+
+type ChunkDef struct {
+ ID string `json:"id"`
+ Platforms []PlatformDef `json:"platforms"`
+ Obstacles []ChunkObstacle `json:"obstacles"`
+ TotalWidth int `json:"totalWidth"`
}
type GameConfig struct {
Obstacles []ObstacleDef `json:"obstacles"`
Backgrounds []string `json:"backgrounds"`
+ Chunks []ChunkDef `json:"chunks"`
}
-// Dynamischer State
+// Dynamischer State (Simulation)
type ActiveObstacle struct {
ID string `json:"id"`
Type string `json:"type"`
@@ -27,6 +59,13 @@ type ActiveObstacle struct {
Height float64 `json:"h"`
}
+type ActivePlatform struct {
+ X float64 `json:"x"`
+ Y float64 `json:"y"`
+ Width float64 `json:"w"`
+ Height float64 `json:"h"`
+}
+
// API Requests/Responses
type Input struct {
Tick int `json:"t"`
@@ -49,9 +88,11 @@ type ValidateResponse struct {
Status string `json:"status"`
VerifiedScore int `json:"verifiedScore"`
ServerObs []ActiveObstacle `json:"serverObs"`
+ ServerPlats []ActivePlatform `json:"serverPlats"`
PowerUps PowerUpState `json:"powerups"`
ServerTick int `json:"serverTick"`
NextSpawnTick int `json:"nextSpawnTick"`
+ RngState uint32 `json:"rngState"`
}
type StartResponse struct {
diff --git a/websocket.go b/websocket.go
new file mode 100644
index 0000000..a422e07
--- /dev/null
+++ b/websocket.go
@@ -0,0 +1,308 @@
+package main
+
+import (
+ "log"
+ "math"
+ "net/http"
+ "time"
+
+ "github.com/gorilla/websocket"
+)
+
+const (
+ ServerTickRate = 50 * time.Millisecond
+
+ BufferAhead = 60 // Puffergröße (Zukunft)
+ SpawnXStart = 2000.0 // Spawn Abstand
+)
+
+var upgrader = websocket.Upgrader{
+ CheckOrigin: func(r *http.Request) bool { return true },
+}
+
+// Protokoll
+type WSInputMsg struct {
+ Type string `json:"type"`
+ Input string `json:"input"`
+ Tick int `json:"tick"` // Optional: Client Timestamp für Ping
+ PosY float64 `json:"y"`
+ VelY float64 `json:"vy"`
+}
+
+type WSServerMsg struct {
+ Type string `json:"type"`
+ Obstacles []ActiveObstacle `json:"obstacles"`
+ Platforms []ActivePlatform `json:"platforms"`
+ ServerTick int `json:"serverTick"`
+ Score int `json:"score"`
+ PowerUps PowerUpState `json:"powerups"`
+ SessionID string `json:"sessionId"`
+ Ts int `json:"ts,omitempty"` // Für Pong
+ CurrentSpeed float64 `json:"currentSpeed"`
+}
+
+func handleWebSocket(w http.ResponseWriter, r *http.Request) {
+ conn, err := upgrader.Upgrade(w, r, nil)
+ if err != nil {
+ return
+ }
+ defer conn.Close()
+
+ // 1. Session Init
+ sessionID := "ws-" + time.Now().Format("150405999")
+
+ err = rdb.HSet(ctx, "session:"+sessionID, map[string]interface{}{
+ "score": 0, // Startwert
+ "is_dead": 0,
+ "created_at": time.Now().Format("02.01.2006 15:04"),
+ }).Err()
+
+ if err != nil {
+ log.Println("Redis Init Fehler:", err)
+ return
+ }
+
+ rdb.Expire(ctx, "session:"+sessionID, 24*time.Hour)
+
+ // Session ID senden
+ conn.WriteJSON(WSServerMsg{Type: "init", SessionID: sessionID})
+
+ state := SimState{
+ SessionID: sessionID,
+ RNG: NewRNG(time.Now().UnixNano()),
+ Score: 0,
+ Ticks: 0,
+ PosY: PlayerYBase,
+ NextSpawnTick: 0,
+ }
+
+ // Channel größer machen, damit bei Lag nichts blockiert
+ inputChan := make(chan WSInputMsg, 100)
+ closeChan := make(chan struct{})
+
+ // LESE-ROUTINE
+ go func() {
+ defer close(closeChan)
+ for {
+ var msg WSInputMsg
+ if err := conn.ReadJSON(&msg); err != nil {
+ return
+ }
+ inputChan <- msg
+ }
+ }()
+
+ // GAME LOOP (High Performance)
+ ticker := time.NewTicker(ServerTickRate)
+ defer ticker.Stop()
+
+ // Input State
+ var pendingJump bool
+ var isCrouching bool
+ generatedHeadTick := 0
+
+ for {
+ select {
+ case <-closeChan:
+ return // Client weg
+
+ // WICHTIG: Wir verarbeiten Inputs hier NICHT einzeln,
+ // sondern sammeln sie im Default-Case (siehe unten),
+ // oder nutzen eine nicht-blockierende Schleife.
+ // Aber für einfache Logik reicht select.
+ // Um "Input Lag" zu verhindern, lesen wir den Channel leer:
+
+ case <-ticker.C:
+ // A. INPUTS VERARBEITEN (Alle die angekommen sind!)
+ // Wir loopen solange durch den Channel, bis er leer ist.
+ InputLoop:
+ for {
+ select {
+ case msg := <-inputChan:
+ if msg.Type == "input" {
+ if msg.Input == "JUMP" {
+ pendingJump = true
+ }
+ if msg.Input == "DUCK_START" {
+ isCrouching = true
+ }
+ if msg.Input == "DUCK_END" {
+ isCrouching = false
+ }
+ if msg.Input == "DEATH" {
+ state.IsDead = true
+ }
+
+ }
+ if msg.Type == "ping" {
+ // Sofort Pong zurück (Performance wichtig!)
+ conn.WriteJSON(WSServerMsg{Type: "pong", Ts: msg.Tick})
+ }
+
+ if msg.Type == "sync" {
+
+ diff := math.Abs(state.PosY - msg.PosY)
+
+ if diff < 100.0 {
+ state.PosY = msg.PosY
+ state.VelY = msg.VelY
+ }
+ }
+
+ if msg.Type == "debug" {
+ spd := calculateSpeed(state.Ticks)
+ conn.WriteJSON(WSServerMsg{
+ Type: "debug_sync",
+ ServerTick: state.Ticks,
+ Obstacles: state.Obstacles,
+ Platforms: state.Platforms,
+ Score: state.Score,
+ CurrentSpeed: spd,
+ })
+ log.Printf("🐞 Debug Snapshot an Client gesendet (Tick %d)", state.Ticks)
+ }
+ default:
+ // Channel leer, weiter zur Physik
+ break InputLoop
+ }
+ }
+
+ // B. LIVE SIMULATION (1 Tick)
+ // Jetzt simulieren wir genau EINEN Frame (16ms)
+ state.Ticks++
+ state.Score++ // Score wächst mit der Zeit
+
+ currentSpeed := calculateSpeed(state.Ticks)
+
+ updatePhysics(&state, pendingJump, isCrouching, currentSpeed)
+ pendingJump = false // Jump Trigger reset
+
+ checkCollisions(&state, isCrouching, currentSpeed)
+
+ if state.IsDead {
+ // Score Persistieren
+ rdb.HSet(ctx, "session:"+sessionID, map[string]interface{}{
+ "score": state.Score,
+ "is_dead": 1,
+ })
+ rdb.Expire(ctx, "session:"+sessionID, 24*time.Hour)
+
+ conn.WriteJSON(WSServerMsg{Type: "dead", Score: state.Score})
+ return
+ }
+
+ moveWorld(&state, currentSpeed)
+
+ // C. STREAMING (Zukunft)
+ // Wir generieren nur, wenn der Puffer zur Neige geht
+ targetTick := state.Ticks + BufferAhead
+ var newObs []ActiveObstacle
+ var newPlats []ActivePlatform
+
+ // Um CPU zu sparen, generieren wir max 10 Ticks pro Frame nach
+ loops := 0
+ for generatedHeadTick < targetTick && loops < 10 {
+ generatedHeadTick++
+ loops++
+ o, p := generateFutureObjects(&state, generatedHeadTick, currentSpeed)
+ if len(o) > 0 {
+ newObs = append(newObs, o...)
+ state.Obstacles = append(state.Obstacles, o...)
+ }
+ if len(p) > 0 {
+ newPlats = append(newPlats, p...)
+ state.Platforms = append(state.Platforms, p...)
+ }
+ }
+
+ // D. SENDEN (Effizienz)
+ // Nur senden wenn Daten da sind ODER alle 15 Frames (Heartbeat/Score Sync)
+ if len(newObs) > 0 || len(newPlats) > 0 || state.Ticks%15 == 0 {
+ msg := WSServerMsg{
+ Type: "chunk",
+ ServerTick: state.Ticks,
+ Score: state.Score,
+ Obstacles: newObs,
+ Platforms: newPlats,
+ PowerUps: PowerUpState{
+ GodLives: state.GodLives, HasBat: state.HasBat, BootTicks: state.BootTicks,
+ },
+ }
+ conn.WriteJSON(msg)
+ }
+ }
+ }
+}
+
+// ... (generateFutureObjects bleibt gleich wie vorher) ...
+func generateFutureObjects(s *SimState, tick int, speed float64) ([]ActiveObstacle, []ActivePlatform) {
+ var createdObs []ActiveObstacle
+ var createdPlats []ActivePlatform
+
+ if s.NextSpawnTick == 0 {
+ s.NextSpawnTick = tick + 50
+ }
+
+ if tick >= s.NextSpawnTick {
+ spawnX := SpawnXStart
+
+ chunkCount := len(defaultConfig.Chunks)
+ if chunkCount > 0 && s.RNG.NextFloat() > 0.8 {
+ idx := int(s.RNG.NextRange(0, float64(chunkCount)))
+ chunk := defaultConfig.Chunks[idx]
+
+ for _, p := range chunk.Platforms {
+ createdPlats = append(createdPlats, ActivePlatform{X: spawnX + p.X, Y: p.Y, Width: p.Width, Height: p.Height})
+ }
+ for _, o := range chunk.Obstacles {
+ createdObs = append(createdObs, ActiveObstacle{ID: o.ID, Type: o.Type, X: spawnX + o.X, Y: o.Y, Width: o.Width, Height: o.Height})
+ }
+
+ width := chunk.TotalWidth
+ if width == 0 {
+ width = 2000
+ }
+ s.NextSpawnTick = tick + int(float64(width)/speed)
+
+ } else {
+ // Random Logic
+ gap := 400 + int(s.RNG.NextRange(0, 500))
+ s.NextSpawnTick = tick + int(float64(gap)/speed)
+
+ defs := defaultConfig.Obstacles
+ if len(defs) > 0 {
+ // Boss Check
+ isBoss := (tick % 1500) > 1200
+ var pool []ObstacleDef
+ for _, d := range defs {
+ if isBoss {
+ if d.ID == "principal" || d.ID == "trashcan" {
+ pool = append(pool, d)
+ }
+ } else {
+ if d.ID != "principal" {
+ pool = append(pool, d)
+ }
+ }
+ }
+
+ def := s.RNG.PickDef(pool)
+ if def != nil {
+ // RNG Calls to keep sync (optional now, but good practice)
+ if def.CanTalk && s.RNG.NextFloat() > 0.7 {
+ }
+ if def.Type == "powerup" && s.RNG.NextFloat() > 0.1 {
+ def = nil
+ }
+
+ if def != nil {
+ createdObs = append(createdObs, ActiveObstacle{
+ ID: def.ID, Type: def.Type, X: spawnX, Y: GroundY - def.Height - def.YOffset, Width: def.Width, Height: def.Height,
+ })
+ }
+ }
+ }
+ }
+ }
+ return createdObs, createdPlats
+}