evan comments

Author: ryanbarlow97

src/client/GameInfoModal.ts

@@ -180,7 +180,7 @@ export class GameInfoModal extends LitElement {
     try {
       const mapType = gameMap as GameMapType;
       const data = terrainMapFileLoader.getMapData(mapType);
-      this.mapImage = await data.webpPath();
+      this.mapImage = data.webpPath;
     } catch (error) {
       console.error("Failed to load map image:", error);
     }

src/client/GameModeSelector.ts

@@ -10,10 +10,13 @@ import {
   Trios,
 } from "../core/game/Game";
 import { PublicGameInfo, PublicGames } from "../core/Schemas";
+import { HostLobbyModal } from "./HostLobbyModal";
+import { JoinLobbyModal } from "./JoinLobbyModal";
 import { PublicLobbySocket } from "./LobbySocket";
 import { JoinLobbyEvent } from "./Main";
+import { SinglePlayerModal } from "./SinglePlayerModal";
 import { terrainMapFileLoader } from "./TerrainMapFileLoader";
-import { renderDuration, translateText } from "./Utils";
+import { getMapName, renderDuration, translateText } from "./Utils";
 
 const CARD_BG = "bg-[color-mix(in_oklab,var(--frenchBlue)_70%,black)]";
 
@@ -145,31 +148,24 @@ export class GameModeSelector extends LitElement {
 
   private openRankedMenu = () => {
     if (!this.validateUsername()) return;
-
-    const modal = document.getElementById("page-ranked") as any;
-    if (window.showPage) {
-      window.showPage("page-ranked");
-    } else if (modal) {
-      document.getElementById("page-play")?.classList.add("hidden");
-      modal.classList.remove("hidden");
-      modal.classList.add("block");
-    }
-    modal?.open?.();
+    window.showPage?.("page-ranked");
   };
 
   private openSinglePlayerModal = () => {
     if (!this.validateUsername()) return;
-    (document.querySelector("single-player-modal") as any)?.open();
+    (
+      document.querySelector("single-player-modal") as SinglePlayerModal
+    )?.open();
   };
 
   private openHostLobby = () => {
     if (!this.validateUsername()) return;
-    (document.querySelector("host-lobby-modal") as any)?.open();
+    (document.querySelector("host-lobby-modal") as HostLobbyModal)?.open();
   };
 
   private openJoinLobby = () => {
     if (!this.validateUsername()) return;
-    (document.querySelector("join-lobby-modal") as any)?.open();
+    (document.querySelector("join-lobby-modal") as JoinLobbyModal)?.open();
   };
 
   private renderSmallActionCard(title: string, onClick: () => void) {
@@ -188,15 +184,11 @@ export class GameModeSelector extends LitElement {
     titleContent: string | TemplateResult,
   ) {
     const mapType = lobby.gameConfig!.gameMap as GameMapType;
-    const mapImageSrc = terrainMapFileLoader.getMapData(mapType).webpPathSync();
-    // TODO: plus or minus
+    const mapImageSrc = terrainMapFileLoader.getMapData(mapType).webpPath;
     const start = lobby.startsAt - this.timeOffset;
     const timeRemaining = Math.max(0, Math.floor((start - Date.now()) / 1000));
     const timeDisplay = renderDuration(timeRemaining);
-    const gameMap = lobby.gameConfig?.gameMap;
-    const mapName = gameMap
-      ? translateText(`map.${gameMap.toLowerCase().replace(/[\s.]+/g, "")}`)
-      : null;
+    const mapName = getMapName(lobby.gameConfig?.gameMap);
 
     const modifierLabels = this.getModifierLabels(
       lobby.gameConfig?.publicGameModifiers,
@@ -215,7 +207,7 @@ export class GameModeSelector extends LitElement {
           ${mapImageSrc
             ? html`<img
                 src="${mapImageSrc}"
-                alt="${mapName ?? gameMap ?? "map"}"
+                alt="${mapName ?? lobby.gameConfig?.gameMap ?? "map"}"
                 draggable="false"
                 class="absolute inset-0 w-full h-full object-contain object-center scale-[1.05] pointer-events-none"
               />`
@@ -288,10 +280,6 @@ export class GameModeSelector extends LitElement {
     );
   }
 
-  private getLobbyTitle(lobby: PublicGameInfo): string {
-    return this.getBaseModeTitle(lobby);
-  }
-
   private getModifierLabels(mods: PublicGameModifiers | undefined): string[] {
     if (!mods) return [];
     return [
@@ -302,7 +290,7 @@ export class GameModeSelector extends LitElement {
     ].filter((x): x is string => !!x);
   }
 
-  private getBaseModeTitle(lobby: PublicGameInfo): string {
+  private getLobbyTitle(lobby: PublicGameInfo): string {
     const config = lobby.gameConfig!;
     if (config.gameMode === GameMode.FFA) {
       return translateText("game_mode.ffa");

src/client/JoinLobbyModal.ts

@@ -3,7 +3,7 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import {
   getActiveModifiers,
   getGameModeLabel,
-  normaliseMapKey,
+  getMapName,
   renderDuration,
   renderNumber,
   translateText,
@@ -419,7 +419,7 @@ export class JoinLobbyModal extends BaseModal {
     if (!this.gameConfig) return html``;
 
     const c = this.gameConfig;
-    const mapName = translateText("map." + normaliseMapKey(c.gameMap));
+    const mapName = getMapName(c.gameMap);
     const modeName = getGameModeLabel(c);
     const modifiers = getActiveModifiers(c.publicGameModifiers);
 

src/client/Utils.ts

@@ -17,6 +17,11 @@ export function normaliseMapKey(mapName: string): string {
   return mapName.toLowerCase().replace(/[\s.]+/g, "");
 }
 
+export function getMapName(mapName: string | undefined): string | null {
+  if (!mapName) return null;
+  return translateText(`map.${normaliseMapKey(mapName)}`);
+}
+
 /**
  * Returns a display label for the game mode (e.g. "FFA", "4 Teams", "Duos").
  */

src/client/components/map/MapDisplay.ts

@@ -50,7 +50,7 @@ export class MapDisplay extends LitElement {
       this.isLoading = true;
       const mapValue = GameMapType[this.mapKey as keyof typeof GameMapType];
       const data = terrainMapFileLoader.getMapData(mapValue);
-      this.mapWebpPath = await data.webpPath();
+      this.mapWebpPath = data.webpPath;
       const manifest = await data.manifest();
       this.mapName = manifest.name;
       this.hasNations =

src/core/game/BinaryLoaderGameMapLoader.ts

@@ -54,10 +54,7 @@ export class BinaryLoaderGameMapLoader implements GameMapLoader {
           return res.json() as Promise<MapManifest>;
         }),
       ),
-      webpPathSync: () => `${mapBasePath}/thumbnail.webp`,
-      webpPath: this.createLazyLoader(() =>
-        Promise.resolve(`${mapBasePath}/thumbnail.webp`),
-      ),
+      webpPath: `${mapBasePath}/thumbnail.webp`,
     } satisfies MapData;
 
     this.maps.set(map, mapData);

src/core/game/FetchGameMapLoader.ts

@@ -31,8 +31,7 @@ export class FetchGameMapLoader implements GameMapLoader {
       map4xBin: () => this.loadBinaryFromUrl(this.url(fileName, "map4x.bin")),
       map16xBin: () => this.loadBinaryFromUrl(this.url(fileName, "map16x.bin")),
       manifest: () => this.loadJsonFromUrl(this.url(fileName, "manifest.json")),
-      webpPathSync: () => this.url(fileName, "thumbnail.webp"),
-      webpPath: async () => this.url(fileName, "thumbnail.webp"),
+      webpPath: this.url(fileName, "thumbnail.webp"),
     } satisfies MapData;
 
     this.maps.set(map, mapData);

src/core/game/GameMapLoader.ts

@@ -10,6 +10,5 @@ export interface MapData {
   map4xBin: () => Promise<Uint8Array>;
   map16xBin: () => Promise<Uint8Array>;
   manifest: () => Promise<MapManifest>;
-  webpPathSync: () => string;
-  webpPath: () => Promise<string>;
+  webpPath: string;
 }