-
- ${translateText("account_modal.player_id", { - id: - this.userMeResponse?.player?.publicId ?? - translateText("account_modal.not_found"), - })} -
+
+
+
-
+
+
+
+ ${this.hasAnyStats()
+ ? html`
+
+
+ ${translateText("account_modal.connected_as")}
+
+
+
+
+
`
+ : ""}
+
+
+ + 📊 + ${translateText("account_modal.stats_overview")} +
+
+ this.viewGame(id)}
+ >
+
+ 🎮 + ${translateText("game_list.recent_games")} +
+
-
+ `;
+ }
+
+ private renderLinkAccountSection(): TemplateResult {
+ return html`
+ ${this.renderLoggedInAs()}
+
+
- this.viewGame(id)}
- >
+
+
-
+
+ ${translateText("account_modal.save_progress_title")} +
++ ${translateText("account_modal.save_progress_desc")} +
+
-
`;
}
@@ -112,33 +292,62 @@ export class AccountModal extends LitElement {
private renderLoggedInAs(): TemplateResult {
const me = this.userMeResponse?.user;
if (me?.discord) {
- return html`
+
+
+
- ${this.renderPlayerStats()}
+
+
+
+
+ - ${translateText("account_modal.linked_account", { - account_name: me.discord.global_name ?? "", - })} -
- ${this.renderLogoutButton()}`; + return html` +
+ ${this.renderLogoutButton()}
+
+ `;
} else if (me?.email) {
- return html`- ${translateText("account_modal.linked_account", { - account_name: me.email, - })} -
- ${this.renderLogoutButton()}`; + return html` +
+
+ `;
}
- return this.renderLoginOptions();
- }
- private renderPlayerStats(): TemplateResult {
+ // "Mini" Login Options for linking account
return html`
-
+ ${translateText("account_modal.linked_account", {
+ account_name: me.email,
+ })}
+
+ ${this.renderLogoutButton()}
+ -
+
+
+
`;
}
@@ -157,86 +366,133 @@ export class AccountModal extends LitElement {
return html`
`;
}
private renderLoginOptions() {
return html`
-
+
+
+
+
+
+
-
-
-
+
+
+ 
`;
- } else if (this.loggedInEmail) {
- return html`
`;
- }
- return html`
`;
- }
-
- private open() {
- this.recoveryModal?.open();
- }
-
- public close() {
- this.isVisible = false;
- this.recoveryModal?.close();
- this.requestUpdate();
- }
-}
diff --git a/src/client/ClientGameRunner.ts b/src/client/ClientGameRunner.ts
index 27c2f01cb..995decabe 100644
--- a/src/client/ClientGameRunner.ts
+++ b/src/client/ClientGameRunner.ts
@@ -121,7 +121,26 @@ export function joinLobby(
userSettings,
terrainLoad,
terrainMapFileLoader,
- ).then((r) => r.start());
+ )
+ .then((r) => r.start())
+ .catch((e) => {
+ console.error("error creating client game", e);
+ const startingModal = document.querySelector(
+ "game-starting-modal",
+ ) as HTMLElement;
+ if (startingModal) {
+ startingModal.classList.add("hidden");
+ }
+ showErrorModal(
+ e.message,
+ e.stack,
+ lobbyConfig.gameID,
+ lobbyConfig.clientID,
+ true,
+ false,
+ "error_modal.connection_error",
+ );
+ });
}
if (message.type === "error") {
if (message.error === "full-lobby") {
diff --git a/src/client/DarkModeButton.ts b/src/client/DarkModeButton.ts
deleted file mode 100644
index f301802af..000000000
--- a/src/client/DarkModeButton.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { UserSettings } from "../core/game/UserSettings";
-
-@customElement("dark-mode-button")
-export class DarkModeButton extends LitElement {
- private userSettings: UserSettings = new UserSettings();
- @state() private darkMode: boolean = this.userSettings.darkMode();
-
- createRenderRoot() {
- return this;
- }
-
- connectedCallback() {
- super.connectedCallback();
- window.addEventListener("dark-mode-changed", this.handleDarkModeChanged);
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- window.removeEventListener("dark-mode-changed", this.handleDarkModeChanged);
- }
-
- private handleDarkModeChanged = (e: Event) => {
- const event = e as CustomEvent<{ darkMode: boolean }>;
- this.darkMode = event.detail.darkMode;
- };
-
- toggleDarkMode() {
- this.userSettings.toggleDarkMode();
- this.darkMode = this.userSettings.darkMode();
- }
-
- render() {
- return html`
-
- `;
- }
-}
diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index ddc2c9287..158c7c425 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -10,17 +10,7 @@ const flagKey: string = "flag";
export class FlagInput extends LitElement {
@state() public flag: string = "";
- static styles = css`
- @media (max-width: 768px) {
- .flag-modal {
- width: 80vw;
- }
-
- .dropdown-item {
- width: calc(100% / 3 - 15px);
- }
- }
- `;
+ static styles = css``;
public getCurrentFlag(): string {
return this.flag;
@@ -70,20 +60,18 @@ export class FlagInput extends LitElement {
render() {
return html`
- ) {
+ super.updated(changedProperties);
}
render() {
- return html`
-
-
+
+
+
+
+
+ + ${translateText("account_modal.welcome_back")} +
++ ${translateText("account_modal.sign_in_desc")} +
+
+
-
-
-
-
-
`;
}
@@ -267,8 +523,7 @@ export class AccountModal extends LitElement {
discordLogin();
}
- public open() {
- this.modalEl?.open();
+ protected onOpen(): void {
this.isLoadingUser = true;
void getUserMe()
@@ -290,8 +545,10 @@ export class AccountModal extends LitElement {
this.requestUpdate();
}
- public close() {
- this.modalEl?.close();
+ protected onClose(): void {
+ this.dispatchEvent(
+ new CustomEvent("close", { bubbles: true, composed: true }),
+ );
}
private async handleLogout() {
@@ -319,104 +576,3 @@ export class AccountModal extends LitElement {
}
}
}
-
-@customElement("account-button")
-export class AccountButton extends LitElement {
- @state() private loggedInEmail: string | null = null;
- @state() private loggedInDiscord: string | null = null;
-
- private isVisible = true;
-
- @query("account-modal") private recoveryModal: AccountModal;
-
- constructor() {
- super();
-
- document.addEventListener("userMeResponse", (event: Event) => {
- const customEvent = event as CustomEvent;
-
- if (customEvent.detail) {
- const userMeResponse = customEvent.detail as UserMeResponse;
- if (userMeResponse.user.email) {
- this.loggedInEmail = userMeResponse.user.email;
- this.requestUpdate();
- } else if (userMeResponse.user.discord) {
- this.loggedInDiscord = userMeResponse.user.discord.id;
- this.requestUpdate();
- }
- } else {
- // Clear the logged in states when user logs out
- this.loggedInEmail = null;
- this.loggedInDiscord = null;
- this.requestUpdate();
- }
- });
- }
-
- createRenderRoot() {
- return this;
- }
-
- render() {
- if (isInIframe()) {
- return html``;
- }
-
- if (!this.isVisible) {
- return html``;
- }
-
- let buttonTitle = "";
- if (this.loggedInEmail) {
- buttonTitle = translateText("account_modal.linked_account", {
- account_name: this.loggedInEmail,
- });
- } else if (this.loggedInDiscord) {
- buttonTitle = translateText("account_modal.linked_account");
- }
-
- return html`
-
-
+
+
-
-
+
+
+ ${translateText("account_modal.or")}
+
+
-
- or
+
+
+
-
-
+
+
+
+
+
+
+
-
-
+ ${translateText("account_modal.clear_session")}
+
-
-
-
-
-
- `;
- } else if (this.loggedInEmail) {
- return html``;
- }
- return html``;
- }
-
- private open() {
- this.recoveryModal?.open();
- }
-
- public close() {
- this.isVisible = false;
- this.recoveryModal?.close();
- this.requestUpdate();
- }
-}
diff --git a/src/client/ClientGameRunner.ts b/src/client/ClientGameRunner.ts
index 27c2f01cb..995decabe 100644
--- a/src/client/ClientGameRunner.ts
+++ b/src/client/ClientGameRunner.ts
@@ -121,7 +121,26 @@ export function joinLobby(
userSettings,
terrainLoad,
terrainMapFileLoader,
- ).then((r) => r.start());
+ )
+ .then((r) => r.start())
+ .catch((e) => {
+ console.error("error creating client game", e);
+ const startingModal = document.querySelector(
+ "game-starting-modal",
+ ) as HTMLElement;
+ if (startingModal) {
+ startingModal.classList.add("hidden");
+ }
+ showErrorModal(
+ e.message,
+ e.stack,
+ lobbyConfig.gameID,
+ lobbyConfig.clientID,
+ true,
+ false,
+ "error_modal.connection_error",
+ );
+ });
}
if (message.type === "error") {
if (message.error === "full-lobby") {
diff --git a/src/client/DarkModeButton.ts b/src/client/DarkModeButton.ts
deleted file mode 100644
index f301802af..000000000
--- a/src/client/DarkModeButton.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { LitElement, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
-import { UserSettings } from "../core/game/UserSettings";
-
-@customElement("dark-mode-button")
-export class DarkModeButton extends LitElement {
- private userSettings: UserSettings = new UserSettings();
- @state() private darkMode: boolean = this.userSettings.darkMode();
-
- createRenderRoot() {
- return this;
- }
-
- connectedCallback() {
- super.connectedCallback();
- window.addEventListener("dark-mode-changed", this.handleDarkModeChanged);
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- window.removeEventListener("dark-mode-changed", this.handleDarkModeChanged);
- }
-
- private handleDarkModeChanged = (e: Event) => {
- const event = e as CustomEvent<{ darkMode: boolean }>;
- this.darkMode = event.detail.darkMode;
- };
-
- toggleDarkMode() {
- this.userSettings.toggleDarkMode();
- this.darkMode = this.userSettings.darkMode();
- }
-
- render() {
- return html`
-
- `;
- }
-}
diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index ddc2c9287..158c7c425 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -10,17 +10,7 @@ const flagKey: string = "flag";
export class FlagInput extends LitElement {
@state() public flag: string = "";
- static styles = css`
- @media (max-width: 768px) {
- .flag-modal {
- width: 80vw;
- }
-
- .dropdown-item {
- width: calc(100% / 3 - 15px);
- }
- }
- `;
+ static styles = css``;
public getCurrentFlag(): string {
return this.flag;
@@ -70,20 +60,18 @@ export class FlagInput extends LitElement {
render() {
return html`
-
-
-
+
`;
}
@@ -100,9 +88,7 @@ export class FlagInput extends LitElement {
} else {
const img = document.createElement("img");
img.src = this.flag ? `/flags/${this.flag}.svg` : `/flags/xx.svg`;
- img.style.width = "100%";
- img.style.height = "100%";
- img.style.objectFit = "contain";
+ img.className = "w-full h-full object-cover drop-shadow";
img.onerror = () => {
if (!img.src.endsWith("/flags/xx.svg")) {
img.src = "/flags/xx.svg";
diff --git a/src/client/FlagInputModal.ts b/src/client/FlagInputModal.ts
index cfa3bf359..0fba25ccf 100644
--- a/src/client/FlagInputModal.ts
+++ b/src/client/FlagInputModal.ts
@@ -1,31 +1,62 @@
-import { LitElement, html } from "lit";
+import { html } from "lit";
import { customElement, query, state } from "lit/decorators.js";
import Countries from "resources/countries.json" with { type: "json" };
import { translateText } from "./Utils";
+import { BaseModal } from "./components/BaseModal";
@customElement("flag-input-modal")
-export class FlagInputModal extends LitElement {
- @query("o-modal") private modalEl!: HTMLElement & {
- open: () => void;
- close: () => void;
- };
+export class FlagInputModal extends BaseModal {
+ @query("#flag-input-modal") private modalRef!: HTMLElement;
@state() private search = "";
- @state() private isModalOpen = false;
+ public returnTo = "";
- createRenderRoot() {
- return this;
+ updated(changedProperties: Map
+ const content = html`
+
+
+ `;
+
+ if (this.inline) {
+ return content;
+ }
+
+ return html`
+
+ ${content}
`;
}
@@ -95,29 +144,17 @@ export class FlagInputModal extends LitElement {
);
}
- public open() {
- this.isModalOpen = true;
- this.modalEl?.open();
- }
- public close() {
- this.isModalOpen = false;
- this.modalEl?.close();
+ protected onOpen(): void {
+ // No custom logic needed
}
- connectedCallback() {
- super.connectedCallback();
- window.addEventListener("keydown", this.handleKeyDown);
- }
-
- disconnectedCallback() {
- window.removeEventListener("keydown", this.handleKeyDown);
- super.disconnectedCallback();
- }
-
- private handleKeyDown = (e: KeyboardEvent) => {
- if (e.code === "Escape") {
- e.preventDefault();
- this.close();
+ protected onClose(): void {
+ if (this.returnTo) {
+ const returnEl = document.querySelector(this.returnTo) as any;
+ if (returnEl?.open) {
+ returnEl.open();
+ }
+ this.returnTo = "";
}
- };
+ }
}
diff --git a/src/client/GameStartingModal.ts b/src/client/GameStartingModal.ts
index b03ff77a0..070684132 100644
--- a/src/client/GameStartingModal.ts
+++ b/src/client/GameStartingModal.ts
@@ -1,4 +1,4 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { translateText } from "./Utils";
@@ -7,140 +7,39 @@ export class GameStartingModal extends LitElement {
@state()
isVisible = false;
- static styles = css`
- .overlay {
- display: none;
- position: fixed;
- inset: 0;
- background-color: rgba(0, 0, 0, 0.3);
- backdrop-filter: blur(4px);
- z-index: 9998;
- }
-
- .overlay.visible {
- display: block;
- }
-
- .modal {
- display: none;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: rgba(30, 30, 30, 0.7);
- padding: 25px;
- border-radius: 10px;
- z-index: 9999;
- box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(5px);
- color: white;
- width: 300px;
- text-align: center;
- transition:
- opacity 0.3s ease-in-out,
- visibility 0.3s ease-in-out;
- }
-
- .modal.visible {
- display: block;
- animation: fadeIn 0.3s ease-out;
- }
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translate(-50%, -48%);
- }
- to {
- opacity: 1;
- transform: translate(-50%, -50%);
- }
- }
-
- .modal h2 {
- margin-bottom: 15px;
- font-size: 22px;
- color: white;
- }
-
- .modal p {
- margin: 2px 0;
- font-size: 14px;
- }
-
- .modal .loading {
- font-size: 16px;
- margin-top: 20px;
- margin-bottom: 20px;
- background-color: rgba(0, 0, 0, 0.3);
- padding: 10px;
- border-radius: 5px;
- }
-
- .button-container {
- display: flex;
- justify-content: center;
- gap: 10px;
- }
-
- .modal button {
- padding: 12px;
- font-size: 16px;
- cursor: pointer;
- background: rgba(255, 100, 100, 0.7);
- color: white;
- border: none;
- border-radius: 5px;
- transition:
- background-color 0.2s ease,
- transform 0.1s ease;
- }
-
- .modal button:hover {
- background: rgba(255, 100, 100, 0.9);
- transform: translateY(-1px);
- }
-
- .modal button:active {
- transform: translateY(1px);
- }
-
- .copyright {
- font-size: 20px;
- margin-top: 20px;
- margin-bottom: 10px;
- opacity: 1;
- }
-
- .modal a {
- display: block;
- margin-top: 10px;
- margin-bottom: 15px;
- font-size: 20px;
- color: #4a9eff;
- text-decoration: none;
- transition: color 0.2s ease;
- }
-
- .modal a:hover {
- color: #6bb0ff;
- text-decoration: underline;
- }
- `;
+ createRenderRoot() {
+ return this;
+ }
render() {
+ const isVisible = this.isVisible;
return html`
-
-
+
+
+
+
+
+ ${translateText("flag_input.title")}
+
+
+
- ${this.isModalOpen
- ? Countries.filter(
- (country) =>
- !country.restricted && this.includedInSearch(country),
- ).map(
- (country) => html`
-
+
-
© OpenFront and Contributors
+
+
+
`;
}
diff --git a/src/client/GoogleAdElement.ts b/src/client/GoogleAdElement.ts
index 464991edb..6d9419974 100644
--- a/src/client/GoogleAdElement.ts
+++ b/src/client/GoogleAdElement.ts
@@ -1,4 +1,4 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
declare global {
@@ -21,39 +21,18 @@ export class GoogleAdElement extends LitElement {
@property({ type: String }) adFormat = "auto";
@property({ type: Boolean }) fullWidthResponsive = true;
@property({ type: String }) adTest = "off"; // "on" for testing, remove or set to "off" for production
- @property({ type: String }) darkBackgroundColor = "rgba(0, 0, 0, 0.2)";
// Disable shadow DOM so AdSense can access the elements
createRenderRoot() {
return this;
}
- static styles = css`
- .google-ad-container {
- margin-top: 1rem;
- border-radius: 0.5rem;
- padding: 0.5rem;
- width: 100%;
- overflow: hidden;
- transition:
- opacity 0.3s ease,
- height 0.3s ease;
- }
- .google-ad-container.hidden {
- opacity: 0;
- height: 0;
- padding: 0;
- margin: 0;
- overflow: hidden;
- }
- `;
-
render() {
if (isElectron()) {
return html``;
}
return html`
-
+ © OpenFront and Contributors
+
${translateText("game_starting_modal.credits")}
- ${translateText("game_starting_modal.code_license")}
-${translateText("game_starting_modal.title")}
++ ${translateText("game_starting_modal.code_license")} +
++ ${translateText("game_starting_modal.title")} +
+
void;
- close: () => void;
- };
+export class HelpModal extends BaseModal {
@state() private keybinds: Record = this.getKeybinds();
- createRenderRoot() {
- return this;
- }
-
- connectedCallback() {
- super.connectedCallback();
- window.addEventListener("keydown", this.handleKeyDown);
- }
-
- disconnectedCallback() {
- window.removeEventListener("keydown", this.handleKeyDown);
- super.disconnectedCallback();
- }
-
private isKeybindObject(v: unknown): v is { value: string } {
return (
typeof v === "object" &&
@@ -35,13 +18,6 @@ export class HelpModal extends LitElement {
);
}
- private handleKeyDown = (e: KeyboardEvent) => {
- if (e.code === "Escape") {
- e.preventDefault();
- this.close();
- }
- };
-
private getKeybinds(): Record {
let saved: Record = {};
try {
@@ -110,603 +86,1067 @@ export class HelpModal extends LitElement {
private renderKey(code: string) {
const label = this.getKeyLabel(code);
- return html`${label}`;
+ return html`${label}`;
}
render() {
const keybinds = this.keybinds;
+ const content = html`
+
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
`;
}
- public open() {
+ protected onOpen(): void {
this.keybinds = this.getKeybinds();
- this.modalEl?.open();
- }
-
- public close() {
- this.modalEl?.close();
}
}
diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index e3058b627..8d87feddf 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -1,6 +1,6 @@
-import { LitElement, html } from "lit";
-import { customElement, query, state } from "lit/decorators.js";
-import { translateText } from "../client/Utils";
+import { TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { copyToClipboard, translateText } from "../client/Utils";
import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
import {
Difficulty,
@@ -24,6 +24,7 @@ import {
} from "../core/Schemas";
import { generateID } from "../core/Util";
import "./components/baseComponents/Modal";
+import { BaseModal } from "./components/BaseModal";
import "./components/Difficulties";
import "./components/FluentSlider";
import "./components/LobbyTeamView";
@@ -34,17 +35,17 @@ import { terrainMapFileLoader } from "./TerrainMapFileLoader";
import { renderUnitTypeOptions } from "./utilities/RenderUnitTypeOptions";
import randomMap from "/images/RandomMap.webp?url";
@customElement("host-lobby-modal")
-export class HostLobbyModal extends LitElement {
- @query("o-modal") private modalEl!: HTMLElement & {
- open: () => void;
- close: () => void;
- onClose?: () => void;
- };
+export class HostLobbyModal extends BaseModal {
@state() private selectedMap: GameMapType = GameMapType.World;
@state() private selectedDifficulty: Difficulty = Difficulty.Medium;
@state() private disableNations = false;
@state() private gameMode: GameMode = GameMode.FFA;
@state() private teamCount: TeamCountConfig = 2;
+
+ constructor() {
+ super();
+ this.id = "page-host-lobby";
+ }
@state() private bots: number = 400;
@state() private spawnImmunity: boolean = false;
@state() private spawnImmunityDurationMinutes: number | undefined = undefined;
@@ -72,62 +73,100 @@ export class HostLobbyModal extends LitElement {
private userSettings: UserSettings = new UserSettings();
private mapLoader = terrainMapFileLoader;
- connectedCallback() {
- super.connectedCallback();
- window.addEventListener("keydown", this.handleKeyDown);
- }
+ private renderOptionToggle(
+ labelKey: string,
+ checked: boolean,
+ onChange: (val: boolean) => void,
+ hidden: boolean = false,
+ ): TemplateResult {
+ if (hidden) return html``;
- disconnectedCallback() {
- window.removeEventListener("keydown", this.handleKeyDown);
- super.disconnectedCallback();
+ return html`
+
+ `;
}
- private handleKeyDown = (e: KeyboardEvent) => {
- if (e.code === "Escape") {
- e.preventDefault();
- this.close();
- }
- };
-
render() {
- return html`
-
-
+
+ `;
+
+ if (this.inline) {
+ return content;
+ }
+
return html`
+
+
+
+
+
+ ${translateText("main.instructions")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + ${translateText("help_modal.hotkeys")} +
+
+
+
+
+
+ | + ${translateText("help_modal.table_key")} + | ++ ${translateText("help_modal.table_action")} + | +
|---|---|
| + ${this.renderKey(keybinds.toggleView)} + | ++ ${translateText("help_modal.action_alt_view")} + | +
| + ${this.renderKey("KeyU")} + | ++ ${translateText("help_modal.bomb_direction")} + | +
|
+
+ ${this.renderKey(keybinds.shiftKey)}
+ +
+
+
+
+
+
+ |
+ + ${translateText("help_modal.action_attack_altclick")} + | +
|
+
+ ${this.renderKey(keybinds.modifierKey)}
+ +
+
+
+
+
+
+ |
+ + ${translateText("help_modal.action_build")} + | +
|
+
+ ${this.renderKey(keybinds.altKey)}
+ +
+
+
+
+
+
+ |
+ + ${translateText("help_modal.action_emote")} + | +
| + ${this.renderKey(keybinds.centerCamera)} + | ++ ${translateText("help_modal.action_center")} + | +
|
+
+ ${this.renderKey(keybinds.zoomOut)}
+ ${this.renderKey(keybinds.zoomIn)}
+
+ |
+ + ${translateText("help_modal.action_zoom")} + | +
|
+
+ ${this.renderKey(keybinds.moveUp)}
+ ${this.renderKey(keybinds.moveLeft)}
+ ${this.renderKey(keybinds.moveDown)}
+ ${this.renderKey(keybinds.moveRight)}
+
+ |
+ + ${translateText("help_modal.action_move_camera")} + | +
|
+
+ ${this.renderKey(keybinds.attackRatioDown)}
+ ${this.renderKey(keybinds.attackRatioUp)}
+
+ |
+ + ${translateText("help_modal.action_ratio_change")} + | +
|
+
+ ${this.renderKey(keybinds.shiftKey)}
+ +
+
+
+
+
+
+
+
+ ↑
+ ↓
+
+ |
+ + ${translateText("help_modal.action_ratio_change")} + | +
|
+
+ ${this.renderKey(keybinds.altKey)}
+ +
+ ${this.renderKey(keybinds.resetGfx)}
+
+ |
+ + ${translateText("help_modal.action_reset_gfx")} + | +
|
+
+
+
+ |
+ + ${translateText("help_modal.action_auto_upgrade")} + | +
+
+
+
+
+
+ + ${translateText("help_modal.ui_section")} +
+ +
+
+
+
+
+
+
+
+ ${translateText("help_modal.ui_leaderboard")}
+ 
+
+
+
+
+ ${translateText("help_modal.ui_leaderboard_desc")}
+
+
+
+
+
+ ${translateText("help_modal.ui_control")}
+ 
+
+
+
+
+ + ${translateText("help_modal.ui_control_desc")} +
+-
+
- ${translateText("help_modal.ui_gold")} +
- ${translateText("help_modal.ui_attack_ratio")} +
+
+
+
+
+ ${translateText("help_modal.ui_events")}
+
+
+ 
+ 
+
+
+
+
+
+ + ${translateText("help_modal.ui_events_desc")} +
+-
+
- ${translateText("help_modal.ui_events_alliance")} +
- ${translateText("help_modal.ui_events_attack")} +
- ${translateText("help_modal.ui_events_quickchat")} +
+
+
+
+
+ ${translateText("help_modal.ui_options")}
+ 
+
+
+
+
+ + ${translateText("help_modal.ui_options_desc")} +
+-
+
- ${translateText("help_modal.option_pause")} +
- ${translateText("help_modal.option_timer")} +
- ${translateText("help_modal.option_exit")} +
- ${translateText("help_modal.option_settings")} +
+
+
+ ${translateText("help_modal.ui_playeroverlay")}
+ 
+
+
+
+
+ ${translateText("help_modal.ui_playeroverlay_desc")}
+
+
+
+
+
+
+ + ${translateText("help_modal.radial_title")} +
+ +
+
+
+ 
+ 
+
+
+
+
+
+ + ${translateText("help_modal.radial_desc")} +
+-
+
-
+
+ ${translateText("help_modal.radial_build")}
+
+ -
+
+ ${translateText("help_modal.radial_info")}
+
+ -
+
+ ${translateText("help_modal.radial_boat")}
+
+ -
+
+ ${translateText("help_modal.info_alliance")}
+
+ -
+
+ ${translateText("help_modal.ally_betray")}
+
+ -
+
+ ${translateText("help_modal.radial_donate_troops")}
+
+ -
+
+ ${translateText("help_modal.radial_donate_gold")}
+
+
+
+
+
+
+
+ + ${translateText("help_modal.info_title")} +
+ +
+
+
+
+
+
+
+
+ ${translateText("help_modal.info_enemy_panel")}
+ 
+
+
+
+
+ + ${translateText("help_modal.info_enemy_desc")} +
+-
+
-
+
+ ${translateText("help_modal.info_chat")}
+
+ -
+
+ ${translateText("help_modal.info_target")}
+
+ -
+
+ ${translateText("help_modal.info_alliance")}
+
+
-
+
+ ${translateText("help_modal.info_emoji")}
+
+ -
+ ++ ${translateText("help_modal.info_trade")} +
+
+
+
+
+ ${translateText("help_modal.info_ally_panel")}
+ 
+
+
+
+
+ + ${translateText("help_modal.info_ally_desc")} +
+-
+
-
+
+ ${translateText("help_modal.ally_betray")}
+
+
-
+
+ ${translateText("help_modal.ally_donate")}
+
+
-
+
+ ${translateText("help_modal.ally_donate_gold")}
+
+
+
+
+
+
+
+ + ${translateText("help_modal.build_menu_title")} +
+ ++ ${translateText("help_modal.build_menu_desc")} +
+ +
+
+
+
+
+ | + ${translateText("help_modal.build_name")} + | ++ ${translateText("help_modal.build_icon")} + | ++ ${translateText("help_modal.build_desc")} + | +
|---|---|---|
| + ${translateText("help_modal.build_city")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_city_desc")} + | +
| + ${translateText("help_modal.build_defense")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_defense_desc")} + | +
| + ${translateText("help_modal.build_port")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_port_desc")} + | +
| + ${translateText("help_modal.build_factory")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_factory_desc")} + | +
| + ${translateText("help_modal.build_warship")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_warship_desc")} + | +
| + ${translateText("help_modal.build_silo")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_silo_desc")} + | +
| + ${translateText("help_modal.build_sam")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_sam_desc")} + | +
| + ${translateText("help_modal.build_atom")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_atom_desc")} + | +
| + ${translateText("help_modal.build_hydrogen")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_hydrogen_desc")} + | +
| + ${translateText("help_modal.build_mirv")} + | +
+ 
+ |
+ + ${translateText("help_modal.build_mirv_desc")} + | +
+
+
+
+
+
+ + ${translateText("help_modal.player_icons")} +
+ ++ ${translateText("help_modal.icon_desc")} +
+ +
+
+
+
+ 
+
+ ${translateText("help_modal.icon_crown")}
+
+
+
+
+
+
+ ${translateText("help_modal.icon_crown")}
+
+
+ 
+
+ ${translateText("help_modal.icon_traitor")}
+
+
+
+
+
+
+ ${translateText("help_modal.icon_traitor")}
+
+
+ 
+
+ ${translateText("help_modal.icon_ally")}
+
+
+
+
+
+
+ ${translateText("help_modal.icon_ally")}
+
+
+ 
+
+ ${translateText("help_modal.icon_embargo")}
+
+
+
+
+
+
+ ${translateText("help_modal.icon_embargo")}
+
+
+ 
+
+ ${translateText("help_modal.icon_request")}
+
+
+
+
+ ${translateText("help_modal.icon_request")}
+
+
-
-
-
-
-
-
- ${translateText("help_modal.hotkeys")}
-
- | ${translateText("help_modal.table_key")} | -${translateText("help_modal.table_action")} | -
|---|---|
| ${this.renderKey(keybinds.toggleView)} | -${translateText("help_modal.action_alt_view")} | -
| U | -${translateText("help_modal.bomb_direction")} | -
|
-
- ${this.renderKey(keybinds.shiftKey)}
- +
-
-
-
-
-
- |
- ${translateText("help_modal.action_attack_altclick")} | -
|
-
- ${this.renderKey(keybinds.modifierKey)}
- +
-
-
-
-
-
- |
- ${translateText("help_modal.action_build")} | -
|
-
- ${this.renderKey(keybinds.altKey)}
- +
-
-
-
-
-
- |
- ${translateText("help_modal.action_emote")} | -
| ${this.renderKey(keybinds.centerCamera)} | -${translateText("help_modal.action_center")} | -
| - ${this.renderKey(keybinds.zoomOut)} / - ${this.renderKey(keybinds.zoomIn)} - | -${translateText("help_modal.action_zoom")} | -
| - ${this.renderKey(keybinds.moveUp)} - ${this.renderKey(keybinds.moveLeft)} - ${this.renderKey(keybinds.moveDown)} - ${this.renderKey(keybinds.moveRight)} - | -${translateText("help_modal.action_move_camera")} | -
| - ${this.renderKey(keybinds.attackRatioDown)} / - ${this.renderKey(keybinds.attackRatioUp)} - | -${translateText("help_modal.action_ratio_change")} | -
|
-
- ${this.renderKey(keybinds.shiftKey)}
- +
-
-
-
-
-
-
-
-
- ↑
- ↓
- |
- ${translateText("help_modal.action_ratio_change")} | -
| - ${this.renderKey(keybinds.altKey)} + - ${this.renderKey(keybinds.resetGfx)} - | -${translateText("help_modal.action_reset_gfx")} | -
|
-
-
-
- |
- ${translateText("help_modal.action_auto_upgrade")} | -
- -
- ${translateText("help_modal.ui_section")}
-
-
-
-
-
-
-
-
- ${translateText("help_modal.ui_leaderboard")}
-
-
-
-
- ${translateText("help_modal.ui_leaderboard_desc")}
-- -
-
-
-
-
-
-
- ${translateText("help_modal.ui_control")}
-
-
-
-
- ${translateText("help_modal.ui_control_desc")}
--
-
- ${translateText("help_modal.ui_gold")} -
- - ${translateText("help_modal.ui_attack_ratio")} - -
- -
-
-
-
-
-
- ${translateText("help_modal.ui_events")}
-
-
-
-
-
-
-
-
-
- ${translateText("help_modal.ui_events_desc")}
--
-
- - ${translateText("help_modal.ui_events_alliance")} - -
- - ${translateText("help_modal.ui_events_attack")} - -
- - ${translateText("help_modal.ui_events_quickchat")} - -
- -
-
-
-
-
-
-
- ${translateText("help_modal.ui_options")}
-
-
-
-
- ${translateText("help_modal.ui_options_desc")}
--
-
- ${translateText("help_modal.option_pause")} -
- ${translateText("help_modal.option_timer")} -
- ${translateText("help_modal.option_exit")} -
- - ${translateText("help_modal.option_settings")} - -
- -
-
-
-
-
-
-
- ${translateText("help_modal.ui_playeroverlay")}
-
-
-
-
- - ${translateText("help_modal.ui_playeroverlay_desc")} -
-- -
- ${translateText("help_modal.radial_title")}
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${translateText("help_modal.radial_desc")}
--
-
- - - ${translateText("help_modal.radial_build")} - -
-
-
- ${translateText("help_modal.radial_info")}
-
-
- - - ${translateText("help_modal.radial_boat")} - -
- - - ${translateText("help_modal.info_alliance")} - -
- - - ${translateText("help_modal.ally_betray")} - -
- - - ${translateText("help_modal.radial_donate_troops")} - -
- - - ${translateText("help_modal.radial_donate_gold")} - -
- -
-
- -
-
-
- ${translateText("help_modal.info_title")}
-
-
-
-
-
-
-
-
-
- ${translateText("help_modal.info_enemy_panel")}
-
-
-
-
- ${translateText("help_modal.info_enemy_desc")}
--
-
- - - ${translateText("help_modal.info_chat")} - -
- - - ${translateText("help_modal.info_target")} - -
- - - ${translateText("help_modal.info_alliance")} - -
- - - ${translateText("help_modal.info_emoji")} - -
-
- -- ${translateText("help_modal.info_trade")} -
-
-
- -
-
-
-
-
-
- ${translateText("help_modal.info_ally_panel")}
-
-
-
-
- ${translateText("help_modal.info_ally_desc")}
--
-
- - - ${translateText("help_modal.ally_betray")} - -
- - - ${translateText("help_modal.ally_donate")} - -
- - - ${translateText("help_modal.ally_donate_gold")} - -
- -
-
-
-
-
-
-
- ${translateText("help_modal.build_menu_title")}
-
- ${translateText("help_modal.build_menu_desc")}
-| ${translateText("help_modal.build_name")} | -${translateText("help_modal.build_icon")} | -${translateText("help_modal.build_desc")} | -
|---|---|---|
| ${translateText("help_modal.build_city")} | -- | ${translateText("help_modal.build_city_desc")} | -
| ${translateText("help_modal.build_defense")} | -- | ${translateText("help_modal.build_defense_desc")} | -
| ${translateText("help_modal.build_port")} | -- | ${translateText("help_modal.build_port_desc")} | -
| ${translateText("help_modal.build_factory")} | -- | ${translateText("help_modal.build_factory_desc")} | -
| ${translateText("help_modal.build_warship")} | -- | ${translateText("help_modal.build_warship_desc")} | -
| ${translateText("help_modal.build_silo")} | -- | ${translateText("help_modal.build_silo_desc")} | -
| ${translateText("help_modal.build_sam")} | -- | ${translateText("help_modal.build_sam_desc")} | -
| ${translateText("help_modal.build_atom")} | -- | ${translateText("help_modal.build_atom_desc")} | -
| ${translateText("help_modal.build_hydrogen")} | -- | ${translateText("help_modal.build_hydrogen_desc")} | -
| ${translateText("help_modal.build_mirv")} | -- | ${translateText("help_modal.build_mirv_desc")} | -
- -
-
+ ${content}
- ${translateText("help_modal.player_icons")}
-
- ${translateText("help_modal.icon_desc")}
- -
-
-
-
-
-
-
-
- ${translateText("help_modal.icon_crown")}
-
-
-
-
-
-
-
- ${translateText("help_modal.icon_traitor")}
-
-
-
-
-
-
- ${translateText("help_modal.icon_ally")}
-
-
-
-
-
-
-
-
-
- ${translateText("help_modal.icon_embargo")}
-
-
-
-
-
-
- ${translateText("help_modal.icon_request")}
-
-
-
-