From 6b42a31eaad80e0e4501d098090247adccaf55a1 Mon Sep 17 00:00:00 2001 From: scamiv <6170744+scamiv@users.noreply.github.com> Date: Sun, 22 Mar 2026 02:03:23 +0100 Subject: [PATCH] Migrate runtime asset references to versioned URLs --- src/client/AccountModal.ts | 3 +- src/client/FlagInput.ts | 10 ++- src/client/FlagInputModal.ts | 5 +- src/client/HelpModal.ts | 81 ++++++++++--------- src/client/LangSelector.ts | 7 +- src/client/LanguageModal.ts | 3 +- src/client/NewsModal.ts | 2 +- src/client/SinglePlayerModal.ts | 3 +- src/client/components/Footer.ts | 5 +- .../baseComponents/ranking/PlayerRow.ts | 17 ++-- src/client/components/map/MapDisplay.ts | 4 +- src/client/graphics/layers/NameLayer.ts | 3 +- .../graphics/layers/PlayerInfoOverlay.ts | 3 +- src/client/graphics/layers/PlayerPanel.ts | 3 +- src/core/CustomFlag.ts | 3 +- 15 files changed, 88 insertions(+), 64 deletions(-) diff --git a/src/client/AccountModal.ts b/src/client/AccountModal.ts index 0268d21d2..0536c0a58 100644 --- a/src/client/AccountModal.ts +++ b/src/client/AccountModal.ts @@ -5,6 +5,7 @@ import { PlayerStatsTree, UserMeResponse, } from "../core/ApiSchemas"; +import { assetUrl } from "../core/AssetUrls"; import { getServerConfigFromClient } from "../core/configuration/ConfigLoader"; import { fetchPlayerById, getUserMe } from "./Api"; import { discordLogin, logOut, sendMagicLink } from "./Auth"; @@ -274,7 +275,7 @@ export class AccountModal extends BaseModal { class="w-full px-6 py-4 text-white bg-[#5865F2] hover:bg-[#4752C4] border border-transparent rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#5865F2] transition-colors duration-200 flex items-center justify-center gap-3 group relative overflow-hidden shadow-lg hover:shadow-[#5865F2]/20" > Discord diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts index 0622937cf..d363f186e 100644 --- a/src/client/FlagInput.ts +++ b/src/client/FlagInput.ts @@ -1,5 +1,6 @@ import { LitElement, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; +import { assetUrl } from "../core/AssetUrls"; import { renderPlayerFlag } from "../core/CustomFlag"; import { FlagSchema } from "../core/Schemas"; import { translateText } from "./Utils"; @@ -120,12 +121,15 @@ export class FlagInput extends LitElement { renderPlayerFlag(this.flag, preview); } else { const img = document.createElement("img"); - img.src = this.flag ? `/flags/${this.flag}.svg` : `/flags/xx.svg`; + const fallbackFlagUrl = assetUrl("flags/xx.svg"); + img.src = this.flag + ? assetUrl(`flags/${this.flag}.svg`) + : fallbackFlagUrl; img.className = "w-full h-full object-cover pointer-events-none"; img.draggable = false; img.onerror = () => { - if (!img.src.endsWith("/flags/xx.svg")) { - img.src = "/flags/xx.svg"; + if (!img.src.endsWith(fallbackFlagUrl)) { + img.src = fallbackFlagUrl; } }; preview.appendChild(img); diff --git a/src/client/FlagInputModal.ts b/src/client/FlagInputModal.ts index 8451b4e5d..217d17da8 100644 --- a/src/client/FlagInputModal.ts +++ b/src/client/FlagInputModal.ts @@ -1,6 +1,7 @@ import { html } from "lit"; import { customElement, query, state } from "lit/decorators.js"; import Countries from "resources/countries.json" with { type: "json" }; +import { assetUrl } from "../core/AssetUrls"; import { translateText } from "./Utils"; import { BaseModal } from "./components/BaseModal"; import { modalHeader } from "./components/ui/ModalHeader"; @@ -61,11 +62,11 @@ export class FlagInputModal extends BaseModal { { const img = e.currentTarget as HTMLImageElement; - const fallback = "/flags/xx.svg"; + const fallback = assetUrl("flags/xx.svg"); if (img.src && !img.src.endsWith(fallback)) { img.src = fallback; } diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts index b66336d9d..f791d13f1 100644 --- a/src/client/HelpModal.ts +++ b/src/client/HelpModal.ts @@ -1,6 +1,7 @@ import { html } from "lit"; import { customElement, query, state } from "lit/decorators.js"; import { translateText, TUTORIAL_VIDEO_URL } from "../client/Utils"; +import { assetUrl } from "../core/AssetUrls"; import { BaseModal } from "./components/BaseModal"; import "./components/Difficulties"; import { modalHeader } from "./components/ui/ModalHeader"; @@ -527,7 +528,7 @@ export class HelpModal extends BaseModal { >${translateText("help_modal.ui_leaderboard")} Leaderboard${translateText("help_modal.ui_control")} Control Panel
Events Events Attack${translateText("help_modal.ui_options")} Options${translateText("help_modal.ui_playeroverlay")} Player Info
Radial Menu Radial Menu Ally
  • ${translateText("help_modal.radial_build")}
  • ${translateText("help_modal.radial_info")}
  • ${translateText("help_modal.radial_boat")}
  • ${translateText("help_modal.info_alliance")}
  • ${translateText("help_modal.ally_betray")}
  • ${translateText("help_modal.info_enemy_panel")} Enemy Info
  • ${translateText("help_modal.info_chat")}
  • ${translateText("help_modal.info_target")}
  • ${translateText("help_modal.info_alliance")}
  • ${translateText("help_modal.info_emoji")}
  • @@ -869,7 +870,7 @@ export class HelpModal extends BaseModal { >${translateText("help_modal.info_ally_panel")} Ally Info
  • ${translateText("help_modal.ally_betray")}
  • ${translateText("help_modal.ally_donate")}
  • @@ -987,7 +988,7 @@ export class HelpModal extends BaseModal { @@ -1003,7 +1004,7 @@ export class HelpModal extends BaseModal { @@ -1019,7 +1020,7 @@ export class HelpModal extends BaseModal { @@ -1035,7 +1036,7 @@ export class HelpModal extends BaseModal { @@ -1051,7 +1052,7 @@ export class HelpModal extends BaseModal { @@ -1067,7 +1068,7 @@ export class HelpModal extends BaseModal { @@ -1083,7 +1084,7 @@ export class HelpModal extends BaseModal { @@ -1099,7 +1100,7 @@ export class HelpModal extends BaseModal { @@ -1115,7 +1116,7 @@ export class HelpModal extends BaseModal { @@ -1169,7 +1170,7 @@ export class HelpModal extends BaseModal { class="bg-black/20 rounded-xl border border-white/10 p-4 flex flex-col items-center gap-3 hover:bg-white/5 transition-colors" > Rank 1 Traitor Ally Embargo Request diff --git a/src/client/LanguageModal.ts b/src/client/LanguageModal.ts index 7e6023648..4fd2651e4 100644 --- a/src/client/LanguageModal.ts +++ b/src/client/LanguageModal.ts @@ -1,6 +1,7 @@ import { html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { translateText } from "../client/Utils"; +import { assetUrl } from "../core/AssetUrls"; import "./components/baseComponents/Modal"; import { BaseModal } from "./components/BaseModal"; import { modalHeader } from "./components/ui/ModalHeader"; @@ -69,7 +70,7 @@ export class LanguageModal extends BaseModal { @click=${() => this.selectLanguage(lang.code)} > ${lang.code} diff --git a/src/client/NewsModal.ts b/src/client/NewsModal.ts index dfd85ec92..1eae8e744 100644 --- a/src/client/NewsModal.ts +++ b/src/client/NewsModal.ts @@ -62,7 +62,7 @@ export class NewsModal extends BaseModal { protected onOpen(): void { if (!this.initialized) { this.initialized = true; - fetch(`${changelog}?v=${encodeURIComponent(version.trim())}`) + fetch(changelog) .then((response) => (response.ok ? response.text() : "Failed to load")) .then((markdown) => normalizeNewsMarkdown(markdown)) .then((markdown) => (this.markdown = markdown)) diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts index c93fa9edd..f11999594 100644 --- a/src/client/SinglePlayerModal.ts +++ b/src/client/SinglePlayerModal.ts @@ -2,6 +2,7 @@ import { TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { translateText } from "../client/Utils"; import { UserMeResponse } from "../core/ApiSchemas"; +import { assetUrl } from "../core/AssetUrls"; import { Difficulty, GameMapSize, @@ -244,7 +245,7 @@ export class SinglePlayerModal extends BaseModal { : "text-white/60"}" > `; @@ -192,7 +193,10 @@ export class PlayerRow extends LitElement { > ${renderNumber(this.score)}
    • - +
    `; } @@ -211,7 +215,10 @@ export class PlayerRow extends LitElement {
    ${this.renderAllTrades()}
    - + `; @@ -249,7 +256,7 @@ export class PlayerRow extends LitElement { `; } else if (this.player.flag) { return html``; } @@ -259,7 +266,7 @@ export class PlayerRow extends LitElement { class="size-7.5 leading-1.25 shrink-0 rounded-[50%] sm:size-10 sm:pt-2.5 sm:leading-3.5 border border-gray-200 text-center bg-slate-500" > diff --git a/src/client/components/map/MapDisplay.ts b/src/client/components/map/MapDisplay.ts index 2318d9523..3cf5782af 100644 --- a/src/client/components/map/MapDisplay.ts +++ b/src/client/components/map/MapDisplay.ts @@ -1,5 +1,6 @@ import { LitElement, html } from "lit"; import { customElement, property, state } from "lit/decorators.js"; +import { assetUrl } from "../../../core/AssetUrls"; import { Difficulty, GameMapType } from "../../../core/game/Game"; import { terrainMapFileLoader } from "../../TerrainMapFileLoader"; import { translateText } from "../../Utils"; @@ -143,8 +144,7 @@ export class MapDisplay extends LitElement { const wins = this.readWins(); return medalOrder.map((medal) => { const earned = wins.has(medal); - const mask = - "url('/images/MedalIconWhite.svg') no-repeat center / contain"; + const mask = `url('${assetUrl("images/MedalIconWhite.svg")}') no-repeat center / contain`; return html`
    ` : html`` : html``} ${player.displayName()} diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts index 0fb3b304f..38268d163 100644 --- a/src/client/graphics/layers/PlayerPanel.ts +++ b/src/client/graphics/layers/PlayerPanel.ts @@ -1,6 +1,7 @@ import { html, LitElement } from "lit"; import { customElement, state } from "lit/decorators.js"; import Countries from "resources/countries.json" with { type: "json" }; +import { assetUrl } from "../../../core/AssetUrls"; import { EventBus } from "../../../core/EventBus"; import { AllPlayers, @@ -493,7 +494,7 @@ export class PlayerPanel extends LitElement implements Layer {
    ${country && typeof flagCode === "string" ? html`${country?.name { diff --git a/src/core/CustomFlag.ts b/src/core/CustomFlag.ts index 3347e5e8f..663d4364d 100644 --- a/src/core/CustomFlag.ts +++ b/src/core/CustomFlag.ts @@ -1,3 +1,4 @@ +import { assetUrl } from "./AssetUrls"; import { Cosmetics } from "./CosmeticSchemas"; const ANIMATION_DURATIONS: Record = { @@ -39,7 +40,7 @@ export function renderPlayerFlag( for (const { layerKey, colorKey } of layers) { const layerName = cosmetics?.flag?.layers[layerKey]?.name ?? layerKey; - const mask = `/flags/custom/${layerName}.svg`; + const mask = assetUrl(`flags/custom/${layerName}.svg`); if (!mask) continue; const layer = document.createElement("div");