Add button maker. Support basic editing.

1 files changed, 94 insertions, 0 deletions

diff --git a/button-maker/scripts/tiles.js b/button-maker/scripts/tiles.js
new file mode 100644
index 0000000..f35887a
--- /dev/null
+++ b/button-maker/scripts/tiles.js
@@ -0,0 +1,94 @@
+const TILES = [
+    null,
+    {
+        id: "blank",
+        name: "black",
+        inner_svg: null,
+    }, {
+        id: "teleporter",
+        name: "teleporter",
+        inner_svg: h("circle", {
+            "cx": CELL_SIZE * 0.5, "cy": CELL_SIZE * 0.5,
+            "r": (CELL_SIZE - 10) * 0.5, "stroke": "black",
+            "fill": "transparent", "stroke-width": 6,
+        }),
+    }, {
+        id: "fleet_command",
+        name: "fleet command",
+        inner_svg: h("polyline", {
+            "points": `3, ${CELL_SIZE} \
+3, ${CELL_SIZE - 15} \
+13, ${CELL_SIZE - 25} \
+13, ${CELL_SIZE - 5} \
+${CELL_SIZE - 13}, ${CELL_SIZE - 5} \
+${CELL_SIZE - 13}, ${CELL_SIZE - 25} \
+${CELL_SIZE - 3}, ${CELL_SIZE - 15} \
+${CELL_SIZE - 3}, ${CELL_SIZE}`,
+            "fill": "black", "stroke-width": 0,
+        }),
+    }, {
+        id: "scanner",
+        name: "scanner",
+        inner_svg:
+        h(preact.Fragment, {},
+          h("circle", {"cx": CELL_SIZE * 0.5, "cy": CELL_SIZE * 0.5,
+                       "r": CELL_SIZE * 0.5 - 2, "fill": "transparent",
+                       "stroke": "black", "stroke-width": 2}),
+          h("circle", {"cx": CELL_SIZE * 0.5, "cy": CELL_SIZE * 0.5,
+                       "r": CELL_SIZE * 0.25, "fill": "transparent",
+                       "stroke": "black", "stroke-width": 2}),
+          h("line", {"x1": 2, "y1": CELL_SIZE * 0.5,
+                     "x2": CELL_SIZE - 2, "y2": CELL_SIZE * 0.5,
+                     "stroke": "black", "stroke-width": 2}),
+          h("line", {"y1": 2, "x1": CELL_SIZE * 0.5,
+                     "y2": CELL_SIZE - 2, "x2": CELL_SIZE * 0.5,
+                     "stroke": "black", "stroke-width": 2}),
+          h("line", {"x1": CELL_SIZE * 0.5, "y1": CELL_SIZE * 0.5,
+                     "x2": CELL_SIZE * 0.5 + (CELL_SIZE * 0.5 - 2) * Math.cos(Math.PI / 6),
+                     "y2": CELL_SIZE * 0.5 - (CELL_SIZE * 0.5 - 2) * Math.sin(Math.PI / 6),
+                     "stroke": "black", "stroke-width": 2}),
+          h("circle", {"cx": 22, "cy": 6, "r": 2, "fill": "black",
+                       "stroke-width": 0}),
+          h("circle", {"cx": 10, "cy": 22, "r": 4, "fill": "black",
+                       "stroke-width": 0}),
+
+         ),
+    }, {
+        id: "extractor",
+        name: "stellar extractor",
+        inner_svg:
+        h(preact.Fragment, {},
+          h("circle", {"cx": CELL_SIZE * 0.5, "cy": 21,
+                       "r": 10, "fill": "black", "stroke-width": 0}),
+          h("polygon", {"points": `${CELL_SIZE * 0.5 - 4}, 20 \
+${CELL_SIZE * 0.5 - 4}, 10 \
+${CELL_SIZE * 0.5 - 8}, 10 \
+${CELL_SIZE * 0.5}, 3 \
+${CELL_SIZE * 0.5 + 8}, 10 \
+${CELL_SIZE * 0.5 + 4}, 10 \
+${CELL_SIZE * 0.5 + 4}, 20`,
+                        "stroke": "black", "stroke-width": 2,
+                        "fill": "white"}),
+         ),
+    }, {
+        id: "storage",
+        name: "storage",
+        inner_svg:
+        h(preact.Fragment, {},
+          h("rect", {"x": 4, "y": 4, "width": CELL_SIZE - 8,
+                          "height": CELL_SIZE - 8, "rx": 2, "ry": 2,
+                     "fill": "black", "stroke-width": 0}),
+          h("line", {"x1": 4, "y1": 14, "x2": CELL_SIZE - 4, "y2": 14,
+                     "stroke": "white", "stroke-width": 2}),
+          h("rect", {"x": CELL_SIZE * 0.5 - 4, "y": 10, "width": 8, "height": 8,
+                     "fill": "white", "stroke-width": 0}),
+         ),
+    }, {
+        id: "plant",
+        name: "double cultivation chamber",
+        inner_svg: h("path", {"d": "m3.02 17.7a13 13 0 0013 13 13 13 0 00-13-13m13 13a13 13 0 0013-13 13 13 0 00-13 13m8.66-27.4v7.21a8.66 8.66 0 01-8.66 8.66 8.66 8.66 0 01-8.66-8.66v-7.21c1.07 0 2.12.173 3.12.563.793.332 1.5.821 2.09 1.44l3.43-3.43 3.43 3.43c.591-.622 1.3-1.11 2.09-1.44.996-.388 2.05-.563 3.12-.563z",
+                              "fill": "black", "stroke-width": 0}),
+    }
+];
+
+const TILE_MAP = Object.fromEntries(TILES.slice(1).map(t => [t.id, t]));