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
This commit is contained in:
VariableVince
2026-05-22 11:31:06 +02:00
committed by GitHub
parent 40c23ed5dc
commit ff11d6b8d1
3 changed files with 5 additions and 4 deletions
@@ -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);
+1 -1
View File
@@ -161,7 +161,7 @@
"outlineUsePlayerColor": false,
"fillUsePlayerColor": true,
"emojiRowOffset": 1.4,
"statusRowOffset": 2.5
"statusRowOffset": 1.4
},
"fx": {
"shockwaveRingWidth": 0.04,
@@ -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);