prime clients and tile rendering

1 files changed, 33 insertions, 11 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
+}