extract event adapter to own file
This commit is contained in:
Zutatensuppe
parent
518092d269
commit
bbcfd42008
7 changed files with 202 additions and 177 deletions
1
build/public/assets/index.90925b20.js
Normal file
1
build/public/assets/index.90925b20.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
|
||||
<title>🧩 jigsaw.hyottoko.club</title>
|
||||
<script type="module" crossorigin src="/assets/index.93936dee.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index.90925b20.js"></script>
|
||||
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
|
||||
<link rel="stylesheet" href="/assets/index.22dc307c.css">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -340,6 +340,8 @@ 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 INPUT_EV_TOGGLE_FIXED_PIECES = 17;
|
||||
const INPUT_EV_TOGGLE_LOOSE_PIECES = 18;
|
||||
const CHANGE_DATA = 1;
|
||||
const CHANGE_TILE = 2;
|
||||
const CHANGE_PLAYER = 3;
|
||||
|
|
@ -368,6 +370,8 @@ var Protocol = {
|
|||
INPUT_EV_REPLAY_SPEED_DOWN,
|
||||
INPUT_EV_TOGGLE_PLAYER_NAMES,
|
||||
INPUT_EV_CENTER_FIT_PUZZLE,
|
||||
INPUT_EV_TOGGLE_FIXED_PIECES,
|
||||
INPUT_EV_TOGGLE_LOOSE_PIECES,
|
||||
CHANGE_DATA,
|
||||
CHANGE_TILE,
|
||||
CHANGE_PLAYER,
|
||||
|
|
|
|||
|
|
@ -67,6 +67,9 @@ const INPUT_EV_REPLAY_SPEED_DOWN = 14
|
|||
const INPUT_EV_TOGGLE_PLAYER_NAMES = 15
|
||||
const INPUT_EV_CENTER_FIT_PUZZLE = 16
|
||||
|
||||
const INPUT_EV_TOGGLE_FIXED_PIECES = 17
|
||||
const INPUT_EV_TOGGLE_LOOSE_PIECES = 18
|
||||
|
||||
const CHANGE_DATA = 1
|
||||
const CHANGE_TILE = 2
|
||||
const CHANGE_PLAYER = 3
|
||||
|
|
@ -104,6 +107,9 @@ export default {
|
|||
INPUT_EV_TOGGLE_PLAYER_NAMES,
|
||||
INPUT_EV_CENTER_FIT_PUZZLE,
|
||||
|
||||
INPUT_EV_TOGGLE_FIXED_PIECES,
|
||||
INPUT_EV_TOGGLE_LOOSE_PIECES,
|
||||
|
||||
CHANGE_DATA,
|
||||
CHANGE_TILE,
|
||||
CHANGE_PLAYER,
|
||||
|
|
|
|||
177
src/frontend/EventAdapter.ts
Normal file
177
src/frontend/EventAdapter.ts
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import Protocol from "../common/Protocol"
|
||||
import { GameEvent } from "../common/Types"
|
||||
import { MODE_REPLAY } from "./game"
|
||||
|
||||
function EventAdapter (
|
||||
canvas: HTMLCanvasElement,
|
||||
window: any,
|
||||
viewport: any,
|
||||
MODE: string
|
||||
) {
|
||||
let events: Array<GameEvent> = []
|
||||
|
||||
let KEYS_ON = true
|
||||
|
||||
let LEFT = false
|
||||
let RIGHT = false
|
||||
let UP = false
|
||||
let DOWN = false
|
||||
let ZOOM_IN = false
|
||||
let ZOOM_OUT = false
|
||||
let SHIFT = false
|
||||
|
||||
const toWorldPoint = (x: number, y: number): [number, number] => {
|
||||
const pos = viewport.viewportToWorld({x, y})
|
||||
return [pos.x, pos.y]
|
||||
}
|
||||
|
||||
const mousePos = (ev: MouseEvent) => toWorldPoint(ev.offsetX, ev.offsetY)
|
||||
const canvasCenter = () => toWorldPoint(canvas.width / 2, canvas.height / 2)
|
||||
|
||||
const key = (state: boolean, ev: KeyboardEvent) => {
|
||||
if (!KEYS_ON) {
|
||||
return
|
||||
}
|
||||
|
||||
if (ev.code === 'ShiftLeft' || ev.code === 'ShiftRight') {
|
||||
SHIFT = state
|
||||
} else if (ev.code === 'ArrowUp' || ev.code === 'KeyW') {
|
||||
UP = state
|
||||
} else if (ev.code === 'ArrowDown' || ev.code === 'KeyS') {
|
||||
DOWN = state
|
||||
} else if (ev.code === 'ArrowLeft' || ev.code === 'KeyA') {
|
||||
LEFT = state
|
||||
} else if (ev.code === 'ArrowRight' || ev.code === 'KeyD') {
|
||||
RIGHT = state
|
||||
} else if (ev.code === 'KeyQ') {
|
||||
ZOOM_OUT = state
|
||||
} else if (ev.code === 'KeyE') {
|
||||
ZOOM_IN = state
|
||||
}
|
||||
}
|
||||
|
||||
let lastMouse: [number, number]|null = null
|
||||
canvas.addEventListener('mousedown', (ev) => {
|
||||
lastMouse = mousePos(ev)
|
||||
if (ev.button === 0) {
|
||||
addEvent([Protocol.INPUT_EV_MOUSE_DOWN, ...lastMouse])
|
||||
}
|
||||
})
|
||||
|
||||
canvas.addEventListener('mouseup', (ev) => {
|
||||
lastMouse = mousePos(ev)
|
||||
if (ev.button === 0) {
|
||||
addEvent([Protocol.INPUT_EV_MOUSE_UP, ...lastMouse])
|
||||
}
|
||||
})
|
||||
|
||||
canvas.addEventListener('mousemove', (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, ...lastMouse])
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('keydown', (ev: KeyboardEvent) => key(true, ev))
|
||||
window.addEventListener('keyup', (ev: KeyboardEvent) => key(false, ev))
|
||||
|
||||
window.addEventListener('keypress', (ev: KeyboardEvent) => {
|
||||
if (!KEYS_ON) {
|
||||
return
|
||||
}
|
||||
if (ev.code === 'Space') {
|
||||
addEvent([Protocol.INPUT_EV_TOGGLE_PREVIEW])
|
||||
}
|
||||
|
||||
if (MODE === MODE_REPLAY) {
|
||||
if (ev.code === 'KeyI') {
|
||||
addEvent([Protocol.INPUT_EV_REPLAY_SPEED_UP])
|
||||
}
|
||||
|
||||
if (ev.code === 'KeyO') {
|
||||
addEvent([Protocol.INPUT_EV_REPLAY_SPEED_DOWN])
|
||||
}
|
||||
|
||||
if (ev.code === 'KeyP') {
|
||||
addEvent([Protocol.INPUT_EV_REPLAY_TOGGLE_PAUSE])
|
||||
}
|
||||
}
|
||||
if (ev.code === 'KeyF') {
|
||||
addEvent([Protocol.INPUT_EV_TOGGLE_FIXED_PIECES])
|
||||
}
|
||||
if (ev.code === 'KeyG') {
|
||||
addEvent([Protocol.INPUT_EV_TOGGLE_LOOSE_PIECES])
|
||||
}
|
||||
if (ev.code === 'KeyM') {
|
||||
addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS])
|
||||
}
|
||||
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) => {
|
||||
events.push(event)
|
||||
}
|
||||
|
||||
const consumeAll = (): GameEvent[] => {
|
||||
if (events.length === 0) {
|
||||
return []
|
||||
}
|
||||
const all = events.slice()
|
||||
events = []
|
||||
return all
|
||||
}
|
||||
|
||||
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')) {
|
||||
const target = lastMouse || canvasCenter()
|
||||
addEvent([Protocol.INPUT_EV_ZOOM_IN, ...target])
|
||||
}
|
||||
} else if (ZOOM_OUT) {
|
||||
if (viewport.canZoom('out')) {
|
||||
const target = lastMouse || canvasCenter()
|
||||
addEvent([Protocol.INPUT_EV_ZOOM_OUT, ...target])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const setHotkeys = (state: boolean) => {
|
||||
KEYS_ON = state
|
||||
}
|
||||
|
||||
return {
|
||||
addEvent,
|
||||
consumeAll,
|
||||
createKeyEvents,
|
||||
setHotkeys,
|
||||
}
|
||||
}
|
||||
|
||||
export default EventAdapter
|
||||
|
|
@ -22,9 +22,9 @@ import {
|
|||
EncodedGame,
|
||||
ReplayData,
|
||||
Timestamp,
|
||||
GameEvent,
|
||||
ServerEvent,
|
||||
} from '../common/Types'
|
||||
import EventAdapter from './EventAdapter'
|
||||
declare global {
|
||||
interface Window {
|
||||
DEBUG?: boolean
|
||||
|
|
@ -96,180 +96,6 @@ function addCanvasToDom(TARGET_EL: HTMLElement, canvas: HTMLCanvasElement) {
|
|||
return canvas
|
||||
}
|
||||
|
||||
function EventAdapter (
|
||||
canvas: HTMLCanvasElement,
|
||||
window: any,
|
||||
viewport: any,
|
||||
MODE: string
|
||||
) {
|
||||
let events: Array<GameEvent> = []
|
||||
|
||||
let KEYS_ON = true
|
||||
|
||||
let LEFT = false
|
||||
let RIGHT = false
|
||||
let UP = false
|
||||
let DOWN = false
|
||||
let ZOOM_IN = false
|
||||
let ZOOM_OUT = false
|
||||
let SHIFT = false
|
||||
|
||||
const toWorldPoint = (x: number, y: number): [number, number] => {
|
||||
const pos = viewport.viewportToWorld({x, y})
|
||||
return [pos.x, pos.y]
|
||||
}
|
||||
|
||||
const mousePos = (ev: MouseEvent) => toWorldPoint(ev.offsetX, ev.offsetY)
|
||||
const canvasCenter = () => toWorldPoint(canvas.width / 2, canvas.height / 2)
|
||||
|
||||
const key = (state: boolean, ev: KeyboardEvent) => {
|
||||
if (!KEYS_ON) {
|
||||
return
|
||||
}
|
||||
|
||||
if (ev.code === 'ShiftLeft' || ev.code === 'ShiftRight') {
|
||||
SHIFT = state
|
||||
} else if (ev.code === 'ArrowUp' || ev.code === 'KeyW') {
|
||||
UP = state
|
||||
} else if (ev.code === 'ArrowDown' || ev.code === 'KeyS') {
|
||||
DOWN = state
|
||||
} else if (ev.code === 'ArrowLeft' || ev.code === 'KeyA') {
|
||||
LEFT = state
|
||||
} else if (ev.code === 'ArrowRight' || ev.code === 'KeyD') {
|
||||
RIGHT = state
|
||||
} else if (ev.code === 'KeyQ') {
|
||||
ZOOM_OUT = state
|
||||
} else if (ev.code === 'KeyE') {
|
||||
ZOOM_IN = state
|
||||
}
|
||||
}
|
||||
|
||||
let lastMouse: [number, number]|null = null
|
||||
canvas.addEventListener('mousedown', (ev) => {
|
||||
lastMouse = mousePos(ev)
|
||||
if (ev.button === 0) {
|
||||
addEvent([Protocol.INPUT_EV_MOUSE_DOWN, ...lastMouse])
|
||||
}
|
||||
})
|
||||
|
||||
canvas.addEventListener('mouseup', (ev) => {
|
||||
lastMouse = mousePos(ev)
|
||||
if (ev.button === 0) {
|
||||
addEvent([Protocol.INPUT_EV_MOUSE_UP, ...lastMouse])
|
||||
}
|
||||
})
|
||||
|
||||
canvas.addEventListener('mousemove', (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, ...lastMouse])
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('keydown', (ev: KeyboardEvent) => key(true, ev))
|
||||
window.addEventListener('keyup', (ev: KeyboardEvent) => key(false, ev))
|
||||
|
||||
window.addEventListener('keypress', (ev: KeyboardEvent) => {
|
||||
if (!KEYS_ON) {
|
||||
return
|
||||
}
|
||||
if (ev.code === 'Space') {
|
||||
addEvent([Protocol.INPUT_EV_TOGGLE_PREVIEW])
|
||||
}
|
||||
|
||||
if (MODE === MODE_REPLAY) {
|
||||
if (ev.code === 'KeyI') {
|
||||
addEvent([Protocol.INPUT_EV_REPLAY_SPEED_UP])
|
||||
}
|
||||
|
||||
if (ev.code === 'KeyO') {
|
||||
addEvent([Protocol.INPUT_EV_REPLAY_SPEED_DOWN])
|
||||
}
|
||||
|
||||
if (ev.code === 'KeyP') {
|
||||
addEvent([Protocol.INPUT_EV_REPLAY_TOGGLE_PAUSE])
|
||||
}
|
||||
}
|
||||
if (ev.code === 'KeyF') {
|
||||
PIECE_VIEW_FIXED = !PIECE_VIEW_FIXED
|
||||
RERENDER = true
|
||||
}
|
||||
if (ev.code === 'KeyG') {
|
||||
PIECE_VIEW_LOOSE = !PIECE_VIEW_LOOSE
|
||||
RERENDER = true
|
||||
}
|
||||
if (ev.code === 'KeyM') {
|
||||
addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS])
|
||||
}
|
||||
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) => {
|
||||
events.push(event)
|
||||
}
|
||||
|
||||
const consumeAll = (): GameEvent[] => {
|
||||
if (events.length === 0) {
|
||||
return []
|
||||
}
|
||||
const all = events.slice()
|
||||
events = []
|
||||
return all
|
||||
}
|
||||
|
||||
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')) {
|
||||
const target = lastMouse || canvasCenter()
|
||||
addEvent([Protocol.INPUT_EV_ZOOM_IN, ...target])
|
||||
}
|
||||
} else if (ZOOM_OUT) {
|
||||
if (viewport.canZoom('out')) {
|
||||
const target = lastMouse || canvasCenter()
|
||||
addEvent([Protocol.INPUT_EV_ZOOM_OUT, ...target])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const setHotkeys = (state: boolean) => {
|
||||
KEYS_ON = state
|
||||
}
|
||||
|
||||
return {
|
||||
addEvent,
|
||||
consumeAll,
|
||||
createKeyEvents,
|
||||
setHotkeys,
|
||||
}
|
||||
}
|
||||
|
||||
export async function main(
|
||||
gameId: string,
|
||||
clientId: string,
|
||||
|
|
@ -746,6 +572,12 @@ export async function main(
|
|||
HUD.togglePlayerNames()
|
||||
} else if (type === Protocol.INPUT_EV_CENTER_FIT_PUZZLE) {
|
||||
centerPuzzle()
|
||||
} else if (type === Protocol.INPUT_EV_TOGGLE_FIXED_PIECES) {
|
||||
PIECE_VIEW_FIXED = !PIECE_VIEW_FIXED
|
||||
RERENDER = true
|
||||
} else if (type === Protocol.INPUT_EV_TOGGLE_LOOSE_PIECES) {
|
||||
PIECE_VIEW_LOOSE = !PIECE_VIEW_LOOSE
|
||||
RERENDER = true
|
||||
}
|
||||
|
||||
// LOCAL + SERVER CHANGES
|
||||
|
|
@ -818,6 +650,12 @@ export async function main(
|
|||
HUD.togglePlayerNames()
|
||||
} else if (type === Protocol.INPUT_EV_CENTER_FIT_PUZZLE) {
|
||||
centerPuzzle()
|
||||
} else if (type === Protocol.INPUT_EV_TOGGLE_FIXED_PIECES) {
|
||||
PIECE_VIEW_FIXED = !PIECE_VIEW_FIXED
|
||||
RERENDER = true
|
||||
} else if (type === Protocol.INPUT_EV_TOGGLE_LOOSE_PIECES) {
|
||||
PIECE_VIEW_LOOSE = !PIECE_VIEW_LOOSE
|
||||
RERENDER = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue