WIP

1 files changed, 93 insertions, 0 deletions

diff --git a/scripts/main.js b/scripts/main.js
new file mode 100644
index 0000000..7a8b9d4
--- /dev/null
+++ b/scripts/main.js
@@ -0,0 +1,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"));