1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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)")];
const floor = [base("#333", "#222", 0.05)];
export const FALLBACK_TILE: Component[] = [base("#f0f")];
export const TILES: { [key: string]: Component[] } = {
"floor": floor,
"table": table,
"pan": [...table, circle(0.4, "#444", "#999")],
"flour_bag": [...floor, circle(0.5, "#fff", "#ddd")],
}
|
