diff options
Diffstat (limited to 'test-client')
| -rw-r--r-- | test-client/main.ts | 44 | ||||
| -rw-r--r-- | test-client/protocol.ts | 2 | ||||
| -rw-r--r-- | test-client/tiles.ts | 33 |
3 files changed, 67 insertions, 12 deletions
diff --git a/test-client/main.ts b/test-client/main.ts index 1780b5d7..3c1285a4 100644 --- a/test-client/main.ts +++ b/test-client/main.ts @@ -1,6 +1,7 @@ /// <reference lib="dom" /> -import { PacketC, PacketS } from "./protocol.ts"; +import { ID, Item, PacketC, PacketS, Tile } from "./protocol.ts"; +import { FALLBACK_TILE, TILES } from "./tiles.ts"; import { V2, ceil_v2, floor_v2, lerp_v2_mut, normalize } from "./util.ts"; let ctx: CanvasRenderingContext2D; @@ -27,15 +28,16 @@ document.addEventListener("DOMContentLoaded", () => { document.addEventListener("keydown", ev => keyboard(ev, true)) document.addEventListener("keyup", ev => keyboard(ev, false)) + document.addEventListener("contextmenu", ev => ev.preventDefault()) setInterval(tick_update, 1000 / 25); }) -interface Player { x: number; y: number, name: string, rot: number } -const players = new Map<number, Player>() -interface Item { x: number; y: number } -const items = new Map<number, Item>() -interface Tile { x: number; y: number } -const tiles = new Map<string, Tile>() +interface PlayerData { x: number; y: number, name: string, rot: number, hand?: ID } +const players = new Map<number, PlayerData>() +interface ItemData { x: number; y: number, kind: Item } +const items = new Map<number, ItemData>() +interface TileData { x: number; y: number, kind: Tile } +const tiles = new Map<string, TileData>() let my_id: number = -1 const camera: V2 = { x: 0, y: 0 } @@ -43,24 +45,32 @@ let scale = 0 function send(p: PacketS) { ws.send(JSON.stringify(p)) } function packet(p: PacketC) { - console.log(p); + if (!("position" in p)) console.log(p); if ("joined" in p) { my_id = p.joined.id } else if ("add_player" in p) { - players.set(p.add_player.id, { x: 0, y: 0, name: p.add_player.name, rot: 0 }) + if (p.add_player.hand) items.set(p.add_player.hand[0], { kind: p.add_player.hand[1], x: 0, y: 0 }) + players.set(p.add_player.id, { x: 0, y: 0, name: p.add_player.name, rot: 0, hand: p.add_player.hand?.[0] }) } else if ("remove_player" in p) { players.delete(p.remove_player.id) } else if ("position" in p) { + if (p.position.player == my_id) return; // we know better where we are const pl = players.get(p.position.player)! pl.x = p.position.pos[0] pl.y = p.position.pos[1] pl.rot = p.position.rot } else if ("take_item" in p) { + // TODO } else if ("put_item" in p) { + // TODO } else if ("produce_item" in p) { + // TODO } else if ("consume_item" in p) { + // TODO } else if ("set_active" in p) { + // TODO } else if ("update_map" in p) { + tiles.set(p.update_map.pos.toString(), { x: p.update_map.pos[0], y: p.update_map.pos[1], kind: p.update_map.tile }) } else console.warn("unknown packet", p); } @@ -80,6 +90,8 @@ function interact() { function tick_update() { const p = players.get(my_id) if (!p) return + + send({ position: { pos: [p.x, p.y], rot: p.rot } }) } function frame_update(dt: number) { const p = players.get(my_id) @@ -114,7 +126,7 @@ function draw() { requestAnimationFrame(draw) } function draw_wait(text: string) { - ctx.fillStyle = "gray" + ctx.fillStyle = "#444" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = "#555" ctx.font = "50px sans-serif" @@ -149,6 +161,16 @@ function draw_ingame() { draw_grid() + for (const [_, tile] of tiles) { + ctx.save() + ctx.translate(tile.x, tile.y) + const comps = TILES[tile.kind] ?? FALLBACK_TILE + for (const c of comps) { + c(ctx) + } + ctx.restore() + } + for (const [_, player] of players) { ctx.save() ctx.translate(player.x, player.y) @@ -177,4 +199,4 @@ function draw_grid() { ctx.lineTo(max.x, y) } ctx.stroke() -}
\ No newline at end of file +} diff --git a/test-client/protocol.ts b/test-client/protocol.ts index 3b61ce94..717383d4 100644 --- a/test-client/protocol.ts +++ b/test-client/protocol.ts @@ -12,7 +12,7 @@ export type PacketS = export type PacketC = { joined: { id: ID } } - | { add_player: { id: ID, name: string } } + | { add_player: { id: ID, name: string, hand?: [number, Item] } } | { remove_player: { id: ID } } | { position: { player: ID, pos: Vec2, rot: number } } | { take_item: { item: ID, player: ID } } diff --git a/test-client/tiles.ts b/test-client/tiles.ts new file mode 100644 index 00000000..3b15385c --- /dev/null +++ b/test-client/tiles.ts @@ -0,0 +1,33 @@ + +type Component = (ctx: CanvasRenderingContext2D) => void +function base(fill: string, stroke?: string, stroke_width?: number): Component { + return c => { + c.fillStyle = fill; + c.strokeStyle = stroke ?? "black"; + c.lineWidth = stroke_width ?? 0.05 + c.lineJoin = "miter" + c.lineCap = "square" + c.fillRect(0, 0, 1, 1) + if (stroke) c.strokeRect(c.lineWidth / 2, c.lineWidth / 2, 1 - c.lineWidth, 1 - c.lineWidth) + } +} +function circle(radius: number, fill: string, stroke?: string, stroke_width?: number): Component { + return c => { + c.fillStyle = fill; + c.strokeStyle = stroke ?? "black"; + c.lineWidth = stroke_width ?? 0.05 + c.beginPath() + c.arc(0.5, 0.5, radius, 0, Math.PI * 2) + if (stroke) c.stroke() + c.fill() + } +} + +const table = [base("rgb(133, 76, 38)")]; + +export const FALLBACK_TILE: Component[] = [base("#f0f")]; +export const TILES: { [key: string]: Component[] } = { + "floor": [base("#333", "#222", 0.05)], + "table": table, + "pan": [...table, circle(0.4, "#444", "#999")], +} |