JSFiddle - React, Tailwind, and code Playground

by mcsf

CSS

body { font-family: monospace }

Babel + JSX

const p = s => document.body.innerText += s + '\n'
const l = p //console.log.bind( console )

class Flip {
	static of = ( xs, ys ) =>
  	new Flip( xs, ys )
    
	constructor( xs, ys ) {
  	this.xs = xs
    this.ys = ys
  }
  
  toString() {
  	return `F(${this.xs}, ${this.ys})`
  }
}

const resolve = boolGenerator =>
	function self( pair ) {
    if ( ! ( pair instanceof Flip ) )
      return pair

    const shouldFlip = boolGenerator()
    const xs = shouldFlip ? pair.ys : pair.xs
    const ys = shouldFlip ? pair.xs : pair.ys
    return flatMap( self, [ xs, ys ] )
	}

const flatMap = ( f, xs ) =>
	flatten( xs.map( f ) )
  
const flatten = ( [ xs, ys ] ) =>
	[ ...xs, ...ys ]

//

const makeBoolGenerator = seed => {
	return () => {
		const x = Math.sin( seed++ ) * 10000;
    return ( x - Math.floor( x ) ) > 0.5;
	}
}

const transforms =
	Flip.of(
  	Flip.of( [ 1 ], [ 2 ] ),
    Flip.of( [ 3 ], [ 4 ] )
  )

l( '### transforms ->' )
l( resolve( makeBoolGenerator( 0 ) )( transforms ) )
l( resolve( makeBoolGenerator( 0 ) )( transforms ) )
l( resolve( makeBoolGenerator( 1 ) )( transforms ) )
l( resolve( makeBoolGenerator( 2 ) )( transforms ) )

//

const shuffle = xs => xs.length <= 1
	? xs
  : Flip.of( ...partition( xs ).map( shuffle ) )
  
const partition = xs =>
	[ xs.slice( 0, pivot( xs ) ), xs.slice( pivot( xs ) ) ]

const pivot = xs =>
	Math.floor( xs.length / 2 )

l( '### shuffle( [ 1..6 ] ) ->' )
l( shuffle( [ 1, 2, 3, 4, 5, 6 ] ) )
l( resolve( makeBoolGenerator( 42 ) )( shuffle( [ 1, 2, 3, 4, 5, 6 ] ) ) )