can change name after joining game

src/client/Client.ts

@@ -36,6 +36,12 @@ class Client {
         setFavicon()
         this.terrainMap = loadTerrainMap()
         this.startLobbyPolling()
+        setupUsernameCallback((username) => {
+            console.log('Username updated:', username);
+            if (this.game != null) {
+                this.game.playerName = username
+            }
+        });
     }
 
     private startLobbyPolling(): void {
@@ -118,6 +124,11 @@ class Client {
             g.stop();
         });
     }
+
+
+
+
+
 }
 
 function getUsername(): string {
@@ -129,6 +140,21 @@ function getUsername(): string {
     return 'Anon'; // Return 'Anon' if the input element is not found
 }
 
+function setupUsernameCallback(callback: (username: string) => void): void {
+    const usernameInput = document.getElementById('username') as HTMLInputElement | null;
+    if (usernameInput) {
+        usernameInput.addEventListener('input', () => {
+            const username = getUsername();
+            callback(username);
+        });
+    } else {
+        console.error('Username input element not found');
+    }
+}
+
+
+
+
 // Initialize the client when the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
     new Client().initialize();

src/client/ClientGame.ts

@@ -1,4 +1,4 @@
-import {Executor} from "../core/execution/Executor";
+import {Executor} from "../core/execution/ExecutionManager";
 import {Cell, MutableGame, PlayerEvent, PlayerID, MutablePlayer, TileEvent, Player, Game, BoatEvent, Tile} from "../core/Game";
 import {createGame} from "../core/GameImpl";
 import {EventBus} from "../core/EventBus";
@@ -46,7 +46,7 @@ export class ClientGame {
     private isProcessingTurn = false
 
     constructor(
-        private playerName: string,
+        public playerName: string,
         private id: ClientID,
         private gameID: GameID,
         private eventBus: EventBus,
@@ -86,6 +86,13 @@ export class ClientGame {
                 if (!this.isActive) {
                     this.start()
                 }
+                this.sendIntent(
+                    {
+                        type: "updateName",
+                        name: this.playerName,
+                        clientID: this.id
+                    }
+                )
             }
             if (message.type == "turn") {
                 this.addTurn(message.turn)
@@ -163,7 +170,7 @@ export class ClientGame {
 
     private playerEvent(event: PlayerEvent) {
         console.log('received new player event!')
-        if (event.player.info().clientID == this.id) {
+        if (event.player.clientID() == this.id) {
             console.log('setting name')
             this.myPlayer = event.player
         }
@@ -190,6 +197,9 @@ export class ClientGame {
         if (this.gs.inSpawnPhase()) {
             return
         }
+        if (this.myPlayer == null) {
+            return
+        }
 
         const owner = tile.owner()
         const targetID = owner.isPlayer() ? owner.id() : null;

src/client/graphics/NameBoxCalculator.ts

@@ -32,7 +32,7 @@ export function placeName(game: Game, player: Player): [position: Cell, fontSize
         Math.floor(largestRectangle.y + largestRectangle.height / 2 + boundingBox.min.y),
     )
 
-    const fontSize = calculateFontSize(largestRectangle, player.info().name);
+    const fontSize = calculateFontSize(largestRectangle, player.name());
 
     return [center, fontSize]
 }

src/client/graphics/NameRenderer.ts

@@ -84,7 +84,7 @@ export class NameRenderer {
 
     isVisible(render: RenderInfo, min: Cell, max: Cell): boolean {
         const ratio = (max.x - min.x) / Math.max(20, (render.boundingBox.max.x - render.boundingBox.min.x))
-        if (render.player.info().isBot) {
+        if (render.player.isBot()) {
             if (ratio > 25) {
                 return false
             }
@@ -121,7 +121,7 @@ export class NameRenderer {
         context.textAlign = 'center';
         context.textBaseline = 'middle';
 
-        context.fillText(render.player.info().name, nameCenterX, nameCenterY - render.fontSize / 2);
+        context.fillText(render.player.name(), nameCenterX, nameCenterY - render.fontSize / 2);
         context.font = `bold ${render.fontSize}px ${this.theme.font()}`;
         let troopsStr: string = ""
         let troops = render.player.troops() / 10