From 75144a06721dd4b1236bebb1c6181b62bc0b2eb9 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 9 Dec 2024 19:44:59 -0800 Subject: [PATCH] clicking on leaderboard brings you to player --- src/client/graphics/TransformHandler.ts | 61 ++++++++++++++++++++++--- src/core/Util.ts | 8 ++++ 2 files changed, 63 insertions(+), 6 deletions(-) diff --git a/src/client/graphics/TransformHandler.ts b/src/client/graphics/TransformHandler.ts index 0d3caa833..5b59be6d1 100644 --- a/src/client/graphics/TransformHandler.ts +++ b/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 + } } \ No newline at end of file diff --git a/src/core/Util.ts b/src/core/Util.ts index 39fcdadf7..813f0b143 100644 --- a/src/core/Util.ts +++ b/src/core/Util.ts @@ -146,6 +146,14 @@ export function calculateBoundingBox(borderTiles: ReadonlySet): { min: Cel return { min: new Cell(minX, minY), max: new Cell(maxX, maxY) } } +export function calculateBoundingBoxCenter(borderTiles: ReadonlySet): 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 &&