add music, better sync, particles

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');
+const gameOverScreen = document.getElementById('gameOverScreen');
+const scoreDisplay = document.getElementById('score');
+const highscoreDisplay = document.getElementById('localHighscore');