zoom to mouse even when using q/e

src/common/GameCommon.ts

@@ -625,6 +625,16 @@ function handleInput(
     const name = `${input[1]}`.substr(0, 16)
     changePlayer(gameId, playerId, { name, ts })
     _playerChange()
+  } else if (type === Protocol.INPUT_EV_MOVE) {
+    const w = input[1]
+    const h = input[2]
+    const player = getPlayer(gameId, playerId)
+    if (player) {
+      const x = player.x - w
+      const y = player.y - h
+      changePlayer(gameId, playerId, { ts, x, y })
+      _playerChange()
+    }
   } else if (type === Protocol.INPUT_EV_MOUSE_DOWN) {
     const x = input[1]
     const y = input[2]

src/frontend/Camera.ts

@@ -116,7 +116,20 @@ export default function Camera () {
     }
   }
 
+  const viewportDimToWorld = (viewportDim: Dim): Dim => {
+    const { w, h } = viewportDimToWorldRaw(viewportDim)
+    return { w: Math.round(w), h: Math.round(h) }
+  }
+
+  const viewportDimToWorldRaw = (viewportDim: Dim): Dim => {
+    return {
+      w: viewportDim.w / curZoom,
+      h: viewportDim.h / curZoom,
+    }
+  }
+
   return {
+    getCurrentZoom: () => curZoom,
     move,
     canZoom,
     zoom,
@@ -126,5 +139,7 @@ export default function Camera () {
     worldDimToViewportRaw,
     viewportToWorld,
     viewportToWorldRaw, // not used outside
+    viewportDimToWorld,
+    viewportDimToWorldRaw,
   }
 }

src/frontend/game.ts

@@ -104,7 +104,7 @@ function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
   let ZOOM_OUT = false
   let SHIFT = false
 
-  const toWorldPoint = (x: number, y: number) => {
+  const toWorldPoint = (x: number, y: number): [number, number] => {
     const pos = viewport.viewportToWorld({x, y})
     return [pos.x, pos.y]
   }
@@ -133,28 +133,33 @@ function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
     }
   }
 
+  let lastMouse: [number, number]|null = null
   canvas.addEventListener('mousedown', (ev) => {
+    lastMouse = mousePos(ev)
     if (ev.button === 0) {
-      addEvent([Protocol.INPUT_EV_MOUSE_DOWN, ...mousePos(ev)])
+      addEvent([Protocol.INPUT_EV_MOUSE_DOWN, ...lastMouse])
     }
   })
 
   canvas.addEventListener('mouseup', (ev) => {
+    lastMouse = mousePos(ev)
     if (ev.button === 0) {
-      addEvent([Protocol.INPUT_EV_MOUSE_UP, ...mousePos(ev)])
+      addEvent([Protocol.INPUT_EV_MOUSE_UP, ...lastMouse])
     }
   })
 
   canvas.addEventListener('mousemove', (ev) => {
-    addEvent([Protocol.INPUT_EV_MOUSE_MOVE, ...mousePos(ev)])
+    lastMouse = mousePos(ev)
+    addEvent([Protocol.INPUT_EV_MOUSE_MOVE, ...lastMouse])
   })
 
   canvas.addEventListener('wheel', (ev) => {
+    lastMouse = mousePos(ev)
     if (viewport.canZoom(ev.deltaY < 0 ? 'in' : 'out')) {
       const evt = ev.deltaY < 0
         ? Protocol.INPUT_EV_ZOOM_IN
         : Protocol.INPUT_EV_ZOOM_OUT
-      addEvent([evt, ...mousePos(ev)])
+      addEvent([evt, ...lastMouse])
     }
   })
 
@@ -194,23 +199,30 @@ function EventAdapter (canvas: HTMLCanvasElement, window: any, viewport: any) {
     return all
   }
 
-  const createKeyEvents = () => {
+  const createKeyEvents = (): void => {
-    const amount = SHIFT ? 20 : 10
+    const w = (LEFT ? 1 : 0) - (RIGHT ? 1 : 0)
-    const x = (LEFT ? amount : 0) - (RIGHT ? amount : 0)
+    const h = (UP ? 1 : 0) - (DOWN ? 1 : 0)
-    const y = (UP ? amount : 0) - (DOWN ? amount : 0)
+    if (w !== 0 || h !== 0) {
-    if (x !== 0 || y !== 0) {
+      const amount = (SHIFT ? 24 : 12) * Math.sqrt(viewport.getCurrentZoom())
-      addEvent([Protocol.INPUT_EV_MOVE, x, y])
+      const pos = viewport.viewportDimToWorld({w: w * amount, h: h * amount})
+      addEvent([Protocol.INPUT_EV_MOVE, pos.w, pos.h])
+      if (lastMouse) {
+        lastMouse[0] -= pos.w
+        lastMouse[1] -= pos.h
+      }
     }
 
     if (ZOOM_IN && ZOOM_OUT) {
       // cancel each other out
     } else if (ZOOM_IN) {
       if (viewport.canZoom('in')) {
-        addEvent([Protocol.INPUT_EV_ZOOM_IN, ...canvasCenter()])
+        const target = lastMouse || canvasCenter()
+        addEvent([Protocol.INPUT_EV_ZOOM_IN, ...target])
       }
     } else if (ZOOM_OUT) {
       if (viewport.canZoom('out')) {
-        addEvent([Protocol.INPUT_EV_ZOOM_OUT, ...canvasCenter()])
+        const target = lastMouse || canvasCenter()
+        addEvent([Protocol.INPUT_EV_ZOOM_OUT, ...target])
       }
     }
   }
@@ -596,10 +608,11 @@ export async function main(
         // -------------------------------------------------------------
         const type = evt[0]
         if (type === Protocol.INPUT_EV_MOVE) {
-          const diffX = evt[1]
+          const w = evt[1]
-          const diffY = evt[2]
+          const h = evt[2]
+          const dim = viewport.worldDimToViewport({w, h})
           RERENDER = true
-          viewport.move(diffX, diffY)
+          viewport.move(dim.w, dim.h)
         } else if (type === Protocol.INPUT_EV_MOUSE_MOVE) {
           if (_last_mouse_down && !Game.getFirstOwnedPiece(gameId, clientId)) {
             // move the cam