Merge pull request #2 from openfrontio/center-camera

Added hotkey 'C' to center camera on player

src/client/HelpModal.ts

@@ -211,7 +211,7 @@ export class HelpModal extends LitElement {
           <span class="close" @click=${this.close}>&times;</span>
 
           <div class="flex flex-col items-center">
-            <div class="text-center text-2xl font-bold mb-4">Keybinds</div>
+            <div class="text-center text-2xl font-bold mb-4">Hotkeys</div>
             <table>
               <thead>
                 <tr>
@@ -224,6 +224,10 @@ export class HelpModal extends LitElement {
                   <td>Space</td>
                   <td>Alternate view</td>
                 </tr>
+                <tr>
+                  <td>C</td>
+                  <td>Center camera on player</td>
+                </tr>
                 <tr>
                   <td>Q / E</td>
                   <td>Zoom out/in</td>

src/client/InputHandler.ts

@@ -63,6 +63,10 @@ export class AttackRatioEvent implements GameEvent {
   constructor(public readonly attackRatio: number) {}
 }
 
+export class CenterCameraEvent implements GameEvent {
+  constructor() {}
+}
+
 export class InputHandler {
   private lastPointerX: number = 0;
   private lastPointerY: number = 0;
@@ -173,6 +177,7 @@ export class InputHandler {
           "KeyQ",
           "Digit1",
           "Digit2",
+          "KeyC",
         ].includes(e.code)
       ) {
         this.activeKeys.add(e.code);
@@ -200,6 +205,11 @@ export class InputHandler {
         this.eventBus.emit(new AttackRatioEvent(10));
       }
 
+      if (e.code === "KeyC") {
+        e.preventDefault();
+        this.eventBus.emit(new CenterCameraEvent());
+      }
+
       // Remove all movement keys from activeKeys
       if (
         [
@@ -217,6 +227,7 @@ export class InputHandler {
           "KeyQ",
           "Digit1",
           "Digit2",
+          "KeyC",
         ].includes(e.code)
       ) {
         this.activeKeys.delete(e.code);

src/client/graphics/TransformHandler.ts

@@ -5,7 +5,7 @@ import {
   calculateBoundingBox,
   calculateBoundingBoxCenter,
 } from "../../core/Util";
-import { ZoomEvent, DragEvent } from "../InputHandler";
+import { ZoomEvent, DragEvent, CenterCameraEvent } from "../InputHandler";
 import { GoToPlayerEvent } from "./layers/Leaderboard";
 import { placeName } from "./NameBoxCalculator";
 import { GameView } from "../../core/game/GameView";
@@ -27,6 +27,7 @@ export class TransformHandler {
     this.eventBus.on(ZoomEvent, (e) => this.onZoom(e));
     this.eventBus.on(DragEvent, (e) => this.onMove(e));
     this.eventBus.on(GoToPlayerEvent, (e) => this.onGoToPlayer(e));
+    this.eventBus.on(CenterCameraEvent, () => this.centerCamera());
   }
 
   boundingRect(): DOMRect {
@@ -148,6 +149,14 @@ export class TransformHandler {
     this.intervalID = setInterval(() => this.goTo(), 1);
   }
 
+  centerCamera() {
+    this.clearTarget();
+    const player = this.game.myPlayer();
+    if (!player || !player.nameLocation()) return;
+    this.target = new Cell(player.nameLocation().x, player.nameLocation().y);
+    this.intervalID = setInterval(() => this.goTo(), 1);
+  }
+
   private goTo() {
     const { screenX, screenY } = this.screenCenter();
     const screenMapCenter = new Cell(screenX, screenY);