clicking on leaderboard brings you to player

src/client/graphics/TransformHandler.ts

@@ -1,13 +1,19 @@
+import { colord } from "colord";
 import { EventBus } from "../../core/EventBus"
-import { Cell, Game } from "../../core/game/Game";
+import { Cell, Game, Player } from "../../core/game/Game";
+import { calculateBoundingBox, calculateBoundingBoxCenter, manhattanDist } from "../../core/Util";
 import { ZoomEvent, DragEvent } from "../InputHandler";
 import { GoToPlayerEvent } from "./layers/Leaderboard";
+import { placeName } from "./NameBoxCalculator";
 
 export class TransformHandler {
     public scale: number = 1.8
     private offsetX: number = -350
     private offsetY: number = -200
 
+    private target: Cell
+    private intervalID = null
+
     constructor(private game: Game, private eventBus: EventBus, private canvas: HTMLCanvasElement) {
         this.eventBus.on(ZoomEvent, (e) => this.onZoom(e))
         this.eventBus.on(DragEvent, (e) => this.onMove(e))
@@ -71,19 +77,53 @@ export class TransformHandler {
         return [new Cell(Math.floor(gameLeftX), Math.floor(gameTopY)), new Cell(Math.floor(gameRightX), Math.floor(gameBottomY))]
     }
 
-    screenCenter(): Cell {
+    screenCenter(): { screenX: number, screenY: number } {
         const [upperLeft, bottomRight] = this.screenBoundingRect()
-        return new Cell(
-             Math.floor((bottomRight.x - upperLeft.x) / 2),
-            Math.floor((bottomRight.y - upperLeft.y) / 2)
-        )
+        return {
+            screenX: upperLeft.x + Math.floor((bottomRight.x - upperLeft.x) / 2),
+            screenY: upperLeft.y + Math.floor((bottomRight.y - upperLeft.y) / 2)
+        }
     }
 
     onGoToPlayer(event: GoToPlayerEvent) {
+        let unused = null;
+        this.clearTarget();
+        [this.target, unused] = placeName(this.game, event.player);
+        this.intervalID = setInterval(() => this.goTo(), 1)
+    }
 
+    private goTo() {
+        const { screenX, screenY } = this.screenCenter()
+        const screenMapCenter = new Cell(screenX, screenY)
+
+        if (manhattanDist(screenMapCenter, this.target) < 2) {
+            this.clearTarget()
+            return
+        }
+
+
+        const dX = Math.abs(screenMapCenter.x - this.target.x)
+        if (dX > 2) {
+            const offsetDx = Math.max(1, Math.floor(dX / 25))
+            if (screenMapCenter.x > this.target.x) {
+                this.offsetX -= offsetDx
+            } else {
+                this.offsetX += offsetDx
+            }
+        }
+        const dY = Math.abs(screenMapCenter.y - this.target.y)
+        if (dY > 2) {
+            const offsetDy = Math.max(1, Math.floor(dY / 25))
+            if (screenMapCenter.y > this.target.y) {
+                this.offsetY -= offsetDy
+            } else {
+                this.offsetY += offsetDy
+            }
+        }
     }
 
     onZoom(event: ZoomEvent) {
+        this.clearTarget()
         const oldScale = this.scale;
         const zoomFactor = 1 + event.delta / 600;
         this.scale /= zoomFactor;
@@ -105,7 +145,16 @@ export class TransformHandler {
     }
 
     onMove(event: DragEvent) {
+        this.clearTarget()
         this.offsetX -= event.deltaX / this.scale;
         this.offsetY -= event.deltaY / this.scale;
     }
+
+    private clearTarget() {
+        if (this.intervalID != null) {
+            clearInterval(this.intervalID)
+            this.intervalID = null
+        }
+        this.target = null
+    }
 }

src/core/Util.ts

@@ -146,6 +146,14 @@ export function calculateBoundingBox(borderTiles: ReadonlySet<Tile>): { min: Cel
     return { min: new Cell(minX, minY), max: new Cell(maxX, maxY) }
 }
 
+export function calculateBoundingBoxCenter(borderTiles: ReadonlySet<Tile>): Cell {
+    const { min, max } = calculateBoundingBox(borderTiles)
+    return new Cell(
+        min.x + Math.floor((max.x - min.x) / 2),
+        min.y + Math.floor((max.y - min.y) / 2)
+    )
+}
+
 export function inscribed(outer: { min: Cell; max: Cell }, inner: { min: Cell; max: Cell }): boolean {
     return (
         outer.min.x <= inner.min.x &&