implement customer communication

1 files changed, 27 insertions, 160 deletions

diff --git a/test-client/main.ts b/test-client/main.ts
index 807567c8..b34220df 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -1,14 +1,13 @@
 /// <reference lib="dom" />
 
-import { Gamedata, ItemIndex, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
-import { FALLBACK_ITEM } from "./tiles.ts";
-import { FALLBACK_TILE, ITEMS, TILES } from "./tiles.ts";
-import { V2, add_v2, ceil_v2, floor_v2, length, lerp_exp_v2_mut, normalize, aabb_circle_distance } from "./util.ts";
+import { Gamedata, ItemIndex, Message, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
+import { V2, add_v2, length, lerp_exp_v2_mut, normalize, aabb_circle_distance } from "./util.ts";
+import { draw_ingame, draw_wait } from "./visual.ts";
 
-const PLAYER_SIZE = 0.4;
+export const PLAYER_SIZE = 0.4;
 
-let ctx: CanvasRenderingContext2D;
-let canvas: HTMLCanvasElement;
+export let ctx: CanvasRenderingContext2D;
+export let canvas: HTMLCanvasElement;
 let ws: WebSocket;
 document.addEventListener("DOMContentLoaded", () => {
     const ws_uri = window.location.protocol.endsWith("s:")
@@ -38,7 +37,7 @@ document.addEventListener("DOMContentLoaded", () => {
     setInterval(tick_update, 1000 / 25);
 })
 
-interface ItemData {
+export interface ItemData {
     kind: ItemIndex,
     x: number,
     y: number,
@@ -46,7 +45,7 @@ interface ItemData {
     progress?: number
     remove_anim?: number
 }
-interface PlayerData {
+export interface PlayerData {
     x: number,
     y: number,
     name: string,
@@ -54,30 +53,31 @@ interface PlayerData {
     item?: ItemData,
     facing: V2,
     character: number,
-    vel: { x: number, y: number }
+    vel: { x: number, y: number },
+    message?: Message,
 }
-interface TileData {
+export interface TileData {
     x: number
     y: number
     kind: TileIndex
     item?: ItemData
 }
-const players = new Map<PlayerID, PlayerData>()
-const tiles = new Map<string, TileData>()
-const items_removed = new Set<ItemData>()
 
-let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0] }
+export const players = new Map<PlayerID, PlayerData>()
+export const tiles = new Map<string, TileData>()
+export const items_removed = new Set<ItemData>()
+
+export let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0] }
+
 
 let my_id: PlayerID = -1
-const camera: V2 = { x: 0, y: 0 }
-let camera_zoom = 0.1
-const interact_target_anim: V2 = { x: 0, y: 0 }
+export const camera: V2 = { x: 0, y: 0 }
+export const interact_target_anim: V2 = { x: 0, y: 0 }
 let interacting: V2 | undefined;
-let scale = 0
 
 function send(p: PacketS) { ws.send(JSON.stringify(p)) }
 function packet(p: PacketC) {
-    if (!["position", "set_active"].includes(p.type))
+    if (!["position", "set_active", "update_map"].includes(p.type))
         console.log(p);
     switch (p.type) {
         case "init":
@@ -144,12 +144,17 @@ function packet(p: PacketC) {
         case "update_map":
             tiles.set(p.pos.toString(), { x: p.pos[0], y: p.pos[1], kind: p.tile })
             break;
+        case "communicate": {
+            const player = players.get(p.player)!
+            player.message = p.message
+            break;
+        }
         default:
             console.warn("unknown packet", p);
     }
 }
 
-const keys_down = new Set();
+export const keys_down = new Set();
 const HANDLED_KEYS = ["KeyW", "KeyA", "KeyS", "KeyD", "Space"]
 function keyboard(ev: KeyboardEvent, down: boolean) {
     if (HANDLED_KEYS.includes(ev.code)) ev.preventDefault()
@@ -157,7 +162,7 @@ function keyboard(ev: KeyboardEvent, down: boolean) {
     else keys_down.delete(ev.code)
 }
 
-function get_interact_target(): V2 | undefined {
+export function get_interact_target(): V2 | undefined {
     const me = players.get(my_id)
     if (!me) return
     return {
@@ -244,144 +249,6 @@ function draw() {
     else throw new Error(`ws state invalid`);
     requestAnimationFrame(draw)
 }
-function draw_wait(text: string) {
-    ctx.fillStyle = "#444"
-    ctx.fillRect(0, 0, canvas.width, canvas.height)
-    ctx.fillStyle = "#555"
-    ctx.font = "50px sans-serif"
-    ctx.strokeStyle = "black"
-    ctx.fillStyle = "white"
-    ctx.lineWidth = 10
-    ctx.textAlign = "center"
-    ctx.textBaseline = "middle"
-    ctx.lineJoin = "round"
-    ctx.lineCap = "round"
-    ctx.strokeText(text, canvas.width / 2, canvas.height / 2)
-    ctx.fillText(text, canvas.width / 2, canvas.height / 2)
-}
-
-
-function map_screen_to_world(screen: V2): V2 {
-    return {
-        x: ((screen.x - canvas.width / 2) / scale) + camera.x,
-        y: ((screen.y - canvas.height / 2) / scale) + camera.y,
-    }
-}
-
-function draw_ingame() {
-    ctx.fillStyle = "#111"
-    ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-    scale = Math.min(canvas.width, canvas.height) * camera_zoom;
-    ctx.save()
-    ctx.translate(canvas.width / 2, canvas.height / 2)
-    ctx.scale(scale, scale)
-    ctx.translate(-camera.x, -camera.y)
-
-    draw_grid()
-
-    for (const [_, tile] of tiles) {
-        ctx.save()
-        ctx.translate(tile.x + 0.5, tile.y + 0.5)
-        const comps = TILES[data.tile_names[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)
-        ctx.rotate(-player.rot)
-
-        ctx.fillStyle = `hsl(${player.character}rad, 50%, 50%)`
-        ctx.beginPath()
-        ctx.arc(0, 0, PLAYER_SIZE, 0, Math.PI * 2)
-        ctx.fill()
-
-        ctx.fillStyle = `hsl(${player.character}rad, 80%, 10%)`
-        ctx.beginPath()
-        ctx.arc(0, -0.2, PLAYER_SIZE, 0, Math.PI * 2)
-        ctx.fill()
-
-        ctx.fillStyle = `hsl(${player.character}rad, 80%, 70%)`
-        ctx.beginPath()
-        ctx.moveTo(-0.04, 0.25)
-        ctx.lineTo(0.04, 0.25)
-        ctx.lineTo(0, 0.4)
-        ctx.fill()
-
-        ctx.restore()
-
-        if (player.item) draw_item(player.item)
-    }
-
-    for (const item of items_removed) {
-        draw_item(item)
-    }
-    for (const [_, tile] of tiles) {
-        if (tile.item) draw_item(tile.item)
-    }
-
-    draw_interact_target()
-
-    ctx.restore()
-
-    if (keys_down.has("KeyP")) {
-        camera_zoom = 0.05
-        ctx.fillStyle = "white"
-        ctx.textAlign = "left"
-        ctx.textBaseline = "bottom"
-        ctx.font = "20px sans-serif"
-        ctx.fillText(`interact = ${JSON.stringify(get_interact_target())}`, 10, 30)
-    } else { camera_zoom = 0.1 }
-}
-
-function draw_item(item: ItemData) {
-    ctx.save()
-    ctx.translate(item.x, item.y)
-    if (item.remove_anim) ctx.scale(1 - item.remove_anim, 1 - item.remove_anim)
-    const comps = ITEMS[data.item_names[item.kind]] ?? FALLBACK_ITEM
-    for (const c of comps) {
-        c(ctx)
-    }
-    if (item.progress !== null && item.progress !== undefined) {
-        ctx.fillStyle = "rgba(115, 230, 58, 0.66)"
-        ctx.fillRect(-0.5, -0.5, 1, item.progress)
-    }
-    ctx.restore()
-}
-
-function draw_interact_target() {
-    ctx.save()
-    ctx.translate(interact_target_anim.x, interact_target_anim.y)
-
-    ctx.lineCap = "round"
-    ctx.lineJoin = "round"
-    ctx.lineWidth = 0.06 + 0.03 * Math.sin(Date.now() / 100)
-    ctx.strokeStyle = "rgb(84, 122, 236)"
-    ctx.strokeRect(0, 0, 1, 1)
-
-    ctx.restore()
-}
-
-function draw_grid() {
-    ctx.strokeStyle = "#333"
-    ctx.lineWidth = 0.01
-    ctx.beginPath()
-    const min = floor_v2(map_screen_to_world({ x: 0, y: 0 }))
-    const max = ceil_v2(map_screen_to_world({ x: canvas.width, y: canvas.height }))
-    for (let x = min.x; x < max.x; x++) {
-        ctx.moveTo(x, min.y)
-        ctx.lineTo(x, max.y)
-    }
-    for (let y = min.y; y < max.y; y++) {
-        ctx.moveTo(min.x, y)
-        ctx.lineTo(max.x, y)
-    }
-    ctx.stroke()
-}
 
 function collide_player(p: PlayerData) {
     const tiles_ignored = ["floor", "door", "chair"].map(t => data.tile_names.indexOf(t))