UI: hide controls

src/app/App.svelte

@@ -2,9 +2,10 @@
     import GraphRendering from "./parts/GraphRendering"
     import GraphControls from "./parts/GraphControls"
     import Logo from "./components/Logo.svelte";
+    import {hiddenUI} from "../stores";
 </script>
 
-<main>
+<main class="{$hiddenUI ? 'hidden': ''}">
     <GraphRendering/>
     <GraphControls/>
     <Logo/>

src/app/parts/GraphControls.svelte

@@ -1,9 +1,21 @@
 <script lang="ts">
     import {ALL_RULES} from "../../hypergraphs/rules";
-    import {activeRule, ruleProgress, isPlaying, autoZoom, isBloom} from "../../stores";
+    import {activeRule, ruleProgress, isPlaying, autoZoom, isBloom, hiddenUI} from "../../stores";
     import SvgPause from "../assets/icons/SvgPause.svelte";
     import SvgPlay from "../assets/icons/SvgPlay.svelte";
     import CheckBox from "../components/CheckBox.svelte";
+
+    function handleKeyboard(e: KeyboardEvent) {
+        switch (e.key) {
+            case "c":
+                hiddenUI.update(v => !v);
+                break;
+            case " ":
+                break;
+        }
+    }
+
+    document.addEventListener('keydown', handleKeyboard)
 </script>
 
 <section class="controls">
@@ -38,7 +50,7 @@
                 </div>
             {/each}
         </div>
-
+        <p class="controls-clue">Press C to toggle hiding controls</p>
     </div>
 </section>
 
@@ -98,6 +110,11 @@
               display: block
               background-color: $c-main
 
+        &-clue
+          margin-top: 25px
+          font-size: 11px
+          text-align: center
+
 
 </style>
 

src/app/styles/style.sass

@@ -16,6 +16,15 @@ body
 p, label
   font-family: $font-family-base
   font-size: $base-font-size
+  color: $c-main
 
 h1, h2, h3, h4, h5, h6
   font-family: $font-family-head
+
+main
+  &.hidden
+    &
+      .controls,
+      .logo,
+      .scene-nav-info
+        visibility: hidden

src/stores.ts

@@ -13,5 +13,5 @@ export const ruleProgress = tweened(0, {
     easing: cubicOut
 });
 export const autoZoom = writable<boolean>(true);
-export const isBloom = writable<boolean>(true);
+export const isBloom = writable<boolean>(false);
 export const hiddenUI = writable<boolean>(false);