prime clients and tile rendering

1 files changed, 33 insertions, 0 deletions

diff --git a/test-client/tiles.ts b/test-client/tiles.ts
new file mode 100644
index 00000000..3b15385c
--- /dev/null
+++ b/test-client/tiles.ts
@@ -0,0 +1,33 @@
+
+type Component = (ctx: CanvasRenderingContext2D) => void
+function base(fill: string, stroke?: string, stroke_width?: number): Component {
+    return c => {
+        c.fillStyle = fill;
+        c.strokeStyle = stroke ?? "black";
+        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)
+    }
+}
+function circle(radius: number, fill: string, stroke?: string, stroke_width?: number): Component {
+    return c => {
+        c.fillStyle = fill;
+        c.strokeStyle = stroke ?? "black";
+        c.lineWidth = stroke_width ?? 0.05
+        c.beginPath()
+        c.arc(0.5, 0.5, radius, 0, Math.PI * 2)
+        if (stroke) c.stroke()
+        c.fill()
+    }
+}
+
+const table = [base("rgb(133, 76, 38)")];
+
+export const FALLBACK_TILE: Component[] = [base("#f0f")];
+export const TILES: { [key: string]: Component[] } = {
+    "floor": [base("#333", "#222", 0.05)],
+    "table": table,
+    "pan": [...table, circle(0.4, "#444", "#999")],
+}