test-client: add button sprites

2 files changed, 23 insertions, 2 deletions

diff --git a/test-client/tiles.ts b/test-client/sprites.ts
index 6bc587fd..c7cd769d 100644
--- a/test-client/tiles.ts
+++ b/test-client/sprites.ts
@@ -83,6 +83,18 @@ function cross(size: number, stroke: string, stroke_width = 0.05): Component {
         c.stroke()
     }
 }
+function checkmark(size: number, stroke: string, stroke_width = 0.05): Component {
+    return c => {
+        c.strokeStyle = stroke
+        c.lineWidth = stroke_width
+        c.lineCap = "round"
+        c.beginPath()
+        c.moveTo(-size, 0)
+        c.lineTo(-size * 0.3, size)
+        c.lineTo(size, -size)
+        c.stroke()
+    }
+}
 function text(s: string): Component {
     return c => {
         c.font = "0.8px sans-serif"
@@ -198,8 +210,17 @@ const TILES: { [key in TileName]: (param: string) => Component } = {
     "stove": () => c => (counter(c), circle(0.4, "#444", "#999")(c)),
     "book": () => c => (counter(c), rect(0.2, "rgb(88, 44, 7)")(c)),
     "lamp": () => rect(0.3, "rgb(255, 217, 127)", "rgb(32, 32, 32)", 0.1),
-    "crate": name => c => (base("#60701e", "#b9da37", 0.05)(c), iref(name)(c))
+    "crate": name => c => (base("#60701e", "#b9da37", 0.05)(c), iref(name)(c)),
+    "button-base": () => base("#272727", "#272727", 0.05),
+    "button": name => BUTTON_ICONS[name],
+    "map-selector": () => rect(0.2, "rgb(56, 99, 239)", "rgb(44, 79, 194)", 0.1),
+    "screen": () => () => { }
 }
+const BUTTON_ICONS: { [key: string]: Component } = {
+    "accept": c => (circle(0.35, "rgb(81, 255, 0)", "rgb(57, 179, 0)")(c), checkmark(0.2, "#fff", 0.05)(c)),
+    "reject": c => (circle(0.35, "rgb(255, 0, 0)", "rgb(181, 0, 0)")(c), cross(0.2, "#fff", 0.05)(c)),
+}
+
 
 function debug_label(ctx: CanvasRenderingContext2D, name: string) {
     ctx.save()
diff --git a/test-client/visual.ts b/test-client/visual.ts
index 9c5d2f36..c8317d67 100644
--- a/test-client/visual.ts
+++ b/test-client/visual.ts
@@ -18,7 +18,7 @@
 import { tr } from "./locale.ts";
 import { ItemData, MessageData, MessageStyle, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, debug_events, get_interact_target, global_message, interact_active_anim, interact_possible_anim, interact_target_anim, is_lobby, items_removed, keys_down, my_id, overlay_vis_anim, players, score, server_hints, tiles } from "./main.ts";
 import { PLAYER_SIZE } from "./movement.ts";
-import { draw_item_sprite, draw_tile_sprite, ItemName, TileName } from "./tiles.ts";
+import { draw_item_sprite, draw_tile_sprite, ItemName, TileName } from "./sprites.ts";
 import { V2, ceil_v2, floor_v2, length } from "./util.ts";
 import { Message, PlayerClass } from "./protocol.ts";
 import { draw_particles, particle_count } from "./particles.ts";