this.closeAndLeave(),
ariaLabel: translateText("common.close"),
rightContent:
- this.currentLobbyId &&
- this.gameConfig?.gameType === GameType.Private
+ this.currentLobbyId && this.isPrivateLobby()
? html`
- ${this.gameConfig?.gameType === GameType.Private
+ ${this.isPrivateLobby()
? html`
${modalHeader({
titleContent: html`
diff --git a/src/client/LobbySocket.ts b/src/client/LobbySocket.ts
index f398da054..7b71dc21a 100644
--- a/src/client/LobbySocket.ts
+++ b/src/client/LobbySocket.ts
@@ -1,6 +1,5 @@
-import { GameInfo } from "../core/Schemas";
-
-type LobbyUpdateHandler = (lobbies: GameInfo[]) => void;
+import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
+import { PublicGames, PublicGamesSchema } from "../core/Schemas";
interface LobbySocketOptions {
reconnectDelay?: number;
@@ -8,36 +7,39 @@ interface LobbySocketOptions {
pollIntervalMs?: number;
}
+function getRandomWorkerPath(numWorkers: number): string {
+ const workerIndex = Math.floor(Math.random() * numWorkers);
+ return `/w${workerIndex}`;
+}
+
export class PublicLobbySocket {
private ws: WebSocket | null = null;
private wsReconnectTimeout: number | null = null;
- private fallbackPollInterval: number | null = null;
private wsConnectionAttempts = 0;
private wsAttemptCounted = false;
+ private workerPath: string = "";
private readonly reconnectDelay: number;
private readonly maxWsAttempts: number;
- private readonly pollIntervalMs: number;
- private readonly onLobbiesUpdate: LobbyUpdateHandler;
constructor(
- onLobbiesUpdate: LobbyUpdateHandler,
+ private onLobbiesUpdate: (data: PublicGames) => void,
options?: LobbySocketOptions,
) {
- this.onLobbiesUpdate = onLobbiesUpdate;
this.reconnectDelay = options?.reconnectDelay ?? 3000;
this.maxWsAttempts = options?.maxWsAttempts ?? 3;
- this.pollIntervalMs = options?.pollIntervalMs ?? 1000;
}
- start() {
+ async start() {
this.wsConnectionAttempts = 0;
+ // Get config to determine number of workers, then pick a random one
+ const config = await getServerConfigFromClient();
+ this.workerPath = getRandomWorkerPath(config.numWorkers());
this.connectWebSocket();
}
stop() {
this.disconnectWebSocket();
- this.stopFallbackPolling();
}
private connectWebSocket() {
@@ -49,7 +51,7 @@ export class PublicLobbySocket {
}
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
- const wsUrl = `${protocol}//${window.location.host}/lobbies`;
+ const wsUrl = `${protocol}//${window.location.host}${this.workerPath}/lobbies`;
this.ws = new WebSocket(wsUrl);
this.wsAttemptCounted = false;
@@ -70,15 +72,14 @@ export class PublicLobbySocket {
clearTimeout(this.wsReconnectTimeout);
this.wsReconnectTimeout = null;
}
- this.stopFallbackPolling();
}
private handleMessage(event: MessageEvent) {
try {
- const message = JSON.parse(event.data as string);
- if (message.type === "lobbies_update") {
- this.onLobbiesUpdate(message.data?.lobbies ?? []);
- }
+ const publicGames = PublicGamesSchema.parse(
+ JSON.parse(event.data as string),
+ );
+ this.onLobbiesUpdate(publicGames);
} catch (error) {
console.error("Error parsing WebSocket message:", error);
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
@@ -101,10 +102,7 @@ export class PublicLobbySocket {
this.wsConnectionAttempts++;
}
if (this.wsConnectionAttempts >= this.maxWsAttempts) {
- console.log(
- "Max WebSocket attempts reached, falling back to HTTP polling",
- );
- this.startFallbackPolling();
+ console.error("Max WebSocket attempts reached");
} else {
this.scheduleReconnect();
}
@@ -121,7 +119,7 @@ export class PublicLobbySocket {
this.wsConnectionAttempts++;
}
if (this.wsConnectionAttempts >= this.maxWsAttempts) {
- this.startFallbackPolling();
+ alert("error connecting to game service");
} else {
this.scheduleReconnect();
}
@@ -145,33 +143,4 @@ export class PublicLobbySocket {
this.wsReconnectTimeout = null;
}
}
-
- private startFallbackPolling() {
- if (this.fallbackPollInterval !== null) return;
- console.log("Starting HTTP fallback polling");
- this.fetchLobbiesHTTP();
- this.fallbackPollInterval = window.setInterval(() => {
- this.fetchLobbiesHTTP();
- }, this.pollIntervalMs);
- }
-
- private stopFallbackPolling() {
- if (this.fallbackPollInterval !== null) {
- clearInterval(this.fallbackPollInterval);
- this.fallbackPollInterval = null;
- }
- }
-
- private async fetchLobbiesHTTP() {
- try {
- const response = await fetch(`/api/public_lobbies`);
- if (!response.ok) {
- throw new Error(`HTTP error! status: ${response.status}`);
- }
- const data = await response.json();
- this.onLobbiesUpdate(data.lobbies as GameInfo[]);
- } catch (error) {
- console.error("Error fetching lobbies via HTTP:", error);
- }
- }
}
diff --git a/src/client/Main.ts b/src/client/Main.ts
index c48d0f06f..ba6569889 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -1,12 +1,7 @@
import version from "resources/version.txt?raw";
import { UserMeResponse } from "../core/ApiSchemas";
import { EventBus } from "../core/EventBus";
-import {
- GAME_ID_REGEX,
- GameInfo,
- GameRecord,
- GameStartInfo,
-} from "../core/Schemas";
+import { GAME_ID_REGEX, GameRecord, GameStartInfo } from "../core/Schemas";
import { GameEnv } from "../core/configuration/Config";
import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
import { GameType } from "../core/game/Game";
@@ -223,7 +218,6 @@ export interface JoinLobbyEvent {
// GameRecord exists when replaying an archived game.
gameRecord?: GameRecord;
source?: "public" | "private" | "host" | "matchmaking" | "singleplayer";
- publicLobbyInfo?: GameInfo;
}
class Client {
@@ -773,7 +767,7 @@ class Client {
}
const config = await getServerConfigFromClient();
// Only update URL immediately for private lobbies, not public ones
- if (!lobby.publicLobbyInfo && lobby.source !== "public") {
+ if (lobby.source !== "public") {
this.updateJoinUrlForShare(lobby.gameID, config);
}
@@ -908,7 +902,7 @@ class Client {
// Open the join lobby modal page and pass the lobby info
window.showPage?.("page-join-lobby");
- this.joinModal?.open(lobby.gameID, lobby);
+ this.joinModal?.open(lobby.gameID, true);
}
private async handleLeaveLobby(/* event: CustomEvent */) {
diff --git a/src/client/Matchmaking.ts b/src/client/Matchmaking.ts
index c29931896..3fa4af738 100644
--- a/src/client/Matchmaking.ts
+++ b/src/client/Matchmaking.ts
@@ -2,9 +2,8 @@ import { html, LitElement } from "lit";
import { customElement, query, state } from "lit/decorators.js";
import { UserMeResponse } from "../core/ApiSchemas";
import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
-import { generateID } from "../core/Util";
import { getUserMe, hasLinkedAccount } from "./Api";
-import { getPlayToken } from "./Auth";
+import { getClientIDForGame, getPlayToken } from "./Auth";
import { BaseModal } from "./components/BaseModal";
import "./components/Difficulties";
import "./components/PatternButton";
@@ -231,7 +230,8 @@ export class MatchmakingModal extends BaseModal {
new CustomEvent("join-lobby", {
detail: {
gameID: this.gameID,
- clientID: generateID(),
+ clientID: getClientIDForGame(this.gameID),
+ source: "matchmaking",
} as JoinLobbyEvent,
bubbles: true,
composed: true,
diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts
index dc60087fd..ef9729c93 100644
--- a/src/client/PublicLobby.ts
+++ b/src/client/PublicLobby.ts
@@ -1,7 +1,7 @@
import { html, LitElement } from "lit";
import { customElement, state } from "lit/decorators.js";
import { GameMapType } from "../core/game/Game";
-import { GameID, GameInfo } from "../core/Schemas";
+import { GameID, PublicGameInfo, PublicGames } from "../core/Schemas";
import { PublicLobbySocket } from "./LobbySocket";
import { terrainMapFileLoader } from "./TerrainMapFileLoader";
import {
@@ -13,16 +13,19 @@ import {
} from "./Utils";
export interface ShowPublicLobbyModalEvent {
- lobby: GameInfo;
+ lobby: PublicGameInfo;
}
@customElement("public-lobby")
export class PublicLobby extends LitElement {
- @state() private lobbies: GameInfo[] = [];
+ @state() private publicGames: PublicGames | null = null;
+ @state() public isLobbyHighlighted: boolean = false;
@state() private mapImages: Map = new Map();
+
private lobbyIDToStart = new Map();
- private lobbySocket = new PublicLobbySocket((lobbies) =>
- this.handleLobbiesUpdate(lobbies),
+ private serverTimeOffset = 0;
+ private lobbySocket = new PublicLobbySocket((data) =>
+ this.handleLobbiesUpdate(data),
);
createRenderRoot() {
@@ -39,12 +42,18 @@ export class PublicLobby extends LitElement {
this.lobbySocket.stop();
}
- private handleLobbiesUpdate(lobbies: GameInfo[]) {
- this.lobbies = lobbies;
- this.lobbies.forEach((l) => {
+ private handleLobbiesUpdate(publicGames: PublicGames) {
+ this.publicGames = publicGames;
+
+ // Calculate offset between server time and client time
+ if (this.publicGames) {
+ this.serverTimeOffset = this.publicGames.serverTime - Date.now();
+ }
+ this.publicGames.games.forEach((l) => {
if (!this.lobbyIDToStart.has(l.gameID)) {
- const msUntilStart = l.msUntilStart ?? 0;
- this.lobbyIDToStart.set(l.gameID, msUntilStart + Date.now());
+ // Convert server's startsAt to client time by subtracting offset
+ const startsAt = l.startsAt ?? Date.now();
+ this.lobbyIDToStart.set(l.gameID, startsAt - this.serverTimeOffset);
}
if (l.gameConfig && !this.mapImages.has(l.gameID)) {
@@ -66,9 +75,9 @@ export class PublicLobby extends LitElement {
}
render() {
- if (this.lobbies.length === 0) return html``;
+ if (!this.publicGames) return html``;
- const lobby = this.lobbies[0];
+ const lobby = this.publicGames.games[0];
if (!lobby?.gameConfig) return html``;
const start = this.lobbyIDToStart.get(lobby.gameID) ?? 0;
@@ -200,7 +209,7 @@ export class PublicLobby extends LitElement {
this.lobbySocket.stop();
}
- private lobbyClicked(lobby: GameInfo) {
+ private lobbyClicked(lobby: PublicGameInfo) {
// Validate username before opening the modal
const usernameInput = document.querySelector("username-input") as any;
if (
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index 7a10f21aa..1623d996e 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -967,6 +967,7 @@ export class SinglePlayerModal extends BaseModal {
},
lobbyCreatedAt: Date.now(), // ms; server should be authoritative in MP
},
+ source: "singleplayer",
} satisfies JoinLobbyEvent,
bubbles: true,
composed: true,
diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts
index cfff06a1f..11889cd67 100644
--- a/src/client/UsernameInput.ts
+++ b/src/client/UsernameInput.ts
@@ -147,8 +147,8 @@ export class UsernameInput extends LitElement {
}
private validateAndStore() {
- // Prevent empty username even if clan tag is present
- if (!this.baseUsername.trim()) {
+ // Validate base username meets minimum length (clan tag doesn't count)
+ if (this.baseUsername.trim().length < MIN_USERNAME_LENGTH) {
this._isValid = false;
this.validationError = translateText("username.too_short", {
min: MIN_USERNAME_LENGTH,
diff --git a/src/client/components/baseComponents/Button.ts b/src/client/components/baseComponents/Button.ts
index dd0818c5a..e3dd03898 100644
--- a/src/client/components/baseComponents/Button.ts
+++ b/src/client/components/baseComponents/Button.ts
@@ -13,7 +13,7 @@ export class OButton extends LitElement {
@property({ type: Boolean }) disable = false;
@property({ type: Boolean }) fill = false;
private static readonly BASE_CLASS =
- "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg";
+ "bg-blue-600 hover:bg-blue-700 text-white font-bold uppercase tracking-wider px-4 py-3 rounded-xl transition-all duration-300 transform hover:-translate-y-px outline-none border border-transparent text-center text-base lg:text-lg whitespace-normal break-words leading-tight overflow-hidden relative";
createRenderRoot() {
return this;
@@ -39,9 +39,11 @@ export class OButton extends LitElement {
class=${classMap(this.getButtonClasses())}
?disabled=${this.disable}
>
- ${this.translationKey === ""
- ? this.title
- : translateText(this.translationKey)}
+
+ ${this.translationKey === ""
+ ? this.title
+ : translateText(this.translationKey)}
+
`;
}
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 7a374a527..5fa6dd80f 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -270,7 +270,7 @@ export function createRenderer(
structureLayer,
samRadiusLayer,
new UnitLayer(game, eventBus, transformHandler),
- new FxLayer(game),
+ new FxLayer(game, transformHandler),
new UILayer(game, eventBus, transformHandler),
new NukeTrajectoryPreviewLayer(game, eventBus, transformHandler, uiState),
new StructureIconsLayer(game, eventBus, uiState, transformHandler),
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index c6f000405..c45a31b00 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -261,7 +261,7 @@ export class ControlPanel extends LitElement implements Layer {
return html`
e.preventDefault()}
>
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index db68fe987..3d0bad609 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -1038,7 +1038,9 @@ export class EventsDisplay extends LitElement implements Layer {
class="relative w-full min-[1200px]:bottom-4 min-[1200px]:right-4 z-50 min-[1200px]:w-96 backdrop-blur-sm"
>
-
+
${this.renderToggleButton(
@@ -1081,7 +1083,7 @@ export class EventsDisplay extends LitElement implements Layer {
this.lastRefresh + this.refreshRate) {
- const delta = now - this.lastRefresh;
- this.renderAllFx(context, delta);
- this.lastRefresh = now;
+ const nowMs = performance.now();
+
+ const hasFx = this.allFx.length > 0;
+ if (!this.game.config().userSettings()?.fxLayer() || !hasFx) {
+ if (this.hasBufferedFrame) {
+ // Clear stale pixels once when fx ends/disabled so re-enabling doesn't
+ // flash old frames.
+ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.hasBufferedFrame = false;
}
- context.drawImage(
- this.canvas,
- -this.game.width() / 2,
- -this.game.height() / 2,
- this.game.width(),
- this.game.height(),
- );
+ this.lastRefreshMs = nowMs;
+ return;
}
+
+ const needsRefresh =
+ !this.hasBufferedFrame || nowMs > this.lastRefreshMs + this.refreshRate;
+ if (needsRefresh) {
+ const delta = this.hasBufferedFrame ? nowMs - this.lastRefreshMs : 0;
+ this.renderAllFx(delta);
+ this.lastRefreshMs = nowMs;
+ this.hasBufferedFrame = true;
+ }
+
+ this.drawVisibleFx(context);
}
- renderAllFx(context: CanvasRenderingContext2D, delta: number) {
- if (this.allFx.length > 0) {
- this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
- this.renderContextFx(delta);
- }
+ private drawVisibleFx(context: CanvasRenderingContext2D) {
+ const mapW = this.game.width();
+ const mapH = this.game.height();
+
+ const [topLeft, bottomRight] = this.transformHandler.screenBoundingRect();
+ const pad = 2;
+
+ const left = Math.max(0, Math.floor(topLeft.x - pad));
+ const top = Math.max(0, Math.floor(topLeft.y - pad));
+ const right = Math.min(mapW, Math.ceil(bottomRight.x + pad));
+ const bottom = Math.min(mapH, Math.ceil(bottomRight.y + pad));
+
+ const width = Math.max(0, right - left);
+ const height = Math.max(0, bottom - top);
+ if (width === 0 || height === 0) return;
+
+ context.drawImage(
+ this.canvas,
+ left,
+ top,
+ width,
+ height,
+ -mapW / 2 + left,
+ -mapH / 2 + top,
+ width,
+ height,
+ );
+ }
+
+ private renderAllFx(delta: number) {
+ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.renderContextFx(delta);
}
renderContextFx(duration: number) {
diff --git a/src/client/graphics/layers/HeadsUpMessage.ts b/src/client/graphics/layers/HeadsUpMessage.ts
index cdb69b2a4..0239e2f15 100644
--- a/src/client/graphics/layers/HeadsUpMessage.ts
+++ b/src/client/graphics/layers/HeadsUpMessage.ts
@@ -126,7 +126,7 @@ export class HeadsUpMessage extends LitElement implements Layer {
${this.isVisible
? html`