Merge branch 'openfrontio:main' into custom-flag

src/client/ClientGameRunner.ts

@@ -12,6 +12,7 @@ import { createGameRecord } from "../core/Util";
 import { ServerConfig } from "../core/configuration/Config";
 import { getConfig } from "../core/configuration/ConfigLoader";
 import { Team, UnitType } from "../core/game/Game";
+import { TileRef } from "../core/game/GameMap";
 import {
   ErrorUpdate,
   GameUpdateType,
@@ -28,6 +29,7 @@ import { endGame, startGame, startTime } from "./LocalPersistantStats";
 import { getPersistentIDFromCookie } from "./Main";
 import {
   SendAttackIntentEvent,
+  SendBoatAttackIntentEvent,
   SendHashEvent,
   SendSpawnIntentEvent,
   Transport,
@@ -215,6 +217,7 @@ export class ClientGameRunner {
 
   public start() {
     consolex.log("starting client game");
+
     this.isActive = true;
     this.lastMessageTime = Date.now();
     setTimeout(() => {
@@ -358,6 +361,18 @@ export class ClientGameRunner {
             this.myPlayer.troops() * this.renderer.uiState.attackRatio,
           ),
         );
+      } else if (
+        actions.canBoat !== false &&
+        this.shouldBoat(tile, actions.canBoat) &&
+        this.gameView.isLand(tile)
+      ) {
+        this.eventBus.emit(
+          new SendBoatAttackIntentEvent(
+            this.gameView.owner(tile).id(),
+            cell,
+            this.myPlayer.troops() * this.renderer.uiState.attackRatio,
+          ),
+        );
       }
 
       const owner = this.gameView.owner(tile);
@@ -369,6 +384,18 @@ export class ClientGameRunner {
     });
   }
 
+  private shouldBoat(tile: TileRef, src: TileRef) {
+    // TODO: Global enable flag
+    // TODO: Global limit autoboat to nearby shore flag
+    // if (!enableAutoBoat) return false;
+    // if (!limitAutoBoatNear) return true;
+    const distanceSquared = this.gameView.euclideanDistSquared(tile, src);
+    const limit = 100;
+    const limitSquared = limit * limit;
+    if (distanceSquared > limitSquared) return false;
+    return true;
+  }
+
   private onMouseMove(event: MouseMoveEvent) {
     this.lastMousePosition = { x: event.x, y: event.y };
     this.checkTileUnderCursor();

src/client/HelpModal.ts

@@ -35,43 +35,84 @@ export class HelpModal extends LitElement {
             </thead>
             <tbody class="text-left">
               <tr>
-                <td>Space</td>
+                <td><span class="key">Space</span></td>
                 <td>${translateText("help_modal.action_alt_view")}</td>
               </tr>
               <tr>
-                <td>Shift + left click</td>
+                <td>
+                  <div class="scroll-combo-horizontal">
+                    <span class="key">Shift</span>
+                    <span class="plus">+</span>
+                    <div class="mouse-shell alt-left-click">
+                      <div class="mouse-left-corner"></div>
+                      <div class="mouse-wheel"></div>
+                    </div>
+                  </div>
+                </td>
                 <td>${translateText("help_modal.action_attack_altclick")}</td>
               </tr>
               <tr>
-                <td>Ctrl + left click</td>
+                <td>
+                  <div class="scroll-combo-horizontal">
+                    <span class="key">Ctrl</span>
+                    <span class="plus">+</span>
+                    <div class="mouse-shell alt-left-click">
+                      <div class="mouse-left-corner"></div>
+                      <div class="mouse-wheel"></div>
+                    </div>
+                  </div>
+                </td>
                 <td>${translateText("help_modal.action_build")}</td>
               </tr>
               <tr>
-                <td>Alt + left click</td>
+                <td>
+                  <div class="scroll-combo-horizontal">
+                    <span class="key">Alt</span>
+                    <span class="plus">+</span>
+                    <div class="mouse-shell alt-left-click">
+                      <div class="mouse-left-corner"></div>
+                      <div class="mouse-wheel"></div>
+                    </div>
+                  </div>
+                </td>
                 <td>${translateText("help_modal.action_emote")}</td>
               </tr>
               <tr>
-                <td>C</td>
+                <td><span class="key">C</span></td>
                 <td>${translateText("help_modal.action_center")}</td>
               </tr>
               <tr>
-                <td>Q / E</td>
+                <td><span class="key">Q</span> / <span class="key">E</span></td>
                 <td>${translateText("help_modal.action_zoom")}</td>
               </tr>
               <tr>
-                <td>W / A / S / D</td>
+                <td><span class="key">W</span> <span class="key">A</span> <span class="key">S</span> <span class="key">D</span></td>
                 <td>${translateText("help_modal.action_move_camera")}</td>
               </tr>
               <tr>
-                <td>1 / 2</td>
+                <td><span class="key">1</span> / <span class="key">2</span></td>
                 <td>${translateText("help_modal.action_ratio_change")}</td>
               </tr>
               <tr>
-                <td>Shift + scroll down / scroll up</td>
+                <td>
+                  <div class="scroll-combo-horizontal">
+                    <span class="key">Shift</span>
+                    <span class="plus">+</span>
+                    <div class="mouse-with-arrows">
+                      <div class="mouse-shell">
+                        <div class="mouse-wheel" id="highlighted-wheel"></div>
+                      </div>
+                      <div class="mouse-arrows-side">
+                        <div class="arrow">↑</div>
+                        <div class="arrow">↓</div>
+                      </div>
+                    </div>
+                  </div>
+                </td>
                 <td>${translateText("help_modal.action_ratio_change")}</td>
               </tr>
               <tr>
-                <td>ALT + R</td>
+                <td><span class="key">ALT</span> + <span class="key">R</span></td>
                 <td>${translateText("help_modal.action_reset_gfx")}</td>
               </tr>
             </tbody>

src/client/HostLobbyModal.ts

@@ -4,7 +4,12 @@ import randomMap from "../../resources/images/RandomMap.webp";
 import { translateText } from "../client/Utils";
 import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
 import { consolex } from "../core/Consolex";
-import { Difficulty, GameMapType, GameMode } from "../core/game/Game";
+import {
+  Difficulty,
+  GameMapType,
+  GameMode,
+  mapCategories,
+} from "../core/game/Game";
 import { GameConfig, GameInfo } from "../core/Schemas";
 import { generateID } from "../core/Util";
 import "./components/baseComponents/Modal";
@@ -23,6 +28,7 @@ export class HostLobbyModal extends LitElement {
   @state() private selectedDifficulty: Difficulty = Difficulty.Medium;
   @state() private disableNPCs = false;
   @state() private gameMode: GameMode = GameMode.FFA;
+  @state() private teamCount: number = 2;
   @state() private disableNukes: boolean = false;
   @state() private bots: number = 400;
   @state() private infiniteGold: boolean = false;
@@ -73,23 +79,40 @@ export class HostLobbyModal extends LitElement {
           <!-- Map Selection -->
           <div class="options-section">
             <div class="option-title">${translateText("map.map")}</div>
-            <div class="option-cards">
-              ${Object.entries(GameMapType)
-                .filter(([key]) => isNaN(Number(key)))
-                .map(
-                  ([key, value]) => html`
-                    <div @click=${() => this.handleMapSelection(value)}>
-                      <map-display
-                        .mapKey=${key}
-                        .selected=${!this.useRandomMap &&
-                        this.selectedMap === value}
-                        .translation=${translateText(
-                          `map.${key.toLowerCase()}`,
-                        )}
-                      ></map-display>
+            <div class="option-cards flex-col">
+              <!-- Use the imported mapCategories -->
+              ${Object.entries(mapCategories).map(
+                ([categoryKey, maps]) => html`
+                  <div class="w-full mb-4">
+                    <h3
+                      class="text-lg font-semibold mb-2 text-center text-gray-300"
+                    >
+                      ${translateText(`map_categories.${categoryKey}`)}
+                    </h3>
+                    <div class="flex flex-row flex-wrap justify-center gap-4">
+                      ${maps.map((mapValue) => {
+                        const mapKey = Object.keys(GameMapType).find(
+                          (key) => GameMapType[key] === mapValue,
+                        );
+                        return html`
+                          <div
+                            @click=${() => this.handleMapSelection(mapValue)}
+                          >
+                            <map-display
+                              .mapKey=${mapKey}
+                              .selected=${!this.useRandomMap &&
+                              this.selectedMap === mapValue}
+                              .translation=${translateText(
+                                `map.${mapKey.toLowerCase()}`,
+                              )}
+                            ></map-display>
+                          </div>
+                        `;
+                      })}
                     </div>
-                  `,
-                )}
+                  </div>
+                `,
+              )}
               <div
                 class="option-card random-map ${
                   this.useRandomMap ? "selected" : ""
@@ -103,7 +126,9 @@ export class HostLobbyModal extends LitElement {
                     style="width:100%; aspect-ratio: 4/2; object-fit:cover; border-radius:8px;"
                   />
                 </div>
-                <div class="option-card-title">${translateText("map.random")}</div>
+                <div class="option-card-title">
+                  ${translateText("map.random")}
+                </div>
               </div>
             </div>
           </div>
@@ -159,6 +184,33 @@ export class HostLobbyModal extends LitElement {
             </div>
           </div>
 
+          ${
+            this.gameMode === GameMode.FFA
+              ? ""
+              : html`
+                  <!-- Team Count Selection -->
+                  <div class="options-section">
+                    <div class="option-title">
+                      ${translateText("host_modal.team_count")}
+                    </div>
+                    <div class="option-cards">
+                      ${[2, 3, 4, 5, 6, 7].map(
+                        (o) => html`
+                          <div
+                            class="option-card ${this.teamCount === o
+                              ? "selected"
+                              : ""}"
+                            @click=${() => this.handleTeamCountSelection(o)}
+                          >
+                            <div class="option-card-title">${o}</div>
+                          </div>
+                        `,
+                      )}
+                    </div>
+                  </div>
+                `
+          }
+
           <!-- Game Options -->
           <div class="options-section">
             <div class="option-title">
@@ -413,6 +465,11 @@ export class HostLobbyModal extends LitElement {
     this.putGameConfig();
   }
 
+  private async handleTeamCountSelection(value: number) {
+    this.teamCount = value;
+    this.putGameConfig();
+  }
+
   private async putGameConfig() {
     const config = await getServerConfigFromClient();
     const response = await fetch(
@@ -432,6 +489,7 @@ export class HostLobbyModal extends LitElement {
           infiniteTroops: this.infiniteTroops,
           instantBuild: this.instantBuild,
           gameMode: this.gameMode,
+          numPlayerTeams: this.teamCount,
         } as GameConfig),
       },
     );

src/client/LangSelector.ts

@@ -3,14 +3,21 @@ import { customElement, state } from "lit/decorators.js";
 import "./LanguageModal";
 
 import bg from "../../resources/lang/bg.json";
+import bn from "../../resources/lang/bn.json";
 import de from "../../resources/lang/de.json";
 import en from "../../resources/lang/en.json";
+import eo from "../../resources/lang/eo.json";
 import es from "../../resources/lang/es.json";
 import fr from "../../resources/lang/fr.json";
+import hi from "../../resources/lang/hi.json";
+import it from "../../resources/lang/it.json";
 import ja from "../../resources/lang/ja.json";
 import nl from "../../resources/lang/nl.json";
 import pl from "../../resources/lang/pl.json";
+import pt_br from "../../resources/lang/pt_br.json";
 import ru from "../../resources/lang/ru.json";
+import sh from "../../resources/lang/sh.json";
+import tr from "../../resources/lang/tr.json";
 import uk from "../../resources/lang/uk.json";
 
 @customElement("lang-selector")
@@ -26,14 +33,21 @@ export class LangSelector extends LitElement {
 
   private languageMap: Record<string, any> = {
     bg,
+    bn,
     de,
     en,
     es,
+    eo,
     fr,
+    it,
+    hi,
     ja,
     nl,
     pl,
+    pt_br,
     ru,
+    sh,
+    tr,
     uk,
   };
 
@@ -246,7 +260,7 @@ export class LangSelector extends LitElement {
         : {
             native: "English",
             en: "English",
-            svg: "xx",
+            svg: "uk_us_flag",
           });
 
     return html`

src/client/LanguageModal.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { translateText } from "../client/Utils";
 
 @customElement("language-modal")
 export class LanguageModal extends LitElement {
@@ -8,35 +9,55 @@ export class LanguageModal extends LitElement {
   @property({ type: String }) currentLang = "en";
 
   static styles = css`
-    .modal {
+    .c-modal {
       position: fixed;
-      inset: 0;
+      padding: 1rem;
+      z-index: 1000;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      top: 0;
       background-color: rgba(0, 0, 0, 0.5);
-      z-index: 50;
+      overflow-y: auto;
       display: flex;
-      justify-content: center;
       align-items: center;
-    }
-    .hidden {
-      display: none;
-    }
-    .modal-content {
-      background: white;
-      border-radius: 0.5rem;
-      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
-      padding: 1.5rem;
-      width: 24rem;
-      max-width: 100%;
-      max-height: 90vh;
-      display: flex;
-      flex-direction: column;
+      justify-content: center;
     }
 
-    .language-list {
+    .c-modal__wrapper {
+      background: #23232382;
+      border-radius: 8px;
+      min-width: 340px;
+      max-width: 480px;
+      width: 100%;
+    }
+
+    .c-modal__header {
+      position: relative;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      font-size: 18px;
+      background: #000000a1;
+      text-align: center;
+      color: #fff;
+      padding: 1rem 2.4rem 1rem 1.4rem;
+    }
+
+    .c-modal__close {
+      cursor: pointer;
+      position: absolute;
+      right: 1rem;
+      top: 1rem;
+      font-weight: bold;
+    }
+
+    .c-modal__content {
+      position: relative;
+      color: #fff;
+      padding: 1.4rem;
+      max-height: 60dvh;
       overflow-y: auto;
-      flex: 1;
-      min-height: 0;
-      margin-bottom: 1rem;
+      backdrop-filter: blur(8px);
     }
 
     .lang-button {
@@ -44,19 +65,23 @@ export class LanguageModal extends LitElement {
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      padding: 0.5rem;
+      padding: 0.5rem 1rem;
+      margin-bottom: 0.5rem;
       border-radius: 0.375rem;
       transition: background-color 0.3s;
-      border: 1px solid #ccc;
-      background-color: #f8f8f8;
+      border: 1px solid #aaa;
+      background-color: #505050;
+      color: #fff;
     }
 
     .lang-button:hover {
-      background-color: #ebf8ff;
+      background-color: #969696;
     }
 
     .lang-button.active {
-      background-color: #bee3f8;
+      background-color: #aaaaaa;
+      border-color: #bbb;
+      color: #000;
     }
 
     .flag-icon {
@@ -65,30 +90,44 @@ export class LanguageModal extends LitElement {
       object-fit: contain;
     }
 
-    .close-button {
-      background-color: #3182ce;
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 0.375rem;
-      cursor: pointer;
-      font-weight: bold;
-      border: none;
+    @keyframes rainbow {
+      0% {
+        background-color: #990033;
+      }
+      20% {
+        background-color: #996600;
+      }
+      40% {
+        background-color: #336600;
+      }
+      60% {
+        background-color: #008080;
+      }
+      80% {
+        background-color: #1c3f99;
+      }
+      100% {
+        background-color: #5e0099;
+      }
     }
 
-    .close-button:hover {
-      background-color: #2b6cb0;
+    .lang-button.debug {
+      animation: rainbow 10s infinite;
+      font-weight: bold;
+      color: #fff;
+      border: 2px dashed aqua;
+      box-shadow: 0 0 4px aqua;
     }
   `;
 
-  private selectLanguage(lang: string) {
+  private close = () => {
     this.dispatchEvent(
-      new CustomEvent("language-selected", {
-        detail: { lang },
+      new CustomEvent("close-modal", {
         bubbles: true,
         composed: true,
       }),
     );
-  }
+  };
 
   updated(changedProps: Map<string, unknown>) {
     if (changedProps.has("visible")) {
@@ -105,18 +144,36 @@ export class LanguageModal extends LitElement {
     document.body.style.overflow = "auto";
   }
 
-  render() {
-    return html`
-      <div class="modal ${this.visible ? "" : "hidden"}">
-        <div class="modal-content">
-          <h2 class="text-xl font-semibold mb-4">Select Language</h2>
+  private selectLanguage = (lang: string) => {
+    this.dispatchEvent(
+      new CustomEvent("language-selected", {
+        detail: { lang },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  };
 
-          <div class="language-list">
+  render() {
+    if (!this.visible) return null;
+
+    return html`
+      <aside class="c-modal">
+        <div class="c-modal__wrapper">
+          <header class="c-modal__header">
+            ${translateText("select_lang.title")}
+            <div class="c-modal__close" @click=${this.close}>X</div>
+          </header>
+
+          <section class="c-modal__content">
             ${this.languageList.map((lang) => {
               const isActive = this.currentLang === lang.code;
               return html`
                 <button
-                  class="lang-button ${isActive ? "active" : ""}"
+                  class="lang-button ${isActive ? "active" : ""} ${lang.code ===
+                  "debug"
+                    ? "debug"
+                    : ""}"
                   @click=${() => this.selectLanguage(lang.code)}
                 >
                   <img
@@ -128,22 +185,9 @@ export class LanguageModal extends LitElement {
                 </button>
               `;
             })}
-          </div>
-
-          <button
-            class="close-button"
-            @click=${() =>
-              this.dispatchEvent(
-                new CustomEvent("close-modal", {
-                  bubbles: true,
-                  composed: true,
-                }),
-              )}
-          >
-            Close
-          </button>
+          </section>
         </div>
-      </div>
+      </aside>
     `;
   }
 }

src/client/Main.ts

@@ -22,6 +22,7 @@ import { LanguageModal } from "./LanguageModal";
 import "./PublicLobby";
 import { PublicLobby } from "./PublicLobby";
 import { SinglePlayerModal } from "./SinglePlayerModal";
+import { UserSettingModal } from "./UserSettingModal";
 import "./UsernameInput";
 import { UsernameInput } from "./UsernameInput";
 import { generateCryptoRandomUUID } from "./Utils";
@@ -118,6 +119,14 @@ class Client {
       hlpModal.open();
     });
 
+    const settingsModal = document.querySelector(
+      "user-setting",
+    ) as UserSettingModal;
+    settingsModal instanceof UserSettingModal;
+    document.getElementById("settings-button").addEventListener("click", () => {
+      settingsModal.open();
+    });
+
     const hostModal = document.querySelector(
       "host-lobby-modal",
     ) as HostPrivateLobbyModal;
@@ -200,6 +209,33 @@ class Client {
         gameRecord: lobby.gameRecord,
       },
       () => {
+        console.log("Closing modals");
+        document.getElementById("settings-button").classList.add("hidden");
+        [
+          "single-player-modal",
+          "host-lobby-modal",
+          "join-private-lobby-modal",
+          "game-starting-modal",
+          "top-bar",
+          "help-modal",
+          "user-setting",
+        ].forEach((tag) => {
+          const modal = document.querySelector(tag) as HTMLElement & {
+            close?: () => void;
+            isModalOpen?: boolean;
+          };
+          if (modal?.close) {
+            modal.close();
+          } else if ("isModalOpen" in modal) {
+            modal.isModalOpen = false;
+          }
+        });
+        this.publicLobby.stop();
+        document.querySelectorAll(".ad").forEach((ad) => {
+          (ad as HTMLElement).style.display = "none";
+        });
+
+        // show when the game loads
         const startingModal = document.querySelector(
           "game-starting-modal",
         ) as GameStartingModal;

src/client/MultiTabDetector.ts

@@ -0,0 +1,130 @@
+export class MultiTabDetector {
+  private focusChanges: number[] = [];
+  private readonly maxFocusChanges: number = 10;
+  private readonly timeWindow: number = 60_000;
+  private readonly punishmentDelays: number[] = [
+    2_000, 3_000, 5_000, 10_000, 30_000, 60_000,
+  ];
+  private lastFocusChangeTime: number = 0;
+  private isPunished: boolean = false;
+  private isMonitoring: boolean = false;
+  private startPenaltyCallback?: (duration: number) => void;
+
+  private numPunishmentsGiven = 0;
+
+  /**
+   * Start monitoring for multi-tabbing behavior
+   *
+   * @param startPenalty Callback function when punishment starts
+   */
+  public startMonitoring(startPenalty: (duration: number) => void): void {
+    if (this.isMonitoring) return;
+
+    this.isMonitoring = true;
+    this.startPenaltyCallback = startPenalty;
+
+    // Event listeners for window focus/blur
+    window.addEventListener("blur", this.handleFocusChange.bind(this));
+    window.addEventListener("focus", this.handleFocusChange.bind(this));
+
+    // Also track visibility changes for tab switching
+    document.addEventListener(
+      "visibilitychange",
+      this.handleVisibilityChange.bind(this),
+    );
+  }
+
+  public stopMonitoring(): void {
+    if (!this.isMonitoring) return;
+
+    this.isMonitoring = false;
+
+    // Remove event listeners
+    window.removeEventListener("blur", this.handleFocusChange.bind(this));
+    window.removeEventListener("focus", this.handleFocusChange.bind(this));
+    document.removeEventListener(
+      "visibilitychange",
+      this.handleVisibilityChange.bind(this),
+    );
+
+    // Clear data
+    this.focusChanges = [];
+    this.isPunished = false;
+  }
+
+  private handleFocusChange(): void {
+    const currentTime = Date.now();
+
+    this.recordFocusChange(currentTime);
+
+    // Check for multi-tabbing when focus is gained
+    if (document.hasFocus() && !this.isPunished) {
+      this.checkForMultiTabbing(currentTime);
+    }
+  }
+
+  private handleVisibilityChange(): void {
+    const currentTime = Date.now();
+
+    // Record and check regardless of current focus state
+    this.recordFocusChange(currentTime);
+
+    // Only check when tab becomes visible
+    if (document.visibilityState === "visible" && !this.isPunished) {
+      this.checkForMultiTabbing(currentTime);
+    }
+  }
+
+  private recordFocusChange(timestamp: number): void {
+    if (Math.abs(this.lastFocusChangeTime - timestamp) < 100) {
+      // Don't count multiple triggers at same time
+      return;
+    }
+    this.focusChanges.push(timestamp);
+    console.log(`pushing focus change at ${timestamp}`);
+    this.lastFocusChangeTime = timestamp;
+
+    // Keep only recent changes
+    if (this.focusChanges.length > this.maxFocusChanges) {
+      this.focusChanges.shift();
+    }
+  }
+
+  private checkForMultiTabbing(currentTime: number): void {
+    // Only if we have enough data points
+    if (this.focusChanges.length >= this.maxFocusChanges) {
+      const oldestChange = this.focusChanges[0];
+      const timeSpan = currentTime - oldestChange;
+
+      // If changes happened within detection window
+      if (timeSpan <= this.timeWindow) {
+        this.applyPunishment();
+      }
+    }
+  }
+
+  private applyPunishment(): void {
+    // Prevent multiple punishments
+    if (this.isPunished) return;
+    this.isPunished = true;
+
+    let punishmentDelay = 0;
+    if (this.numPunishmentsGiven >= this.punishmentDelays.length) {
+      punishmentDelay = this.punishmentDelays[this.punishmentDelays.length - 1];
+    } else {
+      punishmentDelay = this.punishmentDelays[this.numPunishmentsGiven];
+    }
+
+    this.numPunishmentsGiven++;
+
+    // Call the start penalty callback
+    if (this.startPenaltyCallback) {
+      this.startPenaltyCallback(punishmentDelay);
+    }
+
+    // Remove penalty after delay
+    setTimeout(() => {
+      this.isPunished = false;
+    }, punishmentDelay);
+  }
+}

src/client/SinglePlayerModal.ts

@@ -3,7 +3,13 @@ import { customElement, query, state } from "lit/decorators.js";
 import randomMap from "../../resources/images/RandomMap.webp";
 import { translateText } from "../client/Utils";
 import { consolex } from "../core/Consolex";
-import { Difficulty, GameMapType, GameMode, GameType } from "../core/game/Game";
+import {
+  Difficulty,
+  GameMapType,
+  GameMode,
+  GameType,
+  mapCategories,
+} from "../core/game/Game";
 import { generateID } from "../core/Util";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
@@ -30,6 +36,7 @@ export class SinglePlayerModal extends LitElement {
   @state() private instantBuild: boolean = false;
   @state() private useRandomMap: boolean = false;
   @state() private gameMode: GameMode = GameMode.FFA;
+  @state() private teamCount: number = 2;
 
   render() {
     return html`
@@ -38,27 +45,40 @@ export class SinglePlayerModal extends LitElement {
           <!-- Map Selection -->
           <div class="options-section">
             <div class="option-title">${translateText("map.map")}</div>
-            <div class="option-cards">
-              ${Object.entries(GameMapType)
-                .filter(([key]) => isNaN(Number(key)))
-                .map(
-                  ([key, value]) => html`
-                    <div
-                      @click=${function () {
-                        this.handleMapSelection(value);
-                      }}
+            <div class="option-cards flex-col">
+              <!-- Use the imported mapCategories -->
+              ${Object.entries(mapCategories).map(
+                ([categoryKey, maps]) => html`
+                  <div class="w-full mb-4">
+                    <h3
+                      class="text-lg font-semibold mb-2 text-center text-gray-300"
                     >
-                      <map-display
-                        .mapKey=${key}
-                        .selected=${!this.useRandomMap &&
-                        this.selectedMap === value}
-                        .translation=${translateText(
-                          `map.${key.toLowerCase()}`,
-                        )}
-                      ></map-display>
+                      ${translateText(`map_categories.${categoryKey}`)}
+                    </h3>
+                    <div class="flex flex-row flex-wrap justify-center gap-4">
+                      ${maps.map((mapValue) => {
+                        const mapKey = Object.keys(GameMapType).find(
+                          (key) => GameMapType[key] === mapValue,
+                        );
+                        return html`
+                          <div
+                            @click=${() => this.handleMapSelection(mapValue)}
+                          >
+                            <map-display
+                              .mapKey=${mapKey}
+                              .selected=${!this.useRandomMap &&
+                              this.selectedMap === mapValue}
+                              .translation=${translateText(
+                                `map.${mapKey.toLowerCase()}`,
+                              )}
+                            ></map-display>
+                          </div>
+                        `;
+                      })}
                     </div>
-                  `,
-                )}
+                  </div>
+                `,
+              )}
               <div
                 class="option-card random-map ${this.useRandomMap
                   ? "selected"
@@ -136,6 +156,31 @@ export class SinglePlayerModal extends LitElement {
             </div>
           </div>
 
+          ${this.gameMode === GameMode.FFA
+            ? ""
+            : html`
+                <!-- Team Count Selection -->
+                <div class="options-section">
+                  <div class="option-title">
+                    ${translateText("host_modal.team_count")}
+                  </div>
+                  <div class="option-cards">
+                    ${[2, 3, 4, 5, 6, 7].map(
+                      (o) => html`
+                        <div
+                          class="option-card ${this.teamCount === o
+                            ? "selected"
+                            : ""}"
+                          @click=${() => this.handleTeamCountSelection(o)}
+                        >
+                          <div class="option-card-title">${o}</div>
+                        </div>
+                      `,
+                    )}
+                  </div>
+                </div>
+              `}
+
           <!-- Game Options -->
           <div class="options-section">
             <div class="option-title">
@@ -310,6 +355,10 @@ export class SinglePlayerModal extends LitElement {
     this.gameMode = value;
   }
 
+  private handleTeamCountSelection(value: number) {
+    this.teamCount = value;
+  }
+
   private getRandomMap(): GameMapType {
     const maps = Object.values(GameMapType);
     const randIdx = Math.floor(Math.random() * maps.length);
@@ -361,6 +410,7 @@ export class SinglePlayerModal extends LitElement {
               gameMap: this.selectedMap,
               gameType: GameType.Singleplayer,
               gameMode: this.gameMode,
+              numPlayerTeams: this.teamCount,
               difficulty: this.selectedDifficulty,
               disableNPCs: this.disableNPCs,
               disableNukes: this.disableNukes,

src/client/UserSettingModal.ts

@@ -0,0 +1,226 @@
+import { LitElement, html } from "lit";
+import { customElement, query, state } from "lit/decorators.js";
+import { UserSettings } from "../core/game/UserSettings";
+import "./components/baseComponents/setting/SettingNumber";
+import "./components/baseComponents/setting/SettingSlider";
+import "./components/baseComponents/setting/SettingToggle";
+
+@customElement("user-setting")
+export class UserSettingModal extends LitElement {
+  private userSettings: UserSettings = new UserSettings();
+
+  @state() private darkMode: boolean = this.userSettings.darkMode();
+
+  @state() private keySequence: string[] = [];
+  @state() private showEasterEggSettings = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  @query("o-modal") private modalEl!: HTMLElement & {
+    open: () => void;
+    close: () => void;
+    isModalOpen: boolean;
+  };
+
+  createRenderRoot() {
+    return this;
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.handleKeyDown);
+    super.disconnectedCallback();
+    document.body.style.overflow = "auto";
+  }
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (!this.modalEl?.isModalOpen || this.showEasterEggSettings) return;
+
+    const key = e.key.toLowerCase();
+    const nextSequence = [...this.keySequence, key].slice(-4);
+    this.keySequence = nextSequence;
+
+    if (nextSequence.join("") === "evan") {
+      this.triggerEasterEgg();
+      this.keySequence = [];
+    }
+  };
+
+  private triggerEasterEgg() {
+    console.log("🪺 Setting~ unlocked by EVAN combo!");
+    this.showEasterEggSettings = true;
+    const popup = document.createElement("div");
+    popup.className = "easter-egg-popup";
+    popup.textContent = "🎉 You found a secret setting!";
+    document.body.appendChild(popup);
+
+    setTimeout(() => {
+      popup.remove();
+    }, 5000);
+  }
+
+  toggleDarkMode(e: CustomEvent<{ checked: boolean }>) {
+    const enabled = e.detail?.checked;
+
+    if (typeof enabled !== "boolean") {
+      console.warn("Unexpected toggle event payload", e);
+      return;
+    }
+
+    this.userSettings.set("settings.darkMode", enabled);
+
+    if (enabled) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+
+    console.log("🌙 Dark Mode:", enabled ? "ON" : "OFF");
+  }
+
+  private toggleEmojis(e: CustomEvent<{ checked: boolean }>) {
+    const enabled = e.detail?.checked;
+    if (typeof enabled !== "boolean") return;
+
+    this.userSettings.set("settings.emojis", enabled);
+
+    console.log("🤡 Emojis:", enabled ? "ON" : "OFF");
+  }
+
+  private toggleLeftClickOpensMenu(e: CustomEvent<{ checked: boolean }>) {
+    const enabled = e.detail?.checked;
+    if (typeof enabled !== "boolean") return;
+
+    this.userSettings.set("settings.leftClickOpensMenu", enabled);
+    console.log("🖱️ Left Click Opens Menu:", enabled ? "ON" : "OFF");
+
+    this.requestUpdate();
+  }
+
+  private sliderAttackRatio(e: CustomEvent<{ value: number }>) {
+    const value = e.detail?.value;
+    if (typeof value === "number") {
+      const ratio = value / 100;
+      localStorage.setItem("settings.attackRatio", ratio.toString());
+    } else {
+      console.warn("Slider event missing detail.value", e);
+    }
+  }
+
+  private sliderTroopRatio(e: CustomEvent<{ value: number }>) {
+    const value = e.detail?.value;
+    if (typeof value === "number") {
+      const ratio = value / 100;
+      localStorage.setItem("settings.troopRatio", ratio.toString());
+    } else {
+      console.warn("Slider event missing detail.value", e);
+    }
+  }
+
+  render() {
+    return html`
+      <o-modal title="User Settings">
+        <div class="modal-overlay">
+          <div class="modal-content user-setting-modal">
+            <div class="settings-list">
+              <setting-toggle
+                label="🌙 Dark Mode"
+                description="Toggle the site’s appearance between light and dark themes"
+                id="dark-mode-toggle"
+                .checked=${this.userSettings.darkMode()}
+                @change=${(e: CustomEvent<{ checked: boolean }>) =>
+                  this.toggleDarkMode(e)}
+              ></setting-toggle>
+
+              <setting-toggle
+                label="😊 Emojis"
+                description="Toggle whether emojis are shown in game"
+                id="emoji-toggle"
+                .checked=${this.userSettings.emojis()}
+                @change=${this.toggleEmojis}
+              ></setting-toggle>
+
+              <setting-toggle
+                label="🖱️ Left Click to Open Menu"
+                description="When ON, left-click opens menu and sword button attacks. When OFF, right-click attacks directly."
+                id="left-click-toggle"
+                .checked=${this.userSettings.leftClickOpensMenu()}
+                @change=${this.toggleLeftClickOpensMenu}
+              ></setting-toggle>
+
+              <setting-slider
+                label="⚔️ Attack Ratio"
+                description="What percentage of your troops to send in an attack (1–100%)"
+                min="1"
+                max="100"
+                .value=${Number(
+                  localStorage.getItem("settings.attackRatio") ?? "0.2",
+                ) * 100}
+                @change=${this.sliderAttackRatio}
+              ></setting-slider>
+
+              <setting-slider
+                label="🪖🛠️ Troops and Workers Ratio"
+                description="Adjust the balance between troops (for combat) and workers (for gold production) (1–100%)"
+                min="1"
+                max="100"
+                .value=${Number(
+                  localStorage.getItem("settings.troopRatio") ?? "0.95",
+                ) * 100}
+                @change=${this.sliderTroopRatio}
+              ></setting-slider>
+
+              ${this.showEasterEggSettings
+                ? html`
+                    <setting-slider
+                      label="Writing Speed Multiplier"
+                      description="Adjust how fast you pretend to code (x1–x100)"
+                      min="0"
+                      max="100"
+                      value="40"
+                      easter="true"
+                      @change=${(e: CustomEvent) => {
+                        const value = e.detail?.value;
+                        if (typeof value !== "undefined") {
+                          console.log("Changed:", value);
+                        } else {
+                          console.warn("Slider event missing detail.value", e);
+                        }
+                      }}
+                    ></setting-slider>
+
+                    <setting-number
+                      label="Bug Count"
+                      description="How many bugs you're okay with (0–1000, emotionally)"
+                      value="100"
+                      min="0"
+                      max="1000"
+                      easter="true"
+                      @change=${(e: CustomEvent) => {
+                        const value = e.detail?.value;
+                        if (typeof value !== "undefined") {
+                          console.log("Changed:", value);
+                        } else {
+                          console.warn("Slider event missing detail.value", e);
+                        }
+                      }}
+                    ></setting-number>
+                  `
+                : null}
+            </div>
+          </div>
+        </div>
+      </o-modal>
+    `;
+  }
+
+  public open() {
+    this.modalEl?.open();
+  }
+
+  public close() {
+    this.modalEl?.close();
+  }
+}

src/client/components/Maps.ts

@@ -23,6 +23,7 @@ export const MapDescription: Record<keyof typeof GameMapType, string> = {
   Japan: "Japan",
   BetweenTwoSeas: "Between Two Seas",
   KnownWorld: "Known World",
+  FaroeIslands: "Faroe Islands",
 };
 
 @customElement("map-display")

src/client/components/baseComponents/setting/SettingNumber.ts

@@ -0,0 +1,52 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("setting-number")
+export class SettingNumber extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property({ type: Number }) value = 0;
+  @property({ type: Number }) min = 0;
+  @property({ type: Number }) max = 100;
+  @property({ type: Boolean }) easter = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const newValue = Number(input.value);
+    this.value = newValue;
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: newValue },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="setting-item${this.easter ? " easter-egg" : ""}">
+        <div class="setting-label-group">
+          <label class="setting-label" for="setting-number-input"
+            >${this.label}</label
+          >
+          <div class="setting-description">${this.description}</div>
+        </div>
+        <input
+          type="number"
+          id="setting-number-input"
+          class="setting-input number"
+          .value=${String(this.value ?? 0)}
+          min=${this.min}
+          max=${this.max}
+          @input=${this.handleInput}
+        />
+      </div>
+    `;
+  }
+}

src/client/components/baseComponents/setting/SettingSlider.ts

@@ -0,0 +1,76 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("setting-slider")
+export class SettingSlider extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property({ type: Number }) value = 0;
+  @property({ type: Number }) min = 0;
+  @property({ type: Number }) max = 100;
+  @property({ type: Boolean }) easter = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.value = Number(input.value);
+    this.updateSliderStyle(input);
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private handleSliderChange(e: Event) {
+    const detail = (e as CustomEvent)?.detail;
+    if (!detail || typeof detail.value === "undefined") {
+      console.warn("Invalid slider change event", e);
+      return;
+    }
+
+    const value = detail.value;
+    console.log("Slider changed to", value);
+  }
+
+  private updateSliderStyle(slider: HTMLInputElement) {
+    const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
+    slider.style.background = `linear-gradient(to right, #2196f3 ${percent}%, #444 ${percent}%)`;
+  }
+
+  firstUpdated() {
+    const slider = this.renderRoot.querySelector(
+      "input[type=range]",
+    ) as HTMLInputElement;
+    if (slider) this.updateSliderStyle(slider);
+  }
+
+  render() {
+    return html`
+      <div class="setting-item vertical${this.easter ? " easter-egg" : ""}">
+        <div class="setting-label-group">
+          <label class="setting-label" for="setting-slider-input"
+            >${this.label}</label
+          >
+          <div class="setting-description">${this.description}</div>
+        </div>
+        <input
+          type="range"
+          id="setting-slider-input"
+          class="setting-input slider full-width"
+          min=${this.min}
+          max=${this.max}
+          .value=${String(this.value)}
+          @input=${this.handleInput}
+        />
+        <div class="slider-value">${this.value}%</div>
+      </div>
+    `;
+  }
+}

src/client/components/baseComponents/setting/SettingToggle.ts

@@ -0,0 +1,47 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("setting-toggle")
+export class SettingToggle extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property() id = "";
+  @property({ type: Boolean, reflect: true }) checked = false;
+  @property({ type: Boolean }) easter = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    this.checked = input.checked;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { checked: this.checked },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="setting-item vertical${this.easter ? " easter-egg" : ""}">
+        <div class="toggle-row">
+          <label class="setting-label" for=${this.id}>${this.label}</label>
+          <label class="switch">
+            <input
+              type="checkbox"
+              id=${this.id}
+              ?checked=${this.checked}
+              @change=${this.handleChange}
+            />
+            <span class="slider-round"></span>
+          </label>
+        </div>
+        <div class="setting-description">${this.description}</div>
+      </div>
+    `;
+  }
+}

src/client/graphics/GameRenderer.ts

@@ -12,6 +12,7 @@ import { EmojiTable } from "./layers/EmojiTable";
 import { EventsDisplay } from "./layers/EventsDisplay";
 import { Layer } from "./layers/Layer";
 import { Leaderboard } from "./layers/Leaderboard";
+import { MultiTabModal } from "./layers/MultiTabModal";
 import { NameLayer } from "./layers/NameLayer";
 import { OptionsMenu } from "./layers/OptionsMenu";
 import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
@@ -125,6 +126,14 @@ export function createRenderer(
   playerPanel.eventBus = eventBus;
   playerPanel.emojiTable = emojiTable;
 
+  const multiTabModal = document.querySelector(
+    "multi-tab-modal",
+  ) as MultiTabModal;
+  if (!(multiTabModal instanceof MultiTabModal)) {
+    console.error("multi-tab modal not found");
+  }
+  multiTabModal.game = game;
+
   const layers: Layer[] = [
     new TerrainLayer(game, transformHandler),
     new TerritoryLayer(game, eventBus),
@@ -153,6 +162,7 @@ export function createRenderer(
     optionsMenu,
     topBar,
     playerPanel,
+    multiTabModal,
   ];
 
   return new GameRenderer(

src/client/graphics/SpriteLoader.ts

@@ -0,0 +1,137 @@
+import { Colord } from "colord";
+import atomBombSprite from "../../../resources/sprites/atombomb.png";
+import hydrogenBombSprite from "../../../resources/sprites/hydrogenbomb.png";
+import mirvSprite from "../../../resources/sprites/mirv2.png";
+import samMissileSprite from "../../../resources/sprites/samMissile.png";
+import tradeShipSprite from "../../../resources/sprites/tradeship.png";
+import transportShipSprite from "../../../resources/sprites/transportship.png";
+import warshipSprite from "../../../resources/sprites/warship.png";
+import { Theme } from "../../core/configuration/Config";
+import { UnitType } from "../../core/game/Game";
+import { UnitView } from "../../core/game/GameView";
+
+const SPRITE_CONFIG: Partial<Record<UnitType, string>> = {
+  [UnitType.TransportShip]: transportShipSprite,
+  [UnitType.Warship]: warshipSprite,
+  [UnitType.SAMMissile]: samMissileSprite,
+  [UnitType.AtomBomb]: atomBombSprite,
+  [UnitType.HydrogenBomb]: hydrogenBombSprite,
+  [UnitType.TradeShip]: tradeShipSprite,
+  [UnitType.MIRV]: mirvSprite,
+};
+
+const spriteMap: Map<UnitType, ImageBitmap> = new Map();
+
+// preload all images
+export const loadAllSprites = async (): Promise<void> => {
+  const entries = Object.entries(SPRITE_CONFIG);
+  const totalSprites = entries.length;
+  let loadedCount = 0;
+
+  await Promise.all(
+    entries.map(async ([unitType, url]) => {
+      const typedUnitType = unitType as UnitType;
+
+      if (!url || url === "") {
+        console.warn(`No sprite URL for ${typedUnitType}, skipping...`);
+        return;
+      }
+
+      try {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.src = url;
+
+        await new Promise<void>((resolve, reject) => {
+          img.onload = () => resolve();
+          img.onerror = (err) => reject(err);
+        });
+
+        const bitmap = await createImageBitmap(img);
+        spriteMap.set(typedUnitType, bitmap);
+        loadedCount++;
+
+        if (loadedCount === totalSprites) {
+          console.log("All sprites loaded.");
+        }
+      } catch (err) {
+        console.error(`Failed to load sprite for ${typedUnitType}:`, err);
+      }
+    }),
+  );
+};
+
+const getSpriteForUnit = (unitType: UnitType): ImageBitmap | null => {
+  return spriteMap.get(unitType) ?? null;
+};
+
+export const isSpriteReady = (unitType: UnitType): boolean => {
+  return spriteMap.has(unitType);
+};
+
+const coloredSpriteCache: Map<string, HTMLCanvasElement> = new Map();
+
+// puts the sprite in an canvas colors it and caches the colored canvas
+export const getColoredSprite = (
+  unit: UnitView,
+  theme: Theme,
+  customTerritoryColor?: Colord,
+  customBorderColor?: Colord,
+): HTMLCanvasElement => {
+  const owner = unit.owner();
+  const territoryColor = customTerritoryColor ?? theme.territoryColor(owner);
+  const borderColor = customBorderColor ?? theme.borderColor(owner);
+  const spawnHighlightColor = theme.spawnHighlightColor();
+  const colorKey = customTerritoryColor
+    ? customTerritoryColor.toRgbString()
+    : "";
+  const key = owner.id() + unit.type() + colorKey;
+
+  if (coloredSpriteCache.has(key)) {
+    return coloredSpriteCache.get(key)!;
+  }
+
+  const sprite = getSpriteForUnit(unit.type());
+
+  const territoryRgb = territoryColor.toRgb();
+  const borderRgb = borderColor.toRgb();
+  const spawnHighlightRgb = spawnHighlightColor.toRgb();
+
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d")!;
+  canvas.width = sprite.width;
+  canvas.height = sprite.height;
+
+  ctx.drawImage(sprite, 0, 0);
+
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+
+    if (r === 180 && g === 180 && b === 180) {
+      data[i] = territoryRgb.r;
+      data[i + 1] = territoryRgb.g;
+      data[i + 2] = territoryRgb.b;
+    }
+
+    if (r === 70 && g === 70 && b === 70) {
+      data[i] = borderRgb.r;
+      data[i + 1] = borderRgb.g;
+      data[i + 2] = borderRgb.b;
+    }
+
+    if (r === 130 && g === 130 && b === 130) {
+      data[i] = spawnHighlightRgb.r;
+      data[i + 1] = spawnHighlightRgb.g;
+      data[i + 2] = spawnHighlightRgb.b;
+    }
+  }
+
+  ctx.putImageData(imageData, 0.5, 0.5);
+  coloredSpriteCache.set(key, canvas);
+  return canvas;
+};

src/client/graphics/TransformHandler.ts

@@ -97,6 +97,10 @@ export class TransformHandler {
   }
 
   screenBoundingRect(): [Cell, Cell] {
+    const canvasRect = this.boundingRect();
+    const canvasWidth = canvasRect.width;
+    const canvasHeight = canvasRect.height;
+
     const LeftX = -this.game.width() / 2 / this.scale + this.offsetX;
     const TopY = -this.game.height() / 2 / this.scale + this.offsetY;
 
@@ -104,12 +108,12 @@ export class TransformHandler {
     const gameTopY = TopY + this.game.height() / 2;
 
     const rightX =
-      (screen.width - this.game.width() / 2) / this.scale + this.offsetX;
-    const rightY =
-      (screen.height - this.game.height() / 2) / this.scale + this.offsetY;
+      (canvasWidth - this.game.width() / 2) / this.scale + this.offsetX;
+    const bottomY =
+      (canvasHeight - this.game.height() / 2) / this.scale + this.offsetY;
 
     const gameRightX = rightX + this.game.width() / 2;
-    const gameBottomY = rightY + this.game.height() / 2;
+    const gameBottomY = bottomY + this.game.height() / 2;
 
     return [
       new Cell(Math.floor(gameLeftX), Math.floor(gameTopY)),

src/client/graphics/layers/ControlPanel.ts

@@ -56,8 +56,16 @@ export class ControlPanel extends LitElement implements Layer {
 
   private _popRateIsIncreasing: boolean = true;
 
+  private init_: boolean = false;
+
   init() {
-    this.attackRatio = 0.2;
+    this.attackRatio = Number(
+      localStorage.getItem("settings.attackRatio") ?? "0.2",
+    );
+    this.targetTroopRatio = Number(
+      localStorage.getItem("settings.troopRatio") ?? "0.95",
+    );
+    this.init_ = true;
     this.uiState.attackRatio = this.attackRatio;
     this.currentTroopRatio = this.targetTroopRatio;
     this.eventBus.on(AttackRatioEvent, (event) => {
@@ -87,6 +95,13 @@ export class ControlPanel extends LitElement implements Layer {
   }
 
   tick() {
+    if (this.init_) {
+      this.eventBus.emit(
+        new SendSetTargetTroopRatioEvent(this.targetTroopRatio),
+      );
+      this.init_ = false;
+    }
+
     if (!this._isVisible && !this.game.inSpawnPhase()) {
       this.setVisibile(true);
     }

src/client/graphics/layers/EventsDisplay.ts

@@ -282,7 +282,7 @@ export class EventsDisplay extends LitElement implements Layer {
       });
     } else if (betrayed === myPlayer) {
       this.addEvent({
-        description: `${traitor.name()}, broke their alliance with you`,
+        description: `${traitor.name()} broke their alliance with you`,
         type: MessageType.ERROR,
         highlight: true,
         createdAt: this.game.ticks(),

src/client/graphics/layers/MultiTabModal.ts

@@ -0,0 +1,131 @@
+import { LitElement, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { GameType } from "../../../core/game/Game";
+import { GameView } from "../../../core/game/GameView";
+import { MultiTabDetector } from "../../MultiTabDetector";
+import { translateText } from "../../Utils";
+import { Layer } from "./Layer";
+
+@customElement("multi-tab-modal")
+export class MultiTabModal extends LitElement implements Layer {
+  public game: GameView;
+
+  private detector: MultiTabDetector;
+
+  @property({ type: Number }) duration: number = 5000;
+  @state() private countdown: number = 5;
+  @state() private isVisible: boolean = false;
+
+  private intervalId?: number;
+
+  // Disable shadow DOM to allow Tailwind classes to work
+  createRenderRoot() {
+    return this;
+  }
+
+  tick() {
+    if (
+      this.game.inSpawnPhase() ||
+      this.game.config().gameConfig().gameType == GameType.Singleplayer
+    ) {
+      return;
+    }
+    if (!this.detector) {
+      this.detector = new MultiTabDetector();
+      this.detector.startMonitoring((duration: number) => {
+        this.show(duration);
+      });
+    }
+  }
+
+  // Show the modal with penalty information
+  public show(duration: number): void {
+    if (!this.game.myPlayer()?.isAlive()) {
+      return;
+    }
+    this.duration = duration;
+    this.countdown = Math.ceil(duration / 1000);
+    this.isVisible = true;
+
+    // Start countdown timer
+    this.intervalId = window.setInterval(() => {
+      this.countdown--;
+
+      if (this.countdown <= 0) {
+        this.hide();
+      }
+    }, 1000);
+
+    this.requestUpdate();
+  }
+
+  // Hide the modal
+  public hide(): void {
+    this.isVisible = false;
+
+    if (this.intervalId) {
+      window.clearInterval(this.intervalId);
+      this.intervalId = undefined;
+    }
+
+    // Dispatch event when modal is closed
+    this.dispatchEvent(
+      new CustomEvent("penalty-complete", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
+    this.requestUpdate();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.intervalId) {
+      window.clearInterval(this.intervalId);
+    }
+  }
+
+  render() {
+    if (!this.isVisible) {
+      return html``;
+    }
+
+    return html`
+      <div
+        class="fixed inset-0 z-50 overflow-auto bg-red-500/20 flex items-center justify-center"
+      >
+        <div
+          class="relative p-6 bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full m-4 transition-all transform"
+        >
+          <h2 class="text-2xl font-bold mb-4 text-red-600 dark:text-red-400">
+            ${translateText("multi_tab.warning")}
+          </h2>
+
+          <p class="mb-4 text-gray-800 dark:text-gray-200">
+            ${translateText("multi_tab.detected")}
+          </p>
+
+          <p class="mb-4 text-gray-800 dark:text-gray-200">
+            ${translateText("multi_tab.please_wait")}
+            <span class="font-bold text-xl">${this.countdown}</span>
+            ${translateText("multi_tab.seconds")}
+          </p>
+
+          <div
+            class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4"
+          >
+            <div
+              class="bg-red-600 dark:bg-red-500 h-2.5 rounded-full transition-all duration-1000 ease-linear"
+              style="width: ${(this.countdown / (this.duration / 1000)) * 100}%"
+            ></div>
+          </div>
+
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            ${translateText("multi_tab.explanation")}
+          </p>
+        </div>
+      </div>
+    `;
+  }
+}

src/client/graphics/layers/PlayerPanel.ts

@@ -145,8 +145,14 @@ export class PlayerPanel extends LitElement implements Layer {
     this.eventBus.on(MouseUpEvent, (e: MouseEvent) => this.hide());
   }
 
-  tick() {
-    this.requestUpdate();
+  async tick() {
+    if (this.isVisible && this.tile) {
+      const myPlayer = this.g.myPlayer();
+      if (myPlayer !== null && myPlayer.isAlive()) {
+        this.actions = await myPlayer.actions(this.tile);
+        this.requestUpdate();
+      }
+    }
   }
 
   getTotalNukesSent(otherId: PlayerID): number {

src/client/graphics/layers/RadialMenu.ts

@@ -8,7 +8,7 @@ import swordIcon from "../../../../resources/images/SwordIconWhite.svg";
 import traitorIcon from "../../../../resources/images/TraitorIconWhite.svg";
 import { consolex } from "../../../core/Consolex";
 import { EventBus } from "../../../core/EventBus";
-import { Cell, PlayerActions } from "../../../core/game/Game";
+import { Cell, PlayerActions, TerraNullius } from "../../../core/game/Game";
 import { TileRef } from "../../../core/game/GameMap";
 import { GameView, PlayerView } from "../../../core/game/GameView";
 import { ClientID } from "../../../core/Schemas";
@@ -44,6 +44,7 @@ export class RadialMenu implements Layer {
   private clickedCell: Cell | null = null;
   private lastClosed: number = 0;
 
+  private originalTileOwner: PlayerView | TerraNullius;
   private menuElement: d3.Selection<HTMLDivElement, unknown, null, undefined>;
   private isVisible: boolean = false;
   private readonly menuItems = new Map([
@@ -138,6 +139,7 @@ export class RadialMenu implements Layer {
       .style("touch-action", "none")
       .on("contextmenu", (e) => {
         e.preventDefault();
+        this.hideRadialMenu();
       });
 
     const svg = this.menuElement
@@ -266,8 +268,26 @@ export class RadialMenu implements Layer {
       .style("pointer-events", "none");
   }
 
-  tick() {
-    // Update logic if needed
+  async tick() {
+    // Only update when menu is visible
+    if (!this.isVisible || this.clickedCell === null) return;
+    const myPlayer = this.g.myPlayer();
+    if (myPlayer === null || !myPlayer.isAlive()) return;
+    const tile = this.g.ref(this.clickedCell.x, this.clickedCell.y);
+    if (this.originalTileOwner.isPlayer()) {
+      if (this.g.owner(tile) != this.originalTileOwner) {
+        this.closeMenu();
+        return;
+      }
+    } else {
+      if (this.g.owner(tile).isPlayer() || this.g.owner(tile) == myPlayer) {
+        this.closeMenu();
+        return;
+      }
+    }
+    const actions = await myPlayer.actions(tile);
+    this.disableAllButtons();
+    this.handlePlayerActions(myPlayer, actions, tile);
   }
 
   renderLayer(context: CanvasRenderingContext2D) {
@@ -290,12 +310,7 @@ export class RadialMenu implements Layer {
     } else {
       this.showRadialMenu(event.x, event.y);
     }
-    this.enableCenterButton(false);
-    for (const item of this.menuItems.values()) {
-      item.disabled = true;
-      this.updateMenuItemState(item);
-    }
-
+    this.disableAllButtons();
     this.clickedCell = this.transformHandler.screenToWorldCoordinates(
       event.x,
       event.y,
@@ -304,7 +319,7 @@ export class RadialMenu implements Layer {
       return;
     }
     const tile = this.g.ref(this.clickedCell.x, this.clickedCell.y);
-
+    this.originalTileOwner = this.g.owner(tile);
     if (this.g.inSpawnPhase()) {
       if (this.g.isLand(tile) && !this.g.hasOwner(tile)) {
         this.enableCenterButton(true);
@@ -312,10 +327,8 @@ export class RadialMenu implements Layer {
       return;
     }
 
-    const myPlayer = this.g
-      .playerViews()
-      .find((p) => p.clientID() == this.clientID);
-    if (!myPlayer) {
+    const myPlayer = this.g.myPlayer();
+    if (myPlayer === null) {
       consolex.warn("my player not found");
       return;
     }
@@ -429,6 +442,14 @@ export class RadialMenu implements Layer {
     this.hideRadialMenu();
   }
 
+  private disableAllButtons() {
+    this.enableCenterButton(false);
+    for (const item of this.menuItems.values()) {
+      item.disabled = true;
+      this.updateMenuItemState(item);
+    }
+  }
+
   private activateMenuElement(
     slot: Slot,
     color: string,

src/client/graphics/layers/SpawnTimer.ts

@@ -1,13 +1,11 @@
-import { blue, red } from "../../../core/configuration/Colors";
 import { GameMode, Team } from "../../../core/game/Game";
 import { GameView } from "../../../core/game/GameView";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
 export class SpawnTimer implements Layer {
-  private ratio = 0;
-  private leftColor = "rgba(0, 128, 255, 0.7)";
-  private rightColor = "rgba(0, 0, 0, 0.5)";
+  private ratios = [0];
+  private colors = ["rgba(0, 128, 255, 0.7)", "rgba(0, 0, 0, 0.5)"];
 
   constructor(
     private game: GameView,
@@ -18,27 +16,35 @@ export class SpawnTimer implements Layer {
 
   tick() {
     if (this.game.inSpawnPhase()) {
-      this.ratio = this.game.ticks() / this.game.config().numSpawnPhaseTurns();
+      this.ratios[0] =
+        this.game.ticks() / this.game.config().numSpawnPhaseTurns();
       return;
     }
+
+    this.ratios = [];
+    this.colors = [];
+
     if (this.game.config().gameConfig().gameMode != GameMode.Team) {
-      this.ratio = 0;
       return;
     }
 
-    const numBlueTiles = this.game
-      .players()
-      .filter((p) => p.team() == Team.Blue)
-      .reduce((acc, p) => acc + p.numTilesOwned(), 0);
+    const teamTiles: Map<Team, number> = new Map();
+    for (const player of this.game.players()) {
+      const team = player.team();
+      const tiles = teamTiles.get(team) ?? 0;
+      const sum = tiles + player.numTilesOwned();
+      teamTiles.set(team, sum);
+    }
 
-    const numRedTiles = this.game
-      .players()
-      .filter((p) => p.team() == Team.Red)
-      .reduce((acc, p) => acc + p.numTilesOwned(), 0);
-
-    this.ratio = numBlueTiles / (numBlueTiles + numRedTiles);
-    this.leftColor = blue.toRgbString();
-    this.rightColor = red.toRgbString();
+    const theme = this.game.config().theme();
+    const total = sumIterator(teamTiles.values());
+    if (total === 0) return;
+    for (const [team, count] of teamTiles) {
+      const ratio = count / total;
+      const color = theme.teamColor(team).toRgbString();
+      this.ratios.push(ratio);
+      this.colors.push(color);
+    }
   }
 
   shouldTransform(): boolean {
@@ -46,18 +52,34 @@ export class SpawnTimer implements Layer {
   }
 
   renderLayer(context: CanvasRenderingContext2D) {
-    if (this.ratio == 0) {
-      return;
-    }
+    if (this.ratios === null) return;
+    if (this.ratios.length === 0) return;
+    if (this.colors.length === 0) return;
 
     const barHeight = 10;
-    const barBackgroundWidth = this.transformHandler.width();
+    const barWidth = this.transformHandler.width();
 
-    // Draw bar background
-    context.fillStyle = this.rightColor;
-    context.fillRect(0, 0, barBackgroundWidth, barHeight);
+    let x = 0;
+    let filledRatio = 0;
+    for (let i = 0; i < this.ratios.length && i < this.colors.length; i++) {
+      const ratio = this.ratios[i];
+      const segmentWidth = barWidth * ratio;
 
-    context.fillStyle = this.leftColor;
-    context.fillRect(0, 0, barBackgroundWidth * this.ratio, barHeight);
+      context.fillStyle = this.colors[i];
+      context.fillRect(x, 0, segmentWidth, barHeight);
+
+      x += segmentWidth;
+      filledRatio += ratio;
+    }
   }
 }
+
+function sumIterator(values: MapIterator<number>) {
+  // To use reduce, we'd need to allocate an array:
+  // return Array.from(values).reduce((sum, v) => sum + v, 0);
+  let total = 0;
+  for (const value of values) {
+    total += value;
+  }
+  return total;
+}

src/client/graphics/layers/UnitLayer.ts

@@ -19,6 +19,8 @@ import { MoveWarshipIntentEvent } from "../../Transport";
 import { TransformHandler } from "../TransformHandler";
 import { Layer } from "./Layer";
 
+import { getColoredSprite, loadAllSprites } from "../SpriteLoader";
+
 enum Relationship {
   Self,
   Ally,
@@ -77,6 +79,8 @@ export class UnitLayer implements Layer {
     this.eventBus.on(MouseUpEvent, (e) => this.onMouseUp(e));
     this.eventBus.on(UnitSelectionEvent, (e) => this.onUnitSelectionChange(e));
     this.redraw();
+
+    loadAllSprites();
   }
 
   /**
@@ -199,6 +203,18 @@ export class UnitLayer implements Layer {
       ?.[GameUpdateType.Unit]?.forEach((unit) => {
         this.onUnitEvent(this.game.unit(unit.id));
       });
+    this.boatToTrail.forEach((trail, unit) => {
+      for (const t of trail) {
+        this.paintCell(
+          this.game.x(t),
+          this.game.y(t),
+          this.relationship(unit),
+          this.theme.territoryColor(unit.owner()),
+          150,
+          this.transportShipTrailContext,
+        );
+      }
+    });
   }
 
   private relationship(unit: UnitView): Relationship {
@@ -258,56 +274,13 @@ export class UnitLayer implements Layer {
       this.clearCell(this.game.x(t), this.game.y(t));
     }
 
-    if (!unit.isActive()) {
-      return;
-    }
-
-    let outerColor = this.theme.territoryColor(unit.owner());
-    if (unit.warshipTargetId()) {
-      const targetOwner = this.game
-        .units()
-        .find((u) => u.id() == unit.warshipTargetId())
-        ?.owner();
-      if (targetOwner == this.myPlayer) {
-        outerColor = colord({ r: 200, b: 0, g: 0 });
+    if (unit.isActive()) {
+      if (unit.warshipTargetId()) {
+        this.drawSprite(unit, colord({ r: 200, b: 0, g: 0 }));
+      } else {
+        this.drawSprite(unit);
       }
     }
-
-    // Paint outer territory
-    for (const t of this.game.bfs(
-      unit.tile(),
-      euclDistFN(unit.tile(), 5, false),
-    )) {
-      this.paintCell(this.game.x(t), this.game.y(t), rel, outerColor, 255);
-    }
-
-    // Paint border
-    for (const t of this.game.bfs(
-      unit.tile(),
-      manhattanDistFN(unit.tile(), 4),
-    )) {
-      this.paintCell(
-        this.game.x(t),
-        this.game.y(t),
-        rel,
-        this.theme.borderColor(unit.owner()),
-        255,
-      );
-    }
-
-    // Paint inner territory
-    for (const t of this.game.bfs(
-      unit.tile(),
-      euclDistFN(unit.tile(), 1, false),
-    )) {
-      this.paintCell(
-        this.game.x(t),
-        this.game.y(t),
-        rel,
-        this.theme.territoryColor(unit.owner()),
-        255,
-      );
-    }
   }
 
   private handleShellEvent(unit: UnitView) {
@@ -355,32 +328,13 @@ export class UnitLayer implements Layer {
     }
 
     if (unit.isActive()) {
-      for (const t of this.game.bfs(
-        unit.tile(),
-        euclDistFN(unit.tile(), range, false),
-      )) {
-        this.paintCell(
-          this.game.x(t),
-          this.game.y(t),
-          rel,
-          this.theme.spawnHighlightColor(),
-          255,
-        );
-      }
-
-      this.paintCell(
-        this.game.x(unit.tile()),
-        this.game.y(unit.tile()),
-        rel,
-        this.theme.borderColor(unit.owner()),
-        255,
-      );
+      this.drawSprite(unit);
     }
   }
 
   private handleNuke(unit: UnitView) {
-    const rel = this.relationship(unit);
     let range = 0;
+
     switch (unit.type()) {
       case UnitType.AtomBomb:
         range = 4;
@@ -393,7 +347,6 @@ export class UnitLayer implements Layer {
         break;
     }
 
-    // Clear previous area
     for (const t of this.game.bfs(
       unit.lastTile(),
       euclDistFN(unit.lastTile(), range, false),
@@ -402,30 +355,7 @@ export class UnitLayer implements Layer {
     }
 
     if (unit.isActive()) {
-      for (const t of this.game.bfs(
-        unit.tile(),
-        euclDistFN(unit.tile(), range, false),
-      )) {
-        this.paintCell(
-          this.game.x(t),
-          this.game.y(t),
-          rel,
-          this.theme.spawnHighlightColor(),
-          255,
-        );
-      }
-      for (const t of this.game.bfs(
-        unit.tile(),
-        euclDistFN(unit.tile(), 2, false),
-      )) {
-        this.paintCell(
-          this.game.x(t),
-          this.game.y(t),
-          rel,
-          this.theme.borderColor(unit.owner()),
-          255,
-        );
-      }
+      this.drawSprite(unit);
     }
   }
 
@@ -447,8 +377,6 @@ export class UnitLayer implements Layer {
   }
 
   private handleTradeShipEvent(unit: UnitView) {
-    const rel = this.relationship(unit);
-
     // Clear previous area
     for (const t of this.game.bfs(
       unit.lastTile(),
@@ -458,33 +386,7 @@ export class UnitLayer implements Layer {
     }
 
     if (unit.isActive()) {
-      // Paint territory
-      for (const t of this.game.bfs(
-        unit.tile(),
-        manhattanDistFN(unit.tile(), 2),
-      )) {
-        this.paintCell(
-          this.game.x(t),
-          this.game.y(t),
-          rel,
-          this.theme.territoryColor(unit.owner()),
-          255,
-        );
-      }
-
-      // Paint border
-      for (const t of this.game.bfs(
-        unit.tile(),
-        manhattanDistFN(unit.tile(), 1),
-      )) {
-        this.paintCell(
-          this.game.x(t),
-          this.game.y(t),
-          rel,
-          this.theme.borderColor(unit.owner()),
-          255,
-        );
-      }
+      this.drawSprite(unit);
     }
   }
 
@@ -500,7 +402,7 @@ export class UnitLayer implements Layer {
     // Clear previous area
     for (const t of this.game.bfs(
       unit.lastTile(),
-      manhattanDistFN(unit.lastTile(), 2),
+      manhattanDistFN(unit.lastTile(), 4),
     )) {
       this.clearCell(this.game.x(t), this.game.y(t));
     }
@@ -518,31 +420,7 @@ export class UnitLayer implements Layer {
         );
       }
 
-      for (const t of this.game.bfs(
-        unit.tile(),
-        manhattanDistFN(unit.tile(), 2),
-      )) {
-        this.paintCell(
-          this.game.x(t),
-          this.game.y(t),
-          rel,
-          this.theme.borderColor(unit.owner()),
-          255,
-        );
-      }
-
-      for (const t of this.game.bfs(
-        unit.tile(),
-        manhattanDistFN(unit.tile(), 1),
-      )) {
-        this.paintCell(
-          this.game.x(t),
-          this.game.y(t),
-          rel,
-          this.theme.territoryColor(unit.owner()),
-          255,
-        );
-      }
+      this.drawSprite(unit);
     } else {
       for (const t of trail) {
         this.clearCell(
@@ -606,4 +484,41 @@ export class UnitLayer implements Layer {
   ) {
     context.clearRect(x, y, 1, 1);
   }
+
+  drawSprite(unit: UnitView, customTerritoryColor?: Colord) {
+    const x = this.game.x(unit.tile());
+    const y = this.game.y(unit.tile());
+
+    let alternateViewColor = null;
+
+    if (this.alternateView) {
+      const rel = this.relationship(unit);
+      switch (rel) {
+        case Relationship.Self:
+          alternateViewColor = this.theme.selfColor();
+          break;
+        case Relationship.Ally:
+          alternateViewColor = this.theme.allyColor();
+          break;
+        case Relationship.Enemy:
+          alternateViewColor = this.theme.enemyColor();
+          break;
+      }
+    }
+
+    const sprite = getColoredSprite(
+      unit,
+      this.theme,
+      alternateViewColor ?? customTerritoryColor,
+      alternateViewColor,
+    );
+
+    this.context.drawImage(
+      sprite,
+      Math.round(x - sprite.width / 2),
+      Math.round(y - sprite.height / 2),
+      sprite.width,
+      sprite.width,
+    );
+  }
 }

src/client/graphics/layers/WinModal.ts

@@ -149,7 +149,7 @@ export class WinModal extends LitElement implements Layer {
     return html`
       <div class="win-modal ${this.isVisible ? "visible" : ""}">
         <h2>${this._title || ""}</h2>
-        ${this.supportHTML()}
+        ${this.innerHtml()}
         <div class="button-container">
           <button @click=${this._handleExit}>Exit Game</button>
           <button @click=${this.hide}>Keep Playing</button>
@@ -158,35 +158,9 @@ export class WinModal extends LitElement implements Layer {
     `;
   }
 
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    // Initialize ads if modal is visible and showing ads
-    if (changedProperties.has("isVisible") && this.isVisible && !this.won) {
-      try {
-        setTimeout(() => {
-          (adsbygoogle = window.adsbygoogle || []).push({});
-        }, 0);
-      } catch (error) {
-        console.error("Error initializing ad:", error);
-      }
-    }
-  }
-
-  supportHTML() {
+  innerHtml() {
     return html`
-      <div style="text-align: center; margin: 15px 0;">
-        <p>
-          Like the game? Help make this my full-time project!
-          <a
-            href="https://discord.gg/k22YrnAzGp"
-            target="_blank"
-            rel="noopener noreferrer"
-            style="color: #0096ff; text-decoration: underline; display: block; margin-top: 5px;"
-          >
-            Support the game!
-          </a>
-        </p>
-      </div>
+      <div style="text-align: center; margin: 15px 0; line-height: 1.5;"></div>
     `;
   }
 

src/client/index.html

@@ -48,8 +48,10 @@
       .left-gutter-ad {
         position: fixed;
         left: 0;
-        top: 200px; /* Changed from top: 50% */
-        transform: none; /* Removed translateY(-50%) since we don't need to center anymore */
+        top: 200px;
+        /* Changed from top: 50% */
+        transform: none;
+        /* Removed translateY(-50%) since we don't need to center anymore */
         z-index: 40;
         width: 300px;
         height: 600px;
@@ -68,8 +70,10 @@
       .right-gutter-ad {
         position: fixed;
         right: 0;
-        top: 200px; /* Changed from top: 50% */
-        transform: none; /* Removed translateY(-50%) since we don't need to center anymore */
+        top: 200px;
+        /* Changed from top: 50% */
+        transform: none;
+        /* Removed translateY(-50%) since we don't need to center anymore */
         z-index: 40;
         width: 300px;
         height: 600px;
@@ -122,7 +126,22 @@
       src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7035513310742290"
       crossorigin="anonymous"
     ></script>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-WQGQQ8RDN4"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-WQGQQ8RDN4");
+    </script>
   </head>
+
   <body
     class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col"
   >
@@ -184,47 +203,19 @@
             />
           </g>
         </svg>
-        <div class="l-header__highlightText">v21.0</div>
+        <div class="l-header__highlightText">v21.2</div>
       </div>
     </header>
     <div class="bg-image"></div>
-    <!-- Left gutter ad placement - full height, no empty space -->
-    <div class="left-gutter-ad ad">
-      <google-ad
-        adSlot="5220834834"
-        adFormat="vertical"
-        fullWidthResponsive="false"
-      ></google-ad>
-    </div>
-    <div class="right-gutter-ad ad">
-      <google-ad
-        adSlot="1814331462"
-        adFormat="vertical"
-        fullWidthResponsive="false"
-      ></google-ad>
-    </div>
 
     <!-- Main container with responsive padding -->
-    <main class="flex justify-center items-center flex-grow">
-      <div class="container">
+    <main class="flex justify-center flex-grow">
+      <div class="container pt-12">
         <div class="container__row">
           <flag-input class="w-[20%] md:w-[15%]"></flag-input>
           <username-input class="w-full"></username-input>
         </div>
-        <div>
-          <a
-            target="_blank"
-            href="https://discord.gg/openfront"
-            class="w-full bg-[#5865F2] hover:bg-[#4752C4] text-white p-3 sm:p-4 lg:p-5 font-medium text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300 flex justify-center items-center gap-5"
-          >
-            <img
-              style="height: 50px; width: 50px"
-              alt="Discord"
-              src="../../resources/icons/discord.svg"
-            />
-            <span data-i18n="main.join_discord"> Join the Discord! </span>
-          </a>
-        </div>
+        <div></div>
         <div>
           <public-lobby class="w-full"></public-lobby>
         </div>
@@ -265,6 +256,20 @@
       </div>
     </main>
 
+    <!-- User Setting -->
+    <button
+      id="settings-button"
+      title="Settings"
+      class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center"
+      style="width: 80px; height: 80px; background-color: #0075ff"
+    >
+      <img
+        src="../../resources/images/SettingIconWhite.svg"
+        alt="Settings"
+        style="width: 72px; height: 72px"
+      />
+    </button>
+
     <!-- Game components -->
     <div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
       <ul></ul>
@@ -313,6 +318,9 @@
           >
             Wiki
           </a>
+          <a target="_blank" href="https://discord.gg/openfront" class="t-link">
+            <span data-i18n="main.join_discord"> Join the Discord! </span>
+          </a>
         </div>
         <div class="l-footer__col t-text-white">
           © 2025
@@ -339,6 +347,8 @@
     <player-panel></player-panel>
     <help-modal></help-modal>
     <dark-mode-button></dark-mode-button>
+    <user-setting></user-setting>
+    <multi-tab-modal></multi-tab-modal>
     <div
       id="language-modal"
       class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex justify-center items-center"

src/client/styles.css

@@ -9,6 +9,8 @@
 @import url("./styles/layout/container.css");
 @import url("./styles/components/button.css");
 @import url("./styles/components/modal.css");
+@import url("./styles/components/setting.css");
+@import url("./styles/components/controls.css");
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -215,6 +217,8 @@ label.option-card:hover {
   font-size: 14px;
   color: #fff;
   text-align: center;
+  font-family: monospace;
+  font-weight: 600;
 }
 
 .players-list {

src/client/styles/components/controls.css

@@ -0,0 +1,80 @@
+.scroll-combo-horizontal {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font-family: sans-serif;
+  color: white;
+}
+
+.key {
+  display: inline-block;
+  padding: 4px 14px;
+  border-radius: 6px;
+  background-color: #000;
+  color: #fff;
+  font-weight: bold;
+  box-shadow: 0 2px 0 #444;
+}
+
+.plus {
+  font-size: 16px;
+  color: #ccc;
+}
+
+.mouse-shell {
+  width: 28px;
+  height: 45px;
+  border: 2px solid #ccc;
+  border-radius: 50px;
+  position: relative;
+  background: transparent;
+}
+
+.mouse-left-corner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50%;
+  height: 50%;
+  background-color: #ff4d4d;
+  border-top-left-radius: 50px;
+}
+
+.mouse-right-corner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50%;
+  height: 50%;
+  background-color: #ff4d4d;
+  border-top-right-radius: 50px;
+}
+
+.mouse-wheel {
+  width: 4px;
+  height: 8px;
+  background-color: #ccc;
+  border-radius: 2px;
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#highlighted-wheel {
+  background-color: #ff4d4d;
+}
+
+.mouse-with-arrows {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.mouse-arrows-side {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 14px;
+  color: #ccc;
+}

src/client/styles/components/setting.css

@@ -0,0 +1,257 @@
+.settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 12px;
+  align-items: center;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background: #1e1e1e;
+  border: 1px solid #333;
+  border-radius: 10px;
+  padding: 12px 20px;
+  width: 360px !important;
+  max-width: 360px !important;
+  min-width: 360px !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+  transition: background 0.3s ease;
+  gap: 12px;
+}
+
+@keyframes rainbow-background {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.setting-item.easter-egg {
+  background: linear-gradient(
+    270deg,
+    #990033,
+    #996600,
+    #336600,
+    #008080,
+    #1c3f99,
+    #5e0099,
+    #990033
+  );
+  background-size: 1400% 1400%;
+  animation: rainbow-background 10s ease infinite;
+  color: #fff;
+}
+
+.easter-egg-popup {
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.9);
+  padding: 16px 24px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 20px;
+  border-radius: 12px;
+  animation: fadePop 5s ease-out forwards;
+  z-index: 9999;
+}
+
+@keyframes fadePop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.6);
+  }
+  30% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+  70% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+}
+
+.setting-item:hover {
+  background: #2a2a2a;
+}
+
+.setting-item.easter-egg:hover {
+  background: linear-gradient(
+    270deg,
+    #990033,
+    #996600,
+    #336600,
+    #008080,
+    #1c3f99,
+    #5e0099,
+    #990033
+  );
+  background-size: 1400% 1400%;
+  animation: rainbow-background 10s ease infinite;
+  color: #fff;
+}
+
+.setting-label {
+  color: #f0f0f0;
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.setting-input {
+  margin-left: 16px;
+  flex-shrink: 0;
+}
+
+.setting-item.vertical {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.toggle-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.slider-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.setting-input.slider.full-width {
+  width: 90%;
+}
+
+.setting-input.slider {
+  -webkit-appearance: none;
+  width: 180px;
+  height: 10px;
+  background: linear-gradient(to right, #2196f3 50%, #444 50%);
+  border-radius: 5px;
+  outline: none;
+  transition: background 0.3s;
+}
+
+.setting-input.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid #2196f3;
+  cursor: pointer;
+}
+
+.setting-input.slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid #2196f3;
+  cursor: pointer;
+}
+
+.setting-input.slider::-moz-range-track {
+  background: linear-gradient(to right, #2196f3 50%, #444 50%);
+  height: 10px;
+  border-radius: 5px;
+}
+
+.setting-input.slider:focus {
+  outline: none;
+}
+
+.slider-value {
+  width: 100%;
+  text-align: center;
+  font-size: 13px;
+  color: #aaa;
+}
+
+.setting-input.number {
+  width: 80px;
+  padding: 6px 8px;
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 26px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch.switch-right {
+  display: block;
+  margin-left: auto;
+}
+
+.slider-round {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #d9534f;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider-round::before {
+  position: absolute;
+  content: "";
+  height: 20px;
+  width: 20px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+.switch input:checked + .slider-round {
+  background-color: #4caf50;
+}
+
+.switch input:checked + .slider-round::before {
+  transform: translateX(24px);
+}
+
+.setting-label-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.setting-description {
+  font-size: 12px;
+  color: #888;
+  margin-top: 2px;
+  white-space: normal;
+  word-break: break-word;
+}

src/client/styles/layout/footer.css

@@ -20,5 +20,5 @@
 
 .l-footer__col {
   display: flex;
-  gap: 10px;
+  gap: 20px;
 }

src/client/utilities/Maps.ts

@@ -5,6 +5,7 @@ import betweenTwoSeas from "../../../resources/maps/BetweenTwoSeasThumb.webp";
 import blackSea from "../../../resources/maps/BlackSeaThumb.webp";
 import britannia from "../../../resources/maps/BritanniaThumb.webp";
 import europe from "../../../resources/maps/EuropeThumb.webp";
+import faroeislands from "../../../resources/maps/FaroeIslandsThumb.webp";
 import gatewayToTheAtlantic from "../../../resources/maps/GatewayToTheAtlanticThumb.webp";
 import iceland from "../../../resources/maps/IcelandThumb.webp";
 import japan from "../../../resources/maps/JapanThumb.webp";
@@ -57,6 +58,8 @@ export function getMapsImage(map: GameMapType): string {
       return betweenTwoSeas;
     case GameMapType.KnownWorld:
       return knownworld;
+    case GameMapType.FaroeIslands:
+      return faroeislands;
     default:
       return "";
   }