Merge pull request #324 from pap-24/badges-in-spectate-menu

Badge display in spectate menu (uiManager.ts & game.css)
HasangerGames · Jun 5, 2024 · e0de4d6 · e0de4d6
2 parents c277147 + 32a0e76
commit e0de4d6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/client/src/scripts/managers/uiManager.ts b/client/src/scripts/managers/uiManager.ts
@@ -304,8 +304,16 @@ export class UIManager {
         if (data.dirty.id) {
             this.game.spectating = data.spectating;
             if (data.spectating) {
+                // Read the badge.
+                const badge = this.getPlayerBadge(data.id);
+
+                // Badge HTML-string
+                const badgeText = badge ? `<img class="badge-icon" src="./img/game/badges/${badge.idString}.svg" alt="${badge.name} badge">` : "";
+
                 $("#game-over-overlay").fadeOut();
-                $("#spectating-msg-player").html(this.getPlayerName(data.id));
+
+                // Player Name + Badge.
+                $("#spectating-msg-player").html(this.getPlayerName(data.id) + badgeText);
             }
             $("#spectating-container").toggle(data.spectating);
         }

diff --git a/client/src/scss/pages/client/game.scss b/client/src/scss/pages/client/game.scss
@@ -759,7 +759,7 @@
 
 #spectating-msg {
     text-align: center;
-    display: flex;
+    /*display: flex; - Not needed.*/
 
     font-weight: bold;
     font-size: 30px;
@@ -770,7 +770,23 @@
     }
 
     #spectating-msg-player {
-        margin-left: 8px;
+        display: inline; /* Changed from "flex" to "inline". */
+        margin-left: 3px; /* Changed. (Original is 8px) */
+    }
+
+    /* Added. */
+    .badge-icon {
+        vertical-align: middle;
+        width: 30px;
+        height: 30px;
+        margin-left: 1px;
+        margin-right: 4px;
+        margin-bottom: 3px;
+
+        @media screen and (max-width: $screen_large) {
+            width: 16px;
+            height: 16px;
+        }
     }
 }