diff --git a/src/common/GameCommon.ts b/src/common/GameCommon.ts index 6e7f701..610307d 100644 --- a/src/common/GameCommon.ts +++ b/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] diff --git a/src/frontend/Camera.ts b/src/frontend/Camera.ts index fad305a..a336205 100644 --- a/src/frontend/Camera.ts +++ b/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, } } diff --git a/src/frontend/game.ts b/src/frontend/game.ts index c1e4317..c191e33 100644 --- a/src/frontend/game.ts +++ b/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 amount = SHIFT ? 20 : 10 - const x = (LEFT ? amount : 0) - (RIGHT ? amount : 0) - const y = (UP ? amount : 0) - (DOWN ? amount : 0) - if (x !== 0 || y !== 0) { - addEvent([Protocol.INPUT_EV_MOVE, x, y]) + const createKeyEvents = (): void => { + const w = (LEFT ? 1 : 0) - (RIGHT ? 1 : 0) + const h = (UP ? 1 : 0) - (DOWN ? 1 : 0) + if (w !== 0 || h !== 0) { + const amount = (SHIFT ? 24 : 12) * Math.sqrt(viewport.getCurrentZoom()) + 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 diffY = evt[2] + const w = evt[1] + 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