Bead Road

Bead Road.markdown

Bead Road

A Pen by Wes Johnson on CodePen.

License.

index.jade

button#render Re-simulate

.road
  #roadCounts
  #road

script.babel

/*
 * RENDERING INPUTS HURR
 */
const maxOutcomes = 100
const beadHeight = 30 + 12
const roadHeight = 250

// ---------------------

const beadColours = {
  banker: 'red',
  player: 'blue',
  tie: 'green'
}

const road = document.getElementById('road')
const roadCounts = document.getElementById('roadCounts')
const btn = document.getElementById('render')

let game = 0
let lastWinner
let currentStreak
let streaks = 0
let maxStreak = 5
let columns = []
let currentColumn = getColumn()

let generatedOutcomes = []

function render () {
  maxStreak = Math.floor(roadHeight / beadHeight)
  road.style.height = roadHeight + 'px'
  
  while (game < maxOutcomes) {
    game++
    let outcome = simulateGame()
    let colour = beadColours[outcome.winner]
    let shouldReflow = false

    generatedOutcomes.push({
      outcome: outcome.winner,
      value: outcome.score
    })

    if (lastWinner && lastWinner !== outcome.winner) {
      addColumnHeader()
      currentColumn = getColumn()

    } else if (currentStreak) {
      shouldReflow = currentStreak.children.length >= maxStreak
      if (shouldReflow) currentColumn.span++
    }
    
    if (lastWinner !== outcome.winner || shouldReflow) {
      currentStreak = createStreak()
      streaks++
      road.appendChild(currentStreak)
    }

    lastWinner = outcome.winner
    
    let bead = createBead(colour, outcome.score)
    if (game === maxOutcomes) {
      bead.className += ' bead--last'
    }
    currentStreak.appendChild(bead)
    currentColumn.count++
  }

  let scrollWidth = (currentStreak.offsetWidth + 8) * streaks
  road.style.width = scrollWidth + 'px'
  
  roadCounts.style.width = road.style.width

  addColumnHeader()
  scrollRight()

  let json = JSON.stringify(generatedOutcomes)
  console.log(json)
}

function simulateGame () {
  let banker = getScore()
  let player = getScore()
  let result = banker - player
  
  if (result > 0) return { winner: 'banker', score: banker }
  if (result < 0) return { winner: 'player', score: player }
  return { winner: 'tie', score: banker }
}

function getScore () {
  return Math.ceil(Math.random() * 9)
}

function createBead (colour, number) {
  let el = div()
  let no = div()
  el.className = `bead bead--${colour}`
  no.className = `bead-number`
  no.innerHTML = number
  el.appendChild(no)
  return el
}

function createStreak () {
  let el = div()
  el.className = 'streak'
  return el
}

function createHeader () {
  let el = div()
  el.className = `count count${currentColumn.span}`
  el.innerHTML = currentColumn.count
  return el
}

function div() {
  return document.createElement('div')
}

function addColumnHeader() {
  columns.push(currentColumn)
  roadCounts.appendChild(createHeader())
}

function getColumn() {
  return { count: 0, span: 1 }
}

function scrollRight () {
  road.parentElement.scrollLeft = 1e6
}

render()

btn.onclick = function () {
  columns = []
  currentColumn = getColumn()
  road.innerHTML = ''
  roadCounts.innerHTML = ''
  game = 0
  streaks = 0
  lastWinner = undefined
  currentStreak = undefined
  render()
}

style.stylus

$basis = 30px

/*
 * RENDERING INPUTS HURR
 */
$size = 30px // needs to be in sync with JS inputs (beadHeight: this number + verticalSpace)
$verticalSpace = 12px / $basis * $size

// ---------------------

$columnSpace = 8px
$fontSize = $size * .57
$headerFontSize = $fontSize * 0.9
$fontHeight = $size
$lastBorder = 3px / $basis * $size

$playingArea = #0C204B

$lightLength = 15px
$lightBlur = 10px

$blue = #0076FF
$blueLight = #50A0FF

$red = #D0021B
$redLight = #DE5162

$green = #7ED321
$greenLight = #A6E066

beadGradient($dark, $light)
  background: linear-gradient(35deg, $dark, $dark 35%, $light 50%)

/*
 * demo only
 */
html, body
  background-color: $playingArea
  font-family: 'Titillium Web', sans-serif
  
#render
  position: fixed
  right: 0
  font-size: 1.2em
  height: 30px
  margin-bottom: 20px
  
/*
 * road layout
 */
.road
  overflow-x: scroll
  padding-top: 50px

/*
 * columns
 */
.streak
  display: inline-block
  vertical-align: top
  width: $size
  margin-right: $columnSpace

.count
  display: inline-block
  text-align: center
  margin-right: $columnSpace
  margin-bottom: 10px
  color: alpha(#D8D8D8, 30%)
  font-size: $headerFontSize

.count1
  width: $size

.count2
  width: $size * 2
  margin-right: $columnSpace * 2

.count3
  width: $size * 3
  margin-right: $columnSpace * 3

/*
 * BEADS!!!
 */
.bead
  position: relative
  z-index: 1
  background-color: #000
  overflow: hidden
  box-sizing: border-box
  width: $size
  height: $size
  border-radius: 50%
  margin-bottom: $verticalSpace

.bead-number
  position: relative
  font-size: $fontSize
  line-height: $fontHeight
  font-weight: 300
  color: #fff
  text-align: center
  z-index: 1

.bead.bead--last
  border: $lastBorder solid #fff

  .bead-number
    line-height: $fontHeight - $lastBorder * 2
  
/*
 * spotlight gradient
 */
.bead::before
  content: ''
  position: absolute
  transform: translateY(-70%)
  width: $size
  height: $size
  border-radius: 50%

/*
 * glass line
 */
.bead::after
  content: ''
  position: absolute
  transform: translateX(25%) translateY(-55%) rotate(-30deg)
  width: $size
  height: $size
  
.bead--blue
  beadGradient($blue, $blueLight)
  
.bead--blue::after
  background-color: $blue

.bead--red
  beadGradient($red, $redLight)
  
.bead--red::after
  background-color: $red

.bead--green
  beadGradient($green, $greenLight)
  
.bead--green::after
  background-color: $green

styles

<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400" rel="stylesheet" />