added examples, begun work on saves

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;
-        overflow-x: hidden;
+        height: 10em;
     }
 </style>

src/ui/List.svelte

@@ -3,18 +3,21 @@
     export let activeItem: number = 0;
     export let items: string[] = [];
     export let onClick = (itemNo: number) => { activeItem = itemNo };
+    export let maxHeight: string = "auto";
 </script>
 
-<ul>
-    {#if items.length === 0}
-        <li>{defaultText}</li>
-    {/if}
-    {#each items as item, i}
-        <li class:active={activeItem === i} on:click={() => onClick(i)}>
-            {item}
-        </li>
-    {/each}
-</ul>
+<div class="container">
+    <ul>
+        {#if items.length === 0}
+            <li>{defaultText}</li>
+        {/if}
+        {#each items as item, i}
+            <li class:active={activeItem === i} on:click={() => onClick(i)}>
+                {item}
+            </li>
+        {/each}
+    </ul>
+</div>
 
 <style>
     li:hover:not(.active) {
@@ -28,13 +31,32 @@
         line-height: 2em;
     }
     ul {
-        width: 100%;
-        overflow-y: scroll;
-        flex: 1;
+        position: absolute;
+        left: 0;
+        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">
-        <Tabs
-            selectedTab={"Parameters"}
-            tabs={{
-                "Parameters": InputParameters,
-                "Examples": ExamplesList,
-            }}/>
-        <SolveButton/>
+        <div>
+            <Tabs
+                selectedTab={"Parameters"}
+                tabs={{
+                    "Parameters": InputParameters,
+                    "Examples": ExamplesList,
+                }}/>
+        </div>
+        <div>
+            <SolveButton/>
+        </div>
     </div>
     <h3>Solutions: {$solutions.length}</h3>
-    <SolutionList/>
+    <div class="solns">
+        <SolutionList/>
+    </div>
 </div>
 
 <style>
-    p {
-        margin: 0;
-        display: inline-block;
+    .title {
+        display: flex;
+        align-items: center;
     }
-    input {
+    .logo {
+        margin-right: 1em;
         display: inline-block;
-        background-color: #999999;
-        width: 3em;
-        height: 2em;
-        border-style: none;
+        height: 3em;
     }
     .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
-    activeItem={$activeSolution}
-    items={$solutions.map((soln, i) => `Solution ${i + 1}`)}
-    defaultText="No solutions yet..."
-    onClick={(i) => selectSolution(i)}
-/>
+<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>