Added pause functionality for private multiplayer games

resources/lang/en.json

@@ -744,6 +744,10 @@
     "choose_spawn": "Choose a starting location",
     "random_spawn": "Random spawn is enabled. Selecting starting location for you..."
   },
+  "pause": {
+    "singleplayer_game_paused": "Game paused",
+    "multiplayer_game_paused": "Game paused by Lobby Creator"
+  },
   "territory_patterns": {
     "title": "Skins",
     "colors": "Colors",

src/client/ClientGameRunner.ts

@@ -328,6 +328,7 @@ export class ClientGameRunner {
         this.saveGame(gu.updates[GameUpdateType.Win][0]);
       }
     });
+
     const worker = this.worker;
     const keepWorkerAlive = () => {
       if (this.isActive) {
@@ -432,7 +433,17 @@ export class ClientGameRunner {
             `got wrong turn have turns ${this.turnsSeen}, received turn ${message.turn.turnNumber}`,
           );
         } else {
-          this.worker.sendTurn(message.turn);
+          this.worker.sendTurn(
+            // Filter out pause intents in replays
+            this.gameView.config().isReplay()
+              ? {
+                  ...message.turn,
+                  intents: message.turn.intents.filter(
+                    (i) => i.type !== "toggle_pause",
+                  ),
+                }
+              : message.turn,
+          );
           this.turnsSeen++;
         }
       }

src/client/LocalServer.ts

@@ -97,14 +97,6 @@ export class LocalServer {
     } satisfies ServerStartGameMessage);
   }
 
