add presentation mode enhancements: refine visuals, integrate HTML-based interface for presentation mode, align assets display and player states, and handle real-time JS callbacks

cmd/client/web/game.js

@@ -17,10 +17,16 @@ const UIState = {
     COOP_MENU: 'coop_menu',
     MY_CODES: 'mycodes',
     IMPRESSUM: 'impressum',
-    DATENSCHUTZ: 'datenschutz'
+    DATENSCHUTZ: 'datenschutz',
+    PRESENTATION: 'presentation'
 };
 
 let currentUIState = UIState.LOADING;
+let assetsManifest = null;
+let presiAssets = [];
+let presiPlayers = new Map();
+let presiQuoteInterval = null;
+let presiAssetInterval = null;
 
 // Central UI State Manager
 function setUIState(newState) {
@@ -133,6 +139,15 @@ function setUIState(newState) {
             }
             document.getElementById('datenschutzMenu').classList.remove('hidden');
             break;
+
+        case UIState.PRESENTATION:
+            if (canvas) {
+                canvas.classList.remove('game-active');
+                canvas.style.visibility = 'hidden';
+            }
+            document.getElementById('presentationScreen').classList.remove('hidden');
+            startPresentationLogic();
+            break;
     }
 }
 
@@ -919,3 +934,138 @@ window.restartGame = restartGame;
 initWASM();
 
 console.log('🎮 Game.js loaded - Retro Edition');
+
+// ===== PRESENTATION MODE LOGIC =====
+
+function startPresentationLogic() {
+    if (presiQuoteInterval) clearInterval(presiQuoteInterval);
+    if (presiAssetInterval) clearInterval(presiAssetInterval);
+
+    // Initial Quote
+    showNextPresiQuote();
+    presiQuoteInterval = setInterval(showNextPresiQuote, 8000);
+
+    // Asset Spawning
+    presiAssetInterval = setInterval(spawnPresiAsset, 2500);
+}
+
+function showNextPresiQuote() {
+    if (!SPRUECHE || SPRUECHE.length === 0) return;
+    const q = SPRUECHE[Math.floor(Math.random() * SPRUECHE.length)];
+    document.getElementById('presiQuoteText').textContent = `"${q.text}"`;
+    document.getElementById('presiQuoteAuthor').textContent = `- ${q.author}`;
+    
+    // Simple pulse effect
+    const box = document.getElementById('presiQuoteBox');
+    box.style.animation = 'none';
+    box.offsetHeight; // trigger reflow
+    box.style.animation = 'emotePop 0.8s ease-out';
+}
+
+async function spawnPresiAsset() {
+    if (!assetsManifest) {
+        try {
+            const resp = await fetchWithCache('assets/assets.json');
+            const data = await resp.json();
+            assetsManifest = data.assets;
+        } catch(e) { return; }
+    }
+
+    const track = document.querySelector('.presi-assets-track');
+    if (!track) return;
+
+    const assetKeys = Object.keys(assetsManifest).filter(k => 
+        ['player', 'coin', 'eraser', 'pc-trash', 'godmode', 'jumpboost', 'magnet', 'baskeball', 'desk'].includes(k)
+    );
+    const key = assetKeys[Math.floor(Math.random() * assetKeys.length)];
+    const def = assetsManifest[key];
+
+    const el = document.createElement('div');
+    el.className = 'presi-asset';
+    
+    const img = document.createElement('img');
+    img.src = `assets/${def.Filename || 'playernew.png'}`;
+    
+    // Scale based on JSON and screen height
+    const baseScale = def.Scale || 1.0;
+    const responsiveScale = (window.innerHeight / 720) * 3.0; // scale up for presentation
+    img.style.transform = `scale(${baseScale * responsiveScale})`;
+    
+    el.appendChild(img);
+    track.appendChild(el);
+
+    const duration = 12 + Math.random() * 8;
+    el.style.animation = `assetSlide ${duration}s linear forwards`;
+    
+    // Add random vertical bobbing
+    el.style.bottom = `${Math.random() * 40}px`;
+
+    setTimeout(() => el.remove(), duration * 1000);
+}
+
+// WASM Callbacks for Presentation
+window.onPresentationStarted = function(roomID, qrBase64) {
+    console.log('📺 Presentation started:', roomID);
+    document.getElementById('presiRoomCode').textContent = roomID;
+    const qrEl = document.getElementById('presiQRCode');
+    if (qrEl) qrEl.innerHTML = qrBase64 ? `<img src="${qrBase64}">` : '';
+    setUIState(UIState.PRESENTATION);
+};
+
+window.onPresentationUpdate = function(players) {
+    if (currentUIState !== UIState.PRESENTATION) return;
+    
+    const layer = document.querySelector('.presi-players-layer');
+    if (!layer) return;
+
+    const currentIds = new Set(players.map(p => p.id));
+
+    // Remove left players
+    for (let [id, el] of presiPlayers) {
+        if (!currentIds.has(id)) {
+            el.remove();
+            presiPlayers.delete(id);
+        }
+    }
+
+    // Update or add players
+    players.forEach(p => {
+        let el = presiPlayers.get(p.id);
+        if (!el) {
+            el = document.createElement('div');
+            el.className = 'presi-player';
+            el.innerHTML = `<img src="assets/playernew.png" style="height: 80px;">`;
+            layer.appendChild(el);
+            presiPlayers.set(p.id, el);
+        }
+
+        // Map world coords to screen
+        // World width is roughly 1280, height 720
+        const screenX = (p.x % 1280) / 1280 * window.innerWidth;
+        const screenY = (p.y / 720) * window.innerHeight;
+        
+        el.style.left = `${screenX}px`;
+        el.style.top = `${screenY}px`;
+
+        // Handle Emotes
+        if (p.state && p.state.startsWith('EMOTE_')) {
+            const emoteNum = p.state.split('_')[1];
+            const emotes = ["❤️", "😂", "😡", "👍"];
+            const emoji = emotes[parseInt(emoteNum)-1] || "❓";
+            
+            let emoteEl = el.querySelector('.presi-player-emote');
+            if (!emoteEl) {
+                emoteEl = document.createElement('div');
+                emoteEl.className = 'presi-player-emote';
+                el.appendChild(emoteEl);
+            }
+            emoteEl.textContent = emoji;
+            
+            // Auto-remove emote text after 2s
+            clearTimeout(el.emoteTimeout);
+            el.emoteTimeout = setTimeout(() => {
+                if (emoteEl) emoteEl.remove();
+            }, 2000);
+        }
+    });
+};