rainbow-quox download button

rainbow-quox/back.svg

@@ -34,7 +34,7 @@
 
   <path id="arrow" fill="url(#g-arrow)" mask="url(#arrow-mask)"
     d="M30,5 l-30,25 30,25 7.07,-7.07 -17.93,-12.93 40,0 0,-10 -40,0 17.93,-12.93 z" />
-    <!-- (7.07 ≈ 10√2)-->
+    <!-- (7.07 ≈ 10/√2)-->
 
   <g id="cube" transform="translate(47 5)">
     <g stroke="none">

rainbow-quox/download.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="30" height="30" viewBox="0 0 100 100">
+
+  <defs>
+    <linearGradient id="fill" x2="0%" y2="100%">
+      <stop offset="20%" stop-color="hsl(60 90% 95%)" />
+      <stop offset="100%" stop-color="hsl(60 80% 90%)" />
+    </linearGradient>
+
+    <linearGradient id="fade" x2="0%" y1="100%">
+      <stop offset="70%" stop-color="white" />
+      <stop offset="100%" stop-color="black" />
+    </linearGradient>
+
+    <path id="path"
+          d="M 45,0 v 60 l -23.28,-23.28 -7.07,7.07 35.35,35.35
+             35.35,-35.35 -7.07,-7.07 -23.28,23.28 v -60 z
+             M 10,95 h 80 v -20 h -10 v 10 h -60 v -10 h -10 z" />
+
+    <mask id="mask"><rect width="100" height="100" fill="url(#fade)" /></mask>
+  </defs>
+
+  <use href="#path" stroke="#123" fill="url(#fill)" mask="url(#mask)" />
+</svg>

rainbow-quox/index.html

@@ -49,9 +49,14 @@
   <canvas id=aux width=1040 height=713></canvas>
 </div>
 
-<div id=palette-holder>
-<object type='image/svg+xml' data=palette.svg id=palette
-        width=1152 height=179>
-  there should be a palette here but it failed to load for some reason
-</object>
+<div id=palette-bar>
+  <button id=download-button>
+    <img src=download.svg alt='download palette'>
+  </button>
+  <div id=palette-holder>
+    <object type='image/svg+xml' data=palette.svg id=palette
+            width=1152 height=179>
+      there should be a palette here but it failed to load for some reason
+    </object>
+  </div>
 </div>

rainbow-quox/script/quox.ts

@@ -375,6 +375,31 @@ function closeHistory() {
   document.documentElement.dataset.state = 'ready';
 }
 
+function download(seed: string) {
+  const colors = Color.toRgbs(Color.colors(new Color.Rand(seed)));
+
+  let lines = [
+    "GIMP Palette\n",
+    `Name: quox ${seed}\n\n`,
+  ];
+
+  for (const name of Color.allLayers) {
+    let { r, g, b } = colors[name];
+    lines.push(`${r} ${g} ${b} ${name}\n`);
+  }
+
+  const blob = new Blob(lines, { type: 'application/x-gimp-palette' });
+
+  // there must be a better way to push out a file than
+  // this autohotkey-ass nonsense
+  const elem = document.createElement('a');
+  elem.download = `quox-${seed}.gpl`;
+  const url = URL.createObjectURL(blob);
+  elem.href = url;
+  elem.click();
+  URL.revokeObjectURL(url);
+}
+
 async function setup() {
   message('loading layers…');
 
@@ -383,9 +408,10 @@ async function setup() {
 
   let buf = new OffscreenCanvas(WIDTH, HEIGHT).getContext('2d')!;
 
-  let seed = urlState() ?? new Color.Rand().alphaNum();
+  let prevSeed = urlState() ?? new Color.Rand().alphaNum();
+  let seed =
+    await applyState(data, { seed: prevSeed, buf, history, firstLoad: true });
   let side: Side = 'front';
-  seed = await applyState(data, { seed, buf, history, firstLoad: true });
 
   const reroll = document.getElementById('reroll')!;
   const swap   = document.getElementById('swap')!;
@@ -415,8 +441,12 @@ async function setup() {
     elem.innerText = str;
     // todo allow images cos it's funny
 
+    prevSeed = seed;
     seed = await applyState(data, { side, seed: str, buf, history });
   });
+  document.getElementById('download-button')?.addEventListener('click', () => {
+    download(prevSeed);
+  });
 
   document.documentElement.dataset.state = 'ready';
 
@@ -430,12 +460,14 @@ async function setup() {
       const newSeed = urlState();
       if (newSeed) {
         const opts = { history, side, seed: newSeed, buf, done: k };
+        prevSeed = seed;
         seed = await applyState(data, opts);
       }
     });
   }
   function runReroll() {
     run(async k => {
+      prevSeed = seed;
       seed = await applyState(data, { side, seed, buf, history, done: k });
     });
   }

rainbow-quox/style/style.scss

@@ -165,12 +165,21 @@ $button-fg: oklch(0.98 0.1 var(--c-hue));
   }
   #showui { transform: translateX(-200%); }
 
-  #palette-holder {
+  #palette-bar {
     margin: -60px auto 0;
+    position: relative;
+  }
+  #palette-holder {
     padding-top: 25px;
     overflow-y: hidden;
   }
   #palette { @include shadow; }
+  #download-button {
+    @include image-button;
+    position: absolute;
+    bottom: 100%;
+    right: 20px;
+  }
 
 
   @mixin history-flex {
@@ -286,13 +295,15 @@ $button-fg: oklch(0.98 0.1 var(--c-hue));
 
     #current { @include transy(all); }
     #close-history { @include transy; }
+    #download-button { @include transy(opacity); }
   }
 
   [data-state=fullquox], [data-state=loading] {
-    #buttons button { transform: none;             }
-    #current        { transform: translateX(100%); }
-    #palette        { transform: translateY(125%); }
-    #back           { transform: translateX(-200%); }
+    #buttons button  { transform: none;             }
+    #current         { transform: translateX(100%); }
+    #palette         { transform: translateY(125%); }
+    #download-button { opacity: 0; }
+    #back            { transform: translateX(-200%); }
   }
 
   [data-state=fullquox] {