store lobby start time on first fetch for smoother countdown (#183)

This commit is contained in:
evanpelle
2025-03-08 11:28:47 -08:00
committed by Evan
parent be0798361d
commit 7396281d3e
+14 -15
View File
@@ -3,18 +3,17 @@ import { customElement, state } from "lit/decorators.js";
import { Difficulty, GameMapType, GameType } from "../core/game/Game"; import { Difficulty, GameMapType, GameType } from "../core/game/Game";
import { consolex } from "../core/Consolex"; import { consolex } from "../core/Consolex";
import { getMapsImage } from "./utilities/Maps"; import { getMapsImage } from "./utilities/Maps";
import { GameInfo } from "../core/Schemas"; import { GameID, GameInfo } from "../core/Schemas";
@customElement("public-lobby") @customElement("public-lobby")
export class PublicLobby extends LitElement { export class PublicLobby extends LitElement {
private lobbyOutOfDate = true;
@state() private lobbies: GameInfo[] = []; @state() private lobbies: GameInfo[] = [];
@state() public isLobbyHighlighted: boolean = false; @state() public isLobbyHighlighted: boolean = false;
@state() private isButtonDebounced: boolean = false; @state() private isButtonDebounced: boolean = false;
private lobbiesInterval: number | null = null; private lobbiesInterval: number | null = null;
private currLobby: GameInfo = null; private currLobby: GameInfo = null;
private debounceDelay: number = 750; private debounceDelay: number = 750;
private lobbyIDToStart = new Map<GameID, number>();
createRenderRoot() { createRenderRoot() {
return this; return this;
@@ -39,17 +38,14 @@ export class PublicLobby extends LitElement {
private async fetchAndUpdateLobbies(): Promise<void> { private async fetchAndUpdateLobbies(): Promise<void> {
try { try {
// Due to cache we only update every 2s, this.lobbies = await this.fetchLobbies();
// but reduce time by 1s so countdown looks nice. this.lobbies.forEach((l) => {
if (this.lobbyOutOfDate) { // Store the start time on first fetch because endpoint is cached, causing
this.lobbies = await this.fetchLobbies(); // the time to appear irregular.
} else { if (!this.lobbyIDToStart.has(l.gameID)) {
this.lobbies.forEach((l) => { this.lobbyIDToStart.set(l.gameID, l.msUntilStart + Date.now());
l.msUntilStart -= 1000; }
}); });
this.requestUpdate();
}
this.lobbyOutOfDate = !this.lobbyOutOfDate;
} catch (error) { } catch (error) {
consolex.error("Error fetching lobbies:", error); consolex.error("Error fetching lobbies:", error);
} }
@@ -83,7 +79,10 @@ export class PublicLobby extends LitElement {
if (!lobby?.gameConfig) { if (!lobby?.gameConfig) {
return; return;
} }
const timeRemaining = Math.max(0, Math.floor(lobby.msUntilStart / 1000)); const timeRemaining = Math.max(
0,
Math.floor((this.lobbyIDToStart.get(lobby.gameID) - Date.now()) / 1000),
);
// Format time to show minutes and seconds // Format time to show minutes and seconds
const minutes = Math.floor(timeRemaining / 60); const minutes = Math.floor(timeRemaining / 60);