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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
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.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 {
return c => {
c.fillStyle = fill;
c.strokeStyle = stroke ?? "black";
c.lineWidth = stroke_width ?? 0.05
c.beginPath()
c.arc(0.0, 0.0, radius, 0, Math.PI * 2)
if (stroke) c.stroke()
c.fill()
}
}
function cross(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, -size)
c.lineTo(size, size)
c.moveTo(size, -size)
c.lineTo(-size, size)
c.stroke()
}
}
function arrange_items(...items: string[]): Component[] {
return items.flatMap((item, index) => {
const t = index / items.length * Math.PI * 2.
const radius = items.length == 1 ? 0 : (0.4 / items.length)
const off_x = Math.sin(t) * radius
const off_y = Math.cos(t) * radius
const scale = 1. / Math.sqrt(items.length)
return c => {
for (const comp of ITEMS[item]) {
c.save()
c.translate(off_x, off_y)
c.scale(scale, scale)
comp(c)
c.restore()
}
}
})
}
const door: Component = c => {
c.fillStyle = "#ff9843"
c.fillRect(-0.5, -0.1, 1, 0.2)
}
const plate = [circle(0.4, "#b6b6b6", "#f7f7f7", 0.02)];
export const FALLBACK_ITEM: Component[] = [circle(0.3, "#f0f")];
export const ITEMS: { [key: string]: Component[] } = {
"raw-steak": [circle(0.3, "#cc3705")],
"steak": [circle(0.3, "#702200")],
"flour": [circle(0.3, "#d8c9c2")],
"dough": [circle(0.3, "#b38d7d")],
"bread": [circle(0.3, "#853e20")],
"tomato": [circle(0.3, "#d63838")],
"sliced-tomato": [circle(0.3, "#d16363", "#d63838", 0.08)],
"dirty-plate": [circle(0.4, "#947a6f", "#d3a187", 0.02)],
"plate": plate,
"steak-meal": [...plate, ...arrange_items("steak")],
"sliced-tomato-meal": [...plate, ...arrange_items("sliced-tomato")],
"burger-meal": [...plate, ...arrange_items("bread", "steak")],
"tomatoburger-meal": [...plate, ...arrange_items("bread", "steak", "tomato")],
}
const table = [base("rgb(133, 76, 38)")];
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[] } = {
"floor": floor,
"table": table,
"counter": counter,
"door": [...floor, door],
"chair": [...floor, circle(0.45, "rgb(136, 83, 41)")],
"wall": [base("rgb(0, 14, 56)")],
"window": [base("rgb(233, 233, 233)")],
"watercooler": [...floor, circle(0.4, "rgb(64, 226, 207)")],
"trash": [...floor, circle(0.4, "rgb(20, 20, 20)"), cross(0.3, "rgb(90, 36, 36)")],
"sink": [base("rgb(131, 129, 161)", "rgb(177, 174, 226)", 0.2)],
"oven": [base("rgb(241, 97, 61)", "rgb(109, 84, 84)", 0.3)],
"pan": [...counter, circle(0.4, "#444", "#999")],
"flour-crate": crate("flour"),
"dirty-plate-crate": crate("dirty-plate"),
"raw-steak-crate": crate("raw-steak"),
"tomato-crate": crate("tomato"),
}
|