added examples, begun work on saves

.idea/workspace.xml

@@ -26,34 +26,14 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="70635ef7-86ab-4681-b98d-dc8e4999995b" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/public/worker.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/solve.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/stores/DimStore.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/stores/PolycubeStore.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/ui/CubeInputSet.svelte" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/ui/ExamplesList.svelte" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/ui/InputParameters.svelte" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/ui/List.svelte" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/ui/SolveButton.svelte" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/ui/Tabs.svelte" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/utils.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/favicon.png" beforeDir="false" afterPath="$PROJECT_DIR$/public/favicon.png" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/desktop/main.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/desktop/main.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/desktop/preload.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/desktop/preload.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/main.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/store.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/store.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ui/App.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/App.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ui/CubeInputSet.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/CubeInputSet.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ui/CubeInput.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/CubeInput.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ui/ExamplesList.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/ExamplesList.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ui/IncDecNum.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/IncDecNum.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ui/List.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/List.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ui/Interactor.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/Stage.svelte" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/ui/Sidebar.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/Sidebar.svelte" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/ui/SolutionList.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/SolutionList.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ui/SolutionViewer.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/SolutionViewer.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ui/Tabs.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/Tabs.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ui/threedee/GeometryManager.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/threedee/GeometryManager.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ui/threedee/PolycubeScene.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/ui/threedee/PolycubeScene.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -175,7 +155,7 @@
       <workItem from="1625330866437" duration="4956000" />
       <workItem from="1625389803555" duration="21540000" />
       <workItem from="1625471453862" duration="708000" />
-      <workItem from="1625489120282" duration="14952000" />
+      <workItem from="1625489120282" duration="24129000" />
     </task>
     <servers />
   </component>
@@ -238,10 +218,11 @@
       <screen x="0" y="27" width="1920" height="1053" />
     </state>
     <state x="696" y="393" width="518" height="301" key="ANALYSIS_DLG_com.intellij.analysis.BaseAnalysisAction$1/1920.0.1920.1080/0.27.1920.1053@0.27.1920.1053" timestamp="1624963157966" />
-    <state x="92" y="69" width="1720" height="880" key="DiffContextDialog" timestamp="1624822125389">
+    <state x="2012" y="43" width="1720" height="903" key="DiffContextDialog" timestamp="1625505778555">
-      <screen x="0" y="27" width="1920" height="1053" />
+      <screen x="1920" y="0" width="1920" height="1080" />
     </state>
     <state x="92" y="69" width="1720" height="880" key="DiffContextDialog/1920.0.1920.1080/0.27.1920.1053@0.27.1920.1053" timestamp="1624822125389" />
+    <state x="2012" y="43" width="1720" height="903" key="DiffContextDialog/1920.0.1920.1080/0.27.1920.1053@1920.0.1920.1080" timestamp="1625505778555" />
     <state x="743" y="301" width="716" height="623" key="FileChooserDialogImpl" timestamp="1621932819206">
       <screen x="0" y="27" width="1920" height="1053" />
     </state>
@@ -254,20 +235,21 @@
       <screen x="0" y="27" width="1920" height="1053" />
     </state>
     <state x="741" y="455" width="438" height="177" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/1920.0.1920.1080/0.27.1920.1053@0.27.1920.1053" timestamp="1621773490794" />
-    <state x="651" y="279" width="618" height="522" key="find.popup" timestamp="1623164695220">
+    <state x="2571" y="258" width="618" height="536" key="find.popup" timestamp="1625509865195">
-      <screen x="0" y="27" width="1920" height="1053" />
+      <screen x="1920" y="0" width="1920" height="1080" />
     </state>
     <state x="651" y="279" width="618" height="522" key="find.popup/1920.0.1920.1080/0.27.1920.1053@0.27.1920.1053" timestamp="1623164695220" />
+    <state x="2571" y="258" width="618" height="536" key="find.popup/1920.0.1920.1080/0.27.1920.1053@1920.0.1920.1080" timestamp="1625509865195" />
     <state x="834" y="395" width="250" height="278" key="jetbrains.javascript.buildTools.run-task-popup" timestamp="1623671403065">
       <screen x="0" y="27" width="1920" height="1053" />
     </state>
     <state x="834" y="395" width="250" height="278" key="jetbrains.javascript.buildTools.run-task-popup/1920.0.1920.1080/0.27.1920.1053@0.27.1920.1053" timestamp="1623671403065" />
