From 3445d840e54ae5aeee2d22d8bd0e6c9cf1ad8ce3 Mon Sep 17 00:00:00 2001
From: pap-24 <71824952+pap-24@users.noreply.github.com>
Date: Wed, 29 May 2024 00:21:16 +0300
Subject: [PATCH 1/6] Feature: Player badges in spectate menu

---
 client/src/scripts/managers/uiManager.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/scripts/managers/uiManager.ts b/client/src/scripts/managers/uiManager.ts
index dbfb242a9..da718e91b 100644
--- a/client/src/scripts/managers/uiManager.ts
+++ b/client/src/scripts/managers/uiManager.ts
@@ -301,11 +301,17 @@ export class UIManager {
     updateUI(data: PlayerData): void {
         if (data.id !== undefined) this.game.activePlayerID = data.id;
 
+        const badge = this.getPlayerBadge(data.id);
+
         if (data.dirty.id) {
             this.game.spectating = data.spectating;
             if (data.spectating) {
+
+                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));
+
+                $("#spectating-msg-player").html(this.getPlayerName(data.id) + badgeText);
             }
             $("#spectating-container").toggle(data.spectating);
         }

From 8854dd54993750881813f24a8b5961a80465c954 Mon Sep 17 00:00:00 2001
From: pap-24 <71824952+pap-24@users.noreply.github.com>
Date: Wed, 29 May 2024 00:21:47 +0300
Subject: [PATCH 2/6] Badges in spectate menu

---
 client/src/scss/pages/client/game.scss | 43 +++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/client/src/scss/pages/client/game.scss b/client/src/scss/pages/client/game.scss
index 171ae3c23..7a7321f5e 100644
--- a/client/src/scss/pages/client/game.scss
+++ b/client/src/scss/pages/client/game.scss
@@ -100,6 +100,7 @@
         border-radius: 5px;
     }
 }
+
 #debug-hud {
     //margin-top: -10px;
     text-shadow: 1px 1px 2px black;
@@ -109,6 +110,7 @@
         font-size: 14px;
     }
 }
+
 #gas-timer {
     width: 80px;
     padding: 6px 9px 6px 9px;
@@ -248,7 +250,9 @@
         }
 
         @media screen and (max-width: $screen_large) {
-            .teammate-name, .teammate-badge {
+
+            .teammate-name,
+            .teammate-badge {
                 display: none;
             }
         }
@@ -266,6 +270,7 @@
     border-radius: 8px;
     padding: 8px 12px 8px 12px;
     gap: 10px;
+
     @media screen and (max-width: $screen_large) {
         top: 7px;
         right: 80px;
@@ -353,12 +358,15 @@
     #kill-feed {
         margin-right: 180px;
         margin-top: -10px;
+
         @media screen and (max-width: $screen_large) {
             margin-right: 80px;
         }
-        @media screen and (max-width: $screen_medium) and (max-height: 500px){
+
+        @media screen and (max-width: $screen_medium) and (max-height: 500px) {
             margin-top: -40px;
         }
+
         .kill-feed-item {
             max-width: fit-content;
             padding: 8px 10px 8px 10px;
@@ -759,7 +767,6 @@
 
 #spectating-msg {
     text-align: center;
-    display: flex;
 
     font-weight: bold;
     font-size: 30px;
@@ -770,8 +777,28 @@
     }
 
     #spectating-msg-player {
-        margin-left: 8px;
+        display: inline;
+        margin-left: 3px; /* Changed.*/
+    }
+
+    /* --------------------- */
+    /* Added. */
+    /* --------------------- */
+    .badge-icon {
+        vertical-align: middle;
+        width: 30px;
+        height: 30px;
+        margin-left: 1px;
+        margin-right: 4px;
+
+        @media screen and (max-width: $screen_large) {
+            width: 16px;
+            height: 16px;
+        }
     }
+
+    /* --------------------- */
+
 }
 
 #spectating-buttons-container {
@@ -796,6 +823,7 @@
     #btn-spectate-menu {
         width: 100%;
     }
+
     #btn-spectate-replay {
         width: 100%;
     }
@@ -1034,7 +1062,8 @@
             width: 110px;
         }
 
-        .slot-number, .item-name {
+        .slot-number,
+        .item-name {
             right: 8px !important;
         }
 
@@ -1088,15 +1117,18 @@
         justify-content: end;
 
         bottom: 50px;
+
         @media screen and (max-width: $screen_medium) {
             bottom: 125px;
             left: -2px;
         }
+
         @media screen and (max-height: 400px) {
             bottom: 10px;
         }
     }
 }
+
 .items-container#ammo {
     flex-direction: row-reverse;
     right: 5px;
@@ -1131,6 +1163,7 @@
         }
     }
 }
+
 .items-container {
     position: absolute;
     top: 120px;

From 33f96d723475a878f5f8090ad823db8e1215952d Mon Sep 17 00:00:00 2001
From: pap-24 <71824952+pap-24@users.noreply.github.com>
Date: Wed, 29 May 2024 00:22:36 +0300
Subject: [PATCH 3/6] CSS beautifier annoying

---
 client/src/scss/pages/client/game.scss | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/client/src/scss/pages/client/game.scss b/client/src/scss/pages/client/game.scss
index 7a7321f5e..07da301b1 100644
--- a/client/src/scss/pages/client/game.scss
+++ b/client/src/scss/pages/client/game.scss
@@ -100,7 +100,6 @@
         border-radius: 5px;
     }
 }
-
 #debug-hud {
     //margin-top: -10px;
     text-shadow: 1px 1px 2px black;
