test-client: show names if tile is unknown

2 files changed, 44 insertions, 15 deletions

diff --git a/test-client/tiles.ts b/test-client/tiles.ts
index 046d8297..fee27c9f 100644
--- a/test-client/tiles.ts
+++ b/test-client/tiles.ts
@@ -114,8 +114,7 @@ const foodprocessor = [circle(0.35, "rgb(86, 168, 189)", "rgb(88, 222, 255)", 0.
 const burned = [circle(0.3, "rgb(61, 18, 0)"), cross(0.2, "red", 0.02)]
 const leek = [circle(0.3, "rgb(50, 133, 17)")]
 
-export const FALLBACK_ITEM: Component[] = [circle(0.3, "#f0f")];
-export const ITEMS: { [key: string]: Component[] } = {
+const ITEMS: { [key: string]: Component[] } = {
     "pot": pot,
     "foodprocessor": foodprocessor,
     "leek": leek,
@@ -158,8 +157,7 @@ const floor = [base("#333", "#222", 0.05)];
 const counter = [base("rgb(182, 172, 164)")];
 const crate = (i: string) => [base("#60701e", "#b9da37", 0.05), ...ITEMS[i]];
 
-export const FALLBACK_TILE: Component[] = [base("#f0f")];
-export const TILES: { [key: string]: Component[] } = {
+const TILES: { [key: string]: Component[] } = {
     "floor": floor,
     "table": table,
     "door": [...floor, door],
@@ -184,3 +182,41 @@ export const TILES: { [key: string]: Component[] } = {
     "tomato-crate": crate("tomato"),
     "leek-crate": crate("leek"),
 }
+
+function debug_label(ctx: CanvasRenderingContext2D, name: string) {
+    ctx.save()
+    ctx.font = "10px sans-serif"
+    ctx.fillStyle = "white"
+    ctx.strokeStyle = "black"
+    ctx.lineWidth = 1
+    ctx.textAlign = "center"
+    ctx.textBaseline = "middle"
+    ctx.scale(0.03, 0.03)
+    ctx.strokeText(name, 0, 0)
+    ctx.fillText(name, 0, 0)
+    ctx.restore()
+}
+
+export function draw_item_sprite(ctx: CanvasRenderingContext2D, name: string) {
+    const comps = ITEMS[name]
+    if (comps) {
+        for (const c of comps) {
+            c(ctx)
+        }
+    } else {
+        circle(0.4, "#f0f")(ctx)
+        debug_label(ctx, name)
+    }
+}
+export function draw_tile_sprite(ctx: CanvasRenderingContext2D, name: string) {
+    const comps = TILES[name]
+    if (comps) {
+        for (const c of comps) {
+            c(ctx)
+        }
+    } else {
+        base("#f0f")(ctx)
+        debug_label(ctx, name)
+    }
+
+}
\ No newline at end of file
diff --git a/test-client/visual.ts b/test-client/visual.ts
index d3f8a8b0..a5e603c5 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -17,7 +17,7 @@
 */
 import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, demands_completed, demands_failed, get_interact_target, global_message, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, nametag_scale_anim, players, points, tiles, time_remaining } from "./main.ts";
 import { PLAYER_SIZE } from "./movement.ts";
-import { FALLBACK_TILE, ITEMS, TILES, FALLBACK_ITEM } from "./tiles.ts";
+import { draw_item_sprite, draw_tile_sprite } from "./tiles.ts";
 import { V2, ceil_v2, floor_v2 } from "./util.ts";
 
 export function draw_wait(text: string) {
@@ -109,10 +109,7 @@ function draw_debug() {
 function draw_tile(tile: TileData) {
     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)
-    }
+    draw_tile_sprite(ctx, data.tile_names[tile.kind])
     ctx.restore()
 }
 
@@ -120,10 +117,7 @@ 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)
-    }
+    draw_item_sprite(ctx, data.item_names[item.kind])
     if (item.progress !== null && item.progress !== undefined) {
         ctx.fillStyle = item.progress_warn ? "rgba(230, 58, 58, 0.66)" : "rgba(115, 230, 58, 0.66)"
         ctx.fillRect(-0.5, -0.5, 1, item.progress)
@@ -226,8 +220,7 @@ function draw_message(m: MessageData) {
         ctx.fill()
 
         ctx.translate(0, -1)
-        const comps = ITEMS[data.item_names[m.inner.item]] ?? FALLBACK_ITEM
-        for (const c of comps) c(ctx)
+        draw_item_sprite(ctx, data.item_names[m.inner.item])
         ctx.translate(0, 1)
     }
     if ("text" in m.inner) {