Locked focus/highlighting option (#387)

## Description:

I've added the option to toggle the Territory highlighting focus from
the current behaviour where the focus set by the currently hovered
player, to "locked focus" which will always focus/highlight your player
territory.

While the highlighting is very helpful to identify your own borders,
especially if you share borders with a player with the same colors, I
find it very distracting, and makes the game feel laggy.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

mrh0


![image](https://github.com/user-attachments/assets/aa427233-425d-487e-bfe5-42b390561ab7)

![image](https://github.com/user-attachments/assets/f9a065a3-0fcf-481f-888d-b5781e3717c1)

src/client/graphics/layers/OptionsMenu.ts

@@ -106,6 +106,11 @@ export class OptionsMenu extends LitElement implements Layer {
     this.eventBus.emit(new RefreshGraphicsEvent());
   }
 
+  private onToggleFocusLockedButtonClick() {
+    this.userSettings.toggleFocusLocked();
+    this.requestUpdate();
+  }
+
   private onToggleLeftClickOpensMenu() {
     this.userSettings.toggleLeftClickOpenMenu();
   }
@@ -200,6 +205,15 @@ export class OptionsMenu extends LitElement implements Layer {
                 ? "Opens menu"
                 : "Attack"),
           })}
+          ${button({
+            onClick: this.onToggleFocusLockedButtonClick,
+            title: "Lock Focus",
+            children:
+              "🗺: " +
+              (this.userSettings.focusLocked()
+                ? "Focus locked"
+                : "Hover focus"),
+          })}
         </div>
       </div>
     `;

src/core/game/GameView.ts

@@ -32,6 +32,9 @@ import {
 } from "./GameUpdates";
 import { TerraNulliusImpl } from "./TerraNulliusImpl";
 import { UnitGrid } from "./UnitGrid";
+import { UserSettings } from "./UserSettings";
+
+const userSettings: UserSettings = new UserSettings();
 
 export class UnitView {
   public _wasUpdated = true;
@@ -546,6 +549,7 @@ export class GameView implements GameMap {
   }
 
   focusedPlayer(): PlayerView | null {
+    if (userSettings.focusLocked()) return this.myPlayer();
     return this._focusedPlayer;
   }
   setFocusedPlayer(player: PlayerView | null): void {

src/core/game/UserSettings.ts

@@ -24,10 +24,18 @@ export class UserSettings {
     return this.get("settings.leftClickOpensMenu", false);
   }
 
+  focusLocked() {
+    return this.get("settings.focusLocked", false);
+  }
+
   toggleLeftClickOpenMenu() {
     this.set("settings.leftClickOpensMenu", !this.leftClickOpensMenu());
   }
 
+  toggleFocusLocked() {
+    this.set("settings.focusLocked", !this.focusLocked());
+  }
+
   toggleEmojis() {
     this.set("settings.emojis", !this.emojis());
   }