From 2e6c5f6215eb017e417130a58c7abb7c2d93486a Mon Sep 17 00:00:00 2001
From: Ben Parsons <9parsonsb@gmail.com>
Date: Mon, 3 Jul 2023 20:46:03 +1000
Subject: [PATCH] Add types to components and remove unused components

---
 src/components/Barcode.svelte      |  94 -------------
 src/components/Link.svelte         |  36 -----
 src/components/Modal.svelte        | 137 +++++++++++--------
 src/components/Sidebar.svelte      |  42 +++---
 src/components/SortableList.svelte | 142 ++++++++++----------
 src/components/Thumbnail.svelte    |  34 ++---
 src/routes/__error.svelte          | 208 +++++++++++------------------
 7 files changed, 270 insertions(+), 423 deletions(-)
 delete mode 100644 src/components/Barcode.svelte
 delete mode 100644 src/components/Link.svelte

diff --git a/src/components/Barcode.svelte b/src/components/Barcode.svelte
deleted file mode 100644
index 552f5ea..0000000
--- a/src/components/Barcode.svelte
+++ /dev/null
@@ -1,94 +0,0 @@
-<script>
-    import {onMount, tick, beforeUpdate} from 'svelte' ;
-
-    let barcodeReady = false;
-    let mounted = false;
-
-    onMount(() => {
-        // The payment-form is ready.
-        mounted = true;
-        //if (barcodeReady) {
-        loadBarcodeElements();
-        //}
-    });
-
-    //export const 
-
-    const target = (bc) => bc.length < 9 ? 7 : 12;
-
-    let error;
-
-    $: format = barcode.length < 9 ? "EAN8" : "EAN13";
-
-
-    function padBarcode(bc, length, pad = 0) {
-        return bc;
-        while (bc.length < length) {
-            bc = pad + bc.toString();
-        }
-
-        return bc;
-    }
-
-    const loadBarcodeElements = () => {
-        clearCanvas(document.getElementById("barcode").getContext("2d"));
-        error = null;
-        if (barcode != null && barcode.length > 0) {
-            //bwipjs.toCanvas("barcode", {bcid:format, text: padBarcode(barcode, target(barcode))});
-            try {
-
-                const x = JsBarcode("#barcode", padBarcode(barcode, target(barcode)), {format: format});
-                console.log(x);
-            } catch {
-                error = "Invalid barcode"
-            }
-        }
-    };
-
-    export let barcode = "";
-
-    beforeUpdate(async () => {
-        if (mounted) {
-            loadBarcodeElements();
-        }
-        await tick();
-    });
-
-    export const appendCheckDigit = () => {
-        if (barcode.length === 7 || barcode.length === 12) {
-            const check = eanCheckDigit(barcode);
-            //if (barcode[barcode.length-1] !== check)
-            //{
-            barcode += check;
-            //}
-        }
-    };
-
-
-    function clearCanvas(context, canvas = context.canvas) {
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        const w = canvas.width;
-        canvas.width = 1;
-        canvas.width = w;
-    }
-
-    // definitely a hack.
-    export const eanCheckDigit = (s) => {
-        let x = JsBarcode("#barcode", s, {format: format});
-
-        //EAN barcodes by default have 5 parts (prefix -> left part -> middle seperator -> right part -> suffix)
-        // we only want left & right part (which contain a text
-        let calculated = "";
-        x._encodings[0].filter(e => e.text !== "").forEach(e => calculated += e.text);
-        console.log(calculated);
-        return calculated[calculated.length - 1];
-    }
-
-</script>
-
-
-<canvas id="barcode" width="50%" height="100%"></canvas>
-{#if error}
-    <p>Error: {error}</p>
-{/if}
-
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
deleted file mode 100644
index 600f18e..0000000
--- a/src/components/Link.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-    import {getContext} from 'svelte';
-    import {writable} from 'svelte/store';
-
-    const navigate = getContext('navigate');
-    const navaid = getContext('navaid');
-
-    const base = navaid && navaid.base || writable('/');
-    const library = navaid && navaid.library || writable(null);
-    let props;
-    let href;
-
-    export let append;
-
-    $: {
-        props = {...$$props};
-        href = props.href;
-        delete props.href;
-        href = ($library && $library.prefix ? $library.prefix : '') + (!append ? $base : '') + href.replace(/^\//, '');
-    }
-
-    const click = () => {
-        navigate(href);
-    }
-</script>
-
-<style>
-    span {
-        text-decoration: none;
-        padding: 1rem 0.5rem;
-        display: block;
-        color: #005de6;
-    }
-</style>
-
-<span {...props} on:click={click}><slot></slot></span>
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 66ca0d7..043c80b 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -1,19 +1,24 @@
-<script>
-    import {setContext as baseSetContext, createEventDispatcher} from 'svelte';
-    import {fade} from 'svelte/transition';
+<script lang="ts">
+    //@ts-nocheck
+    import {
+        setContext as baseSetContext,
+        createEventDispatcher,
+    } from "svelte";
+    import { fade } from "svelte/transition";
 
-    export let key = 'simple-modal';
+    export let key = "simple-modal";
     export let closeButton = true;
     export let closeOnEsc = true;
     export let closeOnOuterClick = true;
     export let transitionBg = fade;
-    export let transitionBgProps = {duration: 250};
+    export let transitionBgProps = { duration: 250 };
     export let transitionWindow = transitionBg;
     export let transitionWindowProps = transitionBgProps;
-    export let styleBg = {top: 0, left: 0};
+    export let styleBg = { top: 0, left: 0 };
     export let styleWindow = {};
     export let styleContent = {};
     export let setContext = baseSetContext;
+    export let show: boolean = false;
 
     let Component = null;
     let props = null;
@@ -24,23 +29,38 @@
     let customStyleWindow = {};
     let customStyleContent = {};
 
-    let Callback = (props) => {
-    };
+    let Callback = (props) => {};
+
+    $: Component,
+        () => {
+            show = !!Component;
+        };
 
     const dispatch = createEventDispatcher();
 
-    const camelCaseToDash = str => str
-        .replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
+    const camelCaseToDash = (str) =>
+        str.replace(/([a-zA-Z])(?=[A-Z])/g, "$1-").toLowerCase();
 
-    const toCssString = (props) => Object.keys(props)
-        .reduce((str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`, '');
+    const toCssString = (props) =>
+        Object.keys(props).reduce(
+            (str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`,
+            ""
+        );
 
     $: cssBg = toCssString(Object.assign({}, styleBg, customStyleBg));
-    $: cssWindow = toCssString(Object.assign({}, styleWindow, customStyleWindow));
-    $: cssContent = toCssString(Object.assign({}, styleContent, customStyleContent));
+    $: cssWindow = toCssString(
+        Object.assign({}, styleWindow, customStyleWindow)
+    );
+    $: cssContent = toCssString(
+        Object.assign({}, styleContent, customStyleContent)
+    );
 
-    const open = (NewComponent, newProps = {}, style = {bg: {}, window: {}, content: {}}, newCallback = () => {
-    }) => {
+    const open = (
+        NewComponent,
+        newProps = {},
+        style = { bg: {}, window: {}, content: {} },
+        newCallback = () => {}
+    ) => {
         Component = NewComponent;
         props = newProps;
         Callback = newCallback;
@@ -58,8 +78,8 @@
         customStyleContent = {};
     };
 
-    const handleKeyup = ({key}) => {
-        if (closeOnEsc && Component && key === 'Escape') {
+    const handleKeyup = ({ key }) => {
+        if (closeOnEsc && Component && key === "Escape") {
             event.preventDefault();
             close();
         }
@@ -67,18 +87,47 @@
 
     const handleOuterClick = (event) => {
         if (
-            closeOnOuterClick && (
-                event.target === background || event.target === wrap
-            )
+            closeOnOuterClick &&
+            (event.target === background || event.target === wrap)
         ) {
             event.preventDefault();
             close();
         }
     };
 
-    setContext(key, {open, close});
+    setContext(key, { open: show, close });
 </script>
 
+<svelte:window on:keyup={handleKeyup} />
+
+<div>
+    {#if Component}
+        <div
+            class="bg"
+            on:click={handleOuterClick}
+            bind:this={background}
+            transition:transitionBg={transitionBgProps}
+            style={cssBg}
+        >
+            <div class="window-wrap" bind:this={wrap}>
+                <div
+                    class="window"
+                    transition:transitionWindow={transitionWindowProps}
+                    style={cssWindow}
+                >
+                    {#if closeButton}
+                        <button on:click={close} class="close" />
+                    {/if}
+                    <div class="content" style={cssContent}>
+                        <Component {...props} {close} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    {/if}
+    <slot />
+</div>
+
 <!--
 
 ** LICENSE **
@@ -165,12 +214,13 @@ https://github.com/flekschas/svelte-simple-moda
         background: white;
         box-shadow: 0 0 0 1px black;
         transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-        background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+            background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
         -webkit-appearance: none;
     }
 
-    .close:before, .close:after {
-        content: '';
+    .close:before,
+    .close:after {
+        content: "";
         display: block;
         box-sizing: border-box;
         position: absolute;
@@ -180,7 +230,7 @@ https://github.com/flekschas/svelte-simple-moda
         background: black;
         transform-origin: center;
         transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
-        background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+            background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
     }
 
     .close:before {
@@ -201,7 +251,8 @@ https://github.com/flekschas/svelte-simple-moda
         background: black;
     }
 
-    .close:hover:before, .close:hover:after {
+    .close:hover:before,
+    .close:hover:after {
         height: 2px;
         background: white;
     }
@@ -215,35 +266,9 @@ https://github.com/flekschas/svelte-simple-moda
         transform: scale(0.9);
     }
 
-    .close:hover, .close:focus, .close:active {
+    .close:hover,
+    .close:focus,
+    .close:active {
         outline: none;
     }
 </style>
-
-<svelte:window on:keyup={handleKeyup}/>
-
-<div>
-    {#if Component}
-        <div
-                class="bg"
-                on:click={handleOuterClick}
-                bind:this={background}
-                transition:transitionBg={transitionBgProps}
-                style={cssBg}>
-            <div class="window-wrap" bind:this={wrap}>
-                <div
-                        class="window"
-                        transition:transitionWindow={transitionWindowProps}
-                        style={cssWindow}>
-                    {#if closeButton}
-                        <button on:click={close} class="close"></button>
-                    {/if}
-                    <div class="content" style={cssContent}>
-                        <Component {...props} {close}/>
-                    </div>
-                </div>
-            </div>
-        </div>
-    {/if}
-    <slot></slot>
-</div>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 24ba48c..12d20d0 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,6 +1,24 @@
+<script lang="ts">
+    import { fly } from "svelte/transition";
+    import Modal from "./Modal.svelte";
+
+    const click = () => {
+        modal_show = true;
+        show = false;
+    };
+
+    function overlay_click(e: MouseEvent) {
+        //@ts-ignore
+        if ("close" in e.target.dataset) show = false;
+    }
+
+    export let show = false;
+    let modal_show = false;
+</script>
+
 {#if show}
     <div class="overlay" data-close on:click={overlay_click}>
-        <nav transition:fly={{x: -250, opacity: 1}}>
+        <nav transition:fly={{ x: -250, opacity: 1 }}>
             <slot>
                 <button on:click={click}>About</button>
             </slot>
@@ -8,25 +26,7 @@
     </div>
 {/if}
 
-<Modal bind:show={modal_show}/>
-
-<script>
-    import {fly} from 'svelte/transition';
-    import Modal from './Modal.svelte';
-
-    const click = () => {
-        modal_show = true;
-        show = false;
-    };
-
-    function overlay_click(e) {
-        if ('close' in e.target.dataset)
-            show = false;
-    }
-
-    export let show = false;
-    let modal_show = false;
-</script>
+<Modal bind:show={modal_show} />
 
 <style>
     .overlay {
@@ -53,4 +53,4 @@
         overflow-y: auto;
         width: 20rem;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/SortableList.svelte b/src/components/SortableList.svelte
index 9579428..27b2e38 100644
--- a/src/components/SortableList.svelte
+++ b/src/components/SortableList.svelte
@@ -1,23 +1,23 @@
-<script>
-
-    import {quintOut} from "svelte/easing";
-    import {crossfade} from "svelte/transition";
-    import {flip} from "svelte/animate";
+<script lang="ts">
+    //@ts-nocheck
+    import { quintOut } from "svelte/easing";
+    import { crossfade } from "svelte/transition";
+    import { flip } from "svelte/animate";
     // FLIP ANIMATION
     const [send, receive] = crossfade({
-        duration: d => Math.sqrt(d * 200),
+        duration: (d) => Math.sqrt(d * 200),
         fallback(node, params) {
             const style = getComputedStyle(node);
             const transform = style.transform === "none" ? "" : style.transform;
             return {
                 duration: 600,
                 easing: quintOut,
-                css: t => `
+                css: (t) => `
 					transform: ${transform} scale(${t});
 					opacity: ${t}
-				`
+				`,
             };
-        }
+        },
     });
     // DRAG AND DROP
     let isOver = false;
@@ -25,56 +25,68 @@
     const getDraggedParent = (node) => {
         return node.dataset && node.dataset.index
             ? node.dataset
-            : getDraggedParent(node.parentNode)
+            : getDraggedParent(node.parentNode);
     };
-    const click = ev => {
+    const click = (ev) => {
         dispatch("slotclick", {
             source: ev.target.parentElement.dataset.index,
-            sourceItem: list[ev.target.parentElement.dataset.index]
+            sourceItem: list[ev.target.parentElement.dataset.index],
         });
     };
-    const start = ev => {
+    const start = (ev) => {
         isDragging = true;
         ev.dataTransfer.setData("source", ev.target.dataset.index);
     };
-    const over = ev => {
+    const over = (ev) => {
         ev.preventDefault();
         let dragged = getDraggedParent(ev.target);
         if (isOver !== dragged.id) isOver = JSON.parse(dragged.id);
     };
-    const leave = ev => {
+    const leave = (ev) => {
         let dragged = getDraggedParent(ev.target);
         if (isOver === dragged.id) isOver = false;
     };
-    const drop = ev => {
+    const drop = (ev) => {
         isOver = false;
         ev.preventDefault();
         let dragged = getDraggedParent(ev.target);
         let from = ev.dataTransfer.getData("source");
         let to = dragged.index;
-        reorder({from, to});
+        reorder({ from, to });
         isDragging = false;
     };
     // DISPATCH REORDER
-    import {createEventDispatcher, onMount, afterUpdate, beforeUpdate, tick} from "svelte";
+    import {
+        createEventDispatcher,
+        onMount,
+        afterUpdate,
+        beforeUpdate,
+        tick,
+    } from "svelte";
 
     const dispatch = createEventDispatcher();
-    const reorder = ({from, to}) => {
+    const reorder = ({ from, to }) => {
         let newList = [...list];
         let temp = newList[from];
         newList[from] = newList[to];
         newList[to] = temp;
         //newList[from] = [newList[to], (newList[to] = newList[from])][0];
-        dispatch("sort", {data: newList, from: from, to: to});
+        dispatch("sort", { data: newList, from: from, to: to });
     };
     // UTILS
-    const getKey = item => (key ? item[key] : item);
+    const getKey = (item) => (key ? item[key] : item);
+
+    type ListItem = {
+        displayTileSize: number;
+        endsGroup: boolean;
+        startsNewGroup: boolean;
+    };
     // PROPS
-    export let list;
+    export let list: ListItem[][];
     export let key;
     export let ulclass;
 
-    export let breakon;
+    export let breakon: string | null = null;
 
     export let breakComponent;
     //    return `<><li class='${breakClass}' style='height:100%; grid-column: span 5;'><div style='width:100%;height:inherit;'></li>`;
@@ -113,16 +125,16 @@
             let carry = 0;
             let elements = Elements();
 
-
             for (let x = 0; x < list.length; x++) {
-
                 if (last != null) {
                     if (list[x][breakon] > last) {
-
                         if (elements.length) {
                             let targetIndex = x + breaks;
 
-                            if (list.length !== elements[0].children.length - breaks) {
+                            if (
+                                list.length !==
+                                elements[0].children.length - breaks
+                            ) {
                                 if (lastCollection)
                                     if (lastCollection.length)
                                         targetIndex += lastCollection.length;
@@ -159,23 +171,49 @@
         updateBreak();
 
         updating = false;
-
     });
 
     const getClass = () => {
         let ret = "";
-        if (key)
-            ret += ` ${key}`;
-        if (ulclass)
-            ret += ` ${ulclass}`;
+        if (key) ret += ` ${key}`;
+        if (ulclass) ret += ` ${ulclass}`;
 
         return ret;
-    }
-
+    };
 </script>
 
-<style>
+{#if list && list.length}
+    <ul class={getClass()}>
+        {#each list as item, index (getKey(item))}
+            <li
+                class:small={item.displayTileSize === 2}
+                class:medium={item.displayTileSize === 3}
+                class:large={item.displayTileSize === 4}
+                class:startsNewGroup={item.startsNewGroup}
+                class:endsGroup={item.endsGroup}
+                data-index={index}
+                data-item={JSON.stringify(item)}
+                data-id={JSON.stringify(getKey(item))}
+                draggable="true"
+                on:dragstart={start}
+                on:dragover={over}
+                on:dragleave={leave}
+                on:drop={drop}
+                on:click={click}
+                in:receive={{ key: getKey(item) }}
+                out:send={{ key: getKey(item) }}
+                animate:flip={{ duration: 300 }}
+                class:over={getKey(item) === isOver}
+            >
+                <slot {item} {index}>
+                    <p>{getKey(item)}</p>
+                </slot>
+            </li>
+        {/each}
+    </ul>
+{/if}
 
+<style>
     ul {
         display: inline-grid;
         list-style: none;
@@ -189,7 +227,7 @@
         transition: border 0.1s linear;
         width: 100%;
         height: 100%;
-        margin: .5%;
+        margin: 0.5%;
     }
 
     .startsNewGroup {
@@ -215,35 +253,3 @@
         border-color: rgba(48, 12, 200, 0.2);
     }
 </style>
-
-{#if list && list.length}
-    <ul class={getClass()}>
-        {#each list as item, index (getKey(item))}
-            <li
-                    class:small={item.displayTileSize === 2}
-                    class:medium={item.displayTileSize === 3}
-                    class:large={item.displayTileSize === 4}
-                    class:startsNewGroup={item.startsNewGroup}
-                    class:endsGroup={item.endsGroup}
-                    data-index={index}
-                    data-item={JSON.stringify(item)}
-                    data-id={JSON.stringify(getKey(item))}
-                    draggable="true"
-                    on:dragstart={start}
-                    on:dragover={over}
-                    on:dragleave={leave}
-                    on:drop={drop}
-                    on:click={click}
-                    in:receive={{ key: getKey(item) }}
-                    out:send={{ key: getKey(item) }}
-                    animate:flip={{ duration: 300 }}
-                    class:over={getKey(item) === isOver}>
-
-                <slot {item} {index}>
-                    <p>{getKey(item)}</p>
-                </slot>
-
-            </li>
-        {/each}
-    </ul>
-{/if}
\ No newline at end of file
diff --git a/src/components/Thumbnail.svelte b/src/components/Thumbnail.svelte
index 8153a4b..ce503d1 100644
--- a/src/components/Thumbnail.svelte
+++ b/src/components/Thumbnail.svelte
@@ -1,11 +1,24 @@
-<script>
-    export let name;
-    export let link;
+<script lang="ts">
+    export let name: string;
+    export let link: string;
     export let img = "https://placehold.it/600x300";
     export let size = { width: 600, height: 300 };
-    export let description;
+    export let description: string;
 </script>
 
+<div class="card">
+    <div class="back">
+        <a href={link}>
+            <img src={img} alt={name} width={size.width} height={size.height} />
+        </a>
+    </div>
+    <div class="description">
+        <h2>{name}</h2>
+        <p>{description}</p>
+    </div>
+</div>
+<br />
+
 <style>
     .card {
         display: flex;
@@ -28,16 +41,3 @@
         }
     }
 </style>
-
-<div class="card">
-    <div class="back">
-        <a href="{link}">
-            <img src={img} alt={name} width={size.width} height={size.height}>
-        </a>
-    </div>
-    <div class="description">
-        <h2>{name}</h2>
-        <p>{description}</p>
-    </div>
-</div>
-<br>
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
index f8a2a33..8a7d7fd 100644
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@@ -1,13 +1,13 @@
-<script>
-    import {onMount} from 'svelte'
-    import Banner from '../components/Banner.svelte'
+<script lang="ts">
+  import { onMount } from "svelte";
+  import Banner from "../components/Banner.svelte";
 
-    export let status;
-    export let error;
+  export let status: string;
+  export let error: Error;
 
-    const dev = process.env.NODE_ENV === 'development';
+  const dev = process.env.NODE_ENV === "development";
 
-    var appa = `             .,-:;//;:=,
+  var appa = `             .,-:;//;:=,
          . :H@@@MM@M#H/.,+%;,
       ,/X+ +M@@M@MM%=,-%HMMM@X/,
      -+@MM; $M@@MH+-,;XMMMM@MMMM@+-
@@ -28,7 +28,7 @@
          ,:+$+-,/H#MMMMMMM@- -,
                =++%%%%+/:-.`;
 
-    var nuke = `             =+$HM####@H%;,
+  var nuke = `             =+$HM####@H%;,
           /H###############M$,
           ,@################+
            .H##############+
@@ -49,7 +49,7 @@ X##############%,      ,+##############X
     .+M###@,                ,@###M+.
        :XH.                  .HX:`;
 
-    var atom = `                 =/;;/-
+  var atom = `                 =/;;/-
                 +:    //
                /;      /;
               -X        H.
@@ -70,7 +70,7 @@ M-       ,=;;;#:,      ,:#;;:=,       ,@
                 //    +;
                  ,////,`;
 
-    var heart = `                          .,---.
+  var heart = `                          .,---.
                         ,/XM#MMMX;,
                       -%##########M%,
                      -@######%  $###@=
@@ -91,7 +91,7 @@ X################,      -$=X#######@:
                   .,/X$;   .::,
                       .,    ..`;
 
-    var fire = `                     -$-
+  var fire = `                     -$-
                     .H##H,
                    +######+
                 .+#########H.
@@ -112,7 +112,7 @@ X################,      -$=X#######@:
 /XHX%:#####MH%=    ,---:;;;;/&&XHM,:###$
 $@#MX %+;-                           .`;
 
-    var tick = `                                     :X-
+  var tick = `                                     :X-
                                   :X###
                                 ;@####@
                               ;M######X
@@ -133,7 +133,7 @@ $@#MX %+;-                           .`;
               +####:
                ,$M-`;
 
-    var bang = `            .+
+  var bang = `            .+
              /M;
               H#@:              ;,
               -###H-          -@/
@@ -154,7 +154,7 @@ $@#MX %+;-                           .`;
                 .#H,               :XH,
                  +                   .;-`;
 
-    var mesa = `           .-;+$XHHHHHHX$+;-.
+  var mesa = `           .-;+$XHHHHHHX$+;-.
         ,;X@@X%/;=----=:/%X@@X/,
       =$@@%=.              .=+H@X:
     -XMX:                      =XMX=
@@ -175,7 +175,7 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
         ,;$@@@@@@@@@@@@@@@@@@X/-
            .-;+$XXHHHHHX$+;-.`;
 
-    var cube = `       #+ @      # #              M#@
+  var cube = `       #+ @      # #              M#@
  .    .X  X.%##@;# #   +@#######X. @H%
    ,==.   ,######M+  -#####%M####M-    #
   :H##M%:=##+ .M##M,;#####/+#######% ,M#
@@ -196,7 +196,7 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
       H#M    /@####/      ,++.  / ==-,
                ,=/:, .+X@MMH@#H  #####$=`;
 
-    var cake = `  ,:/+/-
+  var cake = `  ,:/+/-
               /M/              .,-=;//;-
         .:/= ;MH/,    ,=/+%$XH@MM#@:
         -$##@+$###@H@MMM#######H:.    -/H#
@@ -217,23 +217,70 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
           ,:/%XM####H/.
                 ,.:=-.`;
 
-    // appa, atom, nuke
-    var options = [cake, heart, fire, tick, bang, mesa, cube];
-    let active = cake
+  // appa, atom, nuke
+  var options = [cake, heart, fire, tick, bang, mesa, cube];
+  let active = cake;
 
-    function updateView() {
-        active = options[Math.floor((Math.random() * options.length))];
-        setTimeout(updateView, 5000);
-    }
+  function updateView() {
+    active = options[Math.floor(Math.random() * options.length)];
+    setTimeout(updateView, 5000);
+  }
 
-    onMount(() => updateView());
+  onMount(() => updateView());
 </script>
 
+<svelte:head>
+  <title>Quartnzet - {status}</title>
+</svelte:head>
+
+<Banner title={status} />
+
+<main class="container">
+  <p>{error.message}</p>
+
+  {#if dev && error.stack}
+    <pre>{error.stack}</pre>
+  {:else}
+    <audio controls autoplay>
+      <track kind="captions" />
+      <source src="http://quartznet.info/alive.ogg" type="audio/wav" />
+    </audio>
+    <div class="ascii">
+      <div>
+        <pre><br />{active}</pre>
+      </div>
+    </div>
+    <hr />
+    <p class="info">
+      This was a triumph! I'm making a note here: Huge success! It's hard to
+      overstate my satisfaction. Aperture Science: We do what we must because we
+      can For the good of all of us. Except the ones who are dead. But there's
+      no sense crying over every mistake. You just keep on trying 'til you run
+      out of cake. And the science gets done. And you make a neat gun for the
+      people who are still alive. I'm not even angry... I'm being so sincere
+      right now. Even though you broke my heart, and killed me. And tore me to
+      pieces. And threw every piece into a fire. As they burned it hurt because
+      I was so happy for you! Now, these points of data make a beautiful line.
+      And we're out of beta. We're releasing on time! So I'm GLaD I got burned!
+      Think of all the things we learned! for the people who are still alive. Go
+      ahead and leave me... I think I'd prefer to stay inside... Maybe you'll
+      find someone else to help you. Maybe Black Mesa? That was a joke. Ha Ha.
+      Fat Chance! Anyway this cake is great! It's so delicious and moist! Look
+      at me: still talking when there's science to do! When I look out there, it
+      makes me glad I'm not you. I've experiments to run. There is research to
+      be done. On the people who are still alive. And believe me I am still
+      alive. I'm doing science and I'm still alive. I feel fantastic and I'm
+      still alive. While you're dying I'll be still alive. And when you're dead
+      I will be still alive Still alive. Still alive.
+    </p>
+  {/if}
+</main>
+
 <style>
   * {
-      color: white !important;
-      font-family: monospace;
-      white-space: pre;
+    color: white !important;
+    font-family: monospace;
+    white-space: pre;
   }
 
   .ascii {
@@ -249,109 +296,8 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
   }
 
   pre {
-      margin: 0 auto;
-      font-family: monospace;
-      white-space: pre;
+    margin: 0 auto;
+    font-family: monospace;
+    white-space: pre;
   }
 </style>
-
-<svelte:head>
-    <title>Quartnzet - {status}</title>
-</svelte:head>
-
-<Banner title="{status}"/>
-
-<main class="container">
-    <p>{error.message}</p>
-
-    {#if dev && error.stack}
-        <pre>{error.stack}</pre>
-    {:else}
-        <audio controls autoplay>
-            <track kind="captions"/>
-            <source src="http://quartznet.info/alive.ogg" type="audio/wav">
-        </audio>
-        <div class="ascii">
-            <div>
-              <pre><br>{active}</pre>
-            </div>
-        </div>
-        <hr>
-        <p class="info">
-This was a triumph!
-I'm making a note here:
-Huge success!
-
-It's hard to overstate
-my satisfaction.
-
-Aperture Science:
-We do what we must
-because we can
-For the good of all of us.
-Except the ones who are dead.
-
-But there's no sense crying
-over every mistake.
-You just keep on trying
-'til you run out of cake.
-And the science gets done.
-And you make a neat gun
-for the people who are
-still alive.
-
-I'm not even angry...
-I'm being so sincere right now.
-Even though you broke my heart,
-and killed me.
-
-And tore me to pieces.
-And threw every piece into a fire.
-As they burned it hurt because
-I was so happy for you!
-
-Now, these points of data
-make a beautiful line.
-And we're out of beta.
-We're releasing on time!
-So I'm GLaD I got burned!
-Think of all the things we learned!
-for the people who are
-still alive.
-
-Go ahead and leave me...
-I think I'd prefer to stay inside...
-Maybe you'll find someone else
-to help you.
-Maybe Black Mesa?
-That was a joke. Ha Ha. Fat Chance!
-
-Anyway this cake is great!
-It's so delicious and moist!
-
-Look at me: still talking
-when there's science to do!
-When I look out there,
-it makes me glad I'm not you.
-
-I've experiments to run.
-There is research to be done.
-On the people who are
-still alive.
-And believe me I am
-still alive.
-I'm doing science and I'm
-still alive.
-I feel fantastic and I'm
-still alive.
-While you're dying I'll be
-still alive.
-And when you're dead I will be
-still alive
-
-Still alive.
-
-Still alive.
-        </p>
-    {/if}
-</main>