JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>

CSS

body {
  background: #333;
  color: #eee;
  font-family: sans-serif;
  margin: 1em;
}

pre {
  padding: 0.5em;
  background: #444;
}

code {
  font-family: monospace;
}

Babel + JSX

/**
 * Ramda imports
 */
const { chain, range } = R

const insertAt = (y, i, xs) =>
	[ ...xs.slice(0, i), y, ...xs.slice(i) ]

const insertRandom = y => xs =>
	range(0, xs.length + 1)
  	.map((_, i) => insertAt(y, i, xs))

const shuffle = xs => xs.reduce((acc, x) =>
	chain(insertRandom(x), acc),
  [[]])

const draw = (xs, gen) => {
	const draws = shuffle(xs)
	const i = Math.floor(gen() * draws.length)
  return draws[i]
}

/**
 * Debugging
 */
const p = (...args) =>
  document.body.innerHTML += `<p>${format(...args)}</p>`
      
const c = (...args) =>
	p(`<pre><code>${ format(...args) }</code></pre>`)

const format = (...args) => args
    .map(x => typeof x === 'string' ? x : JSON.stringify(x))
    .join('<br>')
      
p(`Expressing an indeterminate state as
a sequence of all possible states`)
c('insertRandom(5)([ 1, 2 ]) ->', insertRandom(5)([ 1, 2 ]))

p(`Shuffling lists`)
c('shuffle([ 1,2,3 ]) ->', shuffle([ 1,2,3 ]))

p(`Collapsing all states into one state that
gets picked requires a number generator`)

c('draw([ 1,2,3 ], () => 0) ->', draw([ 1,2,3 ], () => 0))

p(`Number generators are usually pure
generators built from a random, unpredictable
seed, but the following impure generator works`)

c('draw([ 1,2,3 ], Math.random) ->', draw([ 1,2,3 ], Math.random))