diff options
Diffstat (limited to 'scripts/main.js')
-rw-r--r-- | scripts/main.js | 46 |
1 files changed, 41 insertions, 5 deletions
diff --git a/scripts/main.js b/scripts/main.js index 01301a1..7347f37 100644 --- a/scripts/main.js +++ b/scripts/main.js | |||
@@ -3,8 +3,15 @@ const DEFAULT_APP_STATE = { | |||
3 | plan: new Array(GRID_SIZE_X * GRID_SIZE_Y).fill(0), | 3 | plan: new Array(GRID_SIZE_X * GRID_SIZE_Y).fill(0), |
4 | // mouse_state can be “normal”, or “dnd”. | 4 | // mouse_state can be “normal”, or “dnd”. |
5 | mouse_state: "normal", | 5 | mouse_state: "normal", |
6 | plan_code: "", | ||
6 | }; | 7 | }; |
7 | 8 | ||
9 | async function serializePlan(app_state) | ||
10 | { | ||
11 | let rest = new Array(GRID_SIZE_X * GRID_SIZE_Y * (FLOOR_COUNT - 1)).fill(0); | ||
12 | return compressBytes(Uint8Array.from(app_state.plan.concat(rest))); | ||
13 | } | ||
14 | |||
8 | function genGrid(x_count, y_count, cell_size) | 15 | function genGrid(x_count, y_count, cell_size) |
9 | { | 16 | { |
10 | let lines = []; | 17 | let lines = []; |
@@ -62,7 +69,6 @@ function PlanGridView({content, mouse_state}) | |||
62 | } | 69 | } |
63 | 70 | ||
64 | let hilight_box = null; | 71 | let hilight_box = null; |
65 | console.debug(mouse_coord); | ||
66 | 72 | ||
67 | if(mouse_coord !== null && mouse_state != "dnd") | 73 | if(mouse_coord !== null && mouse_state != "dnd") |
68 | { | 74 | { |
@@ -130,7 +136,13 @@ function App({initial_state}) | |||
130 | let new_state = structuredClone(state); | 136 | let new_state = structuredClone(state); |
131 | new_state.plan[cell_index] = asset_index; | 137 | new_state.plan[cell_index] = asset_index; |
132 | new_state.mouse_state = "normal"; | 138 | new_state.mouse_state = "normal"; |
133 | setState(new_state); | 139 | serializePlan(new_state).then((s) => { |
140 | new_state.plan_code = s; | ||
141 | setState(new_state); | ||
142 | const url = new URL(location); | ||
143 | url.searchParams.set("plan", s); | ||
144 | window.history.pushState({}, "", url); | ||
145 | }); | ||
134 | } | 146 | } |
135 | 147 | ||
136 | function onClickSaveImg() | 148 | function onClickSaveImg() |
@@ -157,13 +169,37 @@ function App({initial_state}) | |||
157 | } | 169 | } |
158 | 170 | ||
159 | return h("div", {}, | 171 | return h("div", {}, |
172 | h("h2", {}, `Floor ${state.floor}`), | ||
160 | h(AssetsView, {on_drag_begin: onDragAssetBegin, | 173 | h(AssetsView, {on_drag_begin: onDragAssetBegin, |
161 | on_drag_end: onDragAssetEnd}), | 174 | on_drag_end: onDragAssetEnd}), |
162 | h(PlanView, {plan: state.plan, mouse_state: state.mouse_state}), | 175 | h(PlanView, {plan: state.plan, mouse_state: state.mouse_state}), |
163 | h("div", {}, | 176 | h("div", {}, |
164 | h("a", {"href": "javascript:void(0);", onclick: onClickSaveImg}, | 177 | h("a", {"href": "javascript:void(0);", onclick: onClickSaveImg}, |
165 | "Open Image!"))); | 178 | "Open Image!")), |
179 | h("div", {}, | ||
180 | h("textarea", {readonly: true}, state.plan_code)), | ||
181 | ); | ||
166 | } | 182 | } |
167 | 183 | ||
168 | preact.render(h(App, {initial_state: DEFAULT_APP_STATE}), | 184 | function render(app_state) |
169 | document.getElementById("Plan")); | 185 | { |
186 | preact.render(h(App, {initial_state: app_state}), | ||
187 | document.getElementById("Plan")); | ||
188 | } | ||
189 | |||
190 | const paramsString = window.location.search; | ||
191 | const searchParams = new URLSearchParams(paramsString); | ||
192 | const encoded_plan = searchParams.get("plan"); | ||
193 | if(encoded_plan === null) | ||
194 | { | ||
195 | render(DEFAULT_APP_STATE); | ||
196 | } | ||
197 | else | ||
198 | { | ||
199 | decompressBytes(encoded_plan).then(a => { | ||
200 | let state = structuredClone(DEFAULT_APP_STATE); | ||
201 | state.plan = Array.from(a.subarray(0, GRID_SIZE_X * GRID_SIZE_Y)); | ||
202 | state.plan_code = encoded_plan; | ||
203 | render(state); | ||
204 | }); | ||
205 | } | ||