feat: Kick player in game (#2969)

If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves #2686 

## Description:
- Implemented feature for lobby creator to kick players in game.
- Added new moderation option for lobby creator, with a kick player
option if they aren't the creator, a bot, and exist in game.
- Includes a confirm kick option, and keeps track of kicked players so
that the kick option changes to "Already Kicked" if the kicked player
panel is opened again on the kicked player.

Screenshot order:
1) Open player panel
2) Click on moderation
3) Click on kick player and confirm kick
4) Player is kicked, open same player panel again and observe change in
kick status
5) Receiving player kick message

<img width="1470" height="776" alt="Screenshot 2026-01-20 at 12 33
55 PM"
src="https://github.com/user-attachments/assets/7c47b5a2-a0f8-4e92-833c-7b9732f751a8"
/>
<img width="1470" height="776" alt="Screenshot 2026-01-20 at 11 58
58 AM"
src="https://github.com/user-attachments/assets/3aa026af-9a42-4512-91b8-916f146849a6"
/>
<img width="1470" height="776" alt="Screenshot 2026-01-20 at 12 31
46 PM"
src="https://github.com/user-attachments/assets/5e1d271b-bf32-4335-8eb1-bcdf84aba8ce"
/>
<img width="1470" height="776" alt="Screenshot 2026-01-20 at 11 57
58 AM"
src="https://github.com/user-attachments/assets/7cbd5ea6-bcb6-4a35-a003-ea0add936925"
/>
<img width="1470" height="776" alt="Screenshot 2026-01-20 at 11 57
39 AM"
src="https://github.com/user-attachments/assets/4309b3e3-2fe6-48dd-8e0c-55036e567461"
/>



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

mitchfz

src/client/graphics/layers/PlayerPanel.ts

@@ -37,12 +37,14 @@ import { UIState } from "../UIState";
 import { ChatModal } from "./ChatModal";
 import { EmojiTable } from "./EmojiTable";
 import { Layer } from "./Layer";
+import "./PlayerModerationModal";
 import "./SendResourceModal";
 import allianceIcon from "/images/AllianceIconWhite.svg?url";
 import chatIcon from "/images/ChatIconWhite.svg?url";
 import donateGoldIcon from "/images/DonateGoldIconWhite.svg?url";
 import donateTroopIcon from "/images/DonateTroopIconWhite.svg?url";
 import emojiIcon from "/images/EmojiIconWhite.svg?url";
+import shieldIcon from "/images/ShieldIconWhite.svg?url";
 import stopTradingIcon from "/images/StopIconWhite.png?url";
 import targetIcon from "/images/TargetIconWhite.svg?url";
 import startTradingIcon from "/images/TradingIconWhite.png?url";
@@ -59,6 +61,7 @@ export class PlayerPanel extends LitElement implements Layer {
   private actions: PlayerActions | null = null;
   private tile: TileRef | null = null;
   private _profileForPlayerId: number | null = null;
+  private kickedPlayerIDs = new Set<string>();
 
   @state() private sendTarget: PlayerView | null = null;
   @state() private sendMode: "troops" | "gold" | "none" = "none";
@@ -67,6 +70,7 @@ export class PlayerPanel extends LitElement implements Layer {
   @state() private allianceExpirySeconds: number | null = null;
   @state() private otherProfile: PlayerProfile | null = null;
   @state() private suppressNextHide: boolean = false;
+  @state() private moderationTarget: PlayerView | null = null;
 
   private ctModal: ChatModal;
 
@@ -142,6 +146,7 @@ export class PlayerPanel extends LitElement implements Layer {
   public show(actions: PlayerActions, tile: TileRef) {
     this.actions = actions;
     this.tile = tile;
+    this.moderationTarget = null;
     this.isVisible = true;
     this.requestUpdate();
   }
@@ -156,6 +161,7 @@ export class PlayerPanel extends LitElement implements Layer {
     this.tile = tile;
     this.sendTarget = target;
     this.sendMode = "gold";
+    this.moderationTarget = null;
     this.isVisible = true;
     this.requestUpdate();
   }
@@ -164,6 +170,7 @@ export class PlayerPanel extends LitElement implements Layer {
     this.isVisible = false;
     this.sendMode = "none";
     this.sendTarget = null;
+    this.moderationTarget = null;
     this.requestUpdate();
   }
 
@@ -305,6 +312,23 @@ export class PlayerPanel extends LitElement implements Layer {
     this.hide();
   }
 
+  private openModeration(e: MouseEvent, other: PlayerView) {
+    e.stopPropagation();
+    this.suppressNextHide = true;
+    this.moderationTarget = other;
+  }
+
+  private closeModeration = () => {
+    this.moderationTarget = null;
+  };
+
+  private handleModerationKicked = (e: CustomEvent<{ playerId?: string }>) => {
+    const playerId = e.detail?.playerId;
+    if (playerId) this.kickedPlayerIDs.add(String(playerId));
+    this.closeModeration();
+    this.hide();
+  };
+
   private handleToggleRocketDirection(e: Event) {
     e.stopPropagation();
     const next = !this.uiState.rocketDirectionUp;
@@ -419,6 +443,25 @@ export class PlayerPanel extends LitElement implements Layer {
     `;
   }
 
+  private renderModeration(my: PlayerView, other: PlayerView) {
+    if (!my.isLobbyCreator()) return html``;
+    const moderationTitle = translateText("player_panel.moderation");
+
+    return html`
+      <ui-divider></ui-divider>
+      <div class="grid auto-cols-fr grid-flow-col gap-1">
+        ${actionButton({
+          onClick: (e: MouseEvent) => this.openModeration(e, other),
+          icon: shieldIcon,
+          iconAlt: "Moderation",
+          title: moderationTitle,
+          label: moderationTitle,
+          type: "red",
+        })}
+      </div>
+    `;
+  }
+
   private renderRelationPillIfNation(other: PlayerView, my: PlayerView) {
     if (other.type() !== PlayerType.Nation) return html``;
     if (other.isTraitor()) return html``;
@@ -804,6 +847,7 @@ export class PlayerPanel extends LitElement implements Layer {
               })}
             </div>`
           : ""}
+        ${this.renderModeration(my, other)}
       </div>
     `;
   }
@@ -914,6 +958,21 @@ export class PlayerPanel extends LitElement implements Layer {
                           ></send-resource-modal>
                         `
                       : ""}
+                    ${this.moderationTarget
+                      ? html`
+                          <player-moderation-modal
+                            .open=${true}
+                            .myPlayer=${my}
+                            .target=${this.moderationTarget}
+                            .eventBus=${this.eventBus}
+                            .alreadyKicked=${this.kickedPlayerIDs.has(
+                              String(this.moderationTarget.id()),
+                            )}
+                            @close=${this.closeModeration}
+                            @kicked=${this.handleModerationKicked}
+                          ></player-moderation-modal>
+                        `
+                      : ""}
 
                     <ui-divider></ui-divider>