diff --git a/cmd/client/web/game.js b/cmd/client/web/game.js index 4d3f03c..1e86def 100644 --- a/cmd/client/web/game.js +++ b/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 = ``; + el.innerHTML = ``; 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); } }); }; diff --git a/cmd/client/web/index.html b/cmd/client/web/index.html index 40131ea..ec927da 100644 --- a/cmd/client/web/index.html +++ b/cmd/client/web/index.html @@ -320,10 +320,6 @@
- - diff --git a/cmd/client/web/style.css b/cmd/client/web/style.css index bc1c7d0..8669272 100644 --- a/cmd/client/web/style.css +++ b/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); } }