From ff11d6b8d17dd5af5203837ffb39ab7b9e697e12 Mon Sep 17 00:00:00 2001
From: VariableVince <24507472+VariableVince@users.noreply.github.com>
Date: Fri, 22 May 2026 11:31:06 +0200
Subject: [PATCH] WebGL: show status icons closer above names again and emoji
 on top (#3983)

## Description:

In the WebGL implementation, room was reserved for emoji icon between
the status icons and the name.. This is a regression from the HTML
NameLayer and it looks weird having that space sit there unused the
majority of the time when no emoji is shown.

Show status icons closer above names again.

And when emoji icon is shown shortly, display it in place of the other
icons (with the HTML NameLayer it would be drawn on top of the other
icons but that could look messy and it's only for a short time anyway).

Not addressed in this PR: icon size is different from before WebGL
implementation, they seem smaller.

**BEFORE (after initial WebGL implementation):**
<img width="1007" height="577" alt="Icons too high up because room is
kept for emoji while on canvas they where stacked"
src="https://github.com/user-attachments/assets/ca6937c8-e265-467d-a8f5-1424540da1c1"
/>

**AFTER:**
<img width="816" height="538" alt="Icons closer and stacked again just
their size needs attention later on"
src="https://github.com/user-attachments/assets/8a700d23-ea82-4b61-b897-109dbd0e3a32"
/>

<img width="1878" height="758" alt="Icons closer and stacked again just
their size needs attention later on B"
src="https://github.com/user-attachments/assets/f6502ad1-8a6a-4dd8-80a1-7f0f2ed590a3"
/>

<img width="443" height="335" alt="Emoji replaces normal status icons
this was after emoji was just shown"
src="https://github.com/user-attachments/assets/a8b35385-08d1-4c00-9881-9607d880048e"
/>


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

tryout33
---
 src/client/render/gl/passes/name-pass/index.ts          | 2 +-
 src/client/render/gl/render-settings.json               | 2 +-
 src/client/render/gl/shaders/name/status-icon.vert.glsl | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/client/render/gl/passes/name-pass/index.ts b/src/client/render/gl/passes/name-pass/index.ts
index 10598307c..b9fd51c00 100644
--- a/src/client/render/gl/passes/name-pass/index.ts
+++ b/src/client/render/gl/passes/name-pass/index.ts
@@ -546,8 +546,8 @@ export class NamePass {
       this.maxPlayers,
       ambient,
     );
-    this.iconProgram.draw(cameraMatrix, this.settings, this.vao);
     this.statusIconProgram.draw(cameraMatrix, this.settings, this.vao);
+    this.iconProgram.draw(cameraMatrix, this.settings, this.vao);
 
     if (this.settings.passEnabled.nameDebug) {
       this.debugProgram.draw(cameraMatrix, this.settings, this.vao);
diff --git a/src/client/render/gl/render-settings.json b/src/client/render/gl/render-settings.json
index 14d9a7225..9786f09fb 100644
--- a/src/client/render/gl/render-settings.json
+++ b/src/client/render/gl/render-settings.json
@@ -161,7 +161,7 @@
     "outlineUsePlayerColor": false,
     "fillUsePlayerColor": true,
     "emojiRowOffset": 1.4,
-    "statusRowOffset": 2.5
+    "statusRowOffset": 1.4
   },
   "fx": {
     "shockwaveRingWidth": 0.04,
diff --git a/src/client/render/gl/shaders/name/status-icon.vert.glsl b/src/client/render/gl/shaders/name/status-icon.vert.glsl
index dd5c6af27..561751ba4 100644
--- a/src/client/render/gl/shaders/name/status-icon.vert.glsl
+++ b/src/client/render/gl/shaders/name/status-icon.vert.glsl
@@ -85,10 +85,11 @@ void main() {
   // Read player data
   vec4 pd0 = texelFetch(uPlayerData, ivec2(0, playerIdx), 0); // srcX, srcY, srcScale, startTime
   vec4 pd1 = texelFetch(uPlayerData, ivec2(1, playerIdx), 0); // tgtX, tgtY, tgtScale, alive
+  vec4 pd4 = texelFetch(uPlayerData, ivec2(4, playerIdx), 0); // flagIdx, emojiIdx, [free], [free]
   vec4 pd7 = texelFetch(uPlayerData, ivec2(7, playerIdx), 0); // nukeTargetsMe, traitorRemainingTicks, allianceFraction, [free]
 
-  // Early out: dead player
-  if (pd1.w <= 0.0) {
+  // Early out: dead player OR emoji is active
+  if (pd1.w <= 0.0 || pd4.y >= 0.0) {
     gl_Position = vec4(0.0);
     vUV = vec2(0.0);
     vLocalUV = vec2(0.0);