refine visuals and interactions: remove footer, enhance CSS styles, improve player and emote handling logic, and adjust asset scaling and animations

cmd/client/web/game.js

@@ -1060,14 +1060,13 @@ window.onPresentationUpdate = function(players) {
         if (!el) {
             el = document.createElement('div');
             el.className = 'presi-player';
-            el.innerHTML = `<img src="assets/playernew.png" style="height: 80px;">`;
+            el.innerHTML = `<img src="assets/playernew.png" style="height: 120px; width: auto; object-fit: contain;">`;
             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 screenX = ((p.x + 1280000) % 1280) / 1280 * window.innerWidth;
         const screenY = (p.y / 720) * window.innerHeight;
         
         el.style.left = `${screenX}px`;
@@ -1075,23 +1074,22 @@ window.onPresentationUpdate = function(players) {
 
         // 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');
+            if (el.lastEmoteState !== p.state) {
+                el.lastEmoteState = p.state;
+                const emoteNum = p.state.split('_')[1];
+                const emotes = ["❤️", "😂", "😡", "👍"];
+                const emoji = emotes[parseInt(emoteNum)-1] || "❓";
+                const oldEmote = el.querySelector('.presi-player-emote');
+                if (oldEmote) oldEmote.remove();
+                const emoteEl = document.createElement('div');
                 emoteEl.className = 'presi-player-emote';
+                emoteEl.textContent = emoji;
                 el.appendChild(emoteEl);
+                setTimeout(() => {
+                    if (emoteEl.parentNode === el) emoteEl.remove();
+                    el.lastEmoteState = ""; 
+                }, 2000);
             }
-            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

@@ -320,10 +320,6 @@
         <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 -->

cmd/client/web/style.css

@@ -227,28 +227,32 @@ input[type=range]{width:100%;max-width:300px}
 }
 
 #presiQuoteBox {
-    max-width: 800px;
+    max-width: 900px;
     text-align: center;
-    background: #2c3e50; /* Solid Mono Blue-Grey */
-    padding: 30px;
-    border-radius: 10px;
-    border: 4px solid #ff0;
-    box-shadow: 10px 10px 0px rgba(0,0,0,0.5);
+    background: #2c3e50; /* Solid Blue-Grey */
+    padding: 50px;
+    border-radius: 15px;
+    border: 6px solid #ff0;
+    box-shadow: 15px 15px 0px rgba(0,0,0,0.6);
+    z-index: 100;
 }
 
 #presiQuoteText {
     font-family: sans-serif;
-    font-size: 24px;
+    font-size: 36px; /* Larger font */
     line-height: 1.4;
     font-style: italic;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
     color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
 }
 
 #presiQuoteAuthor {
     color: #ffcc00;
-    font-size: 18px;
+    font-size: 24px;
     font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 2px;
 }
 
 .presi-qr-container {
@@ -285,7 +289,7 @@ input[type=range]{width:100%;max-width:300px}
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: 150px;
+    height: 200px;
     pointer-events: none;
     z-index: 2;
     overflow: hidden;
@@ -293,7 +297,7 @@ input[type=range]{width:100%;max-width:300px}
 
 .presi-asset {
     position: absolute;
-    bottom: 20px;
+    bottom: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -302,6 +306,8 @@ input[type=range]{width:100%;max-width:300px}
 
 .presi-asset img {
     display: block;
+    max-height: 100px; /* Limit height */
+    max-width: 150px;  /* Limit width */
     object-fit: contain;
     filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
 }
@@ -310,40 +316,43 @@ input[type=range]{width:100%;max-width:300px}
     position: absolute;
     top: 0; left: 0; width: 100%; height: 100%;
     pointer-events: none;
-    z-index: 3;
+    z-index: 200; /* Above everything */
 }
 
 .presi-player {
     position: absolute;
-    transition: all 0.05s linear;
+    z-index: 210;
+}
+
+.presi-player img {
+    display: block;
+    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
 }
 
 .presi-player-emote {
     position: absolute;
-    top: -40px;
+    top: -60px; /* Higher up */
     left: 50%;
     transform: translateX(-50%);
-    font-size: 30px;
+    font-size: 50px; /* Much larger emotes */
+    z-index: 250;
+    text-shadow: 0 0 10px rgba(0,0,0,0.5);
     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; }
+    70% { transform: translateX(-50%) scale(1.5); 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;
+    display: none; /* Hidden as requested */
 }
 
 /* Animations */
 @keyframes assetSlide {
-    from { transform: translateX(100vw); }
-    to { transform: translateX(-200px); }
+    from { transform: translateX(110vw); }
+    to { transform: translateX(-300px); }
 }