make presentable to public

index.html

@@ -82,6 +82,46 @@
 <aside id="bottom-menu">
   <span data-resize="bottom-menu"></span>
 </aside>
+<footer>
+  <div>pre-alpha 1.0</div>
+  <div>
+    <a href="https://discord.gg/Eq72HwPqfg">Discord server</a>
+  </div>
+</footer>
+<div class="dialog hidden" data-dialog="welcome">
+  <section>
+    <header>Hi hello!!</header>
+    <main>
+      <p>
+        This project is in pre-alpha, welcome!
+      </p>
+      <p>
+        There are very few working features, it's basically just opening SFR and saving SFR.<br />
+        Expect many features to be non-functional, but still, bug reports are very welcome!
+      </p>
+      <p>
+        Roadmap:
+      </p>
+      <ul>
+        <li>Block and reactor recipe selection</li>
+        <li>Reactor verification and stats</li>
+        <li>Keyboard shortcuts</li>
+        <li>MSR support</li>
+        <li>Turbine support</li>
+        <li>Multi-design save support</li>
+        <li>PBR implementation and support</li>
+        <li>QMD support</li>
+        <li>Online reactor publishing and browsing</li>
+      </ul>
+      <p>
+        If you wanna follow the progress, join the <a href="https://discord.gg/Eq72HwPqfg">Discord server</a>.
+      </p>
+    </main>
+    <footer>
+      <button data-dialog-action="cancel">Close</button>
+    </footer>
+  </section>
+</div>
 <div class="dialog hidden" data-dialog="fileLoad:chooseDesign">
   <section>
     <header>Choose a design to open</header>

scripts/dialogs.js

@@ -2,8 +2,10 @@ import { DomList } from "./dom-list.js";
 import { addEventToElement, setText } from "./dom-utils.js";
 import { awaitEvent, emitEvent, listenTo } from "./events.js";
 import { registerLoadCallback } from "./main.js";
+import { recall, save } from "./storage.js";
 
 registerLoadCallback(() => {
+  welcomeDialog();
   listenTo("fileLoad:chooseDesign", designChoiceDialog);
   listenTo("fileSave:nameDesign", designNameDialog);
 });
@@ -40,6 +42,15 @@ function initializeDialog(dialogName, endEvent, { emptyValue, onDismiss } = {})
   };
 }
 
+function welcomeDialog() {
+  if (recall("hasSeenWelcome", false)) return;
+  initializeDialog("welcome", "welcome:close", {
+    onDismiss: () => {
+      save("hasSeenWelcome", true);
+    }
+  });
+}
+
 function designChoiceDialog(e) {
   const {
     dialog, dismiss

scripts/main.js

@@ -1,10 +1,19 @@
+import "./atlas.js";
 import { loadConfiguration } from "./configuration.js";
-import { addEventToButton, addEventToInput, debounce, getElements } from "./dom-utils.js";
-import { awaitEvent, emitEvent, listenTo } from "./events.js";
-import { loadExampleFile } from "./files.js";
-import { getState, setState, STATE } from "./state.js";
-import "./menu-bar.js";
 import "./dialogs.js";
+import "./dom-list.js";
+import { addEventToButton, addEventToInput, debounce, getElements } from "./dom-utils.js";
+import { emitEvent, listenTo } from "./events.js";
+import "./files.js"
+import "./js-utils.js"
+import "./menu-bar.js";
+import "./ncpf-utils.js";
+import "./planner.js";
+import "./resize-menus.js";
+import "./solver.js";
+import { getState, setState, STATE } from "./state.js";
+import "./storage.js";
+import "./tooltip.js";
 
 let loadCallbacks = [];
 export function registerLoadCallback(cb) {
@@ -76,6 +85,6 @@ window.addEventListener("load", () => {
 
   void loadConfiguration("addons");
 
-  awaitEvent("config:end").then(() => loadExampleFile("tiny reactor"));
+  // awaitEvent("config:end").then(() => loadExampleFile("tiny reactor"));
   // awaitEvent("config:end").then(() => loadExampleFile("multi-reactor"));
 });

scripts/planner.js

@@ -177,6 +177,7 @@ function buildPlanner(textures) {
 function cellHoverEvent(e) {
   if (suppressHover) return;
   if (activeItem === -1) return;
+  if (document.body.dataset.resizing) return;
 
   const cells = document.querySelectorAll("#planner [data-x]");
   cells.forEach(c => {
@@ -210,6 +211,10 @@ function cellClickEvent(e) {
     return;
   }
 
+  if (document.body.dataset.resizing) {
+    return;
+  }
+
   if (e.buttons !== 1 && e.buttons !== 2 && e.type !== "mouseup") {
     return;
   }

scripts/resize-menus.js

@@ -20,6 +20,7 @@ function startResize(e) {
 
 function resize(e) {
   const resizing = document.body.dataset.resizing;
+  const elementBoundingBox = document.getElementById(resizing).getBoundingClientRect();
   let size = 0.25;
   switch (resizing) {
     case "left-menu":
@@ -29,7 +30,7 @@ function resize(e) {
       size = 1 - e.pageX / window.innerWidth;
       break;
     case "bottom-menu":
-      size = 1 - e.pageY / window.innerHeight;
+      size = 1 - (e.pageY + window.innerHeight - elementBoundingBox.bottom) / window.innerHeight;
       break;
   }
   size = Math.max(0.05, Math.min(size, 0.5));

style.css

@@ -53,7 +53,7 @@
 body {
     display: grid;
     grid-template-columns: var(--left-menu-size, 15%) 1fr var(--right-menu-size, 10%);
-    grid-template-rows: min-content 1fr var(--bottom-menu-size, 15%);
+    grid-template-rows: min-content 1fr var(--bottom-menu-size, 15%) min-content;
     height: 100%;
     margin: 0;
 }
@@ -84,6 +84,15 @@ main {
     grid-row: 3;
     border-top: 1px solid var(--menu-border-color)
 }
+body > footer {
+    grid-column: 1 / -1;
+    grid-row: 4;
+    border-top: 1px solid var(--menu-border-color);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 0.25em;
+}
 
 .status-bar {
     border-bottom: 1px solid var(--status-bar-color, #4444);