diff --git a/index.html b/index.html index 169d0b3..619900e 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,7 @@ - - + diff --git a/script/run.ts b/script/cube.ts similarity index 92% rename from script/run.ts rename to script/cube.ts index 80341db..07d5627 100644 --- a/script/run.ts +++ b/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({ - front: [], top: ['down'], back: ['left', 'left'], + function toFront(f: Face, o: Orientation): RotateXY[] { + return table({ + front: [], top: ['down'], + back: o == 'up' ? ['down', 'down'] : ['left', 'left'], bottom: ['up'], left: ['right'], right: ['left'] - }); + })(f); + } const toUpright: (o: Orientation) => RotateZ[] = table({ 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 = {}; + 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 {}; diff --git a/script/cube_setup.ts b/script/cube_setup.ts new file mode 100644 index 0000000..116967e --- /dev/null +++ b/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(); +}); diff --git a/script/shuffle.ts b/script/shuffle.ts index 7df95a7..ec72344 100644 --- a/script/shuffle.ts +++ b/script/shuffle.ts @@ -1,4 +1,4 @@ -function shuffle(subject: A[]): A[] { +export function shuffle(subject: A[]): A[] { const res = Array.from(subject); for (let i = 0; i < res.length - 1; ++i) { @@ -38,11 +38,11 @@ function group(subject: A[], keepTogether: A[][]): A[][] { return res; } -function groupedShuffle(subject: A[], keepTogether: A[][]): A[] { +export function groupedShuffle(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 {};