From f5a93f1f57bf7fdbaa4a6f3d0d12b6e56a5c7c90 Mon Sep 17 00:00:00 2001 From: Zutatensuppe Date: Mon, 19 Apr 2021 23:59:14 +0200 Subject: [PATCH] add move by arrows, add space for preview toggle --- common/GameCommon.js | 6 +-- common/Protocol.js | 12 ++++++ game/game.js | 94 ++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 101 insertions(+), 11 deletions(-) diff --git a/common/GameCommon.js b/common/GameCommon.js index 0399d3e..a21dd10 100644 --- a/common/GameCommon.js +++ b/common/GameCommon.js @@ -438,11 +438,11 @@ function handleInput(gameId, playerId, input, ts) { let changes = [] const _dataChange = () => { - changes.push(['data', puzzle.data]) + changes.push([Protocol.CHANGE_DATA, puzzle.data]) } const _tileChange = (tileIdx) => { - changes.push(['tile', getTile(gameId, tileIdx)]) + changes.push([Protocol.CHANGE_TILE, getTile(gameId, tileIdx)]) } const _tileChanges = (tileIdxs) => { @@ -452,7 +452,7 @@ function handleInput(gameId, playerId, input, ts) { } const _playerChange = () => { - changes.push(['player', Util.encodePlayer(getPlayer(gameId, playerId))]) + changes.push([Protocol.CHANGE_PLAYER, Util.encodePlayer(getPlayer(gameId, playerId))]) } // put both tiles (and their grouped tiles) in the same group diff --git a/common/Protocol.js b/common/Protocol.js index 297b7fa..675058e 100644 --- a/common/Protocol.js +++ b/common/Protocol.js @@ -58,6 +58,11 @@ const INPUT_EV_ZOOM_OUT = 5 const INPUT_EV_BG_COLOR = 6 const INPUT_EV_PLAYER_COLOR = 7 const INPUT_EV_PLAYER_NAME = 8 +const INPUT_EV_MOVE = 9 + +const CHANGE_DATA = 1 +const CHANGE_TILE = 2 +const CHANGE_PLAYER = 3 export default { EV_SERVER_EVENT, @@ -72,12 +77,19 @@ export default { LOG_UPDATE_PLAYER, LOG_HANDLE_INPUT, + INPUT_EV_MOVE, // move by x/y + INPUT_EV_MOUSE_DOWN, INPUT_EV_MOUSE_UP, INPUT_EV_MOUSE_MOVE, + INPUT_EV_ZOOM_IN, INPUT_EV_ZOOM_OUT, INPUT_EV_BG_COLOR, INPUT_EV_PLAYER_COLOR, INPUT_EV_PLAYER_NAME, + + CHANGE_DATA, + CHANGE_TILE, + CHANGE_PLAYER, } diff --git a/game/game.js b/game/game.js index 68d1183..07a0bb5 100644 --- a/game/game.js +++ b/game/game.js @@ -130,8 +130,11 @@ function addMenuToDom(gameId) { const previewOverlay = ELEMENTS.DIV.cloneNode(true) previewOverlay.classList.add('overlay', 'closed') previewOverlay.appendChild(previewEl) - previewOverlay.addEventListener('click', () => { + const togglePreview = () => { previewOverlay.classList.toggle('closed') + } + previewOverlay.addEventListener('click', () => { + togglePreview() }) const settingsOpenerEl = ELEMENTS.DIV.cloneNode(true) @@ -250,6 +253,7 @@ function addMenuToDom(gameId) { nameChangeEl, updateScoreBoard, updateTimer, + togglePreview, replayControl, } } @@ -265,13 +269,41 @@ function initme() { } export default class EventAdapter { - constructor(canvas, viewport) { + constructor(canvas, window, viewport) { this.events = [] this._viewport = viewport + + this.LEFT = false + this.RIGHT = false + this.UP = false + this.DOWN = false canvas.addEventListener('mousedown', this._mouseDown.bind(this)) canvas.addEventListener('mouseup', this._mouseUp.bind(this)) canvas.addEventListener('mousemove', this._mouseMove.bind(this)) canvas.addEventListener('wheel', this._wheel.bind(this)) + + window.addEventListener('keydown', (ev) => { + if (ev.key === 'ArrowUp') { + this.UP = true + } else if (ev.key === 'ArrowDown') { + this.DOWN = true + } else if (ev.key === 'ArrowLeft') { + this.LEFT = true + } else if (ev.key === 'ArrowRight') { + this.RIGHT = true + } + }) + window.addEventListener('keyup', (ev) => { + if (ev.key === 'ArrowUp') { + this.UP = false + } else if (ev.key === 'ArrowDown') { + this.DOWN = false + } else if (ev.key === 'ArrowLeft') { + this.LEFT = false + } else if (ev.key === 'ArrowRight') { + this.RIGHT = false + } + }) } addEvent(event) { @@ -287,6 +319,27 @@ export default class EventAdapter { return all } + _keydowns() { + let amount = 10 + let x = 0 + let y = 0 + if (this.UP) { + y += amount + } + if (this.DOWN) { + y -= amount + } + if (this.LEFT) { + x += amount + } + if (this.RIGHT) { + x -= amount + } + if (x !== 0 || y !== 0) { + this.addEvent([Protocol.INPUT_EV_MOVE, x, y]) + } + } + _mouseDown(e) { if (e.button === 0) { const pos = this._viewport.viewportToWorld({ @@ -392,7 +445,15 @@ async function main() { const bitmaps = await PuzzleGraphics.loadPuzzleBitmaps(Game.getPuzzle(gameId)) - const {bgColorPickerEl, playerColorPickerEl, nameChangeEl, updateScoreBoard, updateTimer, replayControl} = addMenuToDom(gameId) + const { + bgColorPickerEl, + playerColorPickerEl, + nameChangeEl, + updateScoreBoard, + updateTimer, + togglePreview, + replayControl, + } = addMenuToDom(gameId) updateTimer() updateScoreBoard(TIME()) @@ -431,7 +492,14 @@ async function main() { || 'anon') } - const evts = new EventAdapter(canvas, viewport) + window.addEventListener('keypress', (ev) => { + if (ev.key === ' ') { + togglePreview() + } + }) + + const evts = new EventAdapter(canvas, window, viewport) + if (MODE === MODE_PLAY) { bgColorPickerEl.value = playerBgColor() evts.addEvent([Protocol.INPUT_EV_BG_COLOR, bgColorPickerEl.value]) @@ -485,19 +553,19 @@ async function main() { const evChanges = msg[3] for(let [changeType, changeData] of evChanges) { switch (changeType) { - case 'player': { + case Protocol.CHANGE_PLAYER: { const p = Util.decodePlayer(changeData) if (p.id !== CLIENT_ID) { Game.setPlayer(gameId, p.id, p) RERENDER = true } } break; - case 'tile': { + case Protocol.CHANGE_TILE: { const t = Util.decodeTile(changeData) Game.setTile(gameId, t.idx, t) RERENDER = true } break; - case 'data': { + case Protocol.CHANGE_DATA: { Game.setPuzzleData(gameId, changeData) RERENDER = true } break; @@ -557,12 +625,22 @@ async function main() { let _last_mouse_down = null const onUpdate = () => { + // handle key downs once per onUpdate + // this will create Protocol.INPUT_EV_MOVE events if something + // relevant is pressed + evts._keydowns() + for (let evt of evts.consumeAll()) { if (MODE === MODE_PLAY) { // LOCAL ONLY CHANGES // ------------------------------------------------------------- const type = evt[0] - if (type === Protocol.INPUT_EV_MOUSE_MOVE) { + if (type === Protocol.INPUT_EV_MOVE) { + const diffX = evt[1] + const diffY = evt[2] + RERENDER = true + viewport.move(diffX, diffY) + } else if (type === Protocol.INPUT_EV_MOUSE_MOVE) { if (_last_mouse_down && !Game.getFirstOwnedTile(gameId, CLIENT_ID)) { // move the cam const pos = { x: evt[1], y: evt[2] }