mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 12:00:44 +00:00
Migrate runtime asset references to versioned URLs
This commit is contained in:
scamiv
@@ -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"
|
||||
>
|
||||
<img
|
||||
src="/images/DiscordLogo.svg"
|
||||
src=${assetUrl("images/DiscordLogo.svg")}
|
||||
alt="Discord"
|
||||
class="w-6 h-6 relative z-10"
|
||||
/>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 {
|
||||
<img
|
||||
class="w-full h-auto rounded group-hover:scale-105 transition-transform duration-200 pointer-events-none"
|
||||
draggable="false"
|
||||
src="/flags/${country.code}.svg"
|
||||
src=${assetUrl(`flags/${country.code}.svg`)}
|
||||
loading="lazy"
|
||||
@error=${(e: Event) => {
|
||||
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;
|
||||
}
|
||||
|
||||
+41
-40
@@ -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")}</span
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/leaderboard2.webp"
|
||||
src=${assetUrl("images/helpModal/leaderboard2.webp")}
|
||||
alt="Leaderboard"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
@@ -550,7 +551,7 @@ export class HelpModal extends BaseModal {
|
||||
>${translateText("help_modal.ui_control")}</span
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/controlPanel.webp"
|
||||
src=${assetUrl("images/helpModal/controlPanel.webp")}
|
||||
alt="Control Panel"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
@@ -578,13 +579,13 @@ export class HelpModal extends BaseModal {
|
||||
>
|
||||
<div class="flex flex-col gap-2">
|
||||
<img
|
||||
src="/images/helpModal/eventsPanel.webp"
|
||||
src=${assetUrl("images/helpModal/eventsPanel.webp")}
|
||||
alt="Events"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
src="/images/helpModal/eventsPanelAttack.webp"
|
||||
src=${assetUrl("images/helpModal/eventsPanelAttack.webp")}
|
||||
alt="Events Attack"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
@@ -613,7 +614,7 @@ export class HelpModal extends BaseModal {
|
||||
>${translateText("help_modal.ui_options")}</span
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/options2.webp"
|
||||
src=${assetUrl("images/helpModal/options2.webp")}
|
||||
alt="Options"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
@@ -643,7 +644,7 @@ export class HelpModal extends BaseModal {
|
||||
>${translateText("help_modal.ui_playeroverlay")}</span
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/playerInfoOverlay.webp"
|
||||
src=${assetUrl("images/helpModal/playerInfoOverlay.webp")}
|
||||
alt="Player Info"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
@@ -692,13 +693,13 @@ export class HelpModal extends BaseModal {
|
||||
>
|
||||
<div class="flex flex-col gap-4 shrink-0">
|
||||
<img
|
||||
src="/images/helpModal/radialMenu2.webp"
|
||||
src=${assetUrl("images/helpModal/radialMenu2.webp")}
|
||||
alt="Radial Menu"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
/>
|
||||
<img
|
||||
src="/images/helpModal/radialMenuAlly.webp"
|
||||
src=${assetUrl("images/helpModal/radialMenuAlly.webp")}
|
||||
alt="Radial Menu Ally"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[200px]"
|
||||
loading="lazy"
|
||||
@@ -711,42 +712,42 @@ export class HelpModal extends BaseModal {
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/BuildIconWhite.svg"
|
||||
src=${assetUrl("images/BuildIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.radial_build")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/InfoIcon.svg"
|
||||
src=${assetUrl("images/InfoIcon.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.radial_info")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/BoatIconWhite.svg"
|
||||
src=${assetUrl("images/BoatIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.radial_boat")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/AllianceIconWhite.svg"
|
||||
src=${assetUrl("images/AllianceIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.info_alliance")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/TraitorIconWhite.svg"
|
||||
src=${assetUrl("images/TraitorIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.ally_betray")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/DonateTroopIconWhite.svg"
|
||||
src=${assetUrl("images/DonateTroopIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span
|
||||
@@ -755,7 +756,7 @@ export class HelpModal extends BaseModal {
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/DonateGoldIconWhite.svg"
|
||||
src=${assetUrl("images/DonateGoldIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span
|
||||
@@ -808,7 +809,7 @@ export class HelpModal extends BaseModal {
|
||||
>${translateText("help_modal.info_enemy_panel")}</span
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/infoMenu2.webp"
|
||||
src=${assetUrl("images/helpModal/infoMenu2.webp")}
|
||||
alt="Enemy Info"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[240px]"
|
||||
loading="lazy"
|
||||
@@ -821,35 +822,35 @@ export class HelpModal extends BaseModal {
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/ChatIconWhite.svg"
|
||||
src=${assetUrl("images/ChatIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.info_chat")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/TargetIconWhite.svg"
|
||||
src=${assetUrl("images/TargetIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.info_target")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/AllianceIconWhite.svg"
|
||||
src=${assetUrl("images/AllianceIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.info_alliance")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/EmojiIconWhite.svg"
|
||||
src=${assetUrl("images/EmojiIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.info_emoji")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/StopIconWhite.png"
|
||||
src=${assetUrl("images/StopIconWhite.png")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
loading="lazy"
|
||||
/>
|
||||
@@ -869,7 +870,7 @@ export class HelpModal extends BaseModal {
|
||||
>${translateText("help_modal.info_ally_panel")}</span
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/infoMenu2Ally.webp"
|
||||
src=${assetUrl("images/helpModal/infoMenu2Ally.webp")}
|
||||
alt="Ally Info"
|
||||
class="rounded-lg shadow-lg border border-white/20 max-w-[240px]"
|
||||
loading="lazy"
|
||||
@@ -882,21 +883,21 @@ export class HelpModal extends BaseModal {
|
||||
<ul class="space-y-3">
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/TraitorIconWhite.svg"
|
||||
src=${assetUrl("images/TraitorIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.ally_betray")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/DonateTroopIconWhite.svg"
|
||||
src=${assetUrl("images/DonateTroopIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span>${translateText("help_modal.ally_donate")}</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<img
|
||||
src="/images/DonateGoldIconWhite.svg"
|
||||
src=${assetUrl("images/DonateGoldIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
<span
|
||||
@@ -971,7 +972,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/CityIconWhite.svg"
|
||||
src=${assetUrl("images/CityIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -987,7 +988,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/ShieldIconWhite.svg"
|
||||
src=${assetUrl("images/ShieldIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1003,7 +1004,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/PortIcon.svg"
|
||||
src=${assetUrl("images/PortIcon.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1019,7 +1020,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/FactoryIconWhite.svg"
|
||||
src=${assetUrl("images/FactoryIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1035,7 +1036,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/BattleshipIconWhite.svg"
|
||||
src=${assetUrl("images/BattleshipIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1051,7 +1052,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/MissileSiloIconWhite.svg"
|
||||
src=${assetUrl("images/MissileSiloIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1067,7 +1068,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/SamLauncherIconWhite.svg"
|
||||
src=${assetUrl("images/SamLauncherIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1083,7 +1084,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/NukeIconWhite.svg"
|
||||
src=${assetUrl("images/NukeIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1099,7 +1100,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/MushroomCloudIconWhite.svg"
|
||||
src=${assetUrl("images/MushroomCloudIconWhite.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -1115,7 +1116,7 @@ export class HelpModal extends BaseModal {
|
||||
</td>
|
||||
<td class="py-3 border-b border-white/5">
|
||||
<img
|
||||
src="/images/MIRVIcon.svg"
|
||||
src=${assetUrl("images/MIRVIcon.svg")}
|
||||
class="w-8 h-8 scale-75 origin-left"
|
||||
/>
|
||||
</td>
|
||||
@@ -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"
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/crown.webp"
|
||||
src=${assetUrl("images/helpModal/crown.webp")}
|
||||
alt="Rank 1"
|
||||
class="rounded shadow-lg border border-white/10 h-24 w-auto object-contain"
|
||||
loading="lazy"
|
||||
@@ -1186,7 +1187,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"
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/traitor2.webp"
|
||||
src=${assetUrl("images/helpModal/traitor2.webp")}
|
||||
alt="Traitor"
|
||||
class="rounded shadow-lg border border-white/10 h-24 w-auto object-contain"
|
||||
loading="lazy"
|
||||
@@ -1203,7 +1204,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"
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/ally2.webp"
|
||||
src=${assetUrl("images/helpModal/ally2.webp")}
|
||||
alt="Ally"
|
||||
class="rounded shadow-lg border border-white/10 h-24 w-auto object-contain"
|
||||
loading="lazy"
|
||||
@@ -1220,7 +1221,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"
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/embargo.webp"
|
||||
src=${assetUrl("images/helpModal/embargo.webp")}
|
||||
alt="Embargo"
|
||||
class="rounded shadow-lg border border-white/10 h-24 w-auto object-contain"
|
||||
loading="lazy"
|
||||
@@ -1237,7 +1238,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"
|
||||
>
|
||||
<img
|
||||
src="/images/helpModal/allianceRequest.webp"
|
||||
src=${assetUrl("images/helpModal/allianceRequest.webp")}
|
||||
alt="Request"
|
||||
class="rounded shadow-lg border border-white/10 h-24 w-auto object-contain"
|
||||
loading="lazy"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { LitElement, html } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { assetUrl } from "../core/AssetUrls";
|
||||
import "./LanguageModal";
|
||||
import { LanguageModal } from "./LanguageModal";
|
||||
import { formatDebugTranslation } from "./Utils";
|
||||
@@ -118,7 +119,9 @@ export class LangSelector extends LitElement {
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/lang/${encodeURIComponent(lang)}.json`);
|
||||
const response = await fetch(
|
||||
assetUrl(`lang/${encodeURIComponent(lang)}.json`),
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch language ${lang}: ${response.status}`);
|
||||
}
|
||||
@@ -354,7 +357,7 @@ export class LangSelector extends LitElement {
|
||||
<img
|
||||
id="lang-flag"
|
||||
class="object-contain pointer-events-none transition-all w-[40px] h-[40px] lg:w-[48px] lg:h-[48px]"
|
||||
src="/flags/${currentLang.svg}.svg"
|
||||
src=${assetUrl(`flags/${currentLang.svg}.svg`)}
|
||||
alt="flag"
|
||||
draggable="false"
|
||||
/>
|
||||
|
||||
@@ -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)}
|
||||
>
|
||||
<img
|
||||
src="/flags/${lang.svg}.svg"
|
||||
src=${assetUrl(`flags/${lang.svg}.svg`)}
|
||||
class="w-8 h-6 object-contain rounded-sm shrink-0"
|
||||
alt="${lang.code}"
|
||||
/>
|
||||
|
||||
@@ -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))
|
||||
|
||||
@@ -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"}"
|
||||
>
|
||||
<img
|
||||
src="/images/MedalIconWhite.svg"
|
||||
src=${assetUrl("images/MedalIconWhite.svg")}
|
||||
class="w-4 h-4 opacity-80 shrink-0"
|
||||
style="${this.showAchievements
|
||||
? ""
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { LitElement, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { assetUrl } from "../../core/AssetUrls";
|
||||
|
||||
@customElement("page-footer")
|
||||
export class Footer extends LitElement {
|
||||
@@ -22,7 +23,7 @@ export class Footer extends LitElement {
|
||||
class="opacity-60 hover:opacity-100 hover:scale-110 transition-all"
|
||||
>
|
||||
<img
|
||||
src="/icons/github-mark-white.svg"
|
||||
src=${assetUrl("icons/github-mark-white.svg")}
|
||||
data-i18n-alt="news.github_link"
|
||||
class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
|
||||
draggable="false"
|
||||
@@ -68,7 +69,7 @@ export class Footer extends LitElement {
|
||||
class="opacity-60 hover:opacity-100 hover:scale-110 transition-all"
|
||||
>
|
||||
<img
|
||||
src="/icons/wiki-logo.svg"
|
||||
src=${assetUrl("icons/wiki-logo.svg")}
|
||||
data-i18n-alt="main.wiki"
|
||||
class="h-6 w-6 lg:h-7 lg:w-7 object-contain pointer-events-none"
|
||||
draggable="false"
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
GOLD_INDEX_TRAIN_OTHER,
|
||||
GOLD_INDEX_TRAIN_SELF,
|
||||
} from "src/core/StatsSchemas";
|
||||
import { assetUrl } from "../../../../core/AssetUrls";
|
||||
import { renderNumber } from "../../../Utils";
|
||||
import { PlayerInfo, RankType } from "./GameInfoRanking";
|
||||
|
||||
@@ -54,7 +55,7 @@ export class PlayerRow extends LitElement {
|
||||
private renderCrownIcon() {
|
||||
return html`
|
||||
<img
|
||||
src="/images/CrownIcon.svg"
|
||||
src=${assetUrl("images/CrownIcon.svg")}
|
||||
class="absolute -top-0.75 left-4 size-3.75 sm:-top-1.75 sm:left-7.5 sm:size-5"
|
||||
/>
|
||||
`;
|
||||
@@ -192,7 +193,10 @@ export class PlayerRow extends LitElement {
|
||||
>
|
||||
${renderNumber(this.score)}
|
||||
</div>
|
||||
<img src="/images/GoldCoinIcon.svg" class="size-3.5 sm:size-5 m-auto" />
|
||||
<img
|
||||
src=${assetUrl("images/GoldCoinIcon.svg")}
|
||||
class="size-3.5 sm:size-5 m-auto"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -211,7 +215,10 @@ export class PlayerRow extends LitElement {
|
||||
<div class="rounded-md text-sm leading-[1.9rem] text-center w-full">
|
||||
${this.renderAllTrades()}
|
||||
</div>
|
||||
<img src="/images/GoldCoinIcon.svg" class="w-5 size-3.5 sm:size-5" />
|
||||
<img
|
||||
src=${assetUrl("images/GoldCoinIcon.svg")}
|
||||
class="w-5 size-3.5 sm:size-5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -249,7 +256,7 @@ export class PlayerRow extends LitElement {
|
||||
</div>`;
|
||||
} else if (this.player.flag) {
|
||||
return html`<img
|
||||
src="/flags/${this.player.flag}.svg"
|
||||
src=${assetUrl(`flags/${this.player.flag}.svg`)}
|
||||
class="min-w-7.5 h-7.5 sm:min-w-10 sm:h-10 shrink-0"
|
||||
/>`;
|
||||
}
|
||||
@@ -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"
|
||||
>
|
||||
<img
|
||||
src="/images/ProfileIcon.svg"
|
||||
src=${assetUrl("images/ProfileIcon.svg")}
|
||||
class="size-5 mt-0.5 sm:size-6.25 sm:-mt-1.25 m-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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`<div
|
||||
class="w-5 h-5 ${earned ? "opacity-100" : "opacity-25"}"
|
||||
style="background-color:${colors[
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { assetUrl } from "../../../core/AssetUrls";
|
||||
import { renderPlayerFlag } from "../../../core/CustomFlag";
|
||||
import { EventBus } from "../../../core/EventBus";
|
||||
import { PseudoRandom } from "../../../core/PseudoRandom";
|
||||
@@ -229,7 +230,7 @@ export class NameLayer implements Layer {
|
||||
} else if (flag !== undefined && flag !== null) {
|
||||
const flagImg = document.createElement("img");
|
||||
applyFlagStyles(flagImg);
|
||||
flagImg.src = "/flags/" + flag + ".svg";
|
||||
flagImg.src = assetUrl(`flags/${flag}.svg`);
|
||||
nameDiv.appendChild(flagImg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { LitElement, TemplateResult, html } from "lit";
|
||||
import { ref } from "lit-html/directives/ref.js";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { assetUrl } from "../../../core/AssetUrls";
|
||||
import { renderPlayerFlag } from "../../../core/CustomFlag";
|
||||
import { EventBus } from "../../../core/EventBus";
|
||||
import {
|
||||
@@ -377,7 +378,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
|
||||
></div>`
|
||||
: html`<img
|
||||
class="h-6 aspect-3/4"
|
||||
src=${"/flags/" + player.cosmetics.flag! + ".svg"}
|
||||
src=${assetUrl(`flags/${player.cosmetics.flag!}.svg`)}
|
||||
/>`
|
||||
: html``}
|
||||
<span>${player.displayName()}</span>
|
||||
|
||||
@@ -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 {
|
||||
<div class="flex items-center gap-2.5 flex-wrap">
|
||||
${country && typeof flagCode === "string"
|
||||
? html`<img
|
||||
src="/flags/${encodeURIComponent(flagCode)}.svg"
|
||||
src=${assetUrl(`flags/${encodeURIComponent(flagCode)}.svg`)}
|
||||
alt=${country?.name ?? "Flag"}
|
||||
class="h-10 w-10 rounded-full object-cover"
|
||||
@error=${(e: Event) => {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { assetUrl } from "./AssetUrls";
|
||||
import { Cosmetics } from "./CosmeticSchemas";
|
||||
|
||||
const ANIMATION_DURATIONS: Record<string, number> = {
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user