Border highlight rework (#385)

## Description:

## 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:

Readix

src/client/ClientGameRunner.ts

@@ -350,18 +350,7 @@ export class ClientGameRunner {
 
   private onMouseMove(event: MouseMoveEvent) {
     this.lastMousePosition = { x: event.x, y: event.y };
-    this.clearHoverTimer();
-
-    this.mouseHoverTimer = window.setTimeout(() => {
-      this.checkTileUnderCursor();
-    }, this.HOVER_DELAY);
-  }
-
-  private clearHoverTimer() {
-    if (this.mouseHoverTimer !== null) {
-      clearTimeout(this.mouseHoverTimer);
-      this.mouseHoverTimer = null;
-    }
+    this.checkTileUnderCursor();
   }
 
   private checkTileUnderCursor() {
@@ -382,12 +371,19 @@ export class ClientGameRunner {
       const owner = this.gameView.owner(tile);
       if (owner.isPlayer()) {
         this.gameView.setFocusedPlayer(owner as PlayerView);
+      } else {
+        this.gameView.setFocusedPlayer(null);
       }
     } else {
       const units = this.gameView
-        .units(UnitType.Warship, UnitType.TradeShip, UnitType.TransportShip)
-        .filter((u) => this.gameView.euclideanDist(tile, u.tile()) < 50)
-        .sort(distSortUnitWorld(tile, this.gameView));
+        .nearbyUnits(tile, 50, [
+          UnitType.Warship,
+          UnitType.TradeShip,
+          UnitType.TransportShip,
+        ])
+        .sort((a, b) => a.distSquared - b.distSquared)
+        .map((u) => u.unit);
+
       if (units.length > 0) {
         this.gameView.setFocusedPlayer(units[0].owner() as PlayerView);
       }

src/client/graphics/layers/TerritoryLayer.ts

@@ -63,6 +63,14 @@ export class TerritoryLayer implements Layer {
     return true;
   }
 
+  paintPlayerBorder(player: PlayerView) {
+    player.borderTiles().then((playerBorderTiles) => {
+      playerBorderTiles.borderTiles.forEach((tile: TileRef) => {
+        this.paintTerritory(tile); // Immediately paint the tile instead of enqueueing
+      });
+    });
+  }
+
   tick() {
     this.game.recentlyUpdatedTiles().forEach((t) => this.enqueueTile(t));
     this.game.updatesSinceLastTick()[GameUpdateType.Unit].forEach((u) => {
@@ -88,10 +96,10 @@ export class TerritoryLayer implements Layer {
     const focusedPlayer = this.game.focusedPlayer();
     if (focusedPlayer !== this.lastFocusedPlayer) {
       if (this.lastFocusedPlayer) {
-        this.enqueuePlayerBorder(this.lastFocusedPlayer);
+        this.paintPlayerBorder(this.lastFocusedPlayer);
       }
       if (focusedPlayer) {
-        this.enqueuePlayerBorder(focusedPlayer);
+        this.paintPlayerBorder(focusedPlayer);
       }
       this.lastFocusedPlayer = focusedPlayer;
     }

src/core/configuration/PastelTheme.ts

@@ -86,10 +86,10 @@ export const pastelTheme = new (class implements Theme {
   }
 
   focusedBorderColor(): Colord {
-    return colord({ r: 255, g: 255, b: 255 });
+    return colord({ r: 230, g: 230, b: 230 });
   }
   focusedDefendedBorderColor(): Colord {
-    return colord({ r: 215, g: 215, b: 215 });
+    return colord({ r: 200, g: 200, b: 200 });
   }
 
   terrainColor(gm: GameMap, tile: TileRef): Colord {