From 8fc90db6a2aba583f7b0358bb4ba2b26dd7f635a Mon Sep 17 00:00:00 2001
From: Chris Dill <chris.rj.dill@gmail.com>
Date: Thu, 17 Aug 2023 07:35:23 +0100
Subject: [PATCH] Add status/error message display

---
 src/routes/+error.svelte | 121 +++++++++++++++++++--------------------
 static/css/global.css    |   3 +-
 2 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 4bcd786..3d4b425 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import Banner from "../components/Banner.svelte";
+    import { page } from "$app/stores";
+    import { onMount } from "svelte";
+    import Banner from "../components/Banner.svelte";
 
-  export let status: string;
-  export let error: Error;
+    const status = $page.status?.toString() ?? "";
+    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 +27,7 @@
          ,:+$+-,/H#MMMMMMM@- -,
                =++%%%%+/:-.`;
 
-  var nuke = `             =+$HM####@H%;,
+    var nuke = `             =+$HM####@H%;,
           /H###############M$,
           ,@################+
            .H##############+
@@ -49,7 +48,7 @@ X##############%,      ,+##############X
     .+M###@,                ,@###M+.
        :XH.                  .HX:`;
 
-  var atom = `                 =/;;/-
+    var atom = `                 =/;;/-
                 +:    //
                /;      /;
               -X        H.
@@ -70,7 +69,7 @@ M-       ,=;;;#:,      ,:#;;:=,       ,@
                 //    +;
                  ,////,`;
 
-  var heart = `                          .,---.
+    var heart = `                          .,---.
                         ,/XM#MMMX;,
                       -%##########M%,
                      -@######%  $###@=
@@ -91,7 +90,7 @@ X################,      -$=X#######@:
                   .,/X$;   .::,
                       .,    ..`;
 
-  var fire = `                     -$-
+    var fire = `                     -$-
                     .H##H,
                    +######+
                 .+#########H.
@@ -112,7 +111,7 @@ X################,      -$=X#######@:
 /XHX%:#####MH%=    ,---:;;;;/&&XHM,:###$
 $@#MX %+;-                           .`;
 
-  var tick = `                                     :X-
+    var tick = `                                     :X-
                                   :X###
                                 ;@####@
                               ;M######X
@@ -133,7 +132,7 @@ $@#MX %+;-                           .`;
               +####:
                ,$M-`;
 
-  var bang = `            .+
+    var bang = `            .+
              /M;
               H#@:              ;,
               -###H-          -@/
@@ -154,7 +153,7 @@ $@#MX %+;-                           .`;
                 .#H,               :XH,
                  +                   .;-`;
 
-  var mesa = `           .-;+$XHHHHHHX$+;-.
+    var mesa = `           .-;+$XHHHHHHX$+;-.
         ,;X@@X%/;=----=:/%X@@X/,
       =$@@%=.              .=+H@X:
     -XMX:                      =XMX=
@@ -175,7 +174,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 +195,7 @@ H@:         :HHHHHHHHHHHHHHHHHHX,    =@H
       H#M    /@####/      ,++.  / ==-,
                ,=/:, .+X@MMH@#H  #####$=`;
 
-  var cake = `  ,:/+/-
+    var cake = `  ,:/+/-
               /M/              .,-=;//;-
         .:/= ;MH/,    ,=/+%$XH@MM#@:
         -$##@+$###@H@MMM#######H:.    -/H#
@@ -217,41 +216,39 @@ 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 -</title>
+    <title>Quartznet - {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>
-  <br />
-  <p class="info">This was a triumph! I'm making a note here: Huge success!
+    <section>
+        <h2>{status} {$page.error?.message ?? ""}</h2>
+        <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>
+        <br />
+        <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.
@@ -289,31 +286,31 @@ And when you're dead I will be still alive.
 
 Still alive.
 Still alive.</p>
-  <!-- {/if} -->
+    </section>
 </main>
 
 <style>
-  * {
-    color: white !important;
-    font-family: monospace;
-    white-space: pre;
-  }
+    * {
+        color: white !important;
+        font-family: monospace;
+        white-space: pre;
+    }
 
-  .ascii {
-    text-align: left;
-    width: 100%;
-  }
+    .ascii {
+        text-align: left;
+        width: 100%;
+    }
 
-  .info {
-    margin-bottom: 30px;
-    position: relative;
-    white-space: pre;
-    text-align: left;
-  }
+    .info {
+        margin-bottom: 30px;
+        position: relative;
+        white-space: pre;
+        text-align: left;
+    }
 
-  pre {
-    margin: 0 auto;
-    font-family: monospace;
-    white-space: pre;
-  }
+    pre {
+        margin: 0 auto;
+        font-family: monospace;
+        white-space: pre;
+    }
 </style>
diff --git a/static/css/global.css b/static/css/global.css
index 7297680..9fd22a7 100755
--- a/static/css/global.css
+++ b/static/css/global.css
@@ -94,7 +94,7 @@ a:hover {
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
-} 
+}
 @media (min-width: 576px) {
   .container {
       width: 540px;
@@ -143,6 +143,7 @@ footer {
   color: var(--font-color);
   font-family: var(--font1);
   margin-top: 30px;
+  margin-bottom: 30px;
 }
 
 /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */