mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-23 22:43:36 +00:00
Aotumuri
dda47b0813
> **Before opening a PR:** discuss new features on [Discord](https://discord.gg/K9zernJB5z) first, and file bugs or small improvements as [issues](https://github.com/openfrontio/OpenFrontIO/issues/new/choose). You must be assigned to an `approved` issue — unsolicited PRs will be auto-closed. **Add approved & assigned issue number here:** Resolves #4154 ## Description: Adds a join path from reserved clan tag warnings to the clan detail modal. https://github.com/user-attachments/assets/cc0f4cb8-be8e-414a-8147-7a744069999e ## 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 ## Please put your Discord username so you can be contacted if a bug or regression is found: aotumuri
596 lines
20 KiB
TypeScript
596 lines
20 KiB
TypeScript
import { html } from "lit";
|
|
import { customElement, state } from "lit/decorators.js";
|
|
import { getUserMe, invalidateUserMe } from "./Api";
|
|
import { type ClanInfo, type ClanMember } from "./ClanApi";
|
|
import { BaseModal } from "./components/BaseModal";
|
|
import "./components/clan/ClanBansView";
|
|
import "./components/clan/ClanBrowseView";
|
|
import type { BrowseState } from "./components/clan/ClanBrowseView";
|
|
import "./components/clan/ClanCard";
|
|
import "./components/clan/ClanDetailView";
|
|
import "./components/clan/ClanGameHistoryView";
|
|
import type { ClanGameHistoryCache } from "./components/clan/ClanGameHistoryView";
|
|
import "./components/clan/ClanManageView";
|
|
import "./components/clan/ClanMyRequestsView";
|
|
import "./components/clan/ClanRequestsView";
|
|
import type { ClanRole } from "./components/clan/ClanShared";
|
|
import "./components/clan/ClanTransferView";
|
|
import "./components/ConfirmDialog";
|
|
import "./components/CopyButton";
|
|
import { modalHeader } from "./components/ui/ModalHeader";
|
|
import { translateText } from "./Utils";
|
|
|
|
type View =
|
|
| "list"
|
|
| "detail"
|
|
| "manage"
|
|
| "transfer"
|
|
| "requests"
|
|
| "bans"
|
|
| "my-requests";
|
|
|
|
// List tabs share BaseModal's `activeTab` slot with detail tabs ("overview" /
|
|
// "members" / "game-history"); which set is live depends on `view`.
|
|
const LIST_TABS = ["my-clans", "browse"] as const;
|
|
type ListTab = (typeof LIST_TABS)[number];
|
|
|
|
function isListTab(key: string): key is ListTab {
|
|
return (LIST_TABS as readonly string[]).includes(key);
|
|
}
|
|
|
|
@customElement("clan-modal")
|
|
export class ClanModal extends BaseModal {
|
|
protected routerName = "clan";
|
|
|
|
@state() private view: View = "list";
|
|
@state() private loading = false;
|
|
|
|
@state() private myClans: ClanInfo[] = [];
|
|
@state() private myPendingRequests: {
|
|
tag: string;
|
|
name: string;
|
|
createdAt: string;
|
|
}[] = [];
|
|
|
|
@state() private selectedClanTag = "";
|
|
@state() private selectedClan: ClanInfo | null = null;
|
|
@state() private myRole: ClanRole | null = null;
|
|
private myPublicId: string | null = null;
|
|
@state() private myClanRoles = new Map<string, ClanRole>();
|
|
|
|
// Lifted browse state — survives tab switches
|
|
private browseCache: BrowseState | null = null;
|
|
|
|
// Lifted detail cache — survives sub-view navigation
|
|
private detailCache: {
|
|
tag: string;
|
|
members: ClanMember[];
|
|
membersTotal: number;
|
|
pendingRequestCount: number;
|
|
} | null = null;
|
|
|
|
// Single-clan cache: switching clans within one modal session drops
|
|
// it (see `openDetail`), so a user who clan-hops loses their filter
|
|
// selection and accumulated scroll on the previous clan. Keyed-by-tag
|
|
// would persist across hops if that becomes desired.
|
|
private gameHistoryCache: ClanGameHistoryCache | null = null;
|
|
private previousListTab: ListTab = "my-clans";
|
|
|
|
private get onListView(): boolean {
|
|
return this.view === "list" && !this.selectedClanTag;
|
|
}
|
|
|
|
private get onDetailView(): boolean {
|
|
return this.view === "detail" && !!this.selectedClanTag;
|
|
}
|
|
|
|
protected modalConfig() {
|
|
return {
|
|
tabs: this.onListView
|
|
? [
|
|
{ key: "my-clans", label: translateText("clan_modal.my_clans") },
|
|
{ key: "browse", label: translateText("clan_modal.browse") },
|
|
]
|
|
: this.onDetailView
|
|
? [
|
|
{
|
|
key: "overview",
|
|
label: translateText("clan_modal.tab_overview"),
|
|
},
|
|
{
|
|
key: "members",
|
|
label: translateText("clan_modal.tab_members"),
|
|
},
|
|
{
|
|
key: "game-history",
|
|
label: translateText("clan_modal.tab_game_history"),
|
|
},
|
|
]
|
|
: [],
|
|
};
|
|
}
|
|
|
|
protected renderHeaderSlot() {
|
|
return this.onListView
|
|
? modalHeader({
|
|
title: translateText("clan_modal.title"),
|
|
onBack: () => this.close(),
|
|
ariaLabel: translateText("common.back"),
|
|
})
|
|
: this.renderSubViewHeader();
|
|
}
|
|
|
|
protected renderBody() {
|
|
return html`<div class="p-4 lg:p-[1.4rem]">${this.renderInner()}</div>`;
|
|
}
|
|
|
|
protected onTabEnter(tab: string): void {
|
|
if (isListTab(tab)) {
|
|
this.view = "list";
|
|
this.selectedClan = null;
|
|
this.selectedClanTag = "";
|
|
this.detailCache = null;
|
|
this.gameHistoryCache = null;
|
|
if (tab === "my-clans") {
|
|
this.loadMyClans();
|
|
}
|
|
return;
|
|
}
|
|
// Detail tabs: BaseModal already updated activeTab; renderInner reads it.
|
|
// No additional side effects required here.
|
|
}
|
|
|
|
private tagPill(tag: string) {
|
|
return html`<span
|
|
class="text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full bg-white/10 text-white/50 border border-white/10"
|
|
>[${tag}]</span
|
|
>`;
|
|
}
|
|
|
|
private renderSubViewHeader() {
|
|
const clan = this.selectedClan;
|
|
const ariaLabel = translateText("common.back");
|
|
if (this.view === "my-requests") {
|
|
return modalHeader({
|
|
title: translateText("clan_modal.pending_applications"),
|
|
onBack: () => (this.view = "list"),
|
|
ariaLabel,
|
|
});
|
|
}
|
|
if (this.view === "manage") {
|
|
return modalHeader({
|
|
title: translateText("clan_modal.manage_clan"),
|
|
onBack: () => (this.view = "detail"),
|
|
ariaLabel,
|
|
rightContent: clan ? this.tagPill(clan.tag) : undefined,
|
|
});
|
|
}
|
|
if (this.view === "transfer") {
|
|
return modalHeader({
|
|
title: translateText("clan_modal.transfer_leadership"),
|
|
onBack: () => (this.view = "manage"),
|
|
ariaLabel,
|
|
});
|
|
}
|
|
if (this.view === "requests") {
|
|
return modalHeader({
|
|
title: translateText("clan_modal.join_requests"),
|
|
onBack: () => (this.view = "detail"),
|
|
ariaLabel,
|
|
});
|
|
}
|
|
if (this.view === "bans") {
|
|
return modalHeader({
|
|
title: translateText("clan_modal.banned_players"),
|
|
onBack: () => (this.view = "manage"),
|
|
ariaLabel,
|
|
});
|
|
}
|
|
// Default: detail
|
|
return modalHeader({
|
|
title: clan?.name ?? translateText("clan_modal.title"),
|
|
onBack: () => {
|
|
this.view = "list";
|
|
this.selectedClan = null;
|
|
this.selectedClanTag = "";
|
|
this.myRole = null;
|
|
this.detailCache = null;
|
|
this.gameHistoryCache = null;
|
|
this.setActiveTab(this.previousListTab);
|
|
},
|
|
ariaLabel,
|
|
rightContent: clan ? this.tagPill(clan.tag) : undefined,
|
|
});
|
|
}
|
|
|
|
protected onOpen(args?: Record<string, unknown>): void {
|
|
const targetTag = typeof args?.tag === "string" ? args.tag : "";
|
|
if (targetTag) {
|
|
this.openDetail(targetTag.toUpperCase());
|
|
}
|
|
this.loadMyClans({ allowGuest: Boolean(targetTag) });
|
|
}
|
|
|
|
protected onClose(): void {
|
|
this.activeTab = "my-clans";
|
|
this.previousListTab = "my-clans";
|
|
this.view = "list";
|
|
this.selectedClan = null;
|
|
this.selectedClanTag = "";
|
|
this.myRole = null;
|
|
this.browseCache = null;
|
|
this.detailCache = null;
|
|
this.gameHistoryCache = null;
|
|
}
|
|
|
|
private async loadMyClans(opts: { allowGuest?: boolean } = {}) {
|
|
this.loading = true;
|
|
try {
|
|
const me = await getUserMe();
|
|
if (!this.isModalOpen) return;
|
|
if (!me || Object.keys(me.user).length === 0) {
|
|
if (opts.allowGuest) {
|
|
this.myPublicId = null;
|
|
this.myPendingRequests = [];
|
|
this.myClanRoles = new Map();
|
|
this.myClans = [];
|
|
return;
|
|
}
|
|
window.dispatchEvent(
|
|
new CustomEvent("show-message", {
|
|
detail: {
|
|
message: translateText("clan_modal.sign_in_for_clans"),
|
|
color: "red",
|
|
duration: 3000,
|
|
},
|
|
}),
|
|
);
|
|
this.close();
|
|
window.showPage?.("page-account");
|
|
return;
|
|
}
|
|
this.myPublicId = me.player.publicId;
|
|
this.myPendingRequests = me.player.clanRequests ?? [];
|
|
const roles = new Map<string, ClanRole>();
|
|
const clans: ClanInfo[] = [];
|
|
for (const c of me.player.clans ?? []) {
|
|
roles.set(c.tag, c.role);
|
|
clans.push({
|
|
tag: c.tag,
|
|
name: c.name,
|
|
description: "",
|
|
isOpen: false,
|
|
memberCount: c.memberCount,
|
|
});
|
|
}
|
|
this.myClanRoles = roles;
|
|
this.myClans = clans;
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
|
|
private renderInner() {
|
|
if (this.loading) {
|
|
return this.renderLoadingSpinner();
|
|
}
|
|
|
|
if (this.view === "my-requests") {
|
|
return html`<clan-my-requests-view
|
|
.myPendingRequests=${this.myPendingRequests}
|
|
@navigate-back=${() => (this.view = "list")}
|
|
@request-withdrawn=${(e: CustomEvent<{ tag: string }>) => {
|
|
this.myPendingRequests = this.myPendingRequests.filter(
|
|
(r) => r.tag !== e.detail.tag,
|
|
);
|
|
if (this.myPendingRequests.length === 0) this.view = "list";
|
|
}}
|
|
></clan-my-requests-view>`;
|
|
}
|
|
|
|
if (this.selectedClanTag) {
|
|
if (this.view === "manage") {
|
|
return html`<clan-manage-view
|
|
.clanTag=${this.selectedClanTag}
|
|
.selectedClan=${this.selectedClan}
|
|
.myPublicId=${this.myPublicId}
|
|
.myRole=${this.myRole}
|
|
@navigate-detail=${() => (this.view = "detail")}
|
|
@navigate-bans=${() => (this.view = "bans")}
|
|
@navigate-transfer=${() => (this.view = "transfer")}
|
|
@clan-updated=${(e: CustomEvent<Partial<ClanInfo>>) => {
|
|
if (this.selectedClan) {
|
|
this.selectedClan = { ...this.selectedClan, ...e.detail };
|
|
}
|
|
this.detailCache = null;
|
|
invalidateUserMe();
|
|
}}
|
|
@clan-disbanded=${(e: CustomEvent<{ tag: string }>) => {
|
|
const roles = new Map(this.myClanRoles);
|
|
roles.delete(e.detail.tag);
|
|
this.myClanRoles = roles;
|
|
this.myClans = this.myClans.filter((c) => c.tag !== e.detail.tag);
|
|
this.selectedClan = null;
|
|
this.selectedClanTag = "";
|
|
this.myRole = null;
|
|
this.detailCache = null;
|
|
this.view = "list";
|
|
this.setActiveTab(this.previousListTab);
|
|
}}
|
|
></clan-manage-view>`;
|
|
}
|
|
if (this.view === "transfer") {
|
|
return html`<clan-transfer-view
|
|
.clanTag=${this.selectedClanTag}
|
|
.selectedClan=${this.selectedClan}
|
|
@navigate-back=${() => (this.view = "manage")}
|
|
@leadership-transferred=${() => {
|
|
this.loadMyClans().then(() =>
|
|
this.openDetail(this.selectedClanTag),
|
|
);
|
|
}}
|
|
></clan-transfer-view>`;
|
|
}
|
|
if (this.view === "requests") {
|
|
return html`<clan-requests-view
|
|
.clanTag=${this.selectedClanTag}
|
|
.selectedClan=${this.selectedClan}
|
|
@navigate-back=${() => (this.view = "detail")}
|
|
@request-approved=${() => {
|
|
if (this.selectedClan) {
|
|
this.selectedClan = {
|
|
...this.selectedClan,
|
|
memberCount: (this.selectedClan.memberCount ?? 0) + 1,
|
|
};
|
|
}
|
|
this.detailCache = null;
|
|
}}
|
|
></clan-requests-view>`;
|
|
}
|
|
if (this.view === "bans") {
|
|
return html`<clan-bans-view
|
|
.clanTag=${this.selectedClanTag}
|
|
@navigate-back=${() => (this.view = "manage")}
|
|
></clan-bans-view>`;
|
|
}
|
|
// Default: detail view — dispatched by the active detail tab
|
|
if (this.activeTab === "game-history") {
|
|
return html`<clan-game-history-view
|
|
.clanTag=${this.selectedClanTag}
|
|
.cachedState=${this.gameHistoryCache?.tag === this.selectedClanTag
|
|
? this.gameHistoryCache
|
|
: null}
|
|
@history-updated=${(e: CustomEvent<ClanGameHistoryCache>) => {
|
|
this.gameHistoryCache = e.detail;
|
|
}}
|
|
@close-clan-modal=${() => this.close()}
|
|
></clan-game-history-view>`;
|
|
}
|
|
return html`<clan-detail-view
|
|
.clanTag=${this.selectedClanTag}
|
|
.cachedClan=${this.selectedClan}
|
|
.myPublicId=${this.myPublicId}
|
|
.myClanRoles=${this.myClanRoles}
|
|
.myPendingRequests=${this.myPendingRequests}
|
|
.detailTab=${this.activeTab === "members" ? "members" : "overview"}
|
|
.cachedDetail=${this.detailCache?.tag === this.selectedClanTag
|
|
? this.detailCache
|
|
: null}
|
|
@navigate-back=${() => {
|
|
this.view = "list";
|
|
this.selectedClan = null;
|
|
this.selectedClanTag = "";
|
|
this.myRole = null;
|
|
this.detailCache = null;
|
|
this.gameHistoryCache = null;
|
|
this.setActiveTab(this.previousListTab);
|
|
}}
|
|
@detail-loaded=${(
|
|
e: CustomEvent<{
|
|
clan: ClanInfo;
|
|
myRole: ClanRole | null;
|
|
members: ClanMember[];
|
|
membersTotal: number;
|
|
pendingRequestCount: number;
|
|
}>,
|
|
) => {
|
|
this.selectedClan = e.detail.clan;
|
|
this.myRole = e.detail.myRole;
|
|
this.detailCache = {
|
|
tag: e.detail.clan.tag,
|
|
members: e.detail.members,
|
|
membersTotal: e.detail.membersTotal,
|
|
pendingRequestCount: e.detail.pendingRequestCount,
|
|
};
|
|
}}
|
|
@members-loaded=${(
|
|
e: CustomEvent<{
|
|
members: ClanMember[];
|
|
membersTotal: number;
|
|
pendingRequestCount: number;
|
|
}>,
|
|
) => {
|
|
if (
|
|
!this.detailCache ||
|
|
this.detailCache.tag !== this.selectedClanTag
|
|
)
|
|
return;
|
|
this.detailCache = {
|
|
...this.detailCache,
|
|
members: e.detail.members,
|
|
membersTotal: e.detail.membersTotal,
|
|
pendingRequestCount: e.detail.pendingRequestCount,
|
|
};
|
|
}}
|
|
@navigate-manage=${() => (this.view = "manage")}
|
|
@navigate-requests=${() => (this.view = "requests")}
|
|
@clan-joined=${(e: CustomEvent<{ tag: string }>) => {
|
|
this.myClanRoles = new Map([
|
|
...this.myClanRoles,
|
|
[e.detail.tag, "member" as ClanRole],
|
|
]);
|
|
this.detailCache = null;
|
|
this.openDetail(e.detail.tag);
|
|
}}
|
|
@clan-left=${(e: CustomEvent<{ tag: string }>) => {
|
|
const roles = new Map(this.myClanRoles);
|
|
roles.delete(e.detail.tag);
|
|
this.myClanRoles = roles;
|
|
this.selectedClan = null;
|
|
this.selectedClanTag = "";
|
|
this.myRole = null;
|
|
this.detailCache = null;
|
|
this.view = "list";
|
|
this.setActiveTab(this.previousListTab);
|
|
}}
|
|
@request-sent=${(e: CustomEvent<{ tag: string; name: string }>) => {
|
|
this.myPendingRequests = [
|
|
...this.myPendingRequests,
|
|
{
|
|
tag: e.detail.tag,
|
|
name: e.detail.name,
|
|
createdAt: new Date().toISOString(),
|
|
},
|
|
];
|
|
}}
|
|
></clan-detail-view>`;
|
|
}
|
|
|
|
// List view (my clans / browse) — header + tabs are rendered by o-modal
|
|
return html`
|
|
${this.activeTab === "my-clans"
|
|
? this.renderMyClans()
|
|
: html`<clan-browse-view
|
|
.myClanRoles=${this.myClanRoles}
|
|
.myPendingRequests=${this.myPendingRequests}
|
|
.cachedState=${this.browseCache}
|
|
@browse-updated=${(e: CustomEvent<BrowseState>) => {
|
|
this.browseCache = e.detail;
|
|
}}
|
|
@clan-select=${(e: CustomEvent<{ tag: string }>) =>
|
|
this.openDetail(e.detail.tag)}
|
|
></clan-browse-view>`}
|
|
`;
|
|
}
|
|
|
|
private openDetail(tag: string) {
|
|
if (this.selectedClanTag !== tag) {
|
|
// History cache is per-clan (see `gameHistoryCache` declaration),
|
|
// so it must be cleared on tag change. `detailCache` is left
|
|
// alone — its `tag` field is checked at render time and the
|
|
// detail view falls back to a fresh fetch when it doesn't match,
|
|
// so an explicit null here would be redundant.
|
|
this.gameHistoryCache = null;
|
|
}
|
|
// Remember which list tab the user was on so the back button can
|
|
// return them to it (browse vs my-clans).
|
|
if (isListTab(this.activeTab)) {
|
|
this.previousListTab = this.activeTab;
|
|
}
|
|
this.selectedClanTag = tag;
|
|
this.view = "detail";
|
|
// modalConfig() returns detail tabs; setActiveTab anchors activeTab to
|
|
// "overview" and syncs the URL router (routerName = "clan").
|
|
this.setActiveTab("overview");
|
|
}
|
|
|
|
private renderMyClans() {
|
|
const hasClans = this.myClans.length > 0;
|
|
const hasRequests = this.myPendingRequests.length > 0;
|
|
|
|
if (!hasClans && !hasRequests) {
|
|
return html`
|
|
<div class="flex flex-col items-center justify-center p-12 text-center">
|
|
<p class="text-white/40 text-sm mb-4">
|
|
${translateText("clan_modal.no_clans")}
|
|
</p>
|
|
<button
|
|
@click=${() => this.setActiveTab("browse")}
|
|
class="px-6 py-2 text-sm font-bold text-white uppercase tracking-wider bg-malibu-blue hover:bg-aquarius active:bg-malibu-blue/80 rounded-lg transition-all"
|
|
>
|
|
${translateText("clan_modal.browse")}
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<div class="space-y-3">
|
|
${hasRequests ? this.renderPendingRequestsButton() : ""}
|
|
${this.myClans.map(
|
|
(clan) => html`
|
|
<clan-card
|
|
.clan=${clan}
|
|
.clanRole=${this.myClanRoles.get(clan.tag)}
|
|
@clan-select=${(e: CustomEvent<{ tag: string }>) =>
|
|
this.openDetail(e.detail.tag)}
|
|
></clan-card>
|
|
`,
|
|
)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderPendingRequestsButton() {
|
|
const count = this.myPendingRequests.length;
|
|
return html`
|
|
<button
|
|
@click=${() => (this.view = "my-requests")}
|
|
class="w-full flex items-center justify-between bg-amber-500/10 hover:bg-amber-500/15 rounded-xl border border-amber-500/20 p-4 transition-all cursor-pointer group"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 rounded-xl bg-amber-500/20 flex items-center justify-center"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5 text-amber-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-left">
|
|
<span class="text-amber-400 text-sm font-bold">
|
|
${translateText("clan_modal.pending_applications")}
|
|
</span>
|
|
<span class="text-amber-400/60 text-xs block">
|
|
${translateText("clan_modal.pending_requests_count", {
|
|
count,
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="px-2.5 py-1 text-xs font-bold rounded-full bg-amber-500/20 text-amber-400 border border-amber-500/30"
|
|
>
|
|
${count}
|
|
</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="w-5 h-5 text-amber-400/40 group-hover:text-amber-400/70 transition-colors"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M9 5l7 7-7 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
`;
|
|
}
|
|
}
|