-    <state x="2544" y="224" key="run.anything.popup" timestamp="1625494559570">
+    <state x="2544" y="224" key="run.anything.popup" timestamp="1625515025685">
       <screen x="1920" y="0" width="1920" height="1080" />
     </state>
     <state x="1248" y="245" key="run.anything.popup/0.27.3840.1053@0.27.3840.1053" timestamp="1625305747628" />
     <state x="624" y="245" key="run.anything.popup/1920.0.1920.1080/0.27.1920.1053@0.27.1920.1053" timestamp="1625390874883" />
-    <state x="2544" y="224" key="run.anything.popup/1920.0.1920.1080/0.27.1920.1053@1920.0.1920.1080" timestamp="1625494559570" />
+    <state x="2544" y="224" key="run.anything.popup/1920.0.1920.1080/0.27.1920.1053@1920.0.1920.1080" timestamp="1625515025685" />
     <state x="755" y="405" width="400" height="284" key="scopes" timestamp="1621932851405">
       <screen x="0" y="27" width="1920" height="1053" />
     </state>

src/store.ts

@@ -93,10 +93,10 @@ export const examples = [
         dimY: 3,
         dimZ: 3,
         cubes: [
-            {space: 30n, color: "#ff0000"},
+            {space: 58n, color: "#ff0000"},
             {space: 29712n, color: "#ffff00"},
             {space: 29216n, color: "#00ff00"},
-            {space: 15392n, color: "#00ffff"},
+            {space: 30n, color: "#00ffff"},
             {space: 15364n, color: "#0000ff"},
             {space: 536871032n, color: "#ff00ff"},
         ],
@@ -114,4 +114,17 @@ export const examples = [
             {space: 120n, color: "#0000ff"},
         ],
     },
-];
+].concat(deserealiseSaves());
+
+function deserealiseSaves() {
+    return localStorage.getItem("saves")?.split("@").map(save => JSON.parse(save)) ?? [];
+}
+
+export function serialiseCurrentInput() {
+    return {
+        dimX: somaDimX.currentVal(),
+        dimY: somaDimY.currentVal(),
+        dimZ: somaDimZ.currentVal(),
+        cubes: polycubes.currentVal().map(cube => ({space: cube.getRaw().toString(), color: cube.getColor()})),
+    };
+}

src/ui/CubeInputSet.svelte

@@ -1,21 +1,9 @@
 <script lang="ts">
     import CubeInput from "./CubeInput.svelte";
-    import {polycubes, somaDimX, somaDimY, somaDimZ} from "../store";
+    import {polycubes} from "../store";
 
     export let numCubes;
     $: numCubes = $polycubes.length;
-
-    window.addEventListener("keypress", () => {
-        for (const cube of $polycubes) {
-            console.log({
-                name: "",
-                dimX: $somaDimX,
-                dimY: $somaDimY,
-                dimZ: $somaDimZ,
-                cubes: $polycubes.map(cube => ({space: cube.getRaw(), color: cube.getColor()})),
-            });
-        }
-    });
 </script>
 
 <div class="container">

src/ui/ExamplesList.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
     import List from "./List.svelte";
-    import {polycubes, examples} from "../store";
+    import {polycubes, examples, serialiseCurrentInput} from "../store";
     import VoxelSpaceBigInt from "../VoxelSpaceBigInt";
 
+    const placeholder = "Give your puzzle a name";
+    let untouchedInput = true;
+    let currentName = placeholder;
     let lastClickedExample = 0;
 
     function hydrateExample(exNo: number) {
@@ -16,6 +19,37 @@
         })));
         lastClickedExample = exNo;
     }
+
+    function onInput(e: InputEvent) {
+        currentName = (e.target as HTMLInputElement).value;
+    }
+
+    function onFocusText(e: FocusEvent) {
+        if (untouchedInput) {
+            currentName = "";
+            untouchedInput = false;
+        }
+    }
+
+    function onBlurText(e: FocusEvent) {
+        if (currentName === "") {
+            currentName = placeholder;
+            untouchedInput = true;
+        }
+    }
+
+    function save() {
+        const save = serialiseCurrentInput();
+        save["name"] = currentName;
+        const saveString = JSON.stringify(save);
+        let oldSaves = window.localStorage.getItem("saves");
+        if (oldSaves !== null) {
+            oldSaves += "@";
+        } else {
+            oldSaves = "";
+        }
+        window.localStorage.setItem("saves", oldSaves + saveString);
+    }
 </script>
 
 <div class="container">
