102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import type { Message, InputState } from "../shared/types.js"
|
|
import { GameContext } from "../shared/game.js"
|
|
import { focusInput } from "./focus.js"
|
|
import { $ } from "./dom.js"
|
|
import { randomId } from "../shared/utils.js"
|
|
import { setStatus, addOutput } from "./scrollback.js"
|
|
import { browserCommands } from "./commands.js"
|
|
|
|
const FPS = 30
|
|
let oldMode = "cinema"
|
|
let running = false
|
|
let canvas: HTMLCanvasElement
|
|
type Game = { init?: () => void, update?: (delta: number, input: InputState) => void, draw?: (ctx: GameContext) => void }
|
|
|
|
const pressedStack = new Set<string>()
|
|
|
|
let pressed: InputState = {
|
|
key: "",
|
|
shift: false,
|
|
ctrl: false,
|
|
meta: false,
|
|
pressed: pressedStack
|
|
}
|
|
|
|
export async function handleGameStart(msg: Message) {
|
|
const msgId = msg.id as string
|
|
const name = msg.data as string
|
|
|
|
let game
|
|
try {
|
|
game = await import(`/command/${name}`)
|
|
} catch (err: any) {
|
|
setStatus(msgId, "error")
|
|
addOutput(msgId, `Error: ${err.message ? err.message : err}`)
|
|
return
|
|
}
|
|
|
|
const canvasId = randomId()
|
|
addOutput(msgId, { html: `<canvas id="${canvasId}" class="game active" height="540" width="960" tabindex="0"></canvas>` })
|
|
|
|
if (document.body.dataset.mode === "tall") {
|
|
browserCommands.mode?.()
|
|
oldMode = "tall"
|
|
}
|
|
|
|
canvas = $(canvasId) as HTMLCanvasElement
|
|
canvas.focus()
|
|
setStatus(msgId, "ok")
|
|
canvas.addEventListener("keydown", handleKeydown)
|
|
canvas.addEventListener("keyup", handleKeyup)
|
|
gameLoop(new GameContext(canvas.getContext("2d")!), game)
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
pressedStack.add(e.key)
|
|
e.preventDefault()
|
|
|
|
if (e.key === "Escape" || (e.ctrlKey && e.key === "c")) {
|
|
running = false
|
|
if (oldMode === "tall") browserCommands.mode?.()
|
|
canvas.classList.remove("active")
|
|
canvas.style.height = canvas.height / 2 + "px"
|
|
canvas.style.width = canvas.width / 2 + "px"
|
|
focusInput()
|
|
} else {
|
|
pressed.key = e.key
|
|
pressed.ctrl = e.ctrlKey
|
|
pressed.shift = e.shiftKey
|
|
pressed.meta = e.metaKey
|
|
}
|
|
}
|
|
|
|
function handleKeyup(e: KeyboardEvent) {
|
|
pressedStack.delete(e.key)
|
|
if (pressedStack.size === 0) {
|
|
pressed.key = ""
|
|
pressed.ctrl = false
|
|
pressed.shift = false
|
|
pressed.meta = false
|
|
}
|
|
}
|
|
|
|
function gameLoop(ctx: GameContext, game: Game) {
|
|
running = true
|
|
let last = 0
|
|
|
|
if (game.init) game.init()
|
|
|
|
function loop(ts: number) {
|
|
if (!running) return
|
|
|
|
const delta = ts - last
|
|
if (delta >= 1000 / FPS) {
|
|
if (game.update) game.update(delta, pressed)
|
|
if (game.draw) game.draw(ctx)
|
|
last = ts
|
|
}
|
|
requestAnimationFrame(loop)
|
|
}
|
|
|
|
requestAnimationFrame(loop)
|
|
} |