add puzzle center/fit

build/public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   
   <title>🧩 jigsaw.hyottoko.club</title>
-<script type="module" crossorigin src="/assets/index.c8fb176c.js"></script>
+<script type="module" crossorigin src="/assets/index.855f4dd3.js"></script>
   <link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
   <link rel="stylesheet" href="/assets/index.22dc307c.css">
 </head>

build/server/main.js

@@ -362,6 +362,7 @@ const INPUT_EV_REPLAY_TOGGLE_PAUSE = 12;
 const INPUT_EV_REPLAY_SPEED_UP = 13;
 const INPUT_EV_REPLAY_SPEED_DOWN = 14;
 const INPUT_EV_TOGGLE_PLAYER_NAMES = 15;
+const INPUT_EV_CENTER_FIT_PUZZLE = 16;
 const CHANGE_DATA = 1;
 const CHANGE_TILE = 2;
 const CHANGE_PLAYER = 3;
@@ -389,6 +390,7 @@ var Protocol = {
     INPUT_EV_REPLAY_SPEED_UP,
     INPUT_EV_REPLAY_SPEED_DOWN,
     INPUT_EV_TOGGLE_PLAYER_NAMES,
+    INPUT_EV_CENTER_FIT_PUZZLE,
     CHANGE_DATA,
     CHANGE_TILE,
     CHANGE_PLAYER,

src/common/Protocol.ts

@@ -65,6 +65,7 @@ const INPUT_EV_REPLAY_SPEED_UP = 13
 const INPUT_EV_REPLAY_SPEED_DOWN = 14
 
 const INPUT_EV_TOGGLE_PLAYER_NAMES = 15
+const INPUT_EV_CENTER_FIT_PUZZLE = 16
 
 const CHANGE_DATA = 1
 const CHANGE_TILE = 2
@@ -101,6 +102,7 @@ export default {
   INPUT_EV_REPLAY_SPEED_DOWN,
 
   INPUT_EV_TOGGLE_PLAYER_NAMES,
+  INPUT_EV_CENTER_FIT_PUZZLE,
 
   CHANGE_DATA,
   CHANGE_TILE,

src/frontend/Camera.ts

@@ -11,6 +11,12 @@ export default function Camera () {
   let y = 0
   let curZoom = 1
 
+  const reset = () => {
+    x = 0
+    y = 0
+    curZoom = 1
+  }
+
   const move = (byX: number, byY: number) => {
     x += byX / curZoom
     y += byY / curZoom
@@ -130,9 +136,11 @@ export default function Camera () {
 
   return {
     getCurrentZoom: () => curZoom,
+    reset,
     move,
     canZoom,
     zoom,
+    setZoom,
     worldToViewport,
     worldToViewportRaw,
     worldDimToViewport, // not used outside

src/frontend/components/HelpOverlay.vue

@@ -10,6 +10,8 @@
       <tr><td>🔍+ Zoom in:</td><td><div><kbd>E</kbd>/🖱️-Wheel</div></td></tr>
       <tr><td>🔍- Zoom out:</td><td><div><kbd>Q</kbd>/🖱️-Wheel</div></td></tr>
       <tr><td>🖼️ Toggle preview:</td><td><div><kbd>Space</kbd></div></td></tr>
+      <tr><td>🎯 Center puzzle in screen:</td><td><div><kbd>C</kbd></div></td></tr>
+
       <tr><td>🧩✔️ Toggle fixed pieces:</td><td><div><kbd>F</kbd></div></td></tr>
       <tr><td>🧩❓ Toggle loose pieces:</td><td><div><kbd>G</kbd></div></td></tr>
 

src/frontend/game.ts

@@ -211,6 +211,9 @@ function EventAdapter (
     if (ev.code === 'KeyN') {
       addEvent([Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES])
     }
+    if (ev.code === 'KeyC') {
+      addEvent([Protocol.INPUT_EV_CENTER_FIT_PUZZLE])
+    }
   })
 
   const addEvent = (event: GameEvent) => {
@@ -416,11 +419,33 @@ export async function main(
   // initialize some view data
   // this global data will change according to input events
   const viewport = Camera()
-  // center viewport
+
-  viewport.move(
+  const centerPuzzle = () => {
-    -(TABLE_WIDTH - canvas.width) /2,
+    // center on the puzzle
-    -(TABLE_HEIGHT - canvas.height) /2
+    viewport.reset()
-  )
+    viewport.move(
+      -(TABLE_WIDTH - canvas.width) /2,
+      -(TABLE_HEIGHT - canvas.height) /2
+    )
+
+    // zoom viewport to fit whole puzzle in
+    const x = viewport.worldDimToViewport(BOARD_DIM)
+    const border = 20
+    const targetW = canvas.width - (border * 2)
+    const targetH = canvas.height - (border * 2)
+    if (
+      (x.w > targetW || x.h > targetH)
+      || (x.w < targetW && x.h < targetH)
+    ) {
+      const zoom = Math.min(targetW / x.w, targetH / x.h)
+      viewport.setZoom(zoom, {
+        x: canvas.width / 2,
+        y: canvas.height / 2,
+      })
+    }
+  }
+
+  centerPuzzle()
 
   const evts = EventAdapter(canvas, window, viewport, MODE)
 
@@ -717,6 +742,8 @@ export async function main(
           HUD.toggleSoundsEnabled()
         } else if (type === Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES) {
           HUD.togglePlayerNames()
+        } else if (type === Protocol.INPUT_EV_CENTER_FIT_PUZZLE) {
+          centerPuzzle()
         }
 
         // LOCAL + SERVER CHANGES
@@ -787,6 +814,8 @@ export async function main(
           HUD.toggleSoundsEnabled()
         } else if (type === Protocol.INPUT_EV_TOGGLE_PLAYER_NAMES) {
           HUD.togglePlayerNames()
+        } else if (type === Protocol.INPUT_EV_CENTER_FIT_PUZZLE) {
+          centerPuzzle()
         }
       }
     }