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);
       }