Highlight own player name and team in lobby modal (#3468)

## Description:

> I always lose track of myself in lobbies, could our names be bolded or
even our entire team bolded for ease of readability?

This PR highlights own username and own team in lobby modal, to make it
easy for players to track themselves.
It's also useful when your username gets changed by the profanity
filter.

Based on [this Discord
suggestion](https://discord.com/channels/1284581928254701718/1484056268355145778)

### Screenshots

FFA (Public):

<img width="916" height="805" alt="image"
src="https://github.com/user-attachments/assets/5d769b48-3217-495c-bdcd-9a61fd05cd8f"
/>

Teams (Public):

<img width="912" height="798" alt="image"
src="https://github.com/user-attachments/assets/0b3966f9-4094-4dfe-a11f-ce225824690a"
/>

FFA (Private):

<img width="912" height="798" alt="image"
src="https://github.com/user-attachments/assets/21ac32ac-1fd0-4318-b2c8-44f3a2756e2e"
/>

<img width="906" height="800" alt="image"
src="https://github.com/user-attachments/assets/7530c4a2-3bc7-4b24-828d-766d65b85f89"
/>

Teams (Private):

<img width="907" height="799" alt="image"
src="https://github.com/user-attachments/assets/c8773fb8-5015-4247-8fde-4628f0850660"
/>

<img width="910" height="800" alt="image"
src="https://github.com/user-attachments/assets/15c56a54-ffea-45ef-a86f-1a8be6995e1d"
/>


## 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:

deshack_82603

src/client/components/LobbyPlayerView.ts

@@ -124,7 +124,10 @@ export class LobbyTeamView extends LitElement {
           (client) => {
             const displayName = this.getClientDisplayName(client);
             return html`<div
-              class="px-2 py-1 rounded-sm bg-gray-700/70 mb-1 text-xs text-white"
+              class="px-2 py-1 rounded-sm mb-1 text-xs text-white border
+                ${this.isCurrentPlayer(client)
+                ? "bg-sky-600/20 border-sky-500/40"
+                : "bg-gray-700/70 border-transparent"}"
             >
               ${displayName}
             </div>`;
@@ -168,7 +171,11 @@ export class LobbyTeamView extends LitElement {
       (c) => c.clientID ?? c.username,
       (client) => {
         const displayName = this.getClientDisplayName(client);
-        return html`<span class="player-tag">
+        return html`<span
+          class="player-tag ${this.isCurrentPlayer(client)
+            ? "current-player"
+            : ""}"
+        >
           <span class="text-white">${displayName}</span>
           ${client.clientID === this.lobbyCreatorClientID
             ? html`<span class="host-badge"
@@ -204,7 +211,12 @@ export class LobbyTeamView extends LitElement {
     const teamLabel = getTranslatedPlayerTeamLabel(preview.team);
 
     return html`
-      <div class="bg-gray-800 border border-gray-700 rounded-xl flex flex-col">
+      <div
+        class="bg-gray-800 border rounded-xl flex flex-col
+          ${this.teamContainsCurrentPlayer(preview)
+          ? "border-sky-500/60"
+          : "border-gray-700"}"
+      >
         <div
           class="px-2 py-1 font-bold flex items-center justify-between text-white rounded-t-xl text-[13px] gap-2 bg-gray-700/70"
         >
@@ -228,7 +240,10 @@ export class LobbyTeamView extends LitElement {
                 (p) => {
                   const displayName = this.getClientDisplayName(p);
                   return html` <div
-                    class="bg-gray-700/70 px-2 py-1 rounded-sm text-xs flex items-center justify-between"
+                    class="px-2 py-1 rounded-sm text-xs flex items-center justify-between border
+                      ${this.isCurrentPlayer(p)
+                      ? "bg-sky-600/20 border-sky-500/40"
+                      : "bg-gray-700/70 border-transparent"}"
                   >
                     <span class="truncate text-white">${displayName}</span>
                     ${p.clientID === this.lobbyCreatorClientID
@@ -365,6 +380,14 @@ export class LobbyTeamView extends LitElement {
     }));
   }
 
+  private isCurrentPlayer(client: ClientInfo): boolean {
+    return !!this.currentClientID && client.clientID === this.currentClientID;
+  }
+
+  private teamContainsCurrentPlayer(preview: TeamPreviewData): boolean {
+    return preview.players.some((p) => this.isCurrentPlayer(p));
+  }
+
   private getClientDisplayName(client: ClientInfo): string {
     const full = formatPlayerDisplayName(client.username, client.clanTag);
     if (!this.userSettings.anonymousNames()) {

src/client/styles.css

@@ -295,6 +295,7 @@ label.option-card:hover {
   align-items: center;
   gap: 8px;
   background: #2a2a2a;
+  border: 1px solid transparent;
   color: #fff;
   padding: 8px 12px;
   margin: 4px;
@@ -302,6 +303,11 @@ label.option-card:hover {
   font-size: 14px;
 }
 
+.player-tag.current-player {
+  background: rgba(14, 165, 233, 0.15);
+  border: 1px solid rgba(14, 165, 233, 0.4);
+}
+
 #bots-count,
 #private-lobby-bots-count {
   width: 80%;