Support multiple floors. Use 98 style.

1 files changed, 45 insertions, 11 deletions

diff --git a/scripts/main.js b/scripts/main.js
index 7347f37..b8de9e4 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,6 +1,7 @@
 const DEFAULT_APP_STATE = {
-    floor: 1,
-    plan: new Array(GRID_SIZE_X * GRID_SIZE_Y).fill(0),
+    floor: 0,                   // This is 0-based.
+    plan: new Array(FLOOR_COUNT).fill(
+        new Array(GRID_SIZE_X * GRID_SIZE_Y).fill(0)),
     // mouse_state can be “normal”, or “dnd”.
     mouse_state: "normal",
     plan_code: "",
@@ -9,7 +10,9 @@ const DEFAULT_APP_STATE = {
 async function serializePlan(app_state)
 {
     let rest = new Array(GRID_SIZE_X * GRID_SIZE_Y * (FLOOR_COUNT - 1)).fill(0);
-    return compressBytes(Uint8Array.from(app_state.plan.concat(rest)));
+    let concated_plans =
+        app_state.plan.reduce((big, floor_plan) => big.concat(floor_plan), []);
+    return compressBytes(Uint8Array.from(concated_plans));
 }
 
 function genGrid(x_count, y_count, cell_size)
@@ -105,11 +108,21 @@ ${cell_y * (CELL_SIZE + 1) + 1})`}, ASSET_WHITE_BG, TILES[idx].inner_svg);
 
 function PlanView({plan, mouse_state})
 {
+    console.debug("Looking at plan ", plan);
     return h("div", {},
-             h("p", {}, "The plan:"),
              h(PlanGridView, {content: plan, mouse_state: 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"},
+             h("label", {}, "Floor"),
+             h("input", {"id": "InputFloor", "type": "number", "step": 1, "min": 1,
+                         "max": 15, "value": floor,
+                         onchange: e => on_floor_change(e.target.value - 1),},));
+}
+
 function App({initial_state})
 {
     const [state, setState] = preactHooks.useState(initial_state);
@@ -134,7 +147,7 @@ function App({initial_state})
         let asset_index = parseInt(e.target.getAttribute("data-asset-index"));
 
         let new_state = structuredClone(state);
-        new_state.plan[cell_index] = asset_index;
+        new_state.plan[new_state.floor][cell_index] = asset_index;
         new_state.mouse_state = "normal";
         serializePlan(new_state).then((s) => {
             new_state.plan_code = s;
@@ -168,16 +181,27 @@ function App({initial_state})
             encodeURIComponent(svg_str);
     }
 
+    // new_floor is 0-based.
+    function onFloorChange(new_floor)
+    {
+        let new_state = structuredClone(state);
+        new_state.floor = new_floor;
+        setState(new_state);
+    }
+
     return h("div", {},
-             h("h2", {}, `Floor ${state.floor}`),
+             h(FloorSelector, {floor: state.floor + 1,
+                               on_floor_change: onFloorChange}),
              h(AssetsView, {on_drag_begin: onDragAssetBegin,
                             on_drag_end: onDragAssetEnd}),
-             h(PlanView, {plan: state.plan, mouse_state: state.mouse_state}),
-             h("div", {},
-               h("a", {"href": "javascript:void(0);", onclick: onClickSaveImg},
-                 "Open Image!")),
+             h("hr", {}),
+             h(PlanView, {plan: state.plan[state.floor],
+                          mouse_state: state.mouse_state}),
              h("div", {},
                h("textarea", {readonly: true}, state.plan_code)),
+             h("div", {"class": "ButtonRow"},
+               h("button", {onclick: onClickSaveImg, type: "button"},
+                 "Open as Image!")),
             );
 }
 
@@ -198,7 +222,17 @@ else
 {
     decompressBytes(encoded_plan).then(a => {
         let state = structuredClone(DEFAULT_APP_STATE);
-        state.plan = Array.from(a.subarray(0, GRID_SIZE_X * GRID_SIZE_Y));
+        let concated_plan = Array.from(a);
+        console.debug(concated_plan);
+        state.plan = [];
+        for(let i = 0; i < GRID_SIZE_X * GRID_SIZE_Y * FLOOR_COUNT;
+            i += GRID_SIZE_X * GRID_SIZE_Y)
+        {
+            let floor_slice =
+                concated_plan.slice(i, i + GRID_SIZE_X * GRID_SIZE_Y);
+            console.debug(floor_slice);
+            state.plan.push(floor_slice);
+        }
         state.plan_code = encoded_plan;
         render(state);
     });