From 25b5314f7e722b2145e187169e4cfcd5cd0b9df8 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Thu, 26 Sep 2024 00:25:59 +0200 Subject: [PATCH 1/5] fix VoiceOver by making hidden panes `display: none` --- script/run.ts | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/script/run.ts b/script/run.ts index 6450e21..9026213 100644 --- a/script/run.ts +++ b/script/run.ts @@ -261,8 +261,19 @@ namespace Flat { export function fadeTo(newPane: Pane): void { for (const pane of allPanes) { const here = pane == newPane; - document.getElementById(pane)!.dataset.selected = `${here}`; - if (here) { history.replaceState(null, '🦎', `#${pane}`); } + const elem = document.getElementById(pane)!; + if (here) { + elem.style.display = 'unset'; + setTimeout(() => { + elem.dataset.selected = 'true'; + history.replaceState(null, '🦎', `#${pane}`); + }); + } else if (elem.dataset.selected == 'true') { + elem.addEventListener('transitionend', + () => elem.style.display = 'none', + {once: true}); + elem.dataset.selected = 'false'; + } } } @@ -294,6 +305,10 @@ function setup(): void { Cube.instantMoveTo(pane); Flat.fadeTo(pane); box.checked = true; + } else { + const elem = document.getElementById(pane)!; + elem.dataset.selected = 'false'; + elem.style.display = 'none'; } } } From 431e04c82b3632576c7c18cb29b5ac5cb2ab310d Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Thu, 26 Sep 2024 02:21:00 +0200 Subject: [PATCH 2/5] the voiceover fix broke the cube --- script/run.ts | 20 ++++++++++---------- style/flat.css | 14 +++++++++++--- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/script/run.ts b/script/run.ts index 9026213..ef7dea8 100644 --- a/script/run.ts +++ b/script/run.ts @@ -263,16 +263,17 @@ export function fadeTo(newPane: Pane): void { const here = pane == newPane; const elem = document.getElementById(pane)!; if (here) { - elem.style.display = 'unset'; - setTimeout(() => { - elem.dataset.selected = 'true'; - history.replaceState(null, '🦎', `#${pane}`); - }); - } else if (elem.dataset.selected == 'true') { + elem.dataset.state = 'entering'; + setTimeout(() => elem.dataset.state = 'active'); + // elem.addEventListener('transitionend', + // () => elem.dataset.state = 'active', + // {once: true}); + history.replaceState(null, '🦎', `#${pane}`); + } else if (elem.dataset.state == 'active') { elem.addEventListener('transitionend', - () => elem.style.display = 'none', + () => elem.dataset.state = 'hidden', {once: true}); - elem.dataset.selected = 'false'; + elem.dataset.state = 'leaving'; } } } @@ -307,8 +308,7 @@ function setup(): void { box.checked = true; } else { const elem = document.getElementById(pane)!; - elem.dataset.selected = 'false'; - elem.style.display = 'none'; + elem.dataset.state = 'hidden'; } } } diff --git a/style/flat.css b/style/flat.css index 92fcc30..5ddebd7 100644 --- a/style/flat.css +++ b/style/flat.css @@ -98,17 +98,25 @@ body { transition: background 0.1s ease-in; } -#cube > section[data-selected=true] { +#cube > :is(section[data-state=entering], #a) { + z-index: 1; + opacity: 0; +} + +#cube > :is(section[data-state=active], #a) { z-index: 1; opacity: 1; transition: opacity 0.1s ease-in; } -#cube > section[data-selected=false] { +#cube > :is(section[data-state=leaving], #a) { z-index: -1; opacity: 0; transition: opacity 0s 0.1s ease-in; } -/* todo make sure this works ok with screen readers */ + +#cube > :is(section[data-state=hidden], #a) { + display: none; +} } From 7ca1fa126dd48d77a711127903cf91af639b4433 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Thu, 26 Sep 2024 16:15:28 +0200 Subject: [PATCH 3/5] comments --- script/run.ts | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/script/run.ts b/script/run.ts index ef7dea8..659d2ac 100644 --- a/script/run.ts +++ b/script/run.ts @@ -260,19 +260,27 @@ namespace Flat { export function fadeTo(newPane: Pane): void { for (const pane of allPanes) { - const here = pane == newPane; const elem = document.getElementById(pane)!; - if (here) { + if (pane == newPane) { + // show new pane + // + // - "entering" state is displayed and z-index 1, but opacity 0 + // - "active" state is fully showing + // + // "entering" exists because firefox doesn't animate a + // transition out of `display: none` elem.dataset.state = 'entering'; setTimeout(() => elem.dataset.state = 'active'); - // elem.addEventListener('transitionend', - // () => elem.dataset.state = 'active', - // {once: true}); history.replaceState(null, '🦎', `#${pane}`); } else if (elem.dataset.state == 'active') { - elem.addEventListener('transitionend', - () => elem.dataset.state = 'hidden', - {once: true}); + // hide old pane + // + // - "leaving" is z-index -1 and opacity 0 + // - "hidden" is `display: none` + // + // separate for the same reason as above + function hide() { elem.dataset.state = 'hidden'; } + elem.addEventListener('transitionend', hide, {once: true}); elem.dataset.state = 'leaving'; } } From 76f7d7c76f9b77cde1c7d4b494251d63adcdeb01 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Fri, 27 Sep 2024 18:01:19 +0200 Subject: [PATCH 4/5] button fixes/additions --- index.html | 46 ++++++++++++++++++++++++++++++++-------------- script/shuffle.ts | 2 +- style/base.css | 1 + 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index b462f82..a6108dd 100644 --- a/index.html +++ b/index.html @@ -236,11 +236,12 @@
  • - spiral + spiral
  • - - dex + + dex (the dragon)
  • @@ -262,8 +263,10 @@
  • - - grace + + the internet's beloved princess grace
  • @@ -293,25 +296,25 @@
  • - + - tuxedodragon + tuxedo dragon
  • - - hthrflwrs + + heather flowers
  • - + - creature0354 + moth @@ -328,12 +331,12 @@
  • - - renkotsuban + + renkon
  • - + craw @@ -355,6 +358,21 @@
  • brin + +
  • + clip + +
  • + + cervine.online + + +
  • + + syndication outreach portal + diff --git a/script/shuffle.ts b/script/shuffle.ts index 0d4d489..40e32c2 100644 --- a/script/shuffle.ts +++ b/script/shuffle.ts @@ -44,7 +44,7 @@ function groupedShuffle(subject: A[], keepTogether: A[][]): A[] { } function shuffleAll() { - let groups = [group('myno', 'abyss')]; + let groups = [group('myno', 'abyss'), group('clip', 'cervine')]; for (const elem of Array.from(document.getElementsByClassName('shuffle'))) { let shuffled = groupedShuffle(Array.from(elem.children), groups); diff --git a/style/base.css b/style/base.css index 8576d25..9ce7dd1 100644 --- a/style/base.css +++ b/style/base.css @@ -482,6 +482,7 @@ strong { font-weight: 700; } #friends #codl a { background: #87261f; color: #edb970; } #friends #violet a { background: #8c2bd8; color: #dddddd; } #friends #brin a { background: #1e1e1e; color: #ff4400; } +#friends #clip a { background: #2f2a2b; color: #e8d057; } #nissbuttons { margin: 2em auto 0; From 0f6345d66fa1ed321cdb69ddf3a033d68c9bc5a9 Mon Sep 17 00:00:00 2001 From: Rhiannon Morris Date: Fri, 27 Sep 2024 18:01:29 +0200 Subject: [PATCH 5/5] shuffle within button groups too --- script/shuffle.ts | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/script/shuffle.ts b/script/shuffle.ts index 40e32c2..1ec208f 100644 --- a/script/shuffle.ts +++ b/script/shuffle.ts @@ -1,3 +1,18 @@ +function shuffle(subject: A[]): A[] { + let res = Array.from(subject); + + for (let i = 0; i < res.length - 1; ++i) { + const j = i + Math.floor(Math.random() * (res.length - i)); + if (i != j) { + const k = res[i]!; + res[i] = res[j]!; + res[j] = k; + } + } + + return res; +} + function group(subject: A[], keepTogether: A[][]): A[][] { type Value = {array: A[], added: boolean}; @@ -14,7 +29,7 @@ function group(subject: A[], keepTogether: A[][]): A[][] { if (group?.added) { continue; } else if (group) { group.added = true; - res.push(group.array); + res.push(shuffle(group.array)); } else { res.push([x]); } @@ -23,24 +38,8 @@ function group(subject: A[], keepTogether: A[][]): A[][] { return res; } -function shuffle(subject: A[]): A[] { - let res = Array.from(subject); - - for (let i = 0; i < res.length - 2; ++i) { - const j = i + Math.floor(Math.random() * (res.length - i)); - if (i != j) { - const k = res[i]!; - res[i] = res[j]!; - res[j] = k; - } - } - - return res; -} - function groupedShuffle(subject: A[], keepTogether: A[][]): A[] { - let groups = group(subject, keepTogether); - return shuffle(groups).flat(); + return shuffle(group(subject, keepTogether)).flat(); } function shuffleAll() {