{
+ const displayName = this.displayUsername(client);
+ return html`
`;
+ },
)}
- ${client.username}
-
`,
+ ${displayName}
+
@@ -151,9 +157,10 @@ export class LobbyTeamView extends LitElement {
return html`${repeat(
this.clients,
(c) => c.clientID ?? c.username,
- (client) =>
- html`
- ${client.username}
+ (client) => {
+ const displayName = this.displayUsername(client);
+ return html`
+ ${displayName}
${client.clientID === this.lobbyCreatorClientID
? html`(${translateText("host_modal.host_badge")}) this.onKickPlayer?.(client.clientID)}
aria-label=${translateText("host_modal.remove_player", {
- username: client.username,
+ username: displayName,
})}
>
×
`
: html``}
- `,
+ `;
+ },
)} `;
}
@@ -207,11 +215,12 @@ export class LobbyTeamView extends LitElement {
: repeat(
preview.players,
(p) => p.clientID ?? p.username,
- (p) =>
- html`
@@ -353,4 +363,18 @@ export class LobbyTeamView extends LitElement {
}
return getCompactMapNationCount(this.nationCount, this.isCompactMap);
}
+
+ private displayUsername(client: ClientInfo): string {
+ if (!this.userSettings.anonymousNames()) {
+ return client.username;
+ }
+
+ if (this.currentClientID && client.clientID === this.currentClientID) {
+ return client.username;
+ }
+
+ return (
+ createRandomName(client.username, PlayerType.Human) ?? client.username
+ );
+ }
}
From db745dcf4a9fe765cdb32704a625fb14b5dc1b0a Mon Sep 17 00:00:00 2001
From: Vivacious Box {
+ const displayName = this.displayUsername(p);
+ return html`
`;
+ },
)}
- ${p.username}
+ ${displayName}
${p.clientID === this.lobbyCreatorClientID
? html`(${translateText("host_modal.host_badge")})
×
`
: html``}
-
`,
+
+
+
+
+
+ + ${translateText("main.troubleshooting")} +
+ +
+
+ + ${translateText("help_modal.troubleshooting_desc")} +
+ +
@@ -1137,6 +1185,20 @@ export class HelpModal extends BaseModal {
`;
}
+ openTroubleshooting() {
+ const troubleshootingModal = document.querySelector(
+ "troubleshooting-modal",
+ ) as TroubleshootingModal;
+ if (
+ !troubleshootingModal ||
+ !(troubleshootingModal instanceof TroubleshootingModal)
+ ) {
+ console.warn("Troubleshooting modal element not found");
+ return;
+ }
+ troubleshootingModal.open();
+ }
+
protected onOpen(): void {
this.keybinds = this.getKeybinds();
}
diff --git a/src/client/Main.ts b/src/client/Main.ts
index 8858b2f43..b89c7a3cd 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -813,6 +813,7 @@ class Client {
"game-top-bar",
"help-modal",
"user-setting",
+ "troubleshooting-modal",
"territory-patterns-modal",
"language-modal",
"news-modal",
diff --git a/src/client/TroubleshootingModal.ts b/src/client/TroubleshootingModal.ts
new file mode 100644
index 000000000..4a017a4fe
--- /dev/null
+++ b/src/client/TroubleshootingModal.ts
@@ -0,0 +1,254 @@
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { translateText } from "./Utils";
+import { BaseModal } from "./components/BaseModal";
+import "./components/baseComponents/Modal";
+import { modalHeader } from "./components/ui/ModalHeader";
+import {
+ collectGraphicsDiagnostics,
+ GraphicsDiagnostics,
+} from "./utilities/Diagnostic";
+import infoIcon from "/images/InfoIcon.svg?url";
+
+@customElement("troubleshooting-modal")
+export class TroubleshootingModal extends BaseModal {
+ @property({ type: String }) markdown = "Loading...";
+
+ @property({ type: Object })
+ diagnostics?: GraphicsDiagnostics;
+
+ @property({ type: Boolean }) loading = true;
+
+ private initialized: boolean = false;
+
+ private async loadDiagnostics() {
+ const canvas = document.createElement("canvas");
+ this.diagnostics = await collectGraphicsDiagnostics(canvas);
+ this.loading = false;
+ this.initialized = true;
+ }
+
+ render() {
+ const content = html`
+
+ ${content}
+
+ `;
+ }
+
+ private infoTip(text: string, warning?: boolean): unknown {
+ return html`
+ {
+ /* ---------- Browser / OS ---------- */
+
+ const uaData = (navigator as any).userAgentData;
+
+ const os = uaData?.platform ?? detectOS(navigator.userAgent);
+
+ const browser: BrowserInfo = {
+ engine: uaData?.brands
+ ? uaData.brands.map((b: any) => b.brand).join(", ")
+ : navigator.userAgent,
+ platform: navigator.platform,
+ os,
+ dpr: window.devicePixelRatio,
+ };
+
+ /* ---------- Rendering ---------- */
+
+ let gl: WebGLRenderingContext | WebGL2RenderingContext | null = null;
+ let type: RendererType = "Canvas2D";
+
+ gl =
+ canvas.getContext("webgl2", { antialias: true }) ??
+ canvas.getContext("webgl", { antialias: true });
+
+ if (gl) {
+ const isWebGL2 =
+ typeof WebGL2RenderingContext !== "undefined" &&
+ gl instanceof WebGL2RenderingContext;
+ type = isWebGL2 ? "WebGL2" : "WebGL1";
+ }
+
+ const rendering: RenderingInfo = { type };
+
+ if (gl) {
+ rendering.antialias = gl.getContextAttributes()?.antialias ?? false;
+ rendering.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+
+ const precision = gl.getShaderPrecisionFormat(
+ gl.FRAGMENT_SHADER,
+ gl.HIGH_FLOAT,
+ );
+ rendering.shaderHighp = precision !== null && precision.precision > 0;
+
+ const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+
+ if (debugInfo) {
+ const renderer = gl.getParameter(
+ (debugInfo as any).UNMASKED_RENDERER_WEBGL,
+ ) as string;
+
+ const vendor = gl.getParameter(
+ (debugInfo as any).UNMASKED_VENDOR_WEBGL,
+ ) as string;
+ rendering.gpu = {
+ vendor,
+ renderer,
+ software: /swiftshader|llvmpipe|software/i.test(renderer),
+ };
+ } else {
+ rendering.gpu = { unavailable: true };
+ }
+ }
+
+ /* ---------- Power ---------- */
+
+ let power: PowerInfo = {};
+
+ if ("getBattery" in navigator) {
+ try {
+ const battery = await (navigator as any).getBattery();
+ power = {
+ charging: battery.charging,
+ level: Math.round(battery.level * 100) + "%",
+ };
+ } catch {
+ power = { unavailable: true };
+ }
+ } else {
+ power = { unavailable: true };
+ }
+ return {
+ browser,
+ rendering,
+ power,
+ };
+}
+
+function detectOS(ua: string): string {
+ if (/windows nt/i.test(ua)) return "Windows";
+ if (/mac os x/i.test(ua)) return "macOS";
+ if (/android/i.test(ua)) return "Android";
+ if (/iphone|ipad|ipod/i.test(ua)) return "iOS";
+ if (/linux/i.test(ua)) return "Linux";
+ return "Unknown";
+}
From 1314115d3f8ff989a5911d4e66c339c672ac28fa Mon Sep 17 00:00:00 2001
From: Aotumuri
Date: Wed, 28 Jan 2026 08:52:48 +0900
Subject: [PATCH 09/10] Add map picker with Featured/All tabs (#3005)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Resolves #2996
## Description:
Replace map selection UI in src/client/SinglePlayerModal.ts and
src/client/HostLobbyModal.ts with the picker (Featured/All tabs + random
map card).
Also, since the html was getting quite long, I extracted the shared
parts into a separate component.
I separated Map.ts because the display logic looked reusable in other
places, but I’m also open to merging it back if that makes more sense.
If the review prefers it integrated, I can combine them again.
## 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:
aotumuri
---
resources/lang/en.json | 3 +
src/client/HelpModal.ts | 1 -
src/client/HostLobbyModal.ts | 86 +-------
src/client/SinglePlayerModal.ts | 91 +--------
.../components/{Maps.ts => map/MapDisplay.ts} | 6 +-
src/client/components/map/MapPicker.ts | 183 ++++++++++++++++++
6 files changed, 208 insertions(+), 162 deletions(-)
rename src/client/components/{Maps.ts => map/MapDisplay.ts} (96%)
create mode 100644 src/client/components/map/MapPicker.ts
diff --git a/resources/lang/en.json b/resources/lang/en.json
index d9b6c0d9b..56c8941cd 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -280,6 +280,8 @@
},
"map": {
"map": "Map",
+ "featured": "Featured",
+ "all": "All",
"world": "World",
"giantworldmap": "Giant World Map",
"europe": "Europe",
@@ -330,6 +332,7 @@
"amazonriver": "Amazon River"
},
"map_categories": {
+ "featured": "Featured",
"continental": "Continental",
"regional": "Regional",
"fantasy": "Other",
diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index a5d150f3f..e696db76f 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -3,7 +3,6 @@ import { customElement, state } from "lit/decorators.js";
import { translateText } from "../client/Utils";
import { BaseModal } from "./components/BaseModal";
import "./components/Difficulties";
-import "./components/Maps";
import { modalHeader } from "./components/ui/ModalHeader";
import { TroubleshootingModal } from "./TroubleshootingModal";
diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index 5355f9f33..eff76894b 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -12,7 +12,6 @@ import {
Quads,
Trios,
UnitType,
- mapCategories,
} from "../core/game/Game";
import {
ClientInfo,
@@ -28,7 +27,7 @@ import "./components/CopyButton";
import "./components/Difficulties";
import "./components/FluentSlider";
import "./components/LobbyPlayerView";
-import "./components/Maps";
+import "./components/map/MapPicker";
import { modalHeader } from "./components/ui/ModalHeader";
import { crazyGamesSDK } from "./CrazyGamesSDK";
import { JoinLobbyEvent } from "./Main";
@@ -38,7 +37,6 @@ import {
renderToggleInputCardInput,
} from "./utilities/RenderToggleInputCard";
import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
-import randomMap from "/images/RandomMap.webp?url";
@customElement("host-lobby-modal")
export class HostLobbyModal extends BaseModal {
@state() private selectedMap: GameMapType = GameMapType.World;
@@ -209,80 +207,14 @@ export class HostLobbyModal extends BaseModal {
${translateText("map.map")}
-
+ ${modalHeader({
+ titleContent: html`
+ `;
+
+ if (this.inline) {
+ return content;
+ }
+
+ return html`
+
+
+ ${translateText("main.help")}
+ / ${translateText("troubleshooting.title")}
+
+
+
`,
+ onBack: this.close,
+ ariaLabel: translateText("common.back"),
+ })}
+ ${this.loading
+ ? ""
+ : html`
+
+ `}
+
+ 
+ ${text}
+
+ `;
+ }
+
+ protected onOpen(): void {
+ if (!this.initialized) {
+ this.initialized = true;
+ this.loadDiagnostics();
+ }
+ }
+
+ private section(title: string, content: unknown) {
+ return html`
+
+
+ `;
+ }
+
+ private row(label: string, value: unknown) {
+ return html`
+ + ${title} +
+${content}
+
+ ${label}
+ ${value}
+
+ `;
+ }
+
+ private async copyDiagnostics() {
+ if (!this.diagnostics) return;
+ const formatted =
+ "```json\n" + JSON.stringify(this.diagnostics, null, 2) + "\n```";
+ await navigator.clipboard.writeText(formatted);
+ window.dispatchEvent(
+ new CustomEvent("show-message", {
+ detail: {
+ message: html`${translateText("troubleshooting.copied_to_clipboard")}`,
+ type: "info",
+ duration: 3000,
+ },
+ }),
+ );
+ }
+
+ private describeRenderer(rendering: any): string {
+ if (rendering.gpu?.software) {
+ return translateText("troubleshooting.software_rendering");
+ }
+ if (rendering.type === "Canvas2D") {
+ return translateText("troubleshooting.canvas_2d_no_gpu");
+ }
+ return `${rendering.type}`;
+ }
+
+ public close(): void {
+ this.unregisterEscapeHandler();
+
+ if (this.inline) {
+ this.style.pointerEvents = "none";
+ if (window.showPage) {
+ window.showPage?.("page-help");
+ }
+ } else {
+ this.modalEl?.close();
+ }
+ }
+}
diff --git a/src/client/utilities/Diagnostic.ts b/src/client/utilities/Diagnostic.ts
new file mode 100644
index 000000000..dc6553071
--- /dev/null
+++ b/src/client/utilities/Diagnostic.ts
@@ -0,0 +1,141 @@
+export type RendererType = "Canvas2D" | "WebGL1" | "WebGL2";
+
+export interface BrowserInfo {
+ engine: string;
+ platform: string;
+ os: string;
+ dpr: number;
+}
+
+export interface GraphicsDiagnostics {
+ browser: BrowserInfo;
+ rendering: RenderingInfo;
+ power: PowerInfo;
+}
+
+export interface GPUInfo {
+ vendor?: string;
+ renderer?: string;
+ software?: boolean;
+ unavailable?: boolean;
+}
+
+export interface RenderingInfo {
+ type: RendererType;
+ antialias?: boolean;
+ maxTextureSize?: number;
+ shaderHighp?: boolean;
+ gpu?: GPUInfo;
+}
+
+export interface PerformanceInfo {
+ fps: number;
+ worstFrameMs: number;
+ jankPercent: number;
+ throttlingLikely: boolean;
+}
+
+export interface PowerInfo {
+ charging?: boolean;
+ level?: string;
+ unavailable?: boolean;
+}
+
+export async function collectGraphicsDiagnostics(
+ canvas: HTMLCanvasElement,
+): Promise
-
- ${Object.entries(mapCategories).map(
- ([categoryKey, maps]) => html`
-
+
-
- `,
- )}
-
- - ${translateText(`map_categories.${categoryKey}`)} -
-
- ${maps.map((mapValue) => {
- const mapKey = Object.entries(GameMapType).find(
- ([, v]) => v === mapValue,
- )?.[0];
- return html`
-
- this.handleMapSelection(mapValue)}
- class="cursor-pointer transition-transform duration-200 active:scale-95"
- >
-
- `;
- })}
-
-
- - ${translateText("map_categories.special")} -
-
-
-
-
- ${Object.entries(mapCategories).map(
- ([categoryKey, maps]) => html`
-
+
-
- `,
- )}
-
-
- - ${translateText(`map_categories.${categoryKey}`)} -
-
- ${maps.map((mapValue) => {
- const mapKey = Object.keys(GameMapType).find(
- (key) =>
- GameMapType[key as keyof typeof GameMapType] ===
- mapValue,
- );
- return html`
-
- this.handleMapSelection(mapValue)}
- class="cursor-pointer transition-transform duration-200 active:scale-95"
- >
-
- `;
- })}
-
-
- - ${translateText("map_categories.special")} -
-
-
-
- this.handleMapSelection(mapValue)}
+ class="cursor-pointer transition-transform duration-200 active:scale-95"
+ >
+
+ `;
+ }
+
+ private renderAllMaps() {
+ const mapCategoryEntries = Object.entries(mapCategories);
+ return html`
+ ${mapCategoryEntries.map(
+ ([categoryKey, maps]) => html`
+
`;
+ }
+
+ private renderFeaturedMaps() {
+ let featuredMapList = featuredMaps;
+ if (!featuredMapList.includes(this.selectedMap)) {
+ featuredMapList = [this.selectedMap, ...featuredMaps];
+ }
+ return html`
+
+ `,
+ )}
+ + ${translateText(`map_categories.${categoryKey}`)} +
+
+ ${maps.map((mapValue) => this.renderMapCard(mapValue))}
+
+
+
`;
+ }
+
+ render() {
+ return html`
+ + ${translateText("map_categories.featured")} +
+
+ ${featuredMapList.map((mapValue) => this.renderMapCard(mapValue))}
+
+
+
+ `;
+ }
+}
From 0cc58a8f5a13f62a36f91eea2ed9d2c39419a442 Mon Sep 17 00:00:00 2001
From: Aotumuri
+
+ ${this.showAllMaps ? this.renderAllMaps() : this.renderFeaturedMaps()}
+
+
+
+
+
+
+ + ${translateText("map_categories.special")} +
+
+
+
+