+
+
+
+
+ + ${translateText("main.troubleshooting")} +
+ +
+
+ + ${translateText("help_modal.troubleshooting_desc")} +
+ +
@@ -1137,6 +1184,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/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index e5bb92f11..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")}
-
-
- ${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")} -
-
-
-
-
+ ${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/components/LobbyPlayerView.ts b/src/client/components/LobbyPlayerView.ts
index 4c72fc21d..cc43e6930 100644
--- a/src/client/components/LobbyPlayerView.ts
+++ b/src/client/components/LobbyPlayerView.ts
@@ -15,7 +15,9 @@ import {
} from "../../core/game/Game";
import { getCompactMapNationCount } from "../../core/game/NationCreation";
import { assignTeamsLobbyPreview } from "../../core/game/TeamAssignment";
+import { UserSettings } from "../../core/game/UserSettings";
import { ClientInfo, TeamCountConfig } from "../../core/Schemas";
+import { createRandomName } from "../../core/Util";
import { translateText } from "../Utils";
export interface TeamPreviewData {
@@ -30,6 +32,7 @@ export class LobbyTeamView extends LitElement {
@state() private teamPreview: TeamPreviewData[] = [];
@state() private teamMaxSize: number = 0;
@property({ type: String }) lobbyCreatorClientID: string = "";
+ @property({ type: String }) currentClientID: string = "";
@property({ attribute: "team-count" }) teamCount: TeamCountConfig = 2;
@property({ type: Function }) onKickPlayer?: (clientID: string) => void;
@property({ type: Number }) nationCount: number = 0;
@@ -38,6 +41,7 @@ export class LobbyTeamView extends LitElement {
private theme: PastelTheme = new PastelTheme();
@state() private showTeamColors: boolean = false;
+ private userSettings: UserSettings = new UserSettings();
willUpdate(changedProperties: Map {
+ 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
+ );
+ }
}
diff --git a/src/client/components/Maps.ts b/src/client/components/map/MapDisplay.ts
similarity index 96%
rename from src/client/components/Maps.ts
rename to src/client/components/map/MapDisplay.ts
index e46e4691b..b7fc1364c 100644
--- a/src/client/components/Maps.ts
+++ b/src/client/components/map/MapDisplay.ts
@@ -1,8 +1,8 @@
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
-import { Difficulty, GameMapType } from "../../core/game/Game";
-import { terrainMapFileLoader } from "../TerrainMapFileLoader";
-import { translateText } from "../Utils";
+import { Difficulty, GameMapType } from "../../../core/game/Game";
+import { terrainMapFileLoader } from "../../TerrainMapFileLoader";
+import { translateText } from "../../Utils";
@customElement("map-display")
export class MapDisplay extends LitElement {
diff --git a/src/client/components/map/MapPicker.ts b/src/client/components/map/MapPicker.ts
new file mode 100644
index 000000000..52607622e
--- /dev/null
+++ b/src/client/components/map/MapPicker.ts
@@ -0,0 +1,183 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+ Difficulty,
+ GameMapType,
+ mapCategories,
+} from "../../../core/game/Game";
+import { translateText } from "../../Utils";
+import "./MapDisplay";
+import randomMap from "/images/RandomMap.webp?url";
+
+const featuredMaps: GameMapType[] = [
+ GameMapType.World,
+ GameMapType.Europe,
+ GameMapType.NorthAmerica,
+ GameMapType.SouthAmerica,
+ GameMapType.Asia,
+ GameMapType.Africa,
+ GameMapType.Japan,
+];
+
+@customElement("map-picker")
+export class MapPicker extends LitElement {
+ @property({ type: String }) selectedMap: GameMapType = GameMapType.World;
+ @property({ type: Boolean }) useRandomMap = false;
+ @property({ type: Boolean }) showMedals = false;
+ @property({ type: Boolean }) randomMapDivider = false;
+ @property({ attribute: false }) mapWins: Map {
+ const displayName = this.displayUsername(p);
+ return html`
`;
+ },
)}
- ${p.username}
+ ${displayName}
${p.clientID === this.lobbyCreatorClientID
? html`(${translateText("host_modal.host_badge")})
×
`
: html``}
-
`,
+ 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))}
+
+
+
+ `;
+ }
+}
diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts
index 090df03c1..ab4d0198f 100644
--- a/src/client/graphics/layers/RadialMenu.ts
+++ b/src/client/graphics/layers/RadialMenu.ts
@@ -907,9 +907,12 @@ export class RadialMenu implements Layer {
.select(".center-button-hitbox")
.style("cursor", enabled ? "pointer" : "not-allowed");
+ // Use default color for back button, otherwise use the current center button color
+ const buttonColor =
+ state === "back" ? this.defaultCenterButtonColor : this.centerButtonColor;
centerButton
.select(".center-button-visible")
- .attr("fill", enabled ? this.centerButtonColor : "#999999");
+ .attr("fill", enabled ? buttonColor : "#999999");
centerButton
.select(".center-button-icon")
diff --git a/src/client/graphics/layers/RadialMenuElements.ts b/src/client/graphics/layers/RadialMenuElements.ts
index 0cf28cebb..4ee7e5924 100644
--- a/src/client/graphics/layers/RadialMenuElements.ts
+++ b/src/client/graphics/layers/RadialMenuElements.ts
@@ -17,6 +17,7 @@ import allianceIcon from "/images/AllianceIconWhite.svg?url";
import boatIcon from "/images/BoatIconWhite.svg?url";
import buildIcon from "/images/BuildIconWhite.svg?url";
import chatIcon from "/images/ChatIconWhite.svg?url";
+import checkmarkIcon from "/images/CheckmarkIconWhite.svg?url";
import donateGoldIcon from "/images/DonateGoldIconWhite.svg?url";
import donateTroopIcon from "/images/DonateTroopIconWhite.svg?url";
import emojiIcon from "/images/EmojiIconWhite.svg?url";
@@ -218,6 +219,15 @@ const allyBreakElement: MenuElement = {
!!params.playerActions?.interaction?.canBreakAlliance,
color: COLORS.breakAlly,
icon: traitorIcon,
+ subMenu: () => [allyBreakCancelElement, allyBreakConfirmElement],
+};
+
+const allyBreakConfirmElement: MenuElement = {
+ id: "ally_break_confirm",
+ name: "confirm",
+ disabled: () => false,
+ color: COLORS.breakAlly,
+ icon: checkmarkIcon,
action: (params: MenuElementParams) => {
params.playerActionHandler.handleBreakAlliance(
params.myPlayer,
@@ -227,6 +237,17 @@ const allyBreakElement: MenuElement = {
},
};
+const allyBreakCancelElement: MenuElement = {
+ id: "ally_break_cancel",
+ name: "cancel",
+ disabled: () => false,
+ color: COLORS.info,
+ icon: xIcon,
+ action: (params: MenuElementParams) => {
+ params.closeMenu();
+ },
+};
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const allyDonateGoldElement: MenuElement = {
id: "ally_donate_gold",
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
+
+ ${this.showAllMaps ? this.renderAllMaps() : this.renderFeaturedMaps()}
+
+
+
+
+
+
+ + ${translateText("map_categories.special")} +
+
+
+
+