17 lines
871 B
TypeScript
17 lines
871 B
TypeScript
|
import { joinArena } from "./client.ts";
|
||
|
|
import { arenaSize, type ArenaState } from "./schema.ts";
|
||
|
|
|
||
|
|
const canvas = document.querySelector("canvas")!;
|
||
|
|
const ctx = canvas.getContext("2d")!;
|
||
|
|
const scale = canvas.width / arenaSize;
|
||
|
|
|
||
|
|
const game = await joinArena(`ws://${location.host}/odin`, `browser-${crypto.randomUUID()}`, (state: ArenaState, me: string) => {
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
for (const [id, p] of Object.entries(state.players)) {
|
||
|
|
ctx.fillStyle = id === me ? "#f5c542" : "#6aa9ff";
|
||
|
|
ctx.fillRect(p.x * scale, p.y * scale, scale * 2, scale * 2);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const keys: Record<string, [number, number]> = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
|
||
|
|
addEventListener("keydown", e => { const d = keys[e.key]; if (d) void game.move(...d); });
|
||
|
|
addEventListener("pagehide", () => void game.leave());
|