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);
+        }
+    });
+};

cmd/client/web/index.html

@@ -293,6 +293,39 @@
         </div>
     </div>
 
+    <!-- PRESENTATION SCREEN -->
+    <div id="presentationScreen" class="overlay-screen hidden presentation-mode">
+        <div class="presi-background"></div>
+        <div class="presi-scanlines"></div>
+        
+        <div class="presi-header">
+            <h1>PRESENTATION MODE</h1>
+            <div id="presiRoomInfo">
+                <span id="presiRoomCode">XXXXX</span>
+            </div>
+        </div>
+
+        <div class="presi-content">
+            <div id="presiQuoteBox">
+                <p id="presiQuoteText">"Lade legendäre Sprüche..."</p>
+                <p id="presiQuoteAuthor">- Unbekannt</p>
+            </div>
+        </div>
+
+        <div class="presi-qr-container">
+            <div id="presiQRCode"></div>
+            <p>SCANNEN ZUM MITMACHEN!</p>
+        </div>
+
+        <div class="presi-assets-track"></div>
+        
+        <div class="presi-players-layer"></div>
+
+        <div class="presi-footer">
+            DRÜCKE [F1] ZUM BEENDEN
+        </div>
+    </div>
+
     <!-- LOADING SCREEN -->
     <div id="loading" class="loading-screen">
         <div class="spinner"></div>

cmd/client/web/style.css

@@ -165,3 +165,176 @@ input[type=range]{width:100%;max-width:300px}
     #rotate-overlay{display:flex}
     #game-container{display:none!important}
 }
+
+/* PRESENTATION MODE */
+.presentation-mode {
+    background: #0a0f1e!important;
+    flex-direction: column;
+    padding: 0!important;
+    overflow: hidden;
+}
+
+.presi-background {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: radial-gradient(circle at center, #1a2a4a 0%, #0a0f1e 100%);
+    z-index: -2;
+}
+
+.presi-scanlines {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 100, 0.06));
+    background-size: 100% 4px, 3px 100%;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.presi-header {
+    margin-top: 40px;
+    text-align: center;
+    z-index: 5;
+}
+
+.presi-header h1 {
+    font-size: 36px;
+    color: #ff0;
+    text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
+    margin: 0;
+}
+
+#presiRoomInfo {
+    margin-top: 10px;
+    background: rgba(0, 0, 0, 0.6);
+    padding: 5px 15px;
+    border: 2px solid #ff0;
+    display: inline-block;
+}
+
+#presiRoomCode {
+    font-size: 24px;
+    color: #ff0;
+    letter-spacing: 2px;
+}
+
+.presi-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    z-index: 5;
+}
+
+#presiQuoteBox {
+    max-width: 800px;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 30px;
+    border-radius: 10px;
+    border-left: 5px solid #ff0;
+}
+
+#presiQuoteText {
+    font-family: sans-serif;
+    font-size: 28px;
+    line-height: 1.4;
+    font-style: italic;
+    margin-bottom: 20px;
+}
+
+#presiQuoteAuthor {
+    color: #ffcc00;
+    font-size: 18px;
+}
+
+.presi-qr-container {
+    position: absolute;
+    bottom: 40px;
+    left: 40px;
+    background: white;
+    padding: 15px;
+    border-radius: 5px;
+    text-align: center;
+    z-index: 20;
+    box-shadow: 0 0 20px rgba(0,0,0,0.5);
+}
+
+#presiQRCode {
+    width: 150px;
+    height: 150px;
+}
+
+#presiQRCode img {
+    width: 100%;
+    height: 100%;
+}
+
+.presi-qr-container p {
+    color: black;
+    font-size: 10px;
+    margin-top: 10px;
+    font-weight: bold;
+}
+
+.presi-assets-track {
+    position: absolute;
+    bottom: 120px;
+    width: 100%;
+    height: 100px;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.presi-asset {
+    position: absolute;
+    bottom: 0;
+    transition: transform 0.1s linear;
+}
+
+.presi-asset img {
+    display: block;
+    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
+}
+
+.presi-players-layer {
+    position: absolute;
+    top: 0; left: 0; width: 100%; height: 100%;
+    pointer-events: none;
+    z-index: 3;
+}
+
+.presi-player {
+    position: absolute;
+    transition: all 0.05s linear;
+}
+
+.presi-player-emote {
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 30px;
+    animation: emotePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes emotePop {
+    0% { transform: translateX(-50%) scale(0); opacity: 0; }
+    70% { transform: translateX(-50%) scale(1.2); opacity: 1; }
+    100% { transform: translateX(-50%) scale(1); opacity: 1; }
+}
+
+.presi-footer {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    color: rgba(255, 255, 255, 0.4);
+    font-size: 10px;
+}
+
+/* Animations */
+@keyframes assetSlide {
+    from { transform: translateX(100vw); }
+    to { transform: translateX(-200px); }
+}
+