Center map on start (#1013)

## Description:
- Adds logic to hard-set the transform handler directly to a new
position, without a movement animation
- Implements #1004

![image](https://github.com/user-attachments/assets/e7298f33-fd8f-4828-94f7-2422c8e5cdb0)

![image](https://github.com/user-attachments/assets/6177c164-da68-47c3-9fc5-1c445027b881)

![image](https://github.com/user-attachments/assets/c0580034-0c7d-48b5-96f8-0d84fcb0f738)


- removed a second initialization of the TransformHandler to prevent
transformation desyncs between layers. Incidentally this probably fixes
#62

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [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:

demonessica

---------

Co-authored-by: tnhnblgl <51187395+tnhnblgl@users.noreply.github.com>

src/client/graphics/GameRenderer.ts

@@ -265,11 +265,8 @@ export class GameRenderer {
     window.addEventListener("resize", () => this.resizeCanvas());
     this.resizeCanvas();
 
-    this.transformHandler = new TransformHandler(
-      this.game,
-      this.eventBus,
-      this.canvas,
-    );
+    //show whole map on startup
+    this.transformHandler.centerAll(0.9);
 
     requestAnimationFrame(() => this.renderGame());
   }

src/client/graphics/TransformHandler.ts

@@ -257,4 +257,31 @@ export class TransformHandler {
     }
     this.target = null;
   }
+
+  override(x: number = 0, y: number = 0, s: number = 1) {
+    //hardset view position
+    this.clearTarget();
+    this.offsetX = x;
+    this.offsetY = y;
+    this.scale = s;
+    this.changed = true;
+  }
+
+  centerAll(fit: number = 1) {
+    //position entire map centered on the screen
+
+    const vpWidth = this.boundingRect().width;
+    const vpHeight = this.boundingRect().height;
+    const mapWidth = this.game.width();
+    const mapHeight = this.game.height();
+
+    const scHor = (vpWidth / mapWidth) * fit;
+    const scVer = (vpHeight / mapHeight) * fit;
+    const tScale = Math.min(scHor, scVer);
+
+    const oHor = (mapWidth - vpWidth) / 2 / tScale;
+    const oVer = (mapHeight - vpHeight) / 2 / tScale;
+
+    this.override(oHor, oVer, tScale);
+  }
 }