-  pause() {
-    this.paused = true;
-  }
-
-  resume() {
-    this.paused = false;
-  }
-
   onMessage(clientMsg: ClientMessage) {
     if (clientMsg.type === "rejoin") {
       this.clientMessage({
@@ -115,13 +107,25 @@ export class LocalServer {
       } satisfies ServerStartGameMessage);
     }
     if (clientMsg.type === "intent") {
-      if (this.lobbyConfig.gameRecord) {
-        // If we are replaying a game, we don't want to process intents
+      if (clientMsg.intent.type === "toggle_pause") {
+        if (clientMsg.intent.paused) {
+          // Pausing: add intent and end turn before pause takes effect
+          this.intents.push(clientMsg.intent);
+          this.endTurn();
+          this.paused = true;
+        } else {
+          // Unpausing: clear pause flag before adding intent so next turn can execute
+          this.paused = false;
+          this.intents.push(clientMsg.intent);
+          this.endTurn();
+        }
         return;
       }
-      if (this.paused) {
+      // Don't process non-pause intents during replays or while paused
+      if (this.lobbyConfig.gameRecord || this.paused) {
         return;
       }
+
       this.intents.push(clientMsg.intent);
     }
     if (clientMsg.type === "hash") {

src/client/Transport.ts

@@ -29,7 +29,7 @@ import { getPlayToken } from "./Auth";
 import { LobbyConfig } from "./ClientGameRunner";
 import { LocalServer } from "./LocalServer";
 
-export class PauseGameEvent implements GameEvent {
+export class PauseGameIntentEvent implements GameEvent {
   constructor(public readonly paused: boolean) {}
 }
 
@@ -186,6 +186,7 @@ export class Transport {
 
   private pingInterval: number | null = null;
   public readonly isLocal: boolean;
+
   constructor(
     private lobbyConfig: LobbyConfig,
     private eventBus: EventBus,
@@ -237,7 +238,7 @@ export class Transport {
     );
     this.eventBus.on(BuildUnitIntentEvent, (e) => this.onBuildUnitIntent(e));
 
-    this.eventBus.on(PauseGameEvent, (e) => this.onPauseGameEvent(e));
+    this.eventBus.on(PauseGameIntentEvent, (e) => this.onPauseGameIntent(e));
     this.eventBus.on(SendWinnerEvent, (e) => this.onSendWinnerEvent(e));
     this.eventBus.on(SendHashEvent, (e) => this.onSendHashEvent(e));
     this.eventBus.on(CancelAttackIntentEvent, (e) =>
@@ -575,16 +576,12 @@ export class Transport {
     });
   }
 
-  private onPauseGameEvent(event: PauseGameEvent) {
-    if (!this.isLocal) {
-      console.log(`cannot pause multiplayer games`);
-      return;
-    }
-    if (event.paused) {
-      this.localServer.pause();
-    } else {
-      this.localServer.resume();
-    }
+  private onPauseGameIntent(event: PauseGameIntentEvent) {
+    this.sendIntent({
+      type: "toggle_pause",
+      clientID: this.lobbyConfig.clientID,
+      paused: event.paused,
+    });
   }
 
   private onSendWinnerEvent(event: SendWinnerEvent) {

src/client/graphics/layers/GameRightSidebar.ts

@@ -10,7 +10,7 @@ import { GameType } from "../../../core/game/Game";
 import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView } from "../../../core/game/GameView";
 import { crazyGamesSDK } from "../../CrazyGamesSDK";
-import { PauseGameEvent } from "../../Transport";
+import { PauseGameIntentEvent } from "../../Transport";
 import { translateText } from "../../Utils";
 import { Layer } from "./Layer";
 import { ShowReplayPanelEvent } from "./ReplayPanel";
@@ -37,6 +37,7 @@ export class GameRightSidebar extends LitElement implements Layer {
   private timer: number = 0;
 
   private hasWinner = false;
+  private isLobbyCreator = false;
 
   createRenderRoot() {
     return this;
@@ -48,6 +49,7 @@ export class GameRightSidebar extends LitElement implements Layer {
       this.game.config().isReplay();
     this._isVisible = true;
     this.game.inSpawnPhase();
+
     this.requestUpdate();
   }
 
@@ -57,6 +59,13 @@ export class GameRightSidebar extends LitElement implements Layer {
     if (updates) {
       this.hasWinner = this.hasWinner || updates[GameUpdateType.Win].length > 0;
     }
+
+    // Check if the player is the lobby creator
+    if (!this.isLobbyCreator && this.game.myPlayer()?.isLobbyCreator()) {
+      this.isLobbyCreator = true;
+      this.requestUpdate();
+    }
+
     const maxTimerValue = this.game.config().gameConfig().maxTimerValue;
     if (maxTimerValue !== undefined) {
       if (this.game.inSpawnPhase()) {
@@ -96,7 +105,7 @@ export class GameRightSidebar extends LitElement implements Layer {
 
   private onPauseButtonClick() {
     this.isPaused = !this.isPaused;
-    this.eventBus.emit(new PauseGameEvent(this.isPaused));
+    this.eventBus.emit(new PauseGameIntentEvent(this.isPaused));
   }
 
   private onExitButtonClick() {
@@ -153,25 +162,35 @@ export class GameRightSidebar extends LitElement implements Layer {
   }
 
   maybeRenderReplayButtons() {
-    if (this._isSinglePlayer || this.game?.config()?.isReplay()) {
-      return html` <div class="cursor-pointer" @click=${this.toggleReplayPanel}>
-          <img
-            src=${FastForwardIconSolid}
-            alt="replay"
-            width="20"
-            height="20"
-          />
-        </div>
-        <div class="cursor-pointer" @click=${this.onPauseButtonClick}>
-          <img
-            src=${this.isPaused ? playIcon : pauseIcon}
-            alt="play/pause"
-            width="20"
-            height="20"
-          />
-        </div>`;
-    } else {
-      return html``;
-    }
+    const isReplayOrSingleplayer =
+      this._isSinglePlayer || this.game?.config()?.isReplay();
+    const showPauseButton = isReplayOrSingleplayer || this.isLobbyCreator;
+
+    return html`
+      ${isReplayOrSingleplayer
+        ? html`
+            <div class="cursor-pointer" @click=${this.toggleReplayPanel}>
+              <img
+                src=${FastForwardIconSolid}
+                alt="replay"
+                width="20"
+                height="20"
+              />
+            </div>
+          `
+        : ""}
+      ${showPauseButton
+        ? html`
+            <div class="cursor-pointer" @click=${this.onPauseButtonClick}>
+              <img
+                src=${this.isPaused ? playIcon : pauseIcon}
+                alt="play/pause"
+                width="20"
+                height="20"
+              />
+            </div>
+          `
+        : ""}
+    `;
   }
 }

src/client/graphics/layers/HeadsUpMessage.ts

@@ -1,5 +1,7 @@
 import { LitElement, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
+import { GameType } from "../../../core/game/Game";
+import { GameUpdateType } from "../../../core/game/GameUpdates";
 import { GameView } from "../../../core/game/GameView";
 import { translateText } from "../../Utils";
 import { Layer } from "./Layer";
@@ -11,6 +13,9 @@ export class HeadsUpMessage extends LitElement implements Layer {
   @state()
   private isVisible = false;
 
+  @state()
+  private isPaused = false;
+
   createRenderRoot() {
     return this;
   }
@@ -21,28 +26,45 @@ export class HeadsUpMessage extends LitElement implements Layer {
   }
 
   tick() {
-    if (!this.game.inSpawnPhase()) {
-      this.isVisible = false;
-      this.requestUpdate();
+    const updates = this.game.updatesSinceLastTick();
+    if (updates && updates[GameUpdateType.GamePaused].length > 0) {
+      const pauseUpdate = updates[GameUpdateType.GamePaused][0];
+      this.isPaused = pauseUpdate.paused;
+    }
+
+    this.isVisible = this.game.inSpawnPhase() || this.isPaused;
+    this.requestUpdate();
+  }
+
+  private getMessage(): string {
+    if (this.isPaused) {
+      if (this.game.config().gameConfig().gameType === GameType.Singleplayer) {
+        return translateText("pause.singleplayer_game_paused");
+      } else {
+        return translateText("pause.multiplayer_game_paused");
+      }
     }
+    return this.game.config().isRandomSpawn()
+      ? translateText("heads_up_message.random_spawn")
+      : translateText("heads_up_message.choose_spawn");
   }
 
   render() {
     if (!this.isVisible) {
       return html``;
     }
 
+    const message = this.getMessage();
+
     return html`
       <div
         class="flex items-center relative
-                    w-full justify-evenly h-8 lg:h-10 md:top-[70px] left-0 lg:left-4 
-                    bg-opacity-60 bg-gray-900 rounded-md lg:rounded-lg 
+                    w-full justify-evenly h-8 lg:h-10 md:top-[70px] left-0 lg:left-4
+                    bg-opacity-60 bg-gray-900 rounded-md lg:rounded-lg
                     backdrop-blur-md text-white text-md lg:text-xl p-1 lg:p-2"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
-        ${this.game.config().isRandomSpawn()
-          ? translateText("heads_up_message.random_spawn")
-          : translateText("heads_up_message.choose_spawn")}
+        ${message}
       </div>
     `;
   }

src/client/graphics/layers/SettingsModal.ts

@@ -15,7 +15,7 @@ import musicIcon from "../../../../resources/images/music.svg";
 import { EventBus } from "../../../core/EventBus";
 import { UserSettings } from "../../../core/game/UserSettings";
 import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
-import { PauseGameEvent } from "../../Transport";
+import { PauseGameIntentEvent } from "../../Transport";
 import { translateText } from "../../Utils";
 import SoundManager from "../../sound/SoundManager";
 import { Layer } from "./Layer";
@@ -108,7 +108,7 @@ export class SettingsModal extends LitElement implements Layer {
 
   private pauseGame(pause: boolean) {
     if (this.shouldPause && !this.wasPausedWhenOpened)
-      this.eventBus.emit(new PauseGameEvent(pause));
+      this.eventBus.emit(new PauseGameIntentEvent(pause));
   }
 
   private onTerrainButtonClick() {

src/core/GameRunner.ts

@@ -52,6 +52,7 @@ export async function createGameRunner(
       PlayerType.Human,
       p.clientID,
       random.nextID(),
+      p.isLobbyCreator ?? false,
     );
   });
 

src/core/Schemas.ts

@@ -47,7 +47,8 @@ export type Intent =
   | EmbargoAllIntent
   | UpgradeStructureIntent
   | DeleteUnitIntent
-  | KickPlayerIntent;
+  | KickPlayerIntent
+  | TogglePauseIntent;
 
 export type AttackIntent = z.infer<typeof AttackIntentSchema>;
 export type CancelAttackIntent = z.infer<typeof CancelAttackIntentSchema>;
@@ -79,6 +80,7 @@ export type AllianceExtensionIntent = z.infer<
 >;
 export type DeleteUnitIntent = z.infer<typeof DeleteUnitIntentSchema>;
 export type KickPlayerIntent = z.infer<typeof KickPlayerIntentSchema>;
+export type TogglePauseIntent = z.infer<typeof TogglePauseIntentSchema>;
 
 export type Turn = z.infer<typeof TurnSchema>;
 export type GameConfig = z.infer<typeof GameConfigSchema>;
@@ -91,6 +93,7 @@ export type ClientMessage =
   | ClientRejoinMessage
   | ClientLogMessage
   | ClientHashMessage;
+
 export type ServerMessage =
   | ServerTurnMessage
   | ServerStartGameMessage
@@ -354,6 +357,11 @@ export const KickPlayerIntentSchema = BaseIntentSchema.extend({
   target: ID,
 });
 
+export const TogglePauseIntentSchema = BaseIntentSchema.extend({
+  type: z.literal("toggle_pause"),
+  paused: z.boolean().default(false),
+});
+
 const IntentSchema = z.discriminatedUnion("type", [
   AttackIntentSchema,
   CancelAttackIntentSchema,
@@ -377,6 +385,7 @@ const IntentSchema = z.discriminatedUnion("type", [
   AllianceExtensionIntentSchema,
   DeleteUnitIntentSchema,
   KickPlayerIntentSchema,
+  TogglePauseIntentSchema,
 ]);
 
 //
@@ -430,6 +439,7 @@ export const PlayerSchema = z.object({
   clientID: ID,
   username: UsernameSchema,
   cosmetics: PlayerCosmeticsSchema.optional(),
+  isLobbyCreator: z.boolean().optional(),
 });
 
 export const GameStartInfoSchema = z.object({