show/hide ui buttons

Makefile

@@ -4,7 +4,7 @@ MEDIA = \
   $(wildcard media/flags/*) $(wildcard media/buttons/*) \
   $(wildcard media/icons/*) $(wildcard media/bg/*) 8831.png 8831-quox.png \
   $(wildcard rainbow-quox/front/*) $(wildcard rainbow-quox/back/*) \
-  rainbow-quox/palette.svg rainbow-quox/back.svg
+  $(wildcard rainbow-quox/*.svg)
 CSS   = $(shell find fonts -type f) \
         $(patsubst %.scss,%.css, \
           $(wildcard rainbow-quox/style/*) $(wildcard style/*))

rainbow-quox/index.html

@@ -11,8 +11,17 @@
 <div id=buttons>
   <button id=reroll>new quox</button>
   <button id=swap>swap view</button>
+  <button id=hideui>hide ui</button>
 </div>
 
+<div id=showui-holder>
+  <img id=showui src=showui.svg alt='show ui' title='show ui'>
+</div>
+
+<nav id=back>
+  <a href=/><img src=back.svg alt=back title=back></a>
+</nav>
+
 <div id=state-message class=empty> quox #<span id=state>0</span> </div>
 
 <div id=pic-holder>
@@ -28,9 +37,3 @@
   there should be a palette here but it failed to load for some reason
 </object>
 </div>
-
-<nav id=back>
-  <a href=/>
-    <img src=back.svg>
-  </a>
-</nav>

rainbow-quox/script/quox.ts

@@ -206,13 +206,13 @@ applyState(data: LayerData, opts: Partial<ApplyStateOpts>): Promise<State> {
   await recolorLayers(data, rgb);
 
   updateBg(oklch);
-  updatePalette(oklch, rgb);
+  updateSvgs(oklch, rgb);
   updateLabel(initState);
+  updateUrl(initState);
 
   if (firstLoad) {
     await instantUpdateImage(side, await ensureComposed(buf, data));
   } else {
-    updateUrl(initState);
     await animateUpdateImage(buf, side, data, done ?? (() => {}));
   }
 
@@ -289,33 +289,40 @@ function updateLabel(st: State) {
   if (stateLabel) stateLabel.innerHTML = `${st}`;
 }
 
-function updatePalette(oklch: Color.Colors, rgb: Color.Rgbs) {
+function updateSvgs(oklch: Color.Colors, rgb: Color.Rgbs) {
   const paletteObj = document.getElementById('palette') as HTMLObjectElement;
   const palette    = paletteObj.contentDocument as XMLDocument | null;
 
-  if (!palette) return;
+  if (palette) {
+    palette.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);
+    const get = (id: string) => palette.getElementById(id);
 
-  palette.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);
+    for (const layer of Color.allLayers) {
-  const get = (id: string) => palette.getElementById(id);
+      let col = rgb[layer].css();
+      let elem;
 
-  for (const layer of Color.allLayers) {
+      // main group
-    let col = rgb[layer].css();
+      if (elem = get(`i-${layer}`)) {
-    let elem;
+        if (oklch[layer].l < 0.6) {
-
+          elem.classList.add('light'); elem.classList.remove('dark');
-    // main group
+        } else {
-    if (elem = get(`i-${layer}`)) {
+          elem.classList.add('dark'); elem.classList.remove('light');
-      if (oklch[layer].l < 0.6) {
+        }
-        elem.classList.add('light'); elem.classList.remove('dark');
+        elem.style.setProperty('--col', col);
-      } else {
-        elem.classList.add('dark'); elem.classList.remove('light');
       }
-      elem.style.setProperty('--col', col);
-    }
 
-    // label
+      // label
-    if (elem = get(`c-${layer}`)) elem.innerHTML = col;
+      if (elem = get(`c-${layer}`)) elem.innerHTML = col;
-    // minor swatch, if applicable
+      // minor swatch, if applicable
-    if (elem = get(`s-${layer}`)) elem.style.setProperty('--col', col);
+      if (elem = get(`s-${layer}`)) elem.style.setProperty('--col', col);
+    }
+  }
+
+  const showuiObj = document.getElementById('showui') as HTMLObjectElement;
+  const showui    = showuiObj.contentDocument as XMLDocument | null;
+
+  if (showui) {
+    showui.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);
   }
 }
 
@@ -335,6 +342,14 @@ async function setup() {
   const swap   = document.getElementById('swap')!;
 
   addListeners();
+  // these ones don't need to be toggled
+  document.getElementById('hideui')?.addEventListener('click', () => {
+    document.documentElement.dataset.state = 'fullquox';
+  });
+  document.getElementById('showui')?.addEventListener('click', () => {
+    document.documentElement.dataset.state = 'ready';
+  });
+
   document.documentElement.dataset.state = 'ready';
 
   async function run(task: (k: Done) => Promise<void>): Promise<void> {

rainbow-quox/showui.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="65" height="55" viewBox="-2.5 -2.5 65 55"
+     stroke="#123" stroke-width="2">
+
+  <linearGradient id="g-bg" x2="0" y2="100%">
+    <stop offset="25%" stop-color="hsl(60 90% 95%)" />
+    <stop offset="75%" stop-color="hsl(60 80% 90%)" />
+  </linearGradient>
+
+  <mask id="screen">
+    <rect width="60" height="50" fill="white" />
+  </mask>
+
+  <rect width="60" height="35" fill="url(#g-bg)" />
+
+  <rect x="4" y="4" width="6" height="6" fill="#123" />
+
+  <path stroke-width="4" fill="none" mask="url(#screen)"
+    d="M25,0 l-6,12 m12,-12 l-6,12 M65,6 h-16" />
+
+  <rect width="60" y="35" height="15" fill="url(#g-bg)" />
+  <path fill="none" stroke-width="4"
+        d="M6,37.5 v10 m6,-10 v10 m6,-10 v10 m6,-10 v10 m6,-10 v10
+           m6,-10 v10 m6,-10 v10 m6,-10 v10 m6,-10 v10" />
+</svg>

rainbow-quox/style/palette.scss

@@ -16,12 +16,6 @@
   fill:         var(--col);
   stroke:       oklch(from var(--col) 0.15 0.15 h);
   stroke-width: 2;
-
-  filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
-
-  @media (prefers-color-scheme: dark) {
-    filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
-  }
 }
 
 .light :is(text, use) { fill: oklch(from var(--col) 0.96 0.05 calc(h + 180)); }

rainbow-quox/style/style.scss

@@ -23,12 +23,19 @@
   transition: transform 0.25s cubic-bezier(.47,.74,.61,1.2);
 }
 
+@mixin shadow {
+  filter: drop-shadow(6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45));
+  @media (prefers-color-scheme: dark) {
+    filter: drop-shadow(6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45));
+  }
+}
+
 @mixin box {
+  @include shadow;
   font:       700 20pt var(--font); // respecify font family for <button>
   color:      oklch(0.95 0.075 var(--c-hue));
   background: oklch(0.5 0.2 var(--hue));
   border:     3px solid oklch(0.2 0.05 var(--hue));
-  box-shadow: var(--shadow-color);
   padding:    0.2rem 0.5rem;
 }
 
@@ -52,18 +59,16 @@
     }
 
     background: bg([0.9 0.08, 0.7 0.1]);
-    --shadow-color: 6px 6px 0 oklch(0.4 0.2 var(--hue) / 0.45);
 
     color-scheme: light dark;
     @media (prefers-color-scheme: dark) {
       background: bg([0.3 0.08, 0.2 0.09]);
-      --shadow-color: 6px 6px 0 oklch(0.1 0.15 var(--hue) / 0.45);
     }
     background-blend-mode: screen;
   }
 
   body {
-    height: 100vh;
+    min-height: 100vh;
     min-height: 100lvh;
     padding: 1em;
     margin: 0;
@@ -75,11 +80,14 @@
 
   #pic-holder, #main, #aux {
     width: 1000px;
-    margin: auto;
+    // margin: auto;
     aspect-ratio: 2000/1346;
   }
 
-  #pic-holder { position: relative; }
+  #pic-holder {
+    position: relative;
+    margin: 6em auto 0 auto;
+  }
   #main, #aux { position: absolute; inset: 0; }
 
   #aux {
@@ -90,6 +98,7 @@
   #buttons { position: fixed;    top:    -60px; left: -20px; }
   #reroll  { position: absolute; bottom: 0;     left: 0; }
   #swap    { position: absolute; bottom: 0;     left: 2.5em; }
+  #hideui  { position: absolute; bottom: 0;     left: 5em; }
 
   #buttons button {
     @include box;
@@ -107,9 +116,14 @@
     }
   }
 
-  #back { position: fixed; top: 22px; left: 22px; }
+  #back, #showui { position: fixed; top: 22px; left: 22px; }
+  #showui { transform: translateX(-200%); }
 
-  #palette-holder { margin: -60px auto 0; }
+  #palette-holder {
+    margin: -60px auto 0;
+    overflow-y: hidden;
+  }
+  #palette, #showui { @include shadow; }
 
   #state-message {
     @include box;
@@ -123,17 +137,21 @@
   #main { z-index: 0; }
   #aux { z-index: 1; }
 
-  #buttons, #state-message, #palette-holder { z-index: 2; }
+  #buttons, #state-message, #palette-holder, #back, #showui { z-index: 2; }
 }
 
 
 @layer come-in {
-  button, #state-message, #palette, #back { @include transy; }
+  #buttons button, #state-message, #palette, #back, #showui {
-
+    @include transy;
-  [data-state=loading] {
-    button         { transform: none;             }
-    #state-message { transform: translateX(100%); }
-    #palette       { transform: translateY(125%); }
-    #back          { transform: translateX(-200%); }
   }
+
+  [data-state=fullquox], [data-state=loading] {
+    #buttons button { transform: none;             }
+    #state-message  { transform: translateX(100%); }
+    #palette        { transform: translateY(125%); }
+    #back           { transform: translateX(-200%); }
+  }
+
+  [data-state=fullquox] { #showui { transform: none; } }
 }