Lobby chat panel

__mocks__/jose.js

@@ -0,0 +1,8 @@
+// Minimal mock of jose for tests
+export const base64url = {
+  encode: (input) => Buffer.from(String(input)).toString("base64url"),
+  decode: (input) => Buffer.from(String(input), "base64url").toString("utf8"),
+};
+export const jwtVerify = async () => ({ payload: {}, protectedHeader: {} });
+export const decodeJwt = () => ({ sub: "test" });
+export const JWK = {};

eslint.config.js

@@ -25,6 +25,7 @@ export default [
         projectService: {
           allowDefaultProject: [
             "__mocks__/fileMock.js",
+            "__mocks__/jose.js",
             "eslint.config.js",
             "postcss.config.js",
             "tailwind.config.js",

resources/lang/en.json

@@ -556,6 +556,12 @@
       "stop_trading": "Stop trading with [P1]!"
     }
   },
+  "lobby_chat": {
+    "title": "Lobby Chat",
+    "placeholder": "Type a message...",
+    "enable": "Enable Lobby Chat",
+    "send": "Send"
+  },
   "build_menu": {
     "desc": {
       "atom_bomb": "Small explosion",

src/client/ClientGameRunner.ts

@@ -7,6 +7,7 @@ import {
   GameStartInfo,
   PlayerCosmeticRefs,
   PlayerRecord,
+  ServerLobbyChatMessage,
   ServerMessage,
 } from "../core/Schemas";
 import { createPartialGameRecord, replacer } from "../core/Util";
@@ -64,6 +65,18 @@ export interface LobbyConfig {
   gameRecord?: GameRecord;
 }
 
+function isValidLobbyChatMessage(
+  message: ServerMessage,
+): message is ServerLobbyChatMessage {
+  if (message.type !== "lobby_chat") return false;
+  const candidate = message as Record<string, unknown>;
+  return (
+    typeof candidate.username === "string" &&
+    typeof candidate.isHost === "boolean" &&
+    typeof candidate.text === "string"
+  );
+}
+
 export function joinLobby(
   eventBus: EventBus,
   lobbyConfig: LobbyConfig,
@@ -74,6 +87,12 @@ export function joinLobby(
     `joining lobby: gameID: ${lobbyConfig.gameID}, clientID: ${lobbyConfig.clientID}`,
   );
 
+  window.__eventBus = eventBus;
+  window.__username = lobbyConfig.playerName;
+  document.dispatchEvent(
+    new CustomEvent("event-bus:ready", { bubbles: true, composed: true }),
+  );
+
   const userSettings: UserSettings = new UserSettings();
   startGame(lobbyConfig.gameID, lobbyConfig.gameStartInfo?.config ?? {});
 
@@ -144,6 +163,23 @@ export function joinLobby(
         );
       }
     }
+    if (message.type === "lobby_chat") {
+      if (!isValidLobbyChatMessage(message)) {
+        console.error("Malformed lobby_chat message:", message);
+        return;
+      }
+      document.dispatchEvent(
+        new CustomEvent("lobby-chat:message", {
+          detail: {
+            username: message.username,
+            isHost: message.isHost,
+            text: message.text,
+          },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
   };
   transport.connect(onconnect, onmessage);
   return () => {

src/client/HostLobbyModal.ts

@@ -25,6 +25,7 @@ import { generateID } from "../core/Util";
 import "./components/baseComponents/Modal";
 import "./components/Difficulties";
 import "./components/FluentSlider";
+import "./components/LobbyChatPanel";
 import "./components/LobbyTeamView";
 import "./components/Maps";
 import { crazyGamesSDK } from "./CrazyGamesSDK";
@@ -56,6 +57,7 @@ export class HostLobbyModal extends LitElement {
   @state() private instantBuild: boolean = false;
   @state() private randomSpawn: boolean = false;
   @state() private compactMap: boolean = false;
+  @state() private chatEnabled: boolean = false;
   @state() private lobbyId = "";
   @state() private copySuccess = false;
   @state() private clients: ClientInfo[] = [];
@@ -411,6 +413,28 @@ export class HostLobbyModal extends LitElement {
                   </div>
                 </label>
 
+                <!-- Enable Lobby Chat (Private only) -->
+                <label
+                  for="enable-chat"
+                  class="option-card ${this.chatEnabled ? "selected" : ""}"
+                >
+                  <div class="checkbox-icon"></div>
+                  <input
+                    type="checkbox"
+                    id="enable-chat"
+                    @change=${(e: Event) => {
+                      this.chatEnabled = Boolean(
+                        (e.target as HTMLInputElement).checked,
+                      );
+                      this.putGameConfig();
+                    }}
+                    .checked=${this.chatEnabled}
+                  />
+                  <div class="option-card-title">
+                    ${translateText("lobby_chat.enable")}
+                  </div>
+                </label>
+
                 <label
                   for="donate-gold"
                   class="option-card ${this.donateGold ? "selected" : ""}"
@@ -614,6 +638,19 @@ export class HostLobbyModal extends LitElement {
             .nationCount=${this.getEffectiveNationCount()}
             .onKickPlayer=${(clientID: string) => this.kickPlayer(clientID)}
           ></lobby-team-view>
+
+          ${
+            this.chatEnabled
+              ? html`
+                  <div class="mt-4">
+                    <div class="option-title">
+                      ${translateText("lobby_chat.title")}
+                    </div>
+                    <lobby-chat-panel></lobby-chat-panel>
+                  </div>
+                `
+              : ""
+          }
         </div>
 
         <div class="start-game-button-container">
@@ -850,6 +887,7 @@ export class HostLobbyModal extends LitElement {
               : {
                   disableNations: this.disableNations,
                 }),
+            chatEnabled: this.chatEnabled,
             maxTimerValue:
               this.maxTimer === true ? this.maxTimerValue : undefined,
           } satisfies Partial<GameConfig>,

src/client/JoinPrivateLobbyModal.ts

@@ -6,6 +6,7 @@ import { generateID } from "../core/Util";
 import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
 import { getApiBase } from "./Api";
 import { JoinLobbyEvent } from "./Main";
+import "./components/LobbyChatPanel";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
 @customElement("join-private-lobby-modal")
@@ -18,6 +19,8 @@ export class JoinPrivateLobbyModal extends LitElement {
   @state() private message: string = "";
   @state() private hasJoined = false;
   @state() private players: string[] = [];
+  // Whether the host enabled lobby chat (private lobbies only)
+  @state() private chatEnabled: boolean = false;
 
   private playersInterval: NodeJS.Timeout | null = null;
 
@@ -73,20 +76,34 @@ export class JoinPrivateLobbyModal extends LitElement {
         </div>
         <div class="options-layout">
           ${this.hasJoined && this.players.length > 0
-            ? html` <div class="options-section">
-                <div class="option-title">
-                  ${this.players.length}
-                  ${this.players.length === 1
-                    ? translateText("private_lobby.player")
-                    : translateText("private_lobby.players")}
+            ? html`
+                <div class="options-section">
+                  <div class="option-title">
+                    ${this.players.length}
+                    ${this.players.length === 1
+                      ? translateText("private_lobby.player")
+                      : translateText("private_lobby.players")}
+                  </div>
+
+                  <div class="players-list">
+                    ${this.players.map(
+                      (player) =>
+                        html`<span class="player-tag">${player}</span>`,
+                    )}
+                  </div>
                 </div>
 
-                <div class="players-list">
-                  ${this.players.map(
-                    (player) => html`<span class="player-tag">${player}</span>`,
-                  )}
-                </div>
-              </div>`
+                ${this.chatEnabled
+                  ? html`
+                      <div class="options-section" style="margin-top: 12px;">
+                        <div class="option-title">
+                          ${translateText("lobby_chat.title")}
+                        </div>
+                        <lobby-chat-panel></lobby-chat-panel>
+                      </div>
+                    `
+                  : ""}
+              `
             : ""}
         </div>
         <div class="flex justify-center">
@@ -336,6 +353,8 @@ export class JoinPrivateLobbyModal extends LitElement {
       .then((response) => response.json())
       .then((data: GameInfo) => {
         this.players = data.clients?.map((p) => p.username) ?? [];
+        // Reflect server-configured chat toggle for joiners
+        this.chatEnabled = Boolean(data.gameConfig?.chatEnabled);
       })
       .catch((error) => {
         console.error("Error polling players:", error);

src/client/SinglePlayerModal.ts

@@ -576,6 +576,7 @@ export class SinglePlayerModal extends LitElement {
                 : GameMapSize.Normal,
               gameType: GameType.Singleplayer,
               gameMode: this.gameMode,
+              chatEnabled: false,
               playerTeams: this.teamCount,
               difficulty: this.selectedDifficulty,
               maxTimerValue: this.maxTimer ? this.maxTimerValue : undefined,

src/client/Transport.ts

@@ -15,6 +15,7 @@ import {
   ClientHashMessage,
   ClientIntentMessage,
   ClientJoinMessage,
+  ClientLobbyChatMessage,
   ClientMessage,
   ClientPingMessage,
   ClientRejoinMessage,
@@ -176,6 +177,11 @@ export class SendKickPlayerIntentEvent implements GameEvent {
   constructor(public readonly target: string) {}
 }
 
+// New event: send a basic lobby chat message
+export class SendLobbyChatEvent implements GameEvent {
+  constructor(public readonly text: string) {}
+}
+
 export class SendUpdateGameConfigIntentEvent implements GameEvent {
   constructor(public readonly config: Partial<GameConfig>) {}
 }
@@ -265,6 +271,7 @@ export class Transport {
     this.eventBus.on(SendKickPlayerIntentEvent, (e) =>
       this.onSendKickPlayerIntent(e),
     );
+    this.eventBus.on(SendLobbyChatEvent, (e) => this.onSendLobbyChat(e));
 
     this.eventBus.on(SendUpdateGameConfigIntentEvent, (e) =>
       this.onSendUpdateGameConfigIntent(e),
@@ -668,6 +675,14 @@ export class Transport {
     });
   }
 
+  private onSendLobbyChat(event: SendLobbyChatEvent) {
+    this.sendMsg({
+      type: "lobby_chat",
+      text: event.text,
+      clientID: this.lobbyConfig.clientID,
+    } satisfies ClientLobbyChatMessage);
+  }
+
   private onSendUpdateGameConfigIntent(event: SendUpdateGameConfigIntentEvent) {
     this.sendIntent({
       type: "update_game_config",