randomise cube, and separate out setup function

index.html

@@ -29,8 +29,7 @@
 <meta name=twitter:card  content=summary_large_image>
 <meta name=twitter:image content=media/twittercard.webp>
 
-<script src=script/shuffle.js type=module></script>
-<script src=script/run.js type=module></script>
+<script src=script/cube_setup.js type=module></script>
 
 <nav id=face-menu>
   <menu class='menu hide-boxes'>

script/cube.ts

@@ -1,3 +1,5 @@
+import { shuffle } from './shuffle.js';
+
 /** one of the six document sections */
 export type Pane = 'hello' | 'id' | 'activities' | 'links' | 'friends' | 'six';
 
@@ -9,6 +11,9 @@ namespace Cube {
 /** location on the cube in space */
 export type Face = 'front' | 'top' | 'back' | 'bottom' | 'left' | 'right';
 
+export const allFaces: Face[] =
+  ['front', 'top', 'back', 'bottom', 'left', 'right'];
+
 /**
  * - for front, left, right: up is up
  * - for back: up is down (lol)
@@ -17,6 +22,8 @@ export type Face = 'front' | 'top' | 'back' | 'bottom' | 'left' | 'right';
  */
 export type Orientation = 'up' | 'left' | 'down' | 'right';
 
+export const allOrientations: Orientation[] = ['up', 'left', 'down', 'right'];
+
 export type Place = [Face, Orientation];
 
 
@@ -110,18 +117,20 @@ export function applyMoves(p: Place, ms: Rotation[]): Place {
 
 /** the sequence of movements to put this place on the front */
 export function toFrontUpright([f, o]: Place): [RotateXY[], RotateZ[]] {
-  const toFront: (f: Face) => RotateXY[] =
-    table<Face, RotateXY[]>({
-      front:  [],     top:  ['down'],  back:  ['left', 'left'],
+  function toFront(f: Face, o: Orientation): RotateXY[] {
+    return table<Face, RotateXY[]>({
+      front:  [],     top:  ['down'],
+      back:   o == 'up' ? ['down', 'down'] : ['left', 'left'],
       bottom: ['up'], left: ['right'], right: ['left']
-    });
+    })(f);
+  }
 
   const toUpright: (o: Orientation) => RotateZ[] =
     table<Orientation, RotateZ[]>({
       up: [], left: ['cw'], down: ['cw', 'cw'], right: ['ccw']
     });
 
-  const directions = toFront(f);
+  const directions = toFront(f, o);
   const rotations  = toUpright(applyMoves([f, o], directions)[1]);
   return [directions, rotations];
 }
@@ -173,6 +182,19 @@ let current: Conf = {
 // the back face is 'down' so it has the same visual orientation as other side
 // faces
 
+export function randomConf(): Conf {
+  let faces = shuffle(allFaces);
+  function ori() { return allOrientations[Math.floor(Math.random() * 4)]!; }
+
+  let c: Partial<Conf> = {};
+  for (let i = 0; i < allPanes.length; ++i) {
+    c[allPanes[i]!] = [faces[i]!, ori()];
+  }
+  return c as Conf;
+}
+
+current = randomConf();
+
 /** apply the css transforms to each pane element */
 export function applyConfiguration(): void {
   for (const pane of allPanes) {
@@ -195,8 +217,6 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void {
   const outer = document.getElementById('outer')!;
   const cube  = document.getElementById('cube')!;
 
-  console.log('animateMoveWith');
-
   cube.dataset.moving = 'true';
   cube.style.transition  = '0.4s cubic-bezier(.4, -0.29, .43, 1.26)';
   outer.style.transition = `0.4s 0.25s cubic-bezier(.48, 0, .44, 1.07)`;
@@ -211,14 +231,10 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void {
   let removeOuter = () => {};
   let removeCube  = () => {};
   if (rs.length > 0) {
-    console.log('xy');
-
     removeOuter = transitionListener(outer);
     cube.style.transform  = movementsToTransform(ds);
     outer.style.transform = movementsToTransform(rs);
   } else if (ds.length > 0) {
-    console.log('z');
-
     removeCube = transitionListener(cube);
     cube.style.transform = movementsToTransform(ds);
   } else {
@@ -226,8 +242,6 @@ export function animateMoveWith(ds: RotateXY[], rs: RotateZ[]): void {
   }
 
   function finish() {
-    console.log('finish');
-
     removeOuter(); removeCube();
 
     delete cube.dataset.moving;
@@ -310,7 +324,7 @@ function switchTo(pane: Pane): void {
 }
 
 
-function setup(): void {
+export function setup(): void {
   const here = location.hash.slice(1) || 'hello';
 
   for (const pane of allPanes) {
@@ -329,7 +343,3 @@ function setup(): void {
     }
   }
 }
-
-document.addEventListener('DOMContentLoaded', setup);
-
-export {};

script/cube_setup.ts

@@ -0,0 +1,7 @@
+import * as Cube from './cube.js';
+import * as Shuffle from './shuffle.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  Cube.setup();
+  Shuffle.setup();
+});

script/shuffle.ts

@@ -1,4 +1,4 @@
-function shuffle<A>(subject: A[]): A[] {
+export function shuffle<A>(subject: A[]): A[] {
   const res = Array.from(subject);
 
   for (let i = 0; i < res.length - 1; ++i) {
@@ -38,11 +38,11 @@ function group<A>(subject: A[], keepTogether: A[][]): A[][] {
   return res;
 }
 
-function groupedShuffle<A>(subject: A[], keepTogether: A[][]): A[] {
+export function groupedShuffle<A>(subject: A[], keepTogether: A[][]): A[] {
   return shuffle(group(subject, keepTogether)).flat();
 }
 
-function shuffleAll() {
+export function setup() {
   const groups = [group('myno', 'abyss'), group('clip', 'cervine')];
 
   for (const elem of Array.from(document.getElementsByClassName('shuffle'))) {
@@ -59,7 +59,3 @@ function shuffleAll() {
     return elements.every(x => x) ? elements as HTMLElement[] : [];
   }
 }
-
-document.addEventListener('DOMContentLoaded', shuffleAll);
-
-export {};