redo layout to move bottom aside to left

index.html

@@ -27,6 +27,7 @@
     <button data-alt="i" data-button="planner:zoom:+">Zoom in</button>
     <button data-alt="o" data-button="planner:zoom:-">Zoom out</button>
     <button data-alt="c" data-toggle="planner:toggle-casing" data-toggled="false">Show casing</button>
+    <button data-alt="c" data-button="dialogs:welcome">Show welcome</button>
   </div>
 </nav>
 <aside id="left-menu" data-state="planning">
@@ -43,6 +44,9 @@
     </div>
   </section>
 </aside>
+<aside id="bottom-menu" data-resize-max="0.8">
+  <span data-resize="bottom-menu"></span>
+</aside>
 <main>
   <div data-state="initialization">
     Select configuration file:
@@ -79,11 +83,8 @@
 <aside id="right-menu">
   <span data-resize="right-menu"></span>
 </aside>
-<aside id="bottom-menu">
-  <span data-resize="bottom-menu"></span>
-</aside>
 <footer>
-  <div>pre-alpha 1.0</div>
+  <div>pre-alpha 1.1</div>
   <div>
     <a href="https://discord.gg/Eq72HwPqfg">Discord server</a>
   </div>
@@ -103,8 +104,10 @@
         Roadmap:
       </p>
       <ul>
-        <li>Block and reactor recipe selection</li>
+        <li>Block and reactor recipe selection - WIP</li>
+        <li>Reactor tooltips</li>
         <li>Reactor verification and stats</li>
+        <li>Casing improvements</li>
         <li>Keyboard shortcuts</li>
         <li>MSR support</li>
         <li>Turbine support</li>

scripts/dialogs.js

@@ -6,6 +6,7 @@ import { recall, save } from "./storage.js";
 
 registerLoadCallback(() => {
   welcomeDialog();
+  listenTo("dialogs:welcome", () => welcomeDialog(true));
   listenTo("fileLoad:chooseDesign", designChoiceDialog);
   listenTo("fileSave:nameDesign", designNameDialog);
 });
@@ -42,8 +43,11 @@ function initializeDialog(dialogName, endEvent, { emptyValue, onDismiss } = {})
   };
 }
 
-function welcomeDialog() {
+function welcomeDialog(force = false) {
-  if (recall("hasSeenWelcome", false)) return;
+  if (recall("hasSeenWelcome", false) && !force) {
+    return;
+  }
+
   initializeDialog("welcome", "welcome:close", {
     onDismiss: () => {
       save("hasSeenWelcome", true);

scripts/menu-bar.js

@@ -4,7 +4,6 @@ import { registerLoadCallback } from "./main.js";
 let activeMenuBar = null;
 
 registerLoadCallback(() => {
-  console.log("menubar-load");
   document.querySelectorAll(".menu-bar").forEach(menuBar => {
     menuBar.querySelectorAll("button").forEach(button => {
       button.setAttribute("tabindex", "-1");
@@ -72,7 +71,6 @@ registerLoadCallback(() => {
 
 
 function handleGlobalClick() {
-  console.log("Global clicked");
   if (!activeMenuBar) return;
   activeMenuBar.classList.remove("active");
   activeMenuBar.querySelectorAll(".active")

scripts/planner.js

@@ -104,12 +104,12 @@ function buildBlockPicker() {
           item.classList.add("hidden");
         }
         item.appendChild(makeAtlasImage(m.index));
-        item.addEventListener("click", listClickEvent);
+        item.addEventListener("click", blockPickerClickEvent);
         grid.addItem(item);
       });
 }
 
-function listClickEvent(e) {
+function blockPickerClickEvent(e) {
   const items = document.querySelectorAll("#block-picker-list [data-index]");
   if (e.currentTarget.dataset.active !== undefined) {
     items.forEach(i => delete i.dataset.active);

scripts/resize-menus.js

@@ -20,7 +20,10 @@ function startResize(e) {
 
 function resize(e) {
   const resizing = document.body.dataset.resizing;
-  const elementBoundingBox = document.getElementById(resizing).getBoundingClientRect();
+  const element = document.getElementById(resizing);
+  const sizeMin = Number(element.dataset.resizeMin ?? 0.05);
+  const sizeMax = Number(element.dataset.resizeMax ?? 0.5);
+  const elementBoundingBox = element.getBoundingClientRect();
   let size = 0.25;
   switch (resizing) {
     case "left-menu":
@@ -33,7 +36,7 @@ function resize(e) {
       size = 1 - (e.pageY + window.innerHeight - elementBoundingBox.bottom) / window.innerHeight;
       break;
   }
-  size = Math.max(0.05, Math.min(size, 0.5));
+  size = Math.max(sizeMin, Math.min(size, sizeMax));
   document.body.style.setProperty(`--${resizing}-size`, `${size*100}%`);
   save(`${resizing}-size`, `${size*100}%`);
 }

style.css

@@ -67,22 +67,28 @@ body {
 #left-menu {
     grid-column: 1;
     grid-row: 2;
-    border-right: 1px solid var(--menu-border-color)
+    border-right: 1px solid var(--menu-border-color);
+}
+#bottom-menu {
+    grid-column: 1;
+    grid-row: 3;
+    border-top: 1px solid var(--menu-border-color);
+    border-right: 1px solid var(--menu-border-color);
 }
 main {
     grid-column: 2;
-    grid-row: 2;
+    grid-row: 2 / 4;
     overflow: auto;
 }
 #right-menu {
     grid-column: 3;
-    grid-row: 2;
+    grid-row: 2 / 4;
-    border-left: 1px solid var(--menu-border-color)
+    border-left: 1px solid var(--menu-border-color);
 }
 #bottom-menu {
-    grid-column: 1 / -1;
+    grid-column: 1;
     grid-row: 3;
-    border-top: 1px solid var(--menu-border-color)
+    border-top: 1px solid var(--menu-border-color);
 }
 body > footer {
     grid-column: 1 / -1;
@@ -113,7 +119,7 @@ body > footer {
     z-index: 1;
     content: "";
 }
-#left-menu [data-resize], #right-menu [data-resize] {
+#left-menu > [data-resize], #right-menu > [data-resize] {
     border-left: 1px solid var(--resize-handle-color);
     border-right: 1px solid var(--resize-handle-color);
     margin: auto;
@@ -122,15 +128,15 @@ body > footer {
     width: calc(var(--resize-handle-width) * 2 - 1px);
     height: 1em;
 }
-#left-menu [data-resize] {
+#left-menu > [data-resize] {
     cursor: w-resize;
     right: calc(var(--resize-handle-width) * -1);
 }
-#right-menu [data-resize] {
+#right-menu > [data-resize] {
     cursor: e-resize;
     left: calc(var(--resize-handle-width) * -1);
 }
-#bottom-menu [data-resize] {
+#bottom-menu > [data-resize] {
     border-top: 1px solid var(--resize-handle-color);
     border-bottom: 1px solid var(--resize-handle-color);
     cursor: s-resize;