) => {
+ this.onUserMe(event.detail);
+ },
+ );
+ }
+
+ async onUserMe(userMeResponse: UserMeResponse | false) {
+ this.userMeResponse = userMeResponse;
+ this.cosmetics = await fetchCosmetics();
+ this.requestUpdate();
+ }
+
+ protected renderHeaderSlot() {
+ return html`
+
+ ${modalHeader({
+ title: translateText("effects.title"),
+ onBack: () => this.close(),
+ ariaLabel: translateText("common.back"),
+ rightContent: html``,
+ })}
+
+ `;
+ }
+
+ protected renderBody() {
+ return html`
+
+
+ {
+ this.close();
+ window.showPage?.("page-item-store");
+ }}
+ >
+
+
+
+ ${translateText("territory_patterns.pattern.default")}
+
`;
+ }
+ // Only effectType today is transportShipTrail; c.attributes is its style.
+ return renderTransportShipTrailSwatch(c.attributes);
+ }
+
if (this.activeResolved.type === "pack") {
const pack = this.activeResolved.cosmetic as Pack;
const isHard = pack.currency === "hard";
@@ -254,7 +273,7 @@ export class CosmeticButton extends LitElement {
render() {
const active = this.activeResolved;
const c = active.cosmetic;
- const priced = c as Pattern | Skin | Flag | Pack | null;
+ const priced = c as Pattern | Skin | Flag | Effect | Pack | null;
const priceHard = priced?.priceHard;
const priceSoft = priced?.priceSoft;
const artist = priced?.artist;
diff --git a/src/client/components/EffectPreview.ts b/src/client/components/EffectPreview.ts
new file mode 100644
index 000000000..21b78eb33
--- /dev/null
+++ b/src/client/components/EffectPreview.ts
@@ -0,0 +1,48 @@
+import { html, TemplateResult } from "lit";
+import { TransportShipTrailAttributes } from "../../core/CosmeticSchemas";
+
+// A flowing spectrum used for the "rainbow" transport-ship-trail preview.
+const RAINBOW_GRADIENT =
+ "linear-gradient(90deg,#ff0000,#ff8a00,#ffe600,#28c76f,#00a8ff,#7d5fff,#ff0000)";
+
+// Neutral fallback for attribute types we don't recognize.
+const UNKNOWN_BG = "#444";
+
+/**
+ * Render a swatch preview of a transport-ship-trail's attributes, filling its
+ * container: solid = flat color, pulse = same color pulsing, rainbow = full
+ * spectrum, gradient = two-color blend. Unknown attribute types render a neutral
+ * swatch (we ignore types we don't know about).
+ */
+export function renderTransportShipTrailSwatch(
+ attributes: TransportShipTrailAttributes,
+): TemplateResult {
+ switch (attributes.type) {
+ case "rainbow":
+ return html``;
+ case "gradient":
+ return html``;
+ case "pulse":
+ return html``;
+ case "solid":
+ return html``;
+ default:
+ // Unknown / unrecognized style — neutral swatch.
+ return html``;
+ }
+}
diff --git a/src/client/components/EffectsGrid.ts b/src/client/components/EffectsGrid.ts
new file mode 100644
index 000000000..9b5d391a4
--- /dev/null
+++ b/src/client/components/EffectsGrid.ts
@@ -0,0 +1,161 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { UserMeResponse } from "../../core/ApiSchemas";
+import {
+ Cosmetics,
+ Effect,
+ EFFECT_TYPES,
+ EffectType,
+} from "../../core/CosmeticSchemas";
+import {
+ EFFECTS_KEY,
+ USER_SETTINGS_CHANGED_EVENT,
+ UserSettings,
+} from "../../core/game/UserSettings";
+import {
+ purchaseCosmetic,
+ resolveCosmetics,
+ ResolvedCosmetic,
+} from "../Cosmetics";
+import { translateText } from "../Utils";
+import "./CosmeticButton";
+
+// "Default" (none) tile — selecting it clears the effect for that effectType.
+function noneTile(effectType: EffectType): ResolvedCosmetic {
+ return {
+ type: "effect",
+ cosmetic: null,
+ colorPalette: null,
+ relationship: "owned",
+ key: `effect:none:${effectType}`,
+ effectType,
+ };
+}
+
+/**
+ * Renders effect cosmetics grouped by effectType, one sub-header per type.
+ * Shared by the home selection modal and the Store's Effects tab.
+ *
+ * - mode="select": owned effects + a Default tile per type; clicking persists
+ * the selection to UserSettings and re-renders.
+ * - mode="purchase": purchasable effects per type with the buy flow.
+ */
+@customElement("effects-grid")
+export class EffectsGrid extends LitElement {
+ @property({ attribute: false }) cosmetics: Cosmetics | null = null;
+ @property({ attribute: false }) userMeResponse: UserMeResponse | false =
+ false;
+ @property({ type: String }) mode: "select" | "purchase" = "select";
+ @property({ attribute: false }) affiliateCode: string | null = null;
+
+ private userSettings = new UserSettings();
+ private _onChange = () => this.requestUpdate();
+
+ connectedCallback() {
+ super.connectedCallback();
+ window.addEventListener(
+ `${USER_SETTINGS_CHANGED_EVENT}:${EFFECTS_KEY}`,
+ this._onChange,
+ );
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ window.removeEventListener(
+ `${USER_SETTINGS_CHANGED_EVENT}:${EFFECTS_KEY}`,
+ this._onChange,
+ );
+ }
+
+ createRenderRoot() {
+ return this;
+ }
+
+ private select(effectType: EffectType, name: string | null) {
+ this.userSettings.setSelectedEffectName(effectType, name ?? undefined);
+ // Stay rendered; the change event re-renders this grid and the home button.
+ this.requestUpdate();
+ }
+
+ private itemsForType(
+ all: ResolvedCosmetic[],
+ effectType: EffectType,
+ ): ResolvedCosmetic[] {
+ const ofType = all.filter(
+ (r) =>
+ r.type === "effect" &&
+ r.cosmetic !== null &&
+ r.effectType === effectType,
+ );
+ if (this.mode === "purchase") {
+ return ofType.filter((r) => r.relationship === "purchasable");
+ }
+ return [
+ noneTile(effectType),
+ ...ofType.filter((r) => r.relationship === "owned"),
+ ];
+ }
+
+ private renderTile(
+ effectType: EffectType,
+ r: ResolvedCosmetic,
+ ): TemplateResult {
+ if (this.mode === "purchase") {
+ return html``;
+ }
+ const name = (r.cosmetic as Effect | null)?.name ?? null;
+ const selected = this.userSettings.getSelectedEffectName(effectType);
+ const isSelected =
+ (name === null && selected === null) ||
+ (name !== null && selected === name);
+ return html` this.select(effectType, name)}
+ >`;
+ }
+
+ render() {
+ const all = resolveCosmetics(
+ this.cosmetics,
+ this.userMeResponse,
+ this.affiliateCode,
+ );
+ const sections = EFFECT_TYPES.map((type) => ({
+ type,
+ items: this.itemsForType(all, type),
+ })).filter((s) => s.items.length > 0);
+
+ if (sections.length === 0) {
+ return html`
+ ${translateText("store.no_effects")}
+
`;
+ }
+
+ return html`
+
+ ${sections.map(
+ (s) => html`
+
+
+ ${translateText(`effects.type.${s.type}`)}
+
+
+ ${s.items.map((r) => this.renderTile(s.type, r))}
+
+
+ `,
+ )}
+