mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-08-18 17:53:29 +00:00
store lobby start time on first fetch for smoother countdown (#183)
This commit is contained in:
+14
-15
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user