diff --git a/app/nose/bin/game.tsx b/app/nose/bin/game.tsx index a1a93b8..3a2e446 100644 --- a/app/nose/bin/game.tsx +++ b/app/nose/bin/game.tsx @@ -3,8 +3,7 @@ export const game = true -import type { InputState } from "@/shared/types" -import type { GameContext } from "@/shared/game" +import type { GameContext, InputState } from "@/shared/game" import { rng } from "@/shared/utils.ts" const WIDTH = 960 diff --git a/app/src/shared/game.ts b/app/src/shared/game.ts index aae325d..930ca82 100644 --- a/app/src/shared/game.ts +++ b/app/src/shared/game.ts @@ -1,14 +1,37 @@ +export type InputState = { key: string, shift: boolean, ctrl: boolean, meta: boolean, pressed: Set } export class GameContext { constructor(public ctx: CanvasRenderingContext2D) { } - get width() { return this.ctx.canvas.width } - get height() { return this.ctx.canvas.height } + width = 960 + height = 540 clear() { this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height) } + text(msg: string, x: number, y: number, color = "black", size = 16, font = "monospace") { + const c = this.ctx + c.save() + c.fillStyle = color + c.font = `${size}px ${font}` + c.textBaseline = "top" + c.fillText(msg, x, y) + c.restore() + } + + centerText(msg: string, y: number, color = "black", size = 16, font = "monospace") { + const c = this.ctx + c.save() + c.fillStyle = color + c.font = `${size}px ${font}` + c.textBaseline = "middle" + const metrics = c.measureText(msg) + const x = (this.width - metrics.width) / 2 + c.fillText(msg, x, y) + c.restore() + } + circ(x: number, y: number, r: number, color = "black") { const c = this.ctx c.save() diff --git a/app/src/shared/types.ts b/app/src/shared/types.ts index acd04a7..58f2d27 100644 --- a/app/src/shared/types.ts +++ b/app/src/shared/types.ts @@ -15,5 +15,3 @@ export type CommandResult = { status: "ok" | "error" output: CommandOutput } - -export type InputState = { key: string, shift: boolean, ctrl: boolean, meta: boolean, pressed: Set }