Files
OpenFrontIO/tests/client/graphics/layers/PlayerPanelKick.test.ts
T
Evan d3ad1f51bd fix(crazygames): guest username on logout, hide fullscreen, in-game pop-ups (#4538)
Addresses four requests from the CrazyGames platform team.
Supersedes #4520 (closed when its branch was renamed to `crazygames`).

## 1. Username reverts to guest on CrazyGames logout
When a player logged into their CrazyGames account and then logged out,
the username stayed the CrazyGames name. It now reverts to a fresh guest
(`AnonXXX`) name. A `crazyGamesLoggedIn` flag guards this so it only
fires on a real login→logout transition (not on the initial "not logged
in" state, which would otherwise wipe a stored name).

## 2. Fullscreen button hidden on CrazyGames
CrazyGames provides its own fullscreen control in the game frame, so our
in-game fullscreen button is now hidden when running on CrazyGames (and
unchanged everywhere else).

## 3. Native browser prompts → in-game pop-ups
The `showInGameConfirm()` / `showInGameAlert()` helpers (promise-based,
callable from non-Lit contexts like WebSocket/popstate handlers) drive
the existing shared `<confirm-dialog>` component, so styling stays
consistent with the rest of the app. Every native `confirm()`/`alert()`
shown **during gameplay** now uses it:
- Exit-game confirmation (right sidebar + browser-back path)
- Kick-player confirmation
- Host-left notice (dispatches leave-lobby only after dismiss,
preserving the old blocking UX)
- Connection-refused notice (also removes a stale `// TODO: make this a
modal`)

## 4. `gameplayStop` when Settings menu / pop-up is open
- The pop-up helpers report `gameplayStop()` while shown and
`gameplayStart()` on dismiss.
- Settings + Graphics Settings modals now report `gameplayStop` whenever
the menu is open — previously it only fired when the modal *also* paused
the sim (singleplayer / lobby-creator), so regular multiplayer players
never triggered it. Also fixes graphics-settings so gameplay resumes
correctly on close for those players.

## Scope
Per request, this covers **in-game dialogs only**. The main-menu native
alerts (store/checkout, account, subscriptions, friends, login) were
intentionally left as-is.

## Testing
- `tsc --noEmit`, `eslint`, and `prettier --check` all pass.
- Verified the confirm and alert pop-ups render correctly in the running
app (shared `<confirm-dialog>`, danger/warning variants), resolve their
promises, and tear down their portal.
- CrazyGames-iframe-only behaviors (username revert, `gameplayStop`,
fullscreen hiding) are verified by code inspection — they require
running inside the actual CrazyGames frame.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-08 12:02:37 -07:00

229 lines
7.6 KiB
TypeScript

vi.mock("lit", () => ({
html: (strings: TemplateStringsArray, ...values: unknown[]) => ({
strings,
values,
}),
LitElement: class extends EventTarget {
requestUpdate() {}
},
}));
vi.mock("lit/decorators.js", () => ({
customElement: () => (clazz: unknown) => clazz,
state: () => () => {},
property: () => () => {},
query: () => () => {},
}));
vi.mock("../../../../src/client/Utils", () => ({
translateText: vi.fn((key: string) => key),
renderDuration: vi.fn(),
renderNumber: vi.fn(),
renderTroops: vi.fn(),
}));
vi.mock("../../../../src/client/components/ui/ActionButton", () => ({
actionButton: vi.fn((props: unknown) => props),
}));
vi.mock("../../../../src/client/InGameModal", () => ({
showInGameConfirm: vi.fn(),
showInGameAlert: vi.fn(),
}));
import { actionButton } from "../../../../src/client/components/ui/ActionButton";
import { PlayerModerationModal } from "../../../../src/client/hud/layers/PlayerModerationModal";
import { PlayerPanel } from "../../../../src/client/hud/layers/PlayerPanel";
import { showInGameConfirm } from "../../../../src/client/InGameModal";
import { SendKickPlayerIntentEvent } from "../../../../src/client/Transport";
import { PlayerView } from "../../../../src/client/view";
import { PlayerType } from "../../../../src/core/game/Game";
describe("PlayerPanel - kick player moderation", () => {
let panel: PlayerPanel;
const originalConfirm = globalThis.confirm;
beforeEach(() => {
panel = new PlayerPanel();
(panel as any).requestUpdate = vi.fn();
(panel as any).isVisible = true;
});
afterEach(() => {
vi.clearAllMocks();
globalThis.confirm = originalConfirm;
});
test("renders moderation action only when allowed or already kicked", () => {
const my = { isLobbyCreator: () => true } as unknown as PlayerView;
const other = {
id: () => 2,
name: () => "Other",
displayName: () => "[TAG] Other",
type: () => PlayerType.Human,
clientID: () => "client-2",
} as unknown as PlayerView;
(actionButton as unknown as ReturnType<typeof vi.fn>).mockClear();
(panel as any).renderModeration(my, other, false);
expect(actionButton).toHaveBeenCalledTimes(1);
expect(
(actionButton as unknown as ReturnType<typeof vi.fn>).mock.calls[0][0],
).toMatchObject({
label: "player_panel.moderation",
title: "player_panel.moderation",
type: "red",
});
(actionButton as unknown as ReturnType<typeof vi.fn>).mockClear();
(panel as any).kickedPlayerIDs.add("2");
(panel as any).renderModeration(my, other, false);
expect(actionButton).toHaveBeenCalledTimes(1);
const notCreator = { isLobbyCreator: () => false } as unknown as PlayerView;
(actionButton as unknown as ReturnType<typeof vi.fn>).mockClear();
(panel as any).kickedPlayerIDs.clear();
(panel as any).renderModeration(notCreator, other, false);
expect(actionButton).not.toHaveBeenCalled();
});
test("renders moderation action when isAdmin=true even if not lobby creator", () => {
const notCreator = { isLobbyCreator: () => false } as unknown as PlayerView;
const other = {
id: () => 2,
name: () => "Other",
displayName: () => "[TAG] Other",
type: () => PlayerType.Human,
clientID: () => "client-2",
} as unknown as PlayerView;
(actionButton as unknown as ReturnType<typeof vi.fn>).mockClear();
(panel as any).renderModeration(notCreator, other, true);
expect(actionButton).toHaveBeenCalledTimes(1);
});
test("opens moderation modal and hides after a kick", () => {
const other = {
id: () => 2,
name: () => "Other",
displayName: () => "[TAG] Other",
type: () => PlayerType.Human,
clientID: () => "client-2",
} as unknown as PlayerView;
(panel as any).openModeration({ stopPropagation: vi.fn() }, other);
expect((panel as any).moderationTarget).toBe(other);
expect((panel as any).suppressNextHide).toBe(true);
(panel as any).handleModerationKicked(
new CustomEvent("kicked", { detail: { playerId: "2" } }),
);
expect((panel as any).kickedPlayerIDs.has("2")).toBe(true);
expect((panel as any).moderationTarget).toBe(null);
expect((panel as any).isVisible).toBe(false);
});
});
describe("PlayerModerationModal - kick confirmation", () => {
afterEach(() => {
vi.clearAllMocks();
});
test("emits SendKickPlayerIntentEvent and dispatches kicked when confirmed", async () => {
(showInGameConfirm as ReturnType<typeof vi.fn>).mockResolvedValue(true);
const modal = new PlayerModerationModal();
const eventBus = { emit: vi.fn() };
const my = { isLobbyCreator: () => true } as unknown as PlayerView;
const other = {
id: () => 2,
name: () => "Other",
displayName: () => "[TAG] Other",
type: () => PlayerType.Human,
clientID: () => "client-2",
} as unknown as PlayerView;
modal.eventBus = eventBus as any;
modal.myPlayer = my;
modal.target = other;
const kickedListener = vi.fn();
modal.addEventListener("kicked", kickedListener as any);
await (modal as any).handleKickClick({ stopPropagation: vi.fn() });
expect(eventBus.emit).toHaveBeenCalledTimes(1);
const event = eventBus.emit.mock.calls[0][0] as SendKickPlayerIntentEvent;
expect(event).toBeInstanceOf(SendKickPlayerIntentEvent);
expect(event.target).toBe("client-2");
expect(kickedListener).toHaveBeenCalledTimes(1);
const kickedEvent = kickedListener.mock.calls[0][0] as CustomEvent;
expect(kickedEvent.detail).toEqual({ playerId: "2" });
});
test("does not emit when confirmation is cancelled", async () => {
(showInGameConfirm as ReturnType<typeof vi.fn>).mockResolvedValue(false);
const modal = new PlayerModerationModal();
const eventBus = { emit: vi.fn() };
const my = { isLobbyCreator: () => true } as unknown as PlayerView;
const other = {
id: () => 2,
name: () => "Other",
displayName: () => "[TAG] Other",
type: () => PlayerType.Human,
clientID: () => "client-2",
} as unknown as PlayerView;
modal.eventBus = eventBus as any;
modal.myPlayer = my;
modal.target = other;
const kickedListener = vi.fn();
modal.addEventListener("kicked", kickedListener as any);
await (modal as any).handleKickClick({ stopPropagation: vi.fn() });
expect(eventBus.emit).not.toHaveBeenCalled();
expect(kickedListener).not.toHaveBeenCalled();
});
describe("canKick", () => {
function makeModal(isAdmin: boolean) {
const modal = new PlayerModerationModal();
modal.isAdmin = isAdmin;
return modal;
}
const nonCreator = { isLobbyCreator: () => false } as unknown as PlayerView;
const creator = { isLobbyCreator: () => true } as unknown as PlayerView;
const humanOther = {
type: () => PlayerType.Human,
clientID: () => "client-other",
} as unknown as PlayerView;
test("admin non-creator can kick a valid other player", () => {
const modal = makeModal(true);
expect((modal as any).canKick(nonCreator, humanOther)).toBe(true);
});
test("non-admin non-creator cannot kick", () => {
const modal = makeModal(false);
expect((modal as any).canKick(nonCreator, humanOther)).toBe(false);
});
test("admin cannot kick themselves", () => {
const modal = makeModal(true);
// same object reference → other === my
expect((modal as any).canKick(nonCreator, nonCreator)).toBe(false);
});
test("lobby creator can kick a valid other player", () => {
const modal = makeModal(false);
expect((modal as any).canKick(creator, humanOther)).toBe(true);
});
});
});