Remove ClientID from GameRenderer (#878)

## Description:

GameView provides a `myPlayer()` implementation.

## 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

src/client/graphics/layers/ChatDisplay.ts

@@ -9,7 +9,6 @@ import {
   GameUpdateType,
 } from "../../../core/game/GameUpdates";
 import { GameView } from "../../../core/game/GameView";
-import { ClientID } from "../../../core/Schemas";
 import { onlyImages } from "../../../core/Util";
 import { Layer } from "./Layer";
 
@@ -24,7 +23,6 @@ interface ChatEvent {
 export class ChatDisplay extends LitElement implements Layer {
   public eventBus: EventBus;
   public game: GameView;
-  public clientID: ClientID;
 
   private active: boolean = false;
 
@@ -61,7 +59,7 @@ export class ChatDisplay extends LitElement implements Layer {
 
   onDisplayMessageEvent(event: DisplayMessageUpdate) {
     if (event.messageType !== MessageType.CHAT) return;
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (
       event.playerID !== null &&
       (!myPlayer || myPlayer.smallID() !== event.playerID)
@@ -90,7 +88,7 @@ export class ChatDisplay extends LitElement implements Layer {
     if (messages) {
       for (const msg of messages) {
         if (msg.messageType === MessageType.CHAT) {
-          const myPlayer = this.game.playerByClientID(this.clientID);
+          const myPlayer = this.game.myPlayer();
           if (
             msg.playerID !== null &&
             (!myPlayer || myPlayer.smallID() !== msg.playerID)

src/client/graphics/layers/ControlPanel.ts

@@ -3,7 +3,6 @@ import { customElement, state } from "lit/decorators.js";
 import { translateText } from "../../../client/Utils";
 import { EventBus } from "../../../core/EventBus";
 import { GameView } from "../../../core/game/GameView";
-import { ClientID } from "../../../core/Schemas";
 import { AttackRatioEvent } from "../../InputHandler";
 import { SendSetTargetTroopRatioEvent } from "../../Transport";
 import { renderNumber, renderTroops } from "../../Utils";
@@ -13,7 +12,6 @@ import { Layer } from "./Layer";
 @customElement("control-panel")
 export class ControlPanel extends LitElement implements Layer {
   public game: GameView;
-  public clientID: ClientID;
   public eventBus: EventBus;
   public uiState: UIState;
 

src/client/graphics/layers/EventsDisplay.ts

@@ -23,7 +23,6 @@ import {
   TargetPlayerUpdate,
   UnitIncomingUpdate,
 } from "../../../core/game/GameUpdates";
-import { ClientID } from "../../../core/Schemas";
 import {
   CancelAttackIntentEvent,
   CancelBoatIntentEvent,
@@ -66,7 +65,6 @@ interface Event {
 export class EventsDisplay extends LitElement implements Layer {
   public eventBus: EventBus;
   public game: GameView;
-  public clientID: ClientID;
 
   private active: boolean = false;
   private events: Event[] = [];
@@ -184,7 +182,7 @@ export class EventsDisplay extends LitElement implements Layer {
   renderLayer(): void {}
 
   onDisplayMessageEvent(event: DisplayMessageUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (
       event.playerID !== null &&
       (!myPlayer || myPlayer.smallID() !== event.playerID)
@@ -202,7 +200,7 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onDisplayChatEvent(event: DisplayChatMessageUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (
       event.playerID === null ||
       !myPlayer ||
@@ -230,7 +228,7 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onAllianceRequestEvent(update: AllianceRequestUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (!myPlayer || update.recipientID !== myPlayer.smallID()) {
       return;
     }
@@ -282,7 +280,7 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onAllianceRequestReplyEvent(update: AllianceRequestReplyUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (!myPlayer || update.request.requestorID !== myPlayer.smallID()) {
       return;
     }
@@ -303,7 +301,7 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onBrokeAllianceEvent(update: BrokeAllianceUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (!myPlayer) return;
 
     const betrayed = this.game.playerBySmallID(update.betrayedID) as PlayerView;
@@ -341,7 +339,7 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onAllianceExpiredEvent(update: AllianceExpiredUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (!myPlayer) return;
 
     const otherID =
@@ -365,7 +363,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
   onTargetPlayerEvent(event: TargetPlayerUpdate) {
     const other = this.game.playerBySmallID(event.playerID) as PlayerView;
-    const myPlayer = this.game.playerByClientID(this.clientID) as PlayerView;
+    const myPlayer = this.game.myPlayer() as PlayerView;
     if (!myPlayer || !myPlayer.isFriendly(other)) return;
 
     const target = this.game.playerBySmallID(event.targetID) as PlayerView;
@@ -380,13 +378,13 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   emitCancelAttackIntent(id: string) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (!myPlayer) return;
     this.eventBus.emit(new CancelAttackIntentEvent(myPlayer.id(), id));
   }
 
   emitBoatCancelIntent(id: number) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (!myPlayer) return;
     this.eventBus.emit(new CancelBoatIntentEvent(id));
   }
@@ -406,7 +404,7 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onEmojiMessageEvent(update: EmojiUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
     if (!myPlayer) return;
 
     const recipient =
@@ -441,7 +439,7 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   onUnitIncomingEvent(event: UnitIncomingUpdate) {
-    const myPlayer = this.game.playerByClientID(this.clientID);
+    const myPlayer = this.game.myPlayer();
 
     if (!myPlayer || myPlayer.smallID() !== event.playerID) {
       return;

src/client/graphics/layers/Leaderboard.ts

@@ -4,7 +4,6 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { translateText } from "../../../client/Utils";
 import { EventBus, GameEvent } from "../../../core/EventBus";
 import { GameView, PlayerView, UnitView } from "../../../core/game/GameView";
-import { ClientID } from "../../../core/Schemas";
 import { renderNumber } from "../../Utils";
 import { Layer } from "./Layer";
 
@@ -36,7 +35,6 @@ export class GoToUnitEvent implements GameEvent {
 @customElement("leader-board")
 export class Leaderboard extends LitElement implements Layer {
   public game: GameView | null = null;
-  public clientID: ClientID | null = null;
   public eventBus: EventBus | null = null;
 
   players: Entry[] = [];
@@ -66,12 +64,7 @@ export class Leaderboard extends LitElement implements Layer {
 
   private updateLeaderboard() {
     if (this.game === null) throw new Error("Not initialized");
-    if (this.clientID === null) {
-      return;
-    }
-    const myPlayer =
-      this.game.playerViews().find((p) => p.clientID() === this.clientID) ??
-      null;
+    const myPlayer = this.game.myPlayer();
 
     const sorted = this.game
       .playerViews()

src/client/graphics/layers/NameLayer.ts

@@ -8,7 +8,6 @@ import shieldIcon from "../../../../resources/images/ShieldIconBlack.svg";
 import targetIcon from "../../../../resources/images/TargetIcon.svg";
 import traitorIcon from "../../../../resources/images/TraitorIcon.svg";
 import { PseudoRandom } from "../../../core/PseudoRandom";
-import { ClientID } from "../../../core/Schemas";
 import { Theme } from "../../../core/configuration/Config";
 import { AllPlayers, Cell, nukeTypes, UnitType } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
@@ -47,14 +46,12 @@ export class NameLayer implements Layer {
   private nukeRedIconImage: HTMLImageElement;
   private shieldIconImage: HTMLImageElement;
   private container: HTMLDivElement;
-  private myPlayer: PlayerView | null = null;
   private firstPlace: PlayerView | null = null;
   private theme: Theme = this.game.config().theme();
 
   constructor(
     private game: GameView,
     private transformHandler: TransformHandler,
-    private clientID: ClientID,
   ) {
     this.traitorIconImage = new Image();
     this.traitorIconImage.src = traitorIcon;
@@ -314,7 +311,7 @@ export class NameLayer implements Layer {
       ".player-icons",
     ) as HTMLDivElement;
     const iconSize = Math.min(render.fontSize * 1.5, 48);
-    const myPlayer = this.getPlayer();
+    const myPlayer = this.game.myPlayer();
 
     // Crown icon
     const existingCrown = iconsDiv.querySelector('[data-icon="crown"]');
@@ -520,14 +517,4 @@ export class NameLayer implements Layer {
     }
     return icon;
   }
-
-  private getPlayer(): PlayerView | null {
-    if (this.myPlayer !== null) {
-      return this.myPlayer;
-    }
-    this.myPlayer =
-      this.game.playerViews().find((p) => p.clientID() === this.clientID) ??
-      null;
-    return this.myPlayer;
-  }
 }

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -11,7 +11,6 @@ import {
 } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView, PlayerView, UnitView } from "../../../core/game/GameView";
-import { ClientID } from "../../../core/Schemas";
 import { MouseMoveEvent } from "../../InputHandler";
 import { renderNumber, renderTroops } from "../../Utils";
 import { TransformHandler } from "../TransformHandler";
@@ -42,9 +41,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
   @property({ type: Object })
   public game!: GameView;
 
-  @property({ type: String })
-  public clientID!: ClientID;
-
   @property({ type: Object })
   public eventBus!: EventBus;
 
@@ -137,13 +133,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     this.requestUpdate();
   }
 
-  private myPlayer(): PlayerView | null {
-    if (!this.game) {
-      return null;
-    }
-    return this.game.playerByClientID(this.clientID);
-  }
-
   private getRelationClass(relation: Relation): string {
     switch (relation) {
       case Relation.Hostile:
@@ -175,7 +164,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
   }
 
   private renderPlayerInfo(player: PlayerView) {
-    const myPlayer = this.myPlayer();
+    const myPlayer = this.game.myPlayer();
     const isFriendly = myPlayer?.isFriendly(player);
     let relationHtml: TemplateResult | null = null;
     const attackingTroops = player
@@ -275,8 +264,8 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
   private renderUnitInfo(unit: UnitView) {
     const isAlly =
-      (unit.owner() === this.myPlayer() ||
-        this.myPlayer()?.isFriendly(unit.owner())) ??
+      (unit.owner() === this.game.myPlayer() ||
+        this.game.myPlayer()?.isFriendly(unit.owner())) ??
       false;
 
     return html`

src/client/graphics/layers/RadialMenu.ts

@@ -16,7 +16,6 @@ import {
 } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView, PlayerView } from "../../../core/game/GameView";
-import { ClientID } from "../../../core/Schemas";
 import {
   CloseViewEvent,
   ContextMenuEvent,
@@ -98,7 +97,6 @@ export class RadialMenu implements Layer {
     private eventBus: EventBus,
     private g: GameView,
     private transformHandler: TransformHandler,
-    private clientID: ClientID,
     private emojiTable: EmojiTable,
     private buildMenu: BuildMenu,
     private uiState: UIState,
@@ -121,7 +119,7 @@ export class RadialMenu implements Layer {
         return;
       }
       const tile = this.g.ref(clickedCell.x, clickedCell.y);
-      const p = this.g.playerByClientID(this.clientID);
+      const p = this.g.myPlayer();
       if (p === null) {
         return;
       }

src/client/graphics/layers/TeamStats.ts

@@ -3,7 +3,6 @@ import { customElement, state } from "lit/decorators.js";
 import { EventBus } from "../../../core/EventBus";
 import { GameMode } from "../../../core/game/Game";
 import { GameView, PlayerView } from "../../../core/game/GameView";
-import { ClientID } from "../../../core/Schemas";
 import { renderNumber } from "../../Utils";
 import { Layer } from "./Layer";
 
@@ -18,7 +17,6 @@ interface TeamEntry {
 @customElement("team-stats")
 export class TeamStats extends LitElement implements Layer {
   public game: GameView;
-  public clientID: ClientID;
   public eventBus: EventBus;
 
   teams: TeamEntry[] = [];

src/client/graphics/layers/UILayer.ts

@@ -1,6 +1,5 @@
 import { Colord } from "colord";
 import { EventBus } from "../../../core/EventBus";
-import { ClientID } from "../../../core/Schemas";
 import { Theme } from "../../../core/configuration/Config";
 import { UnitType } from "../../../core/game/Game";
 import { GameView, UnitView } from "../../../core/game/GameView";
@@ -35,7 +34,6 @@ export class UILayer implements Layer {
   constructor(
     private game: GameView,
     private eventBus: EventBus,
-    private clientID: ClientID,
     private transformHandler: TransformHandler,
   ) {
     this.theme = game.config().theme();

src/client/graphics/layers/UnitLayer.ts

@@ -1,10 +1,9 @@
 import { colord, Colord } from "colord";
 import { EventBus } from "../../../core/EventBus";
-import { ClientID } from "../../../core/Schemas";
 import { Theme } from "../../../core/configuration/Config";
 import { UnitType } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
-import { GameView, PlayerView, UnitView } from "../../../core/game/GameView";
+import { GameView, UnitView } from "../../../core/game/GameView";
 import { BezenhamLine } from "../../../core/utilities/Line";
 import {
   AlternateViewEvent,
@@ -40,8 +39,6 @@ export class UnitLayer implements Layer {
 
   private alternateView = false;
 
-  private myPlayer: PlayerView | null = null;
-
   private oldShellTile = new Map<UnitView, TileRef>();
 
   private transformHandler: TransformHandler;
@@ -55,7 +52,6 @@ export class UnitLayer implements Layer {
   constructor(
     private game: GameView,
     private eventBus: EventBus,
-    private clientID: ClientID,
     transformHandler: TransformHandler,
   ) {
     this.theme = game.config().theme();
@@ -67,9 +63,6 @@ export class UnitLayer implements Layer {
   }
 
   tick() {
-    if (this.myPlayer === null) {
-      this.myPlayer = this.game.playerByClientID(this.clientID);
-    }
     const unitIds = this.game
       .updatesSinceLastTick()
       ?.[GameUpdateType.Unit]?.map((unit) => unit.id);
@@ -98,18 +91,13 @@ export class UnitLayer implements Layer {
     }
     const clickRef = this.game.ref(cell.x, cell.y);
 
-    // Make sure we have the current player
-    if (this.myPlayer === null) {
-      this.myPlayer = this.game.playerByClientID(this.clientID);
-    }
-
     // Only select warships owned by the player
     return this.game
       .units(UnitType.Warship)
       .filter(
         (unit) =>
           unit.isActive() &&
-          unit.owner() === this.myPlayer && // Only allow selecting own warships
+          unit.owner() === this.game.myPlayer() && // Only allow selecting own warships
           this.game.manhattanDist(unit.tile(), clickRef) <=
             this.WARSHIP_SELECTION_RADIUS,
       )
@@ -256,13 +244,14 @@ export class UnitLayer implements Layer {
   }
 
   private relationship(unit: UnitView): Relationship {
-    if (this.myPlayer === null) {
+    const myPlayer = this.game.myPlayer();
+    if (myPlayer === null) {
       return Relationship.Enemy;
     }
-    if (this.myPlayer === unit.owner()) {
+    if (myPlayer === unit.owner()) {
       return Relationship.Self;
     }
-    if (this.myPlayer.isFriendly(unit.owner())) {
+    if (myPlayer.isFriendly(unit.owner())) {
       return Relationship.Ally;
     }
     return Relationship.Enemy;