[Feature] Test a skin

index.html

@@ -260,6 +260,7 @@
     <emoji-table></emoji-table>
     <build-menu></build-menu>
     <win-modal></win-modal>
+    <skin-test-win-modal></skin-test-win-modal>
     <game-starting-modal></game-starting-modal>
     <unit-display></unit-display>
     <div

resources/lang/en.json

@@ -699,6 +699,13 @@
     "join_server": "Join Server",
     "youtube_tutorial": "Need some help?"
   },
+  "skin_test_modal": {
+    "title": "Preview Complete",
+    "rate_skin": "Rate this Skin",
+    "rate_up": "Rate up",
+    "rate_down": "Rate down",
+    "preview_skin": "Preview Skin"
+  },
   "leaderboard": {
     "hide": "Hide",
     "player": "Player",

src/client/ClientGameRunner.ts

@@ -13,6 +13,7 @@ import {
 import { createPartialGameRecord, replacer } from "../core/Util";
 import { ServerConfig } from "../core/configuration/Config";
 import { getConfig } from "../core/configuration/ConfigLoader";
+import { TestSkinExecution } from "../core/execution/TestSkinExecution";
 import { PlayerActions, UnitType } from "../core/game/Game";
 import { TileRef } from "../core/game/GameMap";
 import { GameMapLoader } from "../core/game/GameMapLoader";
@@ -35,6 +36,7 @@ import {
   InputHandler,
   MouseMoveEvent,
   MouseUpEvent,
+  ReplaySpeedChangeEvent,
   TickMetricsEvent,
 } from "./InputHandler";
 import { endGame, startGame, startTime } from "./LocalPersistantStats";
@@ -50,7 +52,9 @@ import {
 import { createCanvas } from "./Utils";
 import { createRenderer, GameRenderer } from "./graphics/GameRenderer";
 import { GoToPlayerEvent } from "./graphics/layers/Leaderboard";
+import { ShowSkinTestModalEvent } from "./graphics/layers/SkinTestWinModal";
 import SoundManager from "./sound/SoundManager";
+import { ReplaySpeedMultiplier } from "./utilities/ReplaySpeedMultiplier";
 
 export interface LobbyConfig {
   serverConfig: ServerConfig;
@@ -62,6 +66,7 @@ export interface LobbyConfig {
   gameStartInfo?: GameStartInfo;
   // GameRecord exists when replaying an archived game.
   gameRecord?: GameRecord;
+  isSkinTest?: boolean;
 }
 
 export function joinLobby(
@@ -230,6 +235,7 @@ async function createClientGame(
     lobbyConfig.playerName,
     lobbyConfig.gameStartInfo.gameID,
     lobbyConfig.gameStartInfo.players,
+    lobbyConfig.isSkinTest,
   );
 
   const canvas = createCanvas();
@@ -261,6 +267,7 @@ export class ClientGameRunner {
   private lastMessageTime: number = 0;
   private connectionCheckInterval: NodeJS.Timeout | null = null;
   private goToPlayerTimeout: NodeJS.Timeout | null = null;
+  private testSkinExecution: TestSkinExecution | null = null;
 
   private lastTickReceiveTime: number = 0;
   private currentTickDelay: number | undefined = undefined;
@@ -278,6 +285,15 @@ export class ClientGameRunner {
     this.lastMessageTime = Date.now();
   }
 
+  private stopSkinTest() {
+    if (this.testSkinExecution !== null) {
+      try {
+        this.testSkinExecution.stop();
+      } finally {
+        this.testSkinExecution = null;
+      }
+    }
+  }
   /**
    * Determines whether window closing should be prevented.
    *
@@ -336,6 +352,35 @@ export class ClientGameRunner {
       );
     }, 20000);
 
+    if (this.lobby.isSkinTest) {
+      // Set game speed to maximum
+      this.eventBus.emit(
+        new ReplaySpeedChangeEvent(ReplaySpeedMultiplier.fastest),
+      );
+
+      // Clean up any prior skin test resources, then set a new timeout and start a fresh execution
+      this.stopSkinTest();
+
+      // Start a fresh TestSkinExecution which manages its own modal timeout
+      this.testSkinExecution = new TestSkinExecution(
+        this.gameView,
+        this.clientID,
+        () => this.isActive,
+        () => {
+          // Called when execution requests the modal be shown — stop the game and
+          // clean up resources first.
+          this.stop();
+        },
+        (targetID, troops) =>
+          this.eventBus.emit(new SendAttackIntentEvent(targetID, troops)),
+        (patternName, colorPalette) =>
+          this.eventBus.emit(
+            new ShowSkinTestModalEvent(patternName, colorPalette),
+          ),
+      );
+      this.testSkinExecution.start();
+    }
+
     this.eventBus.on(MouseUpEvent, this.inputEvent.bind(this));
     this.eventBus.on(MouseMoveEvent, this.onMouseMove.bind(this));
     this.eventBus.on(AutoUpgradeEvent, this.autoUpgradeEvent.bind(this));
@@ -381,7 +426,12 @@ export class ClientGameRunner {
       this.currentTickDelay = undefined;
 
       if (gu.updates[GameUpdateType.Win].length > 0) {
-        this.saveGame(gu.updates[GameUpdateType.Win][0]);
+        if (this.lobby.isSkinTest) {
+          // For skin tests, show the modal immediately on win instead of waiting
+          this.testSkinExecution?.showModal();
+        } else {
+          this.saveGame(gu.updates[GameUpdateType.Win][0]);
+        }
       }
     });
 
@@ -515,6 +565,8 @@ export class ClientGameRunner {
     if (!this.isActive) return;
 
     this.isActive = false;
+    // Clean up skin test resources
+    this.stopSkinTest();
     this.worker.cleanup();
     this.transport.leaveGame();
     if (this.connectionCheckInterval) {

src/client/Main.ts

@@ -222,6 +222,7 @@ export interface JoinLobbyEvent {
   gameStartInfo?: GameStartInfo;
   // GameRecord exists when replaying an archived game.
   gameRecord?: GameRecord;
+  isSkinTest?: boolean;
   source?: "public" | "private" | "host" | "matchmaking" | "singleplayer";
 }
 
@@ -815,6 +816,7 @@ class Client {
           this.usernameInput?.getCurrentUsername() ?? genAnonUsername(),
         gameStartInfo: lobby.gameStartInfo ?? lobby.gameRecord?.info,
         gameRecord: lobby.gameRecord,
+        isSkinTest: lobby.isSkinTest,
       },
       () => {
         console.log("Closing modals");

src/client/TerritoryPatternsModal.ts

@@ -3,6 +3,14 @@
 import { customElement, state } from "lit/decorators.js";
 import { UserMeResponse } from "../core/ApiSchemas";
 import { ColorPalette, Cosmetics, Pattern } from "../core/CosmeticSchemas";
+import {
+  Difficulty,
+  GameMapSize,
+  GameMapType,
+  GameMode,
+  GameType,
+  UnitType,
+} from "../core/game/Game";
 import { UserSettings } from "../core/game/UserSettings";
 import { PlayerPattern } from "../core/Schemas";
 import { hasLinkedAccount } from "./Api";
@@ -65,7 +73,7 @@
   }
 
   private async updateFromSettings() {
     const cosmetics = await getPlayerCosmetics();
     this.selectedPattern = cosmetics.pattern ?? null;
     this.selectedColor = cosmetics.color?.color ?? null;
   }
@@ -176,6 +184,10 @@
             .onSelect=${(p: PlayerPattern | null) => this.selectPattern(p)}
             .onPurchase=${(p: Pattern, colorPalette: ColorPalette | null) =>
               handlePurchase(p, colorPalette)}
+            .onTest=${hasLinkedAccount(this.userMeResponse)
+              ? (p: Pattern, colorPalette: ColorPalette | null) =>
+                  this.startTestGame(p, colorPalette)
+              : undefined}
           ></pattern-button>
         `);
       }
@@ -205,6 +217,94 @@
     `;
   }
 
+  private startTestGame(pattern: Pattern, colorPalette: ColorPalette | null) {
+    if (!this.userMeResponse) {
+      window.dispatchEvent(
+        new CustomEvent("show-message", {
+          detail: {
+            message: translateText("territory_patterns.not_logged_in"),
+            duration: 3000,
+          },
+        }),
+      );
+      return;
+    }
+    const clientID = this.userMeResponse.player.publicId;
+    const gameID = pattern.name;
+
+    const selectedPattern = {
+      name: pattern.name,
+      patternData: pattern.pattern,
+      colorPalette: colorPalette ?? undefined,
+    };
+
+    // Use translation if available, otherwise format the name
+    const translation = translateText(
+      `territory_patterns.pattern.${pattern.name}`,
+    );
+    const displayName = translation.startsWith("territory_patterns.pattern.")
+      ? pattern.name
+          .split("_")
+          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+          .join(" ")
+      : translation;
+
+    this.dispatchEvent(
+      new CustomEvent("join-lobby", {
+        detail: {
+          clientID: clientID,
+          gameID: gameID,
+          isSkinTest: true,
+          source: "singleplayer",
+          gameStartInfo: {
+            gameID: gameID,
+            players: [
+              {
+                clientID,
+                username: displayName,
+                cosmetics: {
+                  pattern: selectedPattern,
+                },
+              },
+            ],
+            config: {
+              gameMap: GameMapType.Iceland,
+              gameMapSize: GameMapSize.Compact,
+              gameType: GameType.Singleplayer,
+              gameMode: GameMode.FFA,
+              playerTeams: 1,
+              bots: 0,
+              difficulty: Difficulty.Easy,
+              donateGold: false,
+              donateTroops: false,
+              instantBuild: false,
+              randomSpawn: true,
+              disableNations: true,
+              infiniteGold: true,
+              infiniteTroops: true,
+              percentageTilesOwnedToWin: 99,
+              disabledUnits: [
+                UnitType.City,
+                UnitType.Factory,
+                UnitType.Port,
+                UnitType.MissileSilo,
+                UnitType.DefensePost,
+                UnitType.SAMLauncher,
+                UnitType.AtomBomb,
+                UnitType.HydrogenBomb,
+                UnitType.MIRV,
+                UnitType.Warship,
+              ],
+            },
+            lobbyCreatedAt: Date.now(),
+          },
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
   private renderMySkinsButton(): TemplateResult {
     return html`<button
       class="px-4 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-wider border mb-4 ${this

src/client/components/PatternButton.ts

@@ -47,6 +47,8 @@ export class PatternButton extends LitElement {
   @property({ type: Function })
   onPurchase?: (pattern: Pattern, colorPalette: ColorPalette | null) => void;
 
+  @property({ type: Function })
+  onTest?: (pattern: Pattern, colorPalette: ColorPalette | null) => void;
   private _countdownInterval: ReturnType<typeof setInterval> | null = null;
 
   @state()
@@ -216,6 +218,13 @@ export class PatternButton extends LitElement {
     }
   }
 
+  private handleTest(e: Event) {
+    e.stopPropagation();
+    if (this.pattern) {
+      this.onTest?.(this.pattern, this.colorPalette ?? null);
+    }
+  }
+
   render() {
     const isDefaultPattern = this.pattern === null;
 
@@ -342,6 +351,17 @@ export class PatternButton extends LitElement {
                     >(${this.pattern.product.price})</span
                   >
                 </button>
+                ${this.onTest
+                  ? html`
+                      <button
+                        class="w-full mt-2 px-4 py-2 bg-blue-500/20 text-blue-400 border border-blue-500/30 rounded-lg text-xs font-bold uppercase tracking-wider cursor-pointer transition-all duration-200
+                   hover:bg-blue-500/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.2)]"
+                        @click=${this.handleTest}
+                      >
+                        ${translateText("skin_test_modal.preview_skin")}
+                      </button>
+                    `
+                  : null}
               </div>
             `
           : null}

src/client/graphics/GameRenderer.ts

@@ -34,6 +34,7 @@ import { RailroadLayer } from "./layers/RailroadLayer";
 import { ReplayPanel } from "./layers/ReplayPanel";
 import { SAMRadiusLayer } from "./layers/SAMRadiusLayer";
 import { SettingsModal } from "./layers/SettingsModal";
+import { SkinTestWinModal } from "./layers/SkinTestWinModal";
 import { SpawnTimer } from "./layers/SpawnTimer";
 import { SpawnVideoAd } from "./layers/SpawnVideoReward";
 import { StructureIconsLayer } from "./layers/StructureIconsLayer";
@@ -159,6 +160,13 @@ export function createRenderer(
   winModal.eventBus = eventBus;
   winModal.game = game;
 
+  const skinTestWinModal = document.querySelector(
+    "skin-test-win-modal",
+  ) as SkinTestWinModal;
+  if (skinTestWinModal instanceof SkinTestWinModal) {
+    skinTestWinModal.eventBus = eventBus;
+  }
+
   const replayPanel = document.querySelector("replay-panel") as ReplayPanel;
   if (!(replayPanel instanceof ReplayPanel)) {
     console.error("replay panel not found");
@@ -311,6 +319,7 @@ export function createRenderer(
     controlPanel,
     playerInfo,
     winModal,
+    skinTestWinModal,
     replayPanel,
     settingsModal,
     teamStats,