alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-13 06:03:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

support for unlockable flags (#3479)

Browse Source 
## Description:

Add support for purchasable/gated flags.

* Create a new "Store" modal that renders both skins & flags
* move all store related logic out of TerritoryPatternsModal
* use nation:code for existing nation flags & flag:key for gated flags
* check if user has the appropriate flags before purchasing

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
This commit is contained in:
Evan
2026-03-23 17:09:18 -07:00
committed by GitHub
parent 426806299f
commit 39ad547c04
30 changed files with 1144 additions and 1155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/TerritoryPatternsModal.ts
+29 -178
View File
@@ -2,18 +2,16 @@ import type { TemplateResult } from "lit";
import { html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { UserMeResponse } from "../core/ApiSchemas";
import { ColorPalette, Cosmetics, Pattern } from "../core/CosmeticSchemas";
import { Cosmetics, Pattern } from "../core/CosmeticSchemas";
import { UserSettings } from "../core/game/UserSettings";
import { PlayerPattern } from "../core/Schemas";
import { hasLinkedAccount } from "./Api";
import { BaseModal } from "./components/BaseModal";
import "./components/Difficulties";
import "./components/PatternButton";
import { modalHeader } from "./components/ui/ModalHeader";
import {
fetchCosmetics,
getPlayerCosmetics,
handlePurchase,
patternRelationship,
} from "./Cosmetics";
import { translateText } from "./Utils";
@@ -25,17 +23,9 @@ export class TerritoryPatternsModal extends BaseModal {
@state() private selectedPattern: PlayerPattern | null;
@state() private selectedColor: string | null = null;
@state() private activeTab: "patterns" | "colors" = "patterns";
@state() private showOnlyOwned: boolean = false;
private cosmetics: Cosmetics | null = null;
private userSettings: UserSettings = new UserSettings();
private isActive = false;
private affiliateCode: string | null = null;
private userMeResponse: UserMeResponse | false = false;
private _onPatternSelected = async () => {
@@ -43,10 +33,6 @@ export class TerritoryPatternsModal extends BaseModal {
this.refresh();
};
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
document.addEventListener(
@@ -55,12 +41,18 @@ export class TerritoryPatternsModal extends BaseModal {
this.onUserMe(event.detail);
},
);
window.addEventListener("pattern-selected", this._onPatternSelected);
window.addEventListener(
"event:user-settings-changed:pattern",
this._onPatternSelected,
);
}
disconnectedCallback() {
super.disconnectedCallback();
window.removeEventListener("pattern-selected", this._onPatternSelected);
window.removeEventListener(
"event:user-settings-changed:pattern",
this._onPatternSelected,
);
}
private async updateFromSettings() {
@@ -76,42 +68,6 @@ export class TerritoryPatternsModal extends BaseModal {
this.refresh();
}
private renderTabNavigation(): TemplateResult {
return html`
${modalHeader({
title: translateText("territory_patterns.title"),
onBack: () => this.close(),
ariaLabel: translateText("common.back"),
rightContent: !hasLinkedAccount(this.userMeResponse)
? html`<div class="flex items-center">
${this.renderNotLoggedInWarning()}
</div>`
: undefined,
})}
<!-- TEMP DISABlE TAB SWITCHING
<div class="flex items-center gap-2 justify-center">
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
.activeTab === "patterns"
? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
: "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
@click=${() => (this.activeTab = "patterns")}
>
${translateText("territory_patterns.title")}
</button>
<button
class="px-6 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-widest ${this
.activeTab === "colors"
? "bg-blue-500/20 text-blue-400 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.2)]"
: "text-white/40 hover:text-white hover:bg-white/5 border border-transparent"}"
@click=${() => (this.activeTab = "colors")}
>
${translateText("territory_patterns.colors")}
</button>
TEMP DISABlE TAB SWITCHING -->
`;
}
private renderPatternGrid(): TemplateResult {
const buttons: TemplateResult[] = [];
const patterns: (Pattern | null)[] = [
@@ -129,19 +85,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 +105,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)}
></pattern-button>
`);
}
@@ -168,42 +115,15 @@ export class TerritoryPatternsModal extends BaseModal {
return html`
<div class="flex flex-col">
<div class="pt-4 flex justify-center">
${hasLinkedAccount(this.userMeResponse)
? this.renderMySkinsButton()
: html``}
<div
class="flex flex-wrap gap-4 p-2 justify-center items-stretch content-start"
>
${buttons}
</div>
${!this.showOnlyOwned && buttons.length === 0
? html`<div
class="text-white/40 text-sm font-bold uppercase tracking-wider text-center py-8"
>
${translateText("territory_patterns.all_owned")}
</div>`
: html`
<div
class="flex flex-wrap gap-4 p-2 justify-center items-stretch content-start"
>
${buttons}
</div>
`}
</div>
`;
}
private renderMySkinsButton(): TemplateResult {
return html`<button
class="px-4 py-2 text-xs font-bold transition-all duration-200 rounded-lg uppercase tracking-wider border mb-4 ${this
.showOnlyOwned
? "bg-blue-500/20 text-blue-400 border-blue-500/50 shadow-[0_0_10px_rgba(59,130,246,0.3)]"
: "bg-white/5 text-white/60 border-white/10 hover:bg-white/10 hover:text-white"}"
@click=${() => {
this.showOnlyOwned = !this.showOnlyOwned;
}}
>
${translateText("territory_patterns.show_only_owned")}
</button>`;
}
private renderNotLoggedInWarning(): TemplateResult {
return html`<button
class="px-4 py-2 text-xs font-bold uppercase tracking-wider transition-colors duration-200 rounded-lg bg-red-500/20 text-red-400 border border-red-500/30 cursor-pointer hover:bg-red-500/30"
@@ -216,44 +136,23 @@ export class TerritoryPatternsModal extends BaseModal {
</button>`;
}
private renderColorSwatchGrid(): TemplateResult {
const hexCodes = (
this.userMeResponse === false
? []
: (this.userMeResponse.player.flares ?? [])
)
.filter((flare) => flare.startsWith("color:"))
.map((flare) => flare.split(":")[1]);
return html`
<div class="flex flex-wrap gap-3 p-2 justify-center items-center">
${hexCodes.map(
(hexCode) => html`
<div
class="w-12 h-12 rounded-xl border-2 border-white/10 cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] hover:border-white relative group"
style="background-color: ${hexCode};"
title="${hexCode}"
@click=${() => this.selectColor(hexCode)}
>
<div
class="absolute inset-0 rounded-xl ring-2 ring-inset ring-black/20"
></div>
</div>
`,
)}
</div>
`;
}
render() {
if (!this.isActive && !this.inline) return html``;
const content = html`
<div class="${this.modalContainerClass}">
${this.renderTabNavigation()}
${modalHeader({
title: translateText("territory_patterns.title"),
onBack: () => this.close(),
ariaLabel: translateText("common.back"),
rightContent: !hasLinkedAccount(this.userMeResponse)
? html`<div class="flex items-center">
${this.renderNotLoggedInWarning()}
</div>`
: undefined,
})}
<div class="overflow-y-auto pr-2 custom-scrollbar mr-1">
${this.activeTab === "patterns"
? this.renderPatternGrid()
: this.renderColorSwatchGrid()}
${this.renderPatternGrid()}
</div>
</div>
`;
@@ -265,9 +164,7 @@ export class TerritoryPatternsModal extends BaseModal {
return html`
<o-modal
id="territoryPatternsModal"
title="${this.activeTab === "patterns"
? translateText("territory_patterns.title")
: translateText("territory_patterns.colors")}"
title="${translateText("territory_patterns.title")}"
?inline=${this.inline}
?hideHeader=${true}
?hideCloseButton=${true}
@@ -277,32 +174,14 @@ export class TerritoryPatternsModal extends BaseModal {
`;
}
public async open(
options?: string | { affiliateCode?: string; showOnlyOwned?: boolean },
) {
public async open() {
this.isActive = true;
if (typeof options === "string") {
this.affiliateCode = options;
this.showOnlyOwned = false;
} else if (
options !== null &&
typeof options === "object" &&
!Array.isArray(options)
) {
this.affiliateCode = options.affiliateCode ?? null;
this.showOnlyOwned = options.showOnlyOwned ?? false;
} else {
this.affiliateCode = null;
this.showOnlyOwned = false;
}
await this.refresh();
super.open();
}
public close() {
this.isActive = false;
this.affiliateCode = null;
super.close();
}
@@ -320,16 +199,11 @@ export class TerritoryPatternsModal extends BaseModal {
}
this.selectedPattern = pattern;
this.refresh();
// Dispatch event so Main.ts can refresh the preview button
this.dispatchEvent(new CustomEvent("pattern-selected", { bubbles: true }));
// Show popup/modal for skin selection
this.showSkinSelectedPopup();
// Close the skin store
this.close();
}
private showSkinSelectedPopup() {
// Use unified heads-up-message for feedback
let skinName = translateText("territory_patterns.pattern.default");
if (this.selectedPattern && this.selectedPattern.name) {
skinName = this.selectedPattern.name
@@ -353,29 +227,6 @@ export class TerritoryPatternsModal extends BaseModal {
);
}
private selectColor(hexCode: string) {
this.selectedPattern = null;
this.userSettings.setSelectedPatternName(undefined);
this.selectedColor = hexCode;
this.userSettings.setSelectedColor(hexCode);
this.refresh();
this.dispatchEvent(new CustomEvent("pattern-selected", { bubbles: true }));
this.close();
}
private renderColorPreview(
hexCode: string,
width: number,
height: number,
): TemplateResult {
return html`
<div
class="w-full h-full rounded"
style="background-color: ${hexCode};"
></div>
`;
}
public async refresh() {
this.requestUpdate();
}