2 files changed, 26 insertions, 12 deletions
diff --git a/test-client/main.ts b/test-client/main.ts
index 3926dffc..ef84689f 100644
--- a/test-client/main.ts
+++ b/test-client/main.ts
@@ -1,7 +1,8 @@
 /// <reference lib="dom" />
 
 import { Gamedata, ItemID, ItemIndex, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
-import { FALLBACK_TILE, TILES } from "./tiles.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 } from "./util.ts";
 
 let ctx: CanvasRenderingContext2D;
@@ -192,15 +193,11 @@ function draw_ingame() {
 
     for (const [_, tile] of tiles) {
         ctx.save()
-        ctx.translate(tile.x, tile.y)
+        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)
         }
-        if (tile.active_progress !== null && tile.active_progress !== undefined) {
-            ctx.fillStyle = "rgba(115, 230, 58, 0.66)"
-            ctx.fillRect(0, 0, 1, tile.active_progress)
-        }
         ctx.restore()
     }
 
@@ -216,10 +213,21 @@ function draw_ingame() {
 
     for (const [_, item] of items) {
         ctx.save()
-
         ctx.translate(item.x, item.y)
-        ctx.fillStyle = "rgb(252, 19, 19)"
-        ctx.fillRect(-0.1, -0.1, 0.2, 0.2)
+        const comps = ITEMS[data.item_names[item.kind]] ?? FALLBACK_ITEM
+        for (const c of comps) {
+            c(ctx)
+        }
+        ctx.restore()
+    }
+
+    for (const [_, tile] of tiles) {
+        ctx.save()
+        ctx.translate(tile.x, tile.y)
+        if (tile.active_progress !== null && tile.active_progress !== undefined) {
+            ctx.fillStyle = "rgba(115, 230, 58, 0.66)"
+            ctx.fillRect(0, 0, 1, tile.active_progress)
+        }
         ctx.restore()
     }
 
diff --git a/test-client/tiles.ts b/test-client/tiles.ts
index 6eb1dc29..c628ea5d 100644
--- a/test-client/tiles.ts
+++ b/test-client/tiles.ts
@@ -7,8 +7,8 @@ function base(fill: string, stroke?: string, stroke_width?: number): Component {
         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)
+        c.fillRect(-0.5, -0.5, 1,1)
+        if (stroke) c.strokeRect(-0.5 + c.lineWidth / 2, -0.5 + c.lineWidth / 2, 1 - c.lineWidth, 1 - c.lineWidth)
     }
 }
 function circle(radius: number, fill: string, stroke?: string, stroke_width?: number): Component {
@@ -17,7 +17,7 @@ function circle(radius: number, fill: string, stroke?: string, stroke_width?: nu
         c.strokeStyle = stroke ?? "black";
         c.lineWidth = stroke_width ?? 0.05
         c.beginPath()
-        c.arc(0.5, 0.5, radius, 0, Math.PI * 2)
+        c.arc(0.0, 0.0, radius, 0, Math.PI * 2)
         if (stroke) c.stroke()
         c.fill()
     }
@@ -33,3 +33,9 @@ export const TILES: { [key: string]: Component[] } = {
     "pan": [...table, circle(0.4, "#444", "#999")],
     "flour_bag": [...floor, circle(0.5, "#fff", "#ddd")],
 }
+
+export const FALLBACK_ITEM: Component[] = [circle(0.3, "#f0f")];
+export const ITEMS: { [key: string]: Component[] } = {
+    "raw-steak": [circle(0.3, "rgb(204, 55, 5)")],
+    "steak": [circle(0.3, "rgb(112, 34, 0)")],
+}