@@ -110,7 +109,6 @@
         font-size: 14px;
     }
 }
-
 #gas-timer {
     width: 80px;
     padding: 6px 9px 6px 9px;
@@ -250,9 +248,7 @@
         }
 
         @media screen and (max-width: $screen_large) {
-
-            .teammate-name,
-            .teammate-badge {
+            .teammate-name, .teammate-badge {
                 display: none;
             }
         }
@@ -270,7 +266,6 @@
     border-radius: 8px;
     padding: 8px 12px 8px 12px;
     gap: 10px;
-
     @media screen and (max-width: $screen_large) {
         top: 7px;
         right: 80px;
@@ -358,15 +353,12 @@
     #kill-feed {
         margin-right: 180px;
         margin-top: -10px;
-
         @media screen and (max-width: $screen_large) {
             margin-right: 80px;
         }
-
-        @media screen and (max-width: $screen_medium) and (max-height: 500px) {
+        @media screen and (max-width: $screen_medium) and (max-height: 500px){
             margin-top: -40px;
         }
-
         .kill-feed-item {
             max-width: fit-content;
             padding: 8px 10px 8px 10px;
@@ -823,7 +815,6 @@
     #btn-spectate-menu {
         width: 100%;
     }
-
     #btn-spectate-replay {
         width: 100%;
     }
@@ -1062,8 +1053,7 @@
             width: 110px;
         }
 
-        .slot-number,
-        .item-name {
+        .slot-number, .item-name {
             right: 8px !important;
         }
 
@@ -1117,18 +1107,15 @@
         justify-content: end;
 
         bottom: 50px;
-
         @media screen and (max-width: $screen_medium) {
             bottom: 125px;
             left: -2px;
         }
-
         @media screen and (max-height: 400px) {
             bottom: 10px;
         }
     }
 }
-
 .items-container#ammo {
     flex-direction: row-reverse;
     right: 5px;
@@ -1163,7 +1150,6 @@
         }
     }
 }
-
 .items-container {
     position: absolute;
     top: 120px;

From b2c00cf17a175406d6cbc3e8f4f120cd218db1e5 Mon Sep 17 00:00:00 2001
From: pap-24 <71824952+pap-24@users.noreply.github.com>
Date: Thu, 30 May 2024 11:59:00 +0300
Subject: [PATCH 4/6] Bug Fix.

---
 client/src/scripts/managers/uiManager.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/scripts/managers/uiManager.ts b/client/src/scripts/managers/uiManager.ts
index da718e91b..694014197 100644
--- a/client/src/scripts/managers/uiManager.ts
+++ b/client/src/scripts/managers/uiManager.ts
@@ -301,12 +301,16 @@ export class UIManager {
     updateUI(data: PlayerData): void {
         if (data.id !== undefined) this.game.activePlayerID = data.id;
 
-        const badge = this.getPlayerBadge(data.id);
-
         if (data.dirty.id) {
             this.game.spectating = data.spectating;
             if (data.spectating) {
 
+                // --------------------------------------------
+                // Moved here.
+                // --------------------------------------------
+                const badge = this.getPlayerBadge(data.id);
+                // --------------------------------------------
+
                 const badgeText = badge ? `<img class="badge-icon" src="./img/game/badges/${badge.idString}.svg" alt="${badge.name} badge">` : "";
 
                 $("#game-over-overlay").fadeOut();

From 680f69dbeb16971461f25a11d576474f0afb7a91 Mon Sep 17 00:00:00 2001
From: pap-24 <71824952+pap-24@users.noreply.github.com>
Date: Sat, 1 Jun 2024 20:29:31 +0300
Subject: [PATCH 5/6] Alignment improvement (Spectate menu badge)

---
 client/src/scss/pages/client/game.scss | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/client/src/scss/pages/client/game.scss b/client/src/scss/pages/client/game.scss
index 07da301b1..dff210135 100644
--- a/client/src/scss/pages/client/game.scss
+++ b/client/src/scss/pages/client/game.scss
@@ -759,6 +759,7 @@
 
 #spectating-msg {
     text-align: center;
+    /*display: flex; - Not needed.*/
 
     font-weight: bold;
     font-size: 30px;
@@ -769,28 +770,24 @@
     }
 
     #spectating-msg-player {
-        display: inline;
-        margin-left: 3px; /* Changed.*/
+        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;
         }
     }
-
-    /* --------------------- */
-
 }
 
 #spectating-buttons-container {

From 4e7656f3c94f0ccd3051883ee45009a2595e58b8 Mon Sep 17 00:00:00 2001
From: pap-24 <71824952+pap-24@users.noreply.github.com>
Date: Sat, 1 Jun 2024 20:30:29 +0300
Subject: [PATCH 6/6] Bug fix

---
 client/src/scripts/managers/uiManager.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/src/scripts/managers/uiManager.ts b/client/src/scripts/managers/uiManager.ts
index 694014197..f364c6fb1 100644
--- a/client/src/scripts/managers/uiManager.ts
+++ b/client/src/scripts/managers/uiManager.ts
@@ -304,17 +304,15 @@ export class UIManager {
         if (data.dirty.id) {
             this.game.spectating = data.spectating;
             if (data.spectating) {
-
-                // --------------------------------------------
-                // Moved here.
-                // --------------------------------------------
+                // 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();
 
+                // Player Name + Badge.
                 $("#spectating-msg-player").html(this.getPlayerName(data.id) + badgeText);
             }
             $("#spectating-container").toggle(data.spectating);