= new Map();
private serverTimeOffset: number = 0;
+ private defaultLobbyTime: number = 0;
private lobbySocket = new PublicLobbySocket((lobbies) =>
this.handleLobbiesUpdate(lobbies),
@@ -57,6 +64,9 @@ export class GameModeSelector extends LitElement {
connectedCallback() {
super.connectedCallback();
this.lobbySocket.start();
+ getServerConfigFromClient().then((config) => {
+ this.defaultLobbyTime = config.gameCreationRate() / 1000;
+ });
}
disconnectedCallback() {
@@ -77,6 +87,30 @@ export class GameModeSelector extends LitElement {
}),
);
this.requestUpdate();
+
+ const allGames = Object.values(lobbies.games ?? {}).flat();
+ for (const game of allGames) {
+ const mapType = game.gameConfig?.gameMap as GameMapType;
+ if (mapType && !this.mapAspectRatios.has(mapType)) {
+ // New Map reference triggers Lit reactivity; placeholder ratio 1 lets
+ // has() guard against duplicate in-flight fetches.
+ this.mapAspectRatios = new Map(this.mapAspectRatios).set(mapType, 1);
+ terrainMapFileLoader
+ .getMapData(mapType)
+ .manifest()
+ .then((m: any) => {
+ if (m?.map?.width && m?.map?.height) {
+ this.mapAspectRatios = new Map(this.mapAspectRatios).set(
+ mapType,
+ m.map.width / m.map.height,
+ );
+ }
+ })
+ .catch((e) =>
+ console.error(`Failed to load manifest for ${mapType}`, e),
+ );
+ }
+ }
}
render() {
@@ -85,58 +119,110 @@ export class GameModeSelector extends LitElement {
const special = this.lobbies?.games?.["special"]?.[0];
return html`
-
- ${ffa ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa)) : nothing}
- ${teams
- ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
- : nothing}
- ${special ? this.renderSpecialLobbyCard(special) : nothing}
- ${this.renderQuickActionsSection()}
+
+
+
+ ${this.renderSmallActionCard(
+ translateText("main.solo"),
+ this.openSinglePlayerModal,
+ "bg-sky-600",
+ )}
+
+
+
+ ${this.renderSmallActionCard(
+ translateText("main.create"),
+ this.openHostLobby,
+ "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+ )}
+ ${this.renderSmallActionCard(
+ translateText("mode_selector.ranked_title"),
+ this.openRankedMenu,
+ "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+ )}
+ ${this.renderSmallActionCard(
+ translateText("main.join"),
+ this.openJoinLobby,
+ "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+ )}
+
+
+
+
+ ${special
+ ? html`
+ ${this.renderSpecialLobbyCard(special)}
+
`
+ : ffa
+ ? html`
+ ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
+
`
+ : nothing}
+
+
+
+ ${special && ffa
+ ? html`
+ ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
+
`
+ : nothing}
+ ${teams
+ ? html`
+ ${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
+
`
+ : nothing}
+
+
+
+
+ ${special ? this.renderSpecialLobbyCard(special) : nothing}
+
+
+ ${ffa
+ ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))
+ : nothing}
+
+
+ ${teams
+ ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
+ : nothing}
+
+
+
+
+
+ ${this.renderSmallActionCard(
+ translateText("main.solo"),
+ this.openSinglePlayerModal,
+ "bg-sky-600",
+ )}
+
+
+
+ ${this.renderSmallActionCard(
+ translateText("main.create"),
+ this.openHostLobby,
+ "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+ )}
+ ${this.renderSmallActionCard(
+ translateText("mode_selector.ranked_title"),
+ this.openRankedMenu,
+ "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+ )}
+ ${this.renderSmallActionCard(
+ translateText("main.join"),
+ this.openJoinLobby,
+ "bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)]",
+ )}
+
`;
}
private renderSpecialLobbyCard(lobby: PublicGameInfo) {
- const subtitle = this.getLobbyTitle(lobby);
- const mainTitle = translateText("mode_selector.special_title");
- const titleContent = subtitle
- ? html`
-
${mainTitle}
-
- ${subtitle}
-
- `
- : mainTitle;
- return this.renderLobbyCard(lobby, titleContent);
- }
-
- private renderQuickActionsSection() {
- return html`
-
-
- ${this.renderSmallActionCard(
- translateText("main.solo"),
- this.openSinglePlayerModal,
- )}
- ${this.renderSmallActionCard(
- translateText("mode_selector.ranked_title"),
- this.openRankedMenu,
- )}
-
-
- ${this.renderSmallActionCard(
- translateText("main.create"),
- this.openHostLobby,
- )}
- ${this.renderSmallActionCard(
- translateText("main.join"),
- this.openJoinLobby,
- )}
-
-
- `;
+ return this.renderLobbyCard(lobby, this.getLobbyTitle(lobby));
}
private openRankedMenu = () => {
@@ -161,11 +247,15 @@ export class GameModeSelector extends LitElement {
(document.querySelector("join-lobby-modal") as JoinLobbyModal)?.open();
};
- private renderSmallActionCard(title: string, onClick: () => void) {
+ private renderSmallActionCard(
+ title: string,
+ onClick: () => void,
+ bgClass: string = CARD_BG,
+ ) {
return html`
@@ -178,6 +268,11 @@ export class GameModeSelector extends LitElement {
) {
const mapType = lobby.gameConfig!.gameMap as GameMapType;
const mapImageSrc = terrainMapFileLoader.getMapData(mapType).webpPath;
+ const aspectRatio = this.mapAspectRatios.get(mapType);
+ // Use object-contain for extreme aspect ratios (e.g. Amazon River ~20:1) so
+ // the full map is visible instead of being cropped by object-cover.
+ const useContain =
+ aspectRatio !== undefined && (aspectRatio > 4 || aspectRatio < 0.25);
const timeRemaining = lobby.startsAt
? Math.max(
0,
@@ -188,17 +283,19 @@ export class GameModeSelector extends LitElement {
: undefined;
let timeDisplay: string = "";
+ let timeDisplayUppercase = false;
if (timeRemaining === undefined) {
- timeDisplay = "-s";
+ timeDisplay = renderDuration(this.defaultLobbyTime);
} else if (timeRemaining > 0) {
timeDisplay = renderDuration(timeRemaining);
} else {
timeDisplay = translateText("public_lobby.starting_game");
+ timeDisplayUppercase = true;
}
const mapName = getMapName(lobby.gameConfig?.gameMap);
- const modifierLabels = this.getModifierLabels(
+ const modifierLabels = getModifierLabels(
lobby.gameConfig?.publicGameModifiers,
);
// Sort by length for visual consistency (shorter labels first)
@@ -209,59 +306,78 @@ export class GameModeSelector extends LitElement {
return html`
{
diff --git a/src/client/GameInfoModal.ts b/src/client/GameInfoModal.ts
index 787f5820d..9dc8bf395 100644
--- a/src/client/GameInfoModal.ts
+++ b/src/client/GameInfoModal.ts
@@ -1,7 +1,7 @@
import { html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { GameEndInfo } from "../core/Schemas";
-import { GameMapType, hasUnusualThumbnailSize } from "../core/game/Game";
+import { GameMapType } from "../core/game/Game";
import { fetchGameById } from "./Api";
import { terrainMapFileLoader } from "./TerrainMapFileLoader";
import { UsernameInput } from "./UsernameInput";
@@ -107,7 +107,6 @@ export class GameInfoModal extends LitElement {
if (!info) {
return html``;
}
- const isUnusualThumbnailSize = hasUnusualThumbnailSize(info.config.gameMap);
return html`
`
: html`