From 621827c6aa0adfe1068fbf3ec8648d5e069a731a Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Tue, 10 Dec 2024 05:19:14 +0100 Subject: [PATCH] show/hide ui buttons --- Makefile | 2 +- rainbow-quox/index.html | 15 +++++---- rainbow-quox/script/quox.ts | 59 +++++++++++++++++++++------------ rainbow-quox/showui.svg | 26 +++++++++++++++ rainbow-quox/style/palette.scss | 6 ---- rainbow-quox/style/style.scss | 50 +++++++++++++++++++--------- 6 files changed, 107 insertions(+), 51 deletions(-) create mode 100644 rainbow-quox/showui.svg diff --git a/Makefile b/Makefile index 4181a75..c4ca613 100644 --- a/Makefile +++ b/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/*)) diff --git a/rainbow-quox/index.html b/rainbow-quox/index.html index d57bd28..ff59dd6 100644 --- a/rainbow-quox/index.html +++ b/rainbow-quox/index.html @@ -11,8 +11,17 @@
+
+
+ show ui +
+ + +
quox #0
@@ -28,9 +37,3 @@ there should be a palette here but it failed to load for some reason
- - diff --git a/rainbow-quox/script/quox.ts b/rainbow-quox/script/quox.ts index d3cdc81..4a2b7d8 100644 --- a/rainbow-quox/script/quox.ts +++ b/rainbow-quox/script/quox.ts @@ -206,13 +206,13 @@ applyState(data: LayerData, opts: Partial): Promise { 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}`); - const get = (id: string) => palette.getElementById(id); + for (const layer of Color.allLayers) { + let col = rgb[layer].css(); + let elem; - for (const layer of Color.allLayers) { - let col = rgb[layer].css(); - let elem; - - // main group - if (elem = get(`i-${layer}`)) { - if (oklch[layer].l < 0.6) { - elem.classList.add('light'); elem.classList.remove('dark'); - } else { - elem.classList.add('dark'); elem.classList.remove('light'); + // main group + if (elem = get(`i-${layer}`)) { + if (oklch[layer].l < 0.6) { + elem.classList.add('light'); elem.classList.remove('dark'); + } else { + elem.classList.add('dark'); elem.classList.remove('light'); + } + elem.style.setProperty('--col', col); } - elem.style.setProperty('--col', col); - } - // label - if (elem = get(`c-${layer}`)) elem.innerHTML = col; - // minor swatch, if applicable - if (elem = get(`s-${layer}`)) elem.style.setProperty('--col', col); + // label + if (elem = get(`c-${layer}`)) elem.innerHTML = col; + // minor swatch, if applicable + 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): Promise { diff --git a/rainbow-quox/showui.svg b/rainbow-quox/showui.svg new file mode 100644 index 0000000..5fdd6f1 --- /dev/null +++ b/rainbow-quox/showui.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/rainbow-quox/style/palette.scss b/rainbow-quox/style/palette.scss index 1bda3c4..087d7dd 100644 --- a/rainbow-quox/style/palette.scss +++ b/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)); } diff --git a/rainbow-quox/style/style.scss b/rainbow-quox/style/style.scss index 7be4f59..5be1ac5 100644 --- a/rainbow-quox/style/style.scss +++ b/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