From 897268c771b3ab39944761666b8511f0a69baf4b Mon Sep 17 00:00:00 2001 From: MetroWind Date: Sun, 31 Aug 2025 17:11:55 -0700 Subject: Add all rooms. (Except for internal wall. Need to figure out how they work.) --- scripts/main.js | 26 ++++-- scripts/tiles.js | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- styles.css | 8 +- 3 files changed, 283 insertions(+), 22 deletions(-) diff --git a/scripts/main.js b/scripts/main.js index 5483adf..8df176b 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -37,18 +37,23 @@ function genGrid(x_count, y_count, cell_size) function AssetView({asset_index, on_drag_begin, on_drag_end}) { + let bg = ASSET_WHITE_BG; + if(TILES[asset_index].bg === null) + { + bg = null; + } return h("div", {"class": "Asset", "draggable": true, "data-asset-index": asset_index, "ondragstart": on_drag_begin, - "ondragend": on_drag_end,}, - h("svg", ASSET_SVG_PROPS, ASSET_WHITE_BG, - TILES[asset_index].inner_svg)); + "ondragend": on_drag_end, + "title": TILES[asset_index].name,}, + h("svg", ASSET_SVG_PROPS, bg, TILES[asset_index].inner_svg)); } function AssetsView({on_drag_begin, on_drag_end}) { - let views = TILES.slice(1).map((t, i) => - h(AssetView, {asset_index: i + 1, on_drag_begin: on_drag_begin, + let views = TILES.map((t, i) => + h(AssetView, {asset_index: i, on_drag_begin: on_drag_begin, on_drag_end: on_drag_end})); return h("div", {}, views); } @@ -91,8 +96,13 @@ function PlanGridView({content, mouse_state}) if(idx == 0) return null; let cell_x = i % GRID_SIZE_X; let cell_y = Math.floor(i / GRID_SIZE_Y); + let bg = ASSET_WHITE_BG; + if(TILES[idx].bg === null) + { + bg = null; + } return h("g", {"transform": `translate(${cell_x * (CELL_SIZE + 1) + 1} \ -${cell_y * (CELL_SIZE + 1) + 1})`}, ASSET_WHITE_BG, TILES[idx].inner_svg); +${cell_y * (CELL_SIZE + 1) + 1})`}, bg, TILES[idx].inner_svg); }); let img_width = GRID_SIZE_X * (CELL_SIZE + 1) + 1; @@ -101,7 +111,7 @@ ${cell_y * (CELL_SIZE + 1) + 1})`}, ASSET_WHITE_BG, TILES[idx].inner_svg); "version": "1.1", "ondragover": onDragOver, "id": "Grid", "ondragleave": onDragLeave,}, h("rect", {x: 0, y: 0, width: img_width, height: img_height, - fill: "#a4b0be", "stroke-width": 0}), + fill: "#c0c0c0", "stroke-width": 0}), grid_content, genGrid(GRID_SIZE_X, GRID_SIZE_Y, CELL_SIZE + 1), hilight_box); } @@ -116,7 +126,7 @@ function PlanView({plan, mouse_state}) // on_floor_change takes one argument, which is the 0-based floor number. function FloorSelector({floor, on_floor_change}) { - return h("div", {"id": "FloorSelectorWrapper", "class": "ButtonRow"}, + return h("div", {"id": "FloorSelectorWrapper", "class": "ButtonRowLeft"}, h("label", {}, "Floor"), h("input", {"id": "InputFloor", "type": "number", "step": 1, "min": 1, "max": 15, "value": floor, diff --git a/scripts/tiles.js b/scripts/tiles.js index f35887a..2ed5691 100644 --- a/scripts/tiles.js +++ b/scripts/tiles.js @@ -1,12 +1,231 @@ +// TODO: how does internal walls & ladder work?? const TILES = [ - null, { + id: "null", + name: "Nothing", + bg: null, + inner_svg: null, + }, { id: "blank", - name: "black", + name: "Generic", inner_svg: null, + }, { + id: "corridor_ns", + name: "Corridor N-S", + bg: null, + inner_svg: h("rect", { + x: CELL_SIZE / 4, y: 0, width: CELL_SIZE / 2, height: CELL_SIZE, + fill: "white"}), + }, { + id: "corridor_we", + name: "Corridor W-E", + bg: null, + inner_svg: h("rect", { + y: CELL_SIZE / 4, x: 0, height: CELL_SIZE / 2, width: CELL_SIZE, + fill: "white"}), + }, { + id: "corridor_ne", + name: "Corridor N-E", + bg: null, + inner_svg: h("path", { + d: `M ${CELL_SIZE * 0.5} 0 \ +A ${CELL_SIZE * 0.5} ${CELL_SIZE * 0.5} 0 0 0 \ +${CELL_SIZE} ${CELL_SIZE * 0.5}`, + stroke: "white", "stroke-width": CELL_SIZE * 0.5}), + }, { + id: "corridor_se", + name: "Corridor S-E", + bg: null, + inner_svg: h("path", { + d: `M ${CELL_SIZE * 0.5} ${CELL_SIZE} \ +A ${CELL_SIZE * 0.5} ${CELL_SIZE * 0.5} 0 0 1 \ +${CELL_SIZE} ${CELL_SIZE * 0.5}`, + stroke: "white", "stroke-width": CELL_SIZE * 0.5}), + }, { + id: "corridor_sw", + name: "Corridor S-W", + bg: null, + inner_svg: h("path", { + d: `M ${CELL_SIZE * 0.5} ${CELL_SIZE} \ +A ${CELL_SIZE * 0.5} ${CELL_SIZE * 0.5} 0 0 0 \ +0 ${CELL_SIZE * 0.5}`, + stroke: "white", "stroke-width": CELL_SIZE * 0.5}), + }, { + id: "corridor_nw", + name: "Corridor N-W", + bg: null, + inner_svg: h("path", { + d: `M ${CELL_SIZE * 0.5} 0 \ +A ${CELL_SIZE * 0.5} ${CELL_SIZE * 0.5} 0 0 1 \ +0 ${CELL_SIZE * 0.5}`, + stroke: "white", "stroke-width": CELL_SIZE * 0.5}), + }, { + id: "corridor_3n", + name: "Three-way corridor 1", + bg: null, + inner_svg: + h(preact.Fragment, {}, + h("rect", { + y: CELL_SIZE / 4, x: 0, height: CELL_SIZE / 2, width: CELL_SIZE, + fill: "white"}), + h("rect", { + x: CELL_SIZE / 4, y: 0, width: CELL_SIZE * 0.5, + height: CELL_SIZE * 0.5, fill: "white"})), + }, { + id: "corridor_3e", + name: "Three-way corridor 2", + bg: null, + inner_svg: + h(preact.Fragment, {}, + h("rect", { + x: CELL_SIZE / 4, y: 0, width: CELL_SIZE / 2, height: CELL_SIZE, + fill: "white"}), + h("rect", { + y: CELL_SIZE / 4, x: CELL_SIZE * 0.5, height: CELL_SIZE / 2, + width: CELL_SIZE * 0.5, fill: "white"})) + }, { + id: "corridor_3s", + name: "Three-way corridor 3", + bg: null, + inner_svg: + h(preact.Fragment, {}, + h("rect", { + y: CELL_SIZE / 4, x: 0, height: CELL_SIZE / 2, width: CELL_SIZE, + fill: "white"}), + h("rect", { + x: CELL_SIZE / 4, y: CELL_SIZE * 0.5, width: CELL_SIZE * 0.5, + height: CELL_SIZE * 0.5, fill: "white"})), + }, { + id: "corridor_3e", + name: "Three-way corridor 4", + bg: null, + inner_svg: + h(preact.Fragment, {}, + h("rect", { + x: CELL_SIZE / 4, y: 0, width: CELL_SIZE / 2, height: CELL_SIZE, + fill: "white"}), + h("rect", { + y: CELL_SIZE / 4, x: 0, height: CELL_SIZE / 2, + width: CELL_SIZE * 0.5, fill: "white"})) + }, { + id: "stair_up", + name: "Stair up", + inner_svg: + h(preact.Fragment, {}, + h("polygon", { + points: `5, ${CELL_SIZE} \ +5, ${5 + (CELL_SIZE - 5) / 3 * 2} \ +${5 + (CELL_SIZE - 5) / 3}, ${5 + (CELL_SIZE - 5) / 3 * 2} \ +${5 + (CELL_SIZE - 5) / 3}, ${5 + (CELL_SIZE - 5) / 3} \ +${5 + (CELL_SIZE - 5) / 3 * 2}, ${5 + (CELL_SIZE - 5) / 3} \ +${5 + (CELL_SIZE - 5) / 3 * 2}, 5 \ +${CELL_SIZE}, 5 \ +${CELL_SIZE}, ${CELL_SIZE}`, + fill: "black", "stroke-width": 0}), + h("line", {x1: 3, y1: CELL_SIZE - 15, x2: CELL_SIZE - 15, y2: 3, + stroke: "black", "stroke-width": 2}), + h("polyline", {points: `${CELL_SIZE - 15 - 6}, 3 \ +${CELL_SIZE - 15}, 3 \ +${CELL_SIZE - 15}, ${3 + 6}`, + stroke: "black", "stroke-width": 2})), + + }, { + id: "stair_down", + name: "Stair down", + inner_svg: + h(preact.Fragment, {}, + h("polygon", { + points: `5, ${CELL_SIZE} \ +5, ${5 + (CELL_SIZE - 5) / 3 * 2} \ +${5 + (CELL_SIZE - 5) / 3}, ${5 + (CELL_SIZE - 5) / 3 * 2} \ +${5 + (CELL_SIZE - 5) / 3}, ${5 + (CELL_SIZE - 5) / 3} \ +${5 + (CELL_SIZE - 5) / 3 * 2}, ${5 + (CELL_SIZE - 5) / 3} \ +${5 + (CELL_SIZE - 5) / 3 * 2}, 5 \ +${CELL_SIZE}, 5 \ +${CELL_SIZE}, ${CELL_SIZE}`, + fill: "black", "stroke-width": 0}), + h("line", {x1: 3, y1: CELL_SIZE - 15, x2: CELL_SIZE - 15, y2: 3, + stroke: "black", "stroke-width": 2}), + h("polyline", {points: `3, ${CELL_SIZE - 15 - 6} \ +3, ${CELL_SIZE - 15} \ +${3 + 6}, ${CELL_SIZE - 15}`, + stroke: "black", "stroke-width": 2})), + + }, { + id: "tech", + name: "Technology room", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 32, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "#c0c0c0", }, + "T"), + }, { + id: "industry", + name: "Industrial room", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 32, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "#c0c0c0", }, + "I"), + }, { + id: "biology", + name: "Biological room", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 32, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "#c0c0c0", }, + "B"), + }, { + id: "appearance", + name: "Appearance modifier", + inner_svg: h("g", {"fill": "black", "stroke-width": 0, + "transform": "translate(2.921 1.0547)"}, + h("path", {d: "m28.151 27.442 4e-3 -5e-3c-2.0135-2.2928-4.2222-1.0005-6.0958-0.27575-1.651 0.721-3.213 1.402-4.92 0.749-0.871-0.33-1.423-0.809-1.645-1.419-0.184-0.502-0.135-1.045-0.028-1.488l1.228 0.22c0.619 0.109 1.218-0.307 1.326-0.925l1.508-8.447c3.688-0.714 6.474-3.955 6.474-7.851 0-4.419-3.582-8-8-8-2.524 0-4.772 1.173-6.239 3h-7.763v9h7.079c0.565 0.977 1.34 1.813 2.25 2.474l-1.556 8.71c-0.11 0.618 0.306 1.216 0.925 1.326l1.081 0.191c-0.15 0.686-0.201 1.527 0.099 2.362 0.394 1.104 1.287 1.931 2.647 2.451 2.365 0.899 4.412 6e-3 6.218-0.78 1.475-0.6585 2.9852-1.5128 4.1748-0.11225l6e-3 -7e-3c0.15 0.136 0.35 0.218 0.566 0.218 0.473 0 0.854-0.382 0.854-0.852 0-0.203-0.072-0.391-0.193-0.539zm-10.151-23.442c2.206 0 4 1.794 4 4 0 2.205-1.794 4-4 4s-4-1.795-4-4c0-2.206 1.794-4 4-4z"}), + h("circle", {cx: 18, cy: 8, r: 2}), + h("path", {d: "m 0,4.001 v 6.997 C 0,11.552 0.448,12 1.001,12 H 3 V 3 H 1.001 C 0.448,3 0,3.448 0,4.001 Z"})), + }, { + id: "construction", + name: "Construction specialist’s room", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 32, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "black",}, + "C"), + }, { + id: "science", + name: "Scientist’s room", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 32, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "black",}, + "S"), + }, { + id: "agricultural", + name: "Agricultural specialist’s room", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 32, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "black",}, + "A"), + }, { + id: "exocrafter", + name: "Exocraft specialist’s room", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 32, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "black",}, + "E"), + }, { + id: "trade", + name: "Galaxtic trade", + inner_svg: h("text", {x: CELL_SIZE * 0.5, y: CELL_SIZE * 0.5, dy: 3, + "font-family": "monospace", "font-weight": "bold", + "font-size": 28, "text-anchor": "middle", + "dominant-baseline": "middle", fill: "black",}, + "$"), }, { id: "teleporter", - name: "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", @@ -14,7 +233,7 @@ const TILES = [ }), }, { id: "fleet_command", - name: "fleet command", + name: "Fleet command", inner_svg: h("polyline", { "points": `3, ${CELL_SIZE} \ 3, ${CELL_SIZE - 15} \ @@ -28,7 +247,7 @@ ${CELL_SIZE - 3}, ${CELL_SIZE}`, }), }, { id: "scanner", - name: "scanner", + name: "Scanner", inner_svg: h(preact.Fragment, {}, h("circle", {"cx": CELL_SIZE * 0.5, "cy": CELL_SIZE * 0.5, @@ -55,7 +274,7 @@ ${CELL_SIZE - 3}, ${CELL_SIZE}`, ), }, { id: "extractor", - name: "stellar extractor", + name: "Stellar extractor", inner_svg: h(preact.Fragment, {}, h("circle", {"cx": CELL_SIZE * 0.5, "cy": 21, @@ -72,7 +291,7 @@ ${CELL_SIZE * 0.5 + 4}, 20`, ), }, { id: "storage", - name: "storage", + name: "Storage", inner_svg: h(preact.Fragment, {}, h("rect", {"x": 4, "y": 4, "width": CELL_SIZE - 8, @@ -85,10 +304,44 @@ ${CELL_SIZE * 0.5 + 4}, 20`, ), }, { id: "plant", - name: "double cultivation chamber", + name: "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}), - } + }, { + id: "refiner", + name: "Refiner", + inner_svg: + h(preact.Fragment, {}, + h("polyline", { + points: `5, 5 \ +${CELL_SIZE * 0.5}, 5 \ +${CELL_SIZE * 0.5}, ${CELL_SIZE - 5} \ +5, ${CELL_SIZE - 5}`, fill: "transparent", stroke: "black", "stroke-width": 2}), + h("line", {x1: 5, y1: CELL_SIZE * 0.5, x2: CELL_SIZE - 5, + y2: CELL_SIZE * 0.5, stroke: "black", "stroke-width": 2}), + h("circle", {cx: 5, cy: CELL_SIZE * 0.5, r: 3, fill: "black", + "stroke-width": 0}), + h("circle", {cx: CELL_SIZE - 5, cy: CELL_SIZE * 0.5, r: 3, + fill: "black", "stroke-width": 0}), + h("circle", {cx: 5, cy: 5, r: 3, fill: "black", "stroke-width": 0}), + h("circle", {cx: 5, cy: CELL_SIZE - 5, r: 3, fill: "black", + "stroke-width": 0}), + ), + }, { + id: "nutrition", + name: "Nutrition", + inner_svg: + h("path", { + d: "M 11 10 C 11.2727 7.45014 13.3891 5.34782 16 5.34782 C 18.6108 5.30432 20.7272 7.40664 20.7272 10 L 21.9091 10 C 24.5199 10.0435 26.6363 12.1457 26.6363 14.7392 C 26.6363 16.8978 24.5199 19 21.9091 19 L 21 19 L 21 23 L 11 23 L 11 19 L 10.0909 19 C 7.48012 19.4347 5.36364 17.3325 5.36364 14.7392 C 5.36364 12.1457 7.48012 10.0435 10.0909 10.0435 Z M 9.29722 7.73927 C 10.2581 4.98084 12.8962 3 16 3 C 19.1037 3 21.7419 4.98084 22.7028 7.73929 C 26.2454 8.1312 29 11.1157 29 14.7392 C 28.9091 18.229 26.3537 21.1263 23 21.6852 L 23 28.826 L 21.9091 30 L 10.0909 30 L 9 28.826 L 9 21.6852 C 5.55544 21.1263 3 18.229 3 14.7392 C 3 11.1157 5.7546 8.1312 9.29722 7.73927 Z M 11 27.6521 L 11 25 L 21 25 L 21 27.6521 Z", + fill: "black", "stroke-width": 0, "fill-rule": "evenodd"}), + }, { + id: "exocraft", + name: "Exocraft materialiser", + inner_svg: h("path", {d: "m 11.71,23.3 h 9.95 m -9.95,0 c 0,1.37 -1.11,2.49 -2.49,2.49 -1.37,0 -2.49,-1.11 -2.49,-2.49 m 4.98,0 c 0,-1.37 -1.11,-2.49 -2.49,-2.49 -1.37,0 -2.49,1.11 -2.49,2.49 m 14.93,0 c 0,1.37 1.11,2.49 2.49,2.49 1.37,0 2.49,-1.11 2.49,-2.49 m -4.98,0 c 0,-1.37 1.11,-2.49 2.49,-2.49 1.37,0 2.49,1.11 2.49,2.49 M 14.2,8.37 v 7.47 m -7.47,0 0.41,-2.47 C 7.44,11.59 7.59,10.7 8.03,10.04 8.42,9.45 8.97,8.98 9.61,8.7 10.34,8.37 11.24,8.37 13.04,8.37 h 4.19 c 1.17,0 1.75,0 2.28,0.16 0.47,0.14 0.91,0.38 1.29,0.69 0.43,0.35 0.75,0.84 1.4,1.81 l 3.2,4.81 M 6.74,23.3 H 6.24 c -0.7,0 -1.05,0 -1.31,-0.14 C 4.69,23.05 4.5,22.86 4.38,22.62 4.25,22.36 4.25,22.01 4.25,21.31 v -1.49 c 0,-1.39 0,-2.09 0.27,-2.62 0.24,-0.47 0.62,-0.85 1.09,-1.09 0.53,-0.27 1.23,-0.27 2.62,-0.27 h 14.93 c 0.92,0 1.39,0 1.77,0.06 2.13,0.34 3.8,2.01 4.14,4.14 0.06,0.39 0.06,0.85 0.06,1.77 0,0.23 0,0.35 -0.02,0.44 -0.08,0.53 -0.5,0.95 -1.03,1.03 -0.1,0.02 -0.21,0.02 -0.44,0.02 H 26.64", + "stroke": "black", + "fill": "transparent", "stroke-width": 2.48853, + }), + }, ]; const TILE_MAP = Object.fromEntries(TILES.slice(1).map(t => [t.id, t])); diff --git a/styles.css b/styles.css index 8279e75..2c02554 100644 --- a/styles.css +++ b/styles.css @@ -215,19 +215,17 @@ hr border-bottom: solid var(--color-border-light-1) 1px; } -.ButtonRow +.ButtonRow, .ButtonRowLeft { display: flex; - justify-content: right; gap: 10px; margin: 10px 0; align-items: baseline; } -.ButtonRowLeft +.ButtonRow { - text-align: Left; - margin-top: 10px; + justify-content: right; } .Toolbar -- cgit v1.2.3-70-g09d2