@@ -26,10 +60,28 @@
         onClick={(i) => hydrateExample(i)}
     />
 </div>
+<div class="flex">
+    <button on:click={save}>Save as...</button>
+    <input
+        class:untouchedInput
+        value="{currentName}"
+        on:focus={onFocusText}
+        on:input={onInput}
+        on:blur={onBlurText}
+        type="text"/>
+</div>
 
 <style>
+    .untouchedInput {
+        color: grey;
+    }
+    button {
+        white-space: nowrap;
+    }
+    .flex {
+        display: flex;
+    }
     .container {
-        max-height: 10em;
+        height: 10em;
-        overflow-x: hidden;
     }
 </style>

src/ui/List.svelte

@@ -3,9 +3,11 @@
     export let activeItem: number = 0;
     export let items: string[] = [];
     export let onClick = (itemNo: number) => { activeItem = itemNo };
+    export let maxHeight: string = "auto";
 </script>
 
-<ul>
+<div class="container">
+    <ul>
         {#if items.length === 0}
             <li>{defaultText}</li>
         {/if}
@@ -14,7 +16,8 @@
                 {item}
             </li>
         {/each}
-</ul>
+    </ul>
+</div>
 
 <style>
     li:hover:not(.active) {
@@ -28,13 +31,32 @@
         line-height: 2em;
     }
     ul {
-        width: 100%;
+        position: absolute;
-        overflow-y: scroll;
+        left: 0;
-        flex: 1;
+        top: 0;
         padding: 0.5em;
-        margin: 0;
         text-align: center;
         background-color: #666;
+        margin: 0;
+        height: 100%;
+        width: 100%;
+        overflow-y: scroll;
+    }
+    .container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    .container:before {
+        pointer-events: none;
+        left: 0;
+        top: 0;
+        content: "";
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        position: absolute;
+        box-shadow: inset 0 0 0.5em rgba(0,0,0,0.5);
     }
     .active {
         background-color: #ff3e00;

src/ui/Sidebar.svelte

@@ -10,31 +10,37 @@
 </script>
 
 <div class="container">
-    <h1>Somaesque</h1>
+    <div class="title">
+        <img class="logo" src="../favicon.png"/><h1>Somaesque</h1>
+    </div>
     <div class="widgets">
+        <div>
             <Tabs
                 selectedTab={"Parameters"}
                 tabs={{
                     "Parameters": InputParameters,
                     "Examples": ExamplesList,
                 }}/>
+        </div>
+        <div>
             <SolveButton/>
         </div>
+    </div>
     <h3>Solutions: {$solutions.length}</h3>
+    <div class="solns">
         <SolutionList/>
+    </div>
 </div>
 
 <style>
-    p {
+    .title {
-        margin: 0;
+        display: flex;
-        display: inline-block;
+        align-items: center;
     }
-    input {
+    .logo {
+        margin-right: 1em;
         display: inline-block;
-        background-color: #999999;
+        height: 3em;
-        width: 3em;
-        height: 2em;
-        border-style: none;
     }
     .container {
         display: flex;
@@ -49,7 +55,22 @@
     .widgets {
         width: 100%;
     }
+    .widgets:first-child {
+        margin-top: 0;
+    }
+    .widgets:last-child {
+        margin-bottom: 0;
+    }
+    .widgets > * {
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+    .solns {
+        flex: 1 1 auto;
+        width: 100%;
+    }
     h1 {
+        display: block;
         margin: 0;
         color: #ff3e00;
         font-size: 3em;

src/ui/SolutionList.svelte

@@ -8,9 +8,17 @@
     }
 </script>
 
-<List
+<div class="container">
+    <List
         activeItem={$activeSolution}
         items={$solutions.map((soln, i) => `Solution ${i + 1}`)}
         defaultText="No solutions yet..."
         onClick={(i) => selectSolution(i)}
-/>
+    />
+</div>
+
+<style>
+    .container {
+        height: 100%;
+    }
+</style>

src/ui/Tabs.svelte

@@ -18,8 +18,9 @@
 
 <style>
     .container {
-        background-color: grey;
+        background-color: #666666;
         padding: 1em;
+        border-radius: 0 0 1em 1em;
     }
     .tabs {
         height: 3em;
@@ -39,6 +40,6 @@
         background-color: #999999;
     }
     .tab.selected {
-        background-color: grey;
+        background-color: #666666;
     }
 </style>