shuffle within button groups too

index.html

@@ -236,11 +236,12 @@
             </a>
 
           <li id=spiral>
-            <a href=https://spiralcyr.carrd.co title=spiral class=txt>spiral</a>
+            <a href=https://spiralcyr.carrd.co title=spiralcyr
+               class=txt>spiral</a>
 
           <li id=dex>
-            <a href=https://dexthedragon.co.uk title=dex>
-              <img src=media/buttons/dex.png alt=dex>
+            <a href=https://dexthedragon.co.uk title='dex (the dragon)'>
+              <img src=media/buttons/dex.png alt='dex (the dragon)'>
             </a>
 
           <li id=pebble>
@@ -262,8 +263,10 @@
             </a>
 
           <li id=grace>
-            <a href=https://princess.software title=grace>
-              <img src=media/buttons/grace.png alt=grace>
+            <a href=https://princess.software
+               title="the internet's beloved princess grace">
+              <img src=media/buttons/grace.png
+                   alt="the internet's beloved princess grace">
             </a>
 
           <li id=dusty>
@@ -293,25 +296,25 @@
             </a>
 
           <li id=tuxedodragon>
-            <a href=https://tuxedodragon.art title=tuxedodragon>
+            <a href=https://tuxedodragon.art title='tuxedo dragon'>
               <picture>
                 <source srcset=media/buttons/tuxedodragon_still.gif
                         media='(prefers-reduced-motion: reduce)'>
-                <img src=media/buttons/tuxedodragon.gif alt=tuxedodragon>
+                <img src=media/buttons/tuxedodragon.gif alt='tuxedo dragon'>
               </picture>
             </a>
 
           <li id=hthrflwrs>
-            <a href=https://heather.flowers title=hthrflwrs>
-              <img src=media/buttons/hthrflwrs.png alt=hthrflwrs>
+            <a href=http://heather.flowers title='heather flowers'>
+              <img src=media/buttons/hthrflwrs.png alt='heather flowers'>
             </a>
 
           <li id=creature0354>
-            <a href=https://creature0354.neocities.org title=creature0354>
+            <a href=https://creature0354.neocities.org title=moth>
               <picture>
                 <source srcset=media/buttons/creature0354_still.png
                         media='(prefers-reduced-motion: reduce)'>
-                <img src=media/buttons/creature0354.gif alt=creature0354>
+                <img src=media/buttons/creature0354.gif alt=moth>
               </picture>
             </a>
 
@@ -328,12 +331,12 @@
             </a>
 
           <li id=renko>
-            <a href=https://https://renkotsuban.com title=renkotsuban>
-              <img src=media/buttons/renkotsuban.gif alt=renkotsuban>
+            <a href=https://renkotsuban.com title=renkon>
+              <img src=media/buttons/renkotsuban.gif alt=renkon>
             </a>
 
           <li id=craw>
-            <a href=https://craw.com title=craw>
+            <a href=https://craw.run title=craw>
               <img src=media/buttons/craw.png alt=craw>
             </a>
 
@@ -355,6 +358,21 @@
 
           <li id=brin>
             <a href=https://brinsolomon.com title=brin class=txt>brin</a>
+
+          <li id=clip>
+            <a href=https://lizard.tools title=clip class=txt>clip</a>
+
+          <li id=cervine>
+            <a href=https://cervine.online title=cervine.online>
+              <img src=media/buttons/cervine.png alt=cervine.online>
+            </a>
+
+          <li id=pearshapes>
+            <a href=https://spdx.neocities.org
+               title='syndication outreach portal'>
+              <img src=media/buttons/pearshapes.png
+                   alt='syndication outreach portal'>
+            </a>
         </ul>
       </section>
 

script/run.ts

@@ -260,9 +260,29 @@ 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 (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');
+      history.replaceState(null, '🦎', `#${pane}`);
+    } else if (elem.dataset.state == 'active') {
+      // 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';
+    }
   }
 }
 
@@ -294,6 +314,9 @@ function setup(): void {
       Cube.instantMoveTo(pane);
       Flat.fadeTo(pane);
       box.checked = true;
+    } else {
+      const elem = document.getElementById(pane)!;
+      elem.dataset.state = 'hidden';
     }
   }
 }

script/shuffle.ts

@@ -1,3 +1,18 @@
+function shuffle<A>(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<A>(subject: A[], keepTogether: A[][]): A[][] {
   type Value = {array: A[], added: boolean};
 
@@ -14,7 +29,7 @@ function group<A>(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,28 +38,12 @@ function group<A>(subject: A[], keepTogether: A[][]): A[][] {
   return res;
 }
 
-function shuffle<A>(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<A>(subject: A[], keepTogether: A[][]): A[] {
-  let groups = group(subject, keepTogether);
-  return shuffle(groups).flat();
+  return shuffle(group(subject, keepTogether)).flat();
 }
 
 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);

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;

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;
+}
 
 }