-
+
+
+
+
+
diff --git a/rainbow-quox/script/quox.ts b/rainbow-quox/script/quox.ts
index fc5cb70..0228127 100644
--- a/rainbow-quox/script/quox.ts
+++ b/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 });
});
}
diff --git a/rainbow-quox/style/style.scss b/rainbow-quox/style/style.scss
index 8047321..4a16007 100644
--- a/rainbow-quox/style/style.scss
+++ b/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] {