para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

add move by arrows, add space for preview toggle

Browse source
This commit is contained in:
Zutatensuppe 2021-04-19 23:59:14 +02:00
parent be6fc7a3a3
commit f5a93f1f57
3 changed files with 101 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
common/GameCommon.js
View file

@ -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

12
common/Protocol.js
View file

@ -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,
}

94
game/game.js
View file

@ -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] }