feat: improve lobby chat UX with local/remote message styling

- Expose username via window.__username in ClientGameRunner
- Add local vs remote message detection in LobbyChatPanel
- Style local messages right-aligned with blue tint background
- Style remote messages left-aligned with dark background
- Fix GameServer to use validated clientMsg.text instead of re-parsing
- Improves code safety by avoiding redundant JSON.parse calls

Author: Phantasm0009

src/client/ClientGameRunner.ts

@@ -78,6 +78,8 @@ export function joinLobby(
   (window as any).__eventBus = eventBus;
   // Expose current clientID for UI alignment decisions
   (window as any).__clientID = lobbyConfig.clientID;
+  // Expose username for message identification
+  (window as any).__username = lobby.playerName;
   // Notify components that the EventBus is ready
   document.dispatchEvent(
     new CustomEvent("event-bus:ready", { bubbles: true, composed: true }),

src/client/components/LobbyChatPanel.ts

@@ -16,6 +16,7 @@ export class LobbyChatPanel extends LitElement {
   @state() private inputText: string = "";
 
   private bus: EventBus | null = null;
+  private username: string | null = null;
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -24,6 +25,7 @@ export class LobbyChatPanel extends LitElement {
     if (globalBus) {
       this.bus = globalBus;
     }
+    this.username = (window as any).__username ?? null;
     document.addEventListener("event-bus:ready", this.onBusReady as any);
   }
 
@@ -54,6 +56,7 @@ export class LobbyChatPanel extends LitElement {
     if (globalBus) {
       this.bus = globalBus;
     }
+    this.username ??= (window as any).__username ?? null;
   };
 
   private sendMessage() {
@@ -80,7 +83,12 @@ export class LobbyChatPanel extends LitElement {
         <div class="lcp-messages">
           ${this.messages.map((m) => {
             const displayName = m.isHost ? `${m.username} (Host)` : m.username;
-            return html`<div class="lcp-msg">
+            const isLocal =
+              this.username !== null && m.username === this.username;
+            const msgClass = isLocal
+              ? "lcp-msg lcp-msg--local"
+              : "lcp-msg lcp-msg--remote";
+            return html`<div class="${msgClass}">
               <span class="lcp-sender">${displayName}:</span> ${m.text}
             </div>`;
           })}
@@ -141,6 +149,16 @@ style.textContent = `
     border-radius: 10px;
     background: rgba(0, 0, 0, 0.6);
   }
+  .lcp-msg--local {
+    align-self: flex-end;
+    text-align: right;
+    background: rgba(36, 59, 85, 0.7);
+  }
+  .lcp-msg--remote {
+    align-self: flex-start;
+    text-align: left;
+    background: rgba(0, 0, 0, 0.6);
+  }
   .lcp-sender {
     color: #9ae6b4;
     margin-right: 4px;

src/server/GameServer.ts

@@ -326,7 +326,7 @@ export class GameServer {
               type: "lobby_chat",
               username: client.username,
               isHost,
-              text: (JSON.parse(message) as any).text,
+              text: clientMsg.text,
             });
             this.activeClients.forEach((c) => c.ws.send(payload));
             break;