big Performance fix

static/js/state.js

@@ -1,35 +1,59 @@
+// ==========================================
+// GLOBALE STATUS VARIABLEN
+// ==========================================
 
-let gameConfig = null;
-let isLoaded = false;
-let isGameRunning = false;
-let isGameOver = false;
-let sessionID = null;
+// --- 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 (vom Server)
 
-let socket = null;
-let obstacleBuffer = [];
-let platformBuffer = [];
+// --- NETZWERK & STREAMING ---
+let socket = null;          // WebSocket Verbindung
+let obstacleBuffer = [];    // Warteschlange Hindernisse (vom Server)
+let platformBuffer = [];    // Warteschlange Plattformen (vom Server)
 
-let score = 0;
-let currentTick = 0;
+// --- LATENZ & SYNC ---
+let currentLatencyMs = 0;   // Gemessene One-Way Latenz
+let pingInterval = null;    // Interval ID für den Ping-Loop
 
+// --- PIXI JS (RENDERING) ---
+let app = null;             // Die Pixi Application
+let bgLayer = null;         // Container: Hintergrund
+let gameLayer = null;       // Container: Spielwelt (Player, Items)
+let debugLayer = null;      // Graphics: Hitboxen
 
+// --- CACHING (PIXI SPRITES) ---
+// Map<LogikObjekt, PIXI.Sprite>
+// Wir ordnen jedem Logik-Objekt ein festes Sprite zu, statt neu zu erstellen
+const spriteCache = new Map();
+const platformCache = new Map();
+
+// Referenzen für statische Sprites
+let pixiPlayer = null;
+let bgSprite = null;
+
+// --- SPIELZUSTAND ---
+let score = 0;              // Aktueller Score
+let currentTick = 0;        // Zeitbasis (Synchronisiert mit Server)
+
+// --- POWERUPS (Client Visuals) ---
 let godModeLives = 0;
 let hasBat = false;
 let bootTicks = 0;
 
+// --- HINTERGRUND LOGIK ---
+let maxRawBgIndex = 0;      // Welches BG Bild ist dran?
 
-let maxRawBgIndex = 0;
-
-
+// --- GAME LOOP TIMING ---
 let lastTime = 0;
 let accumulator = 0;
 
+// --- GRAFIKEN & EFFEKTE ---
+let particles = [];         // Array für Partikel-Effekte
 
-let sprites = {};
-let playerSprite = new Image();
-let bgSprites = [];
-
-
+// --- ENTITIES (Render-Listen) ---
 let player = {
     x: 50,
     y: 300,
@@ -38,30 +62,30 @@ let player = {
     color: "red",
     vy: 0,
     grounded: false,
+
+    // WICHTIG für Interpolation:
     prevY: 300
 };
-let particles = [];
-
-
 
+// Diese Listen werden von logic.js gefüllt und von render.js gezeichnet
 let obstacles = [];
 let platforms = [];
 
-
+// Debug-Daten vom Server (für das Overlay)
 let serverObstacles = [];
 let serverPlatforms = [];
 
-let currentLatencyMs = 0;
-let pingInterval = null;
-
-
+// --- INPUT STATE ---
 let isCrouching = false;
 
-
-const canvas = document.getElementById('gameCanvas');
-const ctx = canvas.getContext('2d');
+// ==========================================
+// HTML ELEMENTE (DOM Caching)
+// ==========================================
 const container = document.getElementById('game-container');
 
+// Hinweis: 'canvas' und 'ctx' gibt es nicht mehr, da PixiJS das verwaltet!
+
+// UI Elemente
 const startScreen = document.getElementById('startScreen');
 const startBtn = document.getElementById('startBtn');
 const loadingText = document.getElementById('loadingText');