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
|
function genGrid(x_count, y_count, cell_size)
{
let lines = [];
for(let x = 0; x < x_count+1; x++)
{
lines.push(h("line", {
"x1": x * cell_size + 0.5, "x2": x * cell_size + 0.5, "y1": 0.5,
"y2": y_count * cell_size + 0.5,
}));
}
for(let y = 0; y < y_count+1; y++)
{
lines.push(h("line", {
"y1": y * cell_size + 0.5, "y2": y * cell_size + 0.5, "x1": 0.5,
"x2": x_count * cell_size + 0.5,
}));
}
return h("g", {"stroke": "black", "stroke-width": 1}, lines);
}
function AssetView({asset_index})
{
return h("div", {"class": "Asset", "draggable": true,
"id": `Asset${asset_index}`},
h("svg", ASSET_SVG_PROPS, ASSET_WHITE_BG,
TILES[asset_index].inner_svg));
}
function AssetsView()
{
let views = TILES.slice(1).map((t, i) =>
h(AssetView, {asset_index: i + 1}));
return h("div", {}, views);
}
function PlanGridView({content})
{
const [mouse_coord, setMouseCoord] = preactHooks.useState(null);
function onDragOver(e)
{
e.preventDefault();
let b = e.target.getBoundingClientRect();
let x = e.clientX - b.left;
let y = e.clientY - b.top;
setMouseCoord([x, y]);
}
function onDragLeave(e)
{
setMouseCoord(null);
}
let hilight_box = null;
if(mouse_coord !== null)
{
let cell_x = Math.floor(mouse_coord[0] / (CELL_SIZE + 1));
let cell_y = Math.floor(mouse_coord[1] / (CELL_SIZE + 1));
hilight_box = h("rect", {
"x": cell_x * (CELL_SIZE + 1) + 0.5, "y": cell_y * (CELL_SIZE + 1) + 0.5,
"width": CELL_SIZE + 1, "height": CELL_SIZE + 1,
"stroke": "#2ed573", "stroke-width": 3, "fill": "transparent"});
}
let grid_content = content.map((idx, i) => {
let cell_x = i % GRID_SIZE_X;
let cell_y = Math.floor(i / GRID_SIZE_Y);
return h("g", {"transform": `translate(${cell_x * (CELL_SIZE + 1)} \
${cell_y * (CELL_SIZE + 1)})`}, TILES[idx]);
});
return h("svg", {"width": GRID_SIZE_X * (CELL_SIZE + 1) + 1,
"height": GRID_SIZE_Y * (CELL_SIZE + 1) + 1,
"version": "1.1", "ondragover": onDragOver,
"id": "Grid", "ondragleave": onDragLeave},
grid_content, genGrid(GRID_SIZE_X, GRID_SIZE_Y, CELL_SIZE + 1),
hilight_box);
}
function PlanView(props)
{
return h("div", {},
h("p", {}, "The plan:"),
h(PlanGridView, {}));
}
function App(props)
{
return h("div", {},
h(AssetsView, {}),
h(PlanView, {}));
}
preact.render(h(App, {}), document.getElementById("Plan"));
|