prime clients and tile rendering

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")],
+}