+ ${noFlag} ${cosmeticFlags} ${countryFlags}
+
+ `;
+ }
+
render() {
const content = html`
@@ -36,6 +112,7 @@ export class FlagInputModal extends BaseModal {
focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 text-white placeholder-white/30 transition-all"
type="text"
placeholder=${translateText("flag_input.search_flag")}
+ .value=${this.search}
@change=${this.handleSearch}
@keyup=${this.handleSearch}
/>
@@ -43,43 +120,9 @@ export class FlagInputModal extends BaseModal {
`;
@@ -113,21 +156,18 @@ export class FlagInputModal extends BaseModal {
}
private setFlag(flag: string) {
- localStorage.setItem("flag", flag);
- this.dispatchEvent(
- new CustomEvent("flag-change", {
- detail: { flag },
- bubbles: true,
- composed: true,
- }),
- );
+ new UserSettings().setFlag(flag);
}
- protected onOpen(): void {
- // No custom logic needed
+ protected async onOpen(): Promise
+ ${this.renderNotLoggedInWarning()}
+
`
+ : undefined,
+ })}
+
+
+
+
+ `;
+ }
+
+ private renderPatternGrid(): TemplateResult {
+ const buttons: TemplateResult[] = [];
+ const patterns: (Pattern | null)[] = [
+ null,
+ ...Object.values(this.cosmetics?.patterns ?? {}),
+ ];
+ for (const pattern of patterns) {
+ const colorPalettes = pattern
+ ? [...(pattern.colorPalettes ?? []), null]
+ : [null];
+ for (const colorPalette of colorPalettes) {
+ let rel = "owned";
+ if (pattern) {
+ rel = patternRelationship(
+ pattern,
+ colorPalette,
+ this.userMeResponse,
+ this.affiliateCode,
+ );
+ }
+ if (rel === "blocked" || rel === "owned") {
+ continue;
+ }
+ const isDefaultPattern = pattern === null;
+ const isSelected =
+ (isDefaultPattern && this.selectedPattern === null) ||
+ (!isDefaultPattern &&
+ this.selectedPattern &&
+ this.selectedPattern.name === pattern?.name &&
+ (this.selectedPattern.colorPalette?.name ?? null) ===
+ (colorPalette?.name ?? null));
+ buttons.push(html`
+
+ ${translateText("store.no_skins")}
+
`;
+ }
+
+ return html`
+
+ ${buttons}
+
+ `;
+ }
+
+ private renderFlagGrid(): TemplateResult {
+ const buttons: TemplateResult[] = [];
+ const flags = Object.entries(this.cosmetics?.flags ?? {});
+ for (const [key, flag] of flags) {
+ const rel = flagRelationship(
+ flag,
+ this.userMeResponse,
+ this.affiliateCode,
+ );
+ if (rel === "blocked" || rel === "owned") continue;
+ const selectedFlag = new UserSettings().getFlag() ?? "";
+ buttons.push(html`
+
+ ${translateText("store.no_flags")}
+
`;
+ }
+
+ return html`
+
+ ${buttons}
+
+ `;
+ }
+
+ private renderNotLoggedInWarning(): TemplateResult {
+ return html``;
+ }
+
+ render() {
+ if (!this.isActive && !this.inline) return html``;
+
+ const content = html`
+
+ ${this.renderHeader()}
+
+
+ `;
+
+ if (this.inline) {
+ return content;
+ }
+
+ return html`
+
- ${this.renderNotLoggedInWarning()}
-
`
- : undefined,
- })}
-
- `;
- }
-
private renderPatternGrid(): TemplateResult {
const buttons: TemplateResult[] = [];
const patterns: (Pattern | null)[] = [
@@ -129,19 +84,12 @@ export class TerritoryPatternsModal extends BaseModal {
pattern,
colorPalette,
this.userMeResponse,
- this.affiliateCode,
+ null,
);
}
- if (rel === "blocked") {
+ if (rel !== "owned") {
continue;
}
- if (this.showOnlyOwned) {
- if (rel !== "owned") continue;
- } else {
- // Store mode: hide owned items
- if (rel === "owned") continue;
- }
- // Determine if this pattern/color is selected
const isDefaultPattern = pattern === null;
const isSelected =
(isDefaultPattern && this.selectedPattern === null) ||
@@ -156,11 +104,9 @@ export class TerritoryPatternsModal extends BaseModal {
.colorPalette=${this.cosmetics?.colorPalettes?.[
colorPalette?.name ?? ""
] ?? null}
- .requiresPurchase=${rel === "purchasable"}
+ .requiresPurchase=${false}
.selected=${isSelected}
.onSelect=${(p: PlayerPattern | null) => this.selectPattern(p)}
- .onPurchase=${(p: Pattern, colorPalette: ColorPalette | null) =>
- handlePurchase(p, colorPalette)}
>
`);
}
@@ -168,42 +114,15 @@ export class TerritoryPatternsModal extends BaseModal {
return html`
-
diff --git a/src/client/components/PurchaseButton.ts b/src/client/components/PurchaseButton.ts
new file mode 100644
index 000000000..47bacf4b1
--- /dev/null
+++ b/src/client/components/PurchaseButton.ts
@@ -0,0 +1,37 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Product } from "../../core/CosmeticSchemas";
+import { translateText } from "../Utils";
+
+@customElement("purchase-button")
+export class PurchaseButton extends LitElement {
+ @property({ type: Object })
+ product!: Product;
+
+ @property({ type: Function })
+ onPurchase?: () => void;
+
+ createRenderRoot() {
+ return this;
+ }
+
+ private handleClick(e: Event) {
+ e.stopPropagation();
+ this.onPurchase?.();
+ }
+
+ render() {
+ return html`
+
- ${hasLinkedAccount(this.userMeResponse)
- ? this.renderMySkinsButton()
- : html``}
+
`;
}
- private renderMySkinsButton(): TemplateResult {
- return html``;
- }
-
private renderNotLoggedInWarning(): TemplateResult {
return html`
+ ${buttons}
- ${!this.showOnlyOwned && buttons.length === 0
- ? html`
- ${translateText("territory_patterns.all_owned")}
-
`
- : html`
-
- ${buttons}
-
- `}
+
+
+ `;
+ }
+}
diff --git a/src/client/graphics/layers/NameLayer.ts b/src/client/graphics/layers/NameLayer.ts
index 2cee0dbe0..3862b0ce5 100644
--- a/src/client/graphics/layers/NameLayer.ts
+++ b/src/client/graphics/layers/NameLayer.ts
@@ -1,5 +1,4 @@
-import { assetUrl } from "../../../core/AssetUrls";
-import { renderPlayerFlag } from "../../../core/CustomFlag";
+import { assetUrl } from "src/core/AssetUrls";
import { EventBus } from "../../../core/EventBus";
import { PseudoRandom } from "../../../core/PseudoRandom";
import { Theme } from "../../../core/configuration/Config";
@@ -217,22 +216,15 @@ export class NameLayer implements Layer {
element.classList.add(PLAYER_FLAG);
element.style.opacity = "0.8";
element.style.zIndex = "1";
- element.style.aspectRatio = "3/4";
+ element.style.objectFit = "contain";
};
if (player.cosmetics.flag) {
- const flag = player.cosmetics.flag;
- if (flag !== undefined && flag !== null && flag.startsWith("!")) {
- const flagWrapper = document.createElement("div");
- applyFlagStyles(flagWrapper);
- renderPlayerFlag(flag, flagWrapper);
- nameDiv.appendChild(flagWrapper);
- } else if (flag !== undefined && flag !== null) {
- const flagImg = document.createElement("img");
- applyFlagStyles(flagImg);
- flagImg.src = assetUrl(`flags/${flag}.svg`);
- nameDiv.appendChild(flagImg);
- }
+ const flag = assetUrl(player.cosmetics.flag);
+ const flagImg = document.createElement("img");
+ flagImg.src = flag;
+ applyFlagStyles(flagImg);
+ nameDiv.appendChild(flagImg);
}
nameDiv.classList.add(PLAYER_NAME);
nameDiv.style.color = this.theme.textColor(player);
diff --git a/src/client/graphics/layers/PerformanceOverlay.ts b/src/client/graphics/layers/PerformanceOverlay.ts
index ec08d024b..9dd097ab9 100644
--- a/src/client/graphics/layers/PerformanceOverlay.ts
+++ b/src/client/graphics/layers/PerformanceOverlay.ts
@@ -476,14 +476,8 @@ export class PerformanceOverlay extends LitElement implements Layer {
this.updateTickMetrics(event.tickExecutionDuration, event.tickDelay);
};
- private onUserSettingsChanged = (event: Event) => {
- const customEvent = event as CustomEvent<{
- key?: string;
- value?: unknown;
- }>;
- if (customEvent.detail?.key !== "settings.performanceOverlay") return;
-
- const nextVisible = customEvent.detail.value === true;
+ private onUserSettingsChanged = (event: CustomEvent) => {
+ const nextVisible = (event.detail as boolean) === true;
if (this.isVisible === nextVisible) return;
this.setVisible(nextVisible);
};
@@ -511,7 +505,7 @@ export class PerformanceOverlay extends LitElement implements Layer {
if (!this.isUserSettingsListenerAttached) {
globalThis.addEventListener(
- "user-settings-changed",
+ "event:user-settings-changed:settings.performanceOverlay",
this.onUserSettingsChanged,
);
this.isUserSettingsListenerAttached = true;
@@ -523,7 +517,7 @@ export class PerformanceOverlay extends LitElement implements Layer {
if (this.isUserSettingsListenerAttached) {
globalThis.removeEventListener(
- "user-settings-changed",
+ "event:user-settings-changed:settings.performanceOverlay",
this.onUserSettingsChanged,
);
this.isUserSettingsListenerAttached = false;
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index a332eaaad..46db9d883 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -1,8 +1,6 @@
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 {
PlayerProfile,
@@ -365,21 +363,10 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
)}"
>
${player.cosmetics.flag
- ? player.cosmetics.flag!.startsWith("!")
- ? html` {
- if (el instanceof HTMLElement) {
- requestAnimationFrame(() => {
- renderPlayerFlag(player.cosmetics.flag!, el);
- });
- }
- })}
- >
`
- : html`})
`
+ ? html`