show/hide ui buttons
This commit is contained in:
parent
578176c845
commit
621827c6aa
6 changed files with 107 additions and 51 deletions
2
Makefile
2
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/*))
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}`);
|
||||
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<void>): Promise<void> {
|
||||
|
|
|
|||
26
rainbow-quox/showui.svg
Normal file
26
rainbow-quox/showui.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 876 B |
|
|
@ -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)); }
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
||||
[data-state=loading] {
|
||||
button { transform: none; }
|
||||
#state-message { transform: translateX(100%); }
|
||||
#palette { transform: translateY(125%); }
|
||||
#back { transform: translateX(-200%); }
|
||||
#buttons button, #state-message, #palette, #back, #showui {
|
||||
@include transy;
|
||||
}
|
||||
|
||||
[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; } }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue