-
- ${items.map((r) => {
- const isSelected =
- r.type === "pattern"
- ? (r.cosmetic === null && this.selectedPattern === null) ||
- (r.cosmetic !== null &&
- this.selectedPattern?.name === r.cosmetic.name &&
- (this.selectedPattern?.colorPalette?.name ?? null) ===
- (r.colorPalette?.name ?? null))
- : (() => {
- const skinName = (r.cosmetic as Skin | null)?.name ?? null;
- return (
- (skinName === null && this.selectedSkinName === null) ||
- (skinName !== null && this.selectedSkinName === skinName)
- );
- })();
- return html`
- this.selectCosmetic(rc)}
- >
- `;
- })}
-
+
+ ${items.map((r) => {
+ const isSelected =
+ r.type === "pattern"
+ ? (r.cosmetic === null && this.selectedPattern === null) ||
+ (r.cosmetic !== null &&
+ this.selectedPattern?.name === r.cosmetic.name &&
+ (this.selectedPattern?.colorPalette?.name ?? null) ===
+ (r.colorPalette?.name ?? null))
+ : (() => {
+ const skinName = (r.cosmetic as Skin | null)?.name ?? null;
+ return (
+ (skinName === null && this.selectedSkinName === null) ||
+ (skinName !== null && this.selectedSkinName === skinName)
+ );
+ })();
+ return html`
+ this.selectCosmetic(rc)}
+ >
+ `;
+ })}
`;
}
@@ -140,7 +152,7 @@ export class TerritoryPatternsModal extends BaseModal {
class="relative flex flex-col border-b border-white/10 pb-4 shrink-0"
>
${modalHeader({
- title: translateText("territory_patterns.title"),
+ title: translateText("cosmetics.title"),
onBack: () => this.close(),
ariaLabel: translateText("common.back"),
rightContent: html`
`,
@@ -152,7 +164,7 @@ export class TerritoryPatternsModal extends BaseModal {
rounded-xl shadow-inner text-xl text-center focus:outline-none
focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 text-white placeholder-white/30 transition-all"
type="text"
- placeholder=${translateText("territory_patterns.search")}
+ placeholder=${translateText("cosmetics.search")}
.value=${this.search}
@change=${this.handleSearch}
@keyup=${this.handleSearch}
@@ -162,7 +174,19 @@ export class TerritoryPatternsModal extends BaseModal {
`;
}
- protected renderBody() {
+ protected renderBody(tab: string) {
+ let grid: TemplateResult;
+ if (tab === "effects") {
+ grid = html`
`;
+ } else {
+ grid = this.renderSkinGrid();
+ }
return html`
-
${this.renderSkinGrid()}
+
${grid}
`;
}
@@ -202,8 +226,8 @@ export class TerritoryPatternsModal extends BaseModal {
);
this.selectedSkinName = skinName;
this.selectedPattern = null;
+ // Stay open — the tile highlight moves to the new selection.
this.refresh();
- this.close();
}
private selectPattern(pattern: PlayerPattern | null) {
@@ -219,9 +243,9 @@ export class TerritoryPatternsModal extends BaseModal {
}
this.selectedPattern = pattern;
this.selectedSkinName = null;
+ // Stay open — the tile highlight moves to the new selection.
this.refresh();
this.showSkinSelectedPopup();
- this.close();
}
private showSkinSelectedPopup() {
diff --git a/src/client/EffectsInput.ts b/src/client/EffectsInput.ts
deleted file mode 100644
index e7d5c21183..0000000000
--- a/src/client/EffectsInput.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import {
- findEffect,
- isTrailEffect,
- TRAIL_EFFECT_TYPES,
- TrailEffectAttributes,
-} from "../core/CosmeticSchemas";
-import {
- EFFECTS_KEY,
- USER_SETTINGS_CHANGED_EVENT,
-} from "../core/game/UserSettings";
-import "./components/EffectPreview"; // registers
-import { fetchCosmetics, getPlayerCosmetics } from "./Cosmetics";
-import { crazyGamesSDK } from "./CrazyGamesSDK";
-import { translateText } from "./Utils";
-
-@customElement("effects-input")
-export class EffectsInput extends LitElement {
- // The selected trail effect's attributes for the button preview, if any.
- // Not named `attributes` — that collides with HTMLElement.attributes.
- @state() private trailAttributes: TrailEffectAttributes | null = null;
-
- private _abortController: AbortController | null = null;
-
- // PlayerEffect is just { name, effectType }; resolve the visual style from the
- // cosmetics catalog by (effectType, name). The button shows a single trail
- // swatch, so preview the first selected trail effect across trail effectTypes
- // (boat trail before nuke trail, per TRAIL_EFFECT_TYPES order). nukeExplosion
- // is not a trail and has no swatch preview here.
- private async resolveTrailAttributes(): Promise {
- const cosmetics = await getPlayerCosmetics();
- const catalog = await fetchCosmetics();
- for (const effectType of TRAIL_EFFECT_TYPES) {
- const name = cosmetics.effects?.[effectType]?.name;
- if (!name) continue;
- const effect = findEffect(catalog, effectType, name);
- if (effect && isTrailEffect(effect)) return effect.attributes;
- }
- return null;
- }
-
- private _onCosmeticSelected = async () => {
- this.trailAttributes = await this.resolveTrailAttributes();
- };
-
- private onInputClick(e: Event) {
- e.preventDefault();
- e.stopPropagation();
- this.dispatchEvent(
- new CustomEvent("effects-input-click", {
- bubbles: true,
- composed: true,
- }),
- );
- }
-
- async connectedCallback() {
- super.connectedCallback();
- this._abortController = new AbortController();
- this.trailAttributes = await this.resolveTrailAttributes();
- window.addEventListener(
- `${USER_SETTINGS_CHANGED_EVENT}:${EFFECTS_KEY}`,
- this._onCosmeticSelected,
- { signal: this._abortController.signal },
- );
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- if (this._abortController) {
- this._abortController.abort();
- this._abortController = null;
- }
- }
-
- createRenderRoot() {
- return this;
- }
-
- render() {
- if (crazyGamesSDK.isOnCrazyGames()) {
- return html``;
- }
-
- const preview =
- this.trailAttributes === null
- ? html`
- ${translateText("effects.title")}
- `
- : html`
-
- `;
-
- return html`
-
- `;
- }
-}
diff --git a/src/client/EffectsModal.ts b/src/client/EffectsModal.ts
deleted file mode 100644
index 98eb8766a0..0000000000
--- a/src/client/EffectsModal.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { UserMeResponse } from "../core/ApiSchemas";
-import { Cosmetics, EFFECT_TYPES } from "../core/CosmeticSchemas";
-import { BaseModal } from "./components/BaseModal";
-import "./components/EffectsGrid";
-import "./components/NotLoggedInWarning";
-import { modalHeader } from "./components/ui/ModalHeader";
-import { fetchCosmetics } from "./Cosmetics";
-import { translateText } from "./Utils";
-
-@customElement("effects-modal")
-export class EffectsModal extends BaseModal {
- protected routerName = "effects";
-
- @state() private cosmetics: Cosmetics | null = null;
- @state() private userMeResponse: UserMeResponse | false = false;
- @state() private search = "";
-
- // One tab per trail effectType; BaseModal owns activeTab + renders the bar.
- protected modalConfig() {
- return {
- tabs: EFFECT_TYPES.map((type) => ({
- key: type,
- label: translateText(`effects.type.${type}`),
- })),
- };
- }
-
- private handleSearch(event: Event) {
- this.search = (event.target as HTMLInputElement).value;
- }
-
- connectedCallback() {
- super.connectedCallback();
- document.addEventListener(
- "userMeResponse",
- (event: CustomEvent) => {
- 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`
`,
- })}
-
-
-
-
-
-
- {
- this.close();
- window.showPage?.("page-item-store");
- }}
- >
-
-
-