Roulette

by zequez

HTML

<script src="https://rawgit.com/blueimp/JavaScript-MD5/master/js/md5.min.js"></script>
<div id='container'>
  <canvas id='roulette'>
  </canvas>
</div>
<textarea id='results' disabled='disabled'>
</textarea>
<button id='reset_results'>
  Reset
</button>

CSS

#container {
  position: relative;
  width: 400px;
  height: 400px;
  border: solid 1px black;
}

#container:after {
  content: ' ';
  position: absolute;
  top: 50%;
  right: 0;
  width: 30px;
  height: 1px;
  margin-top: -1px;
  background: black;
}

#roulette {
  width: 100%;
  height: 100%;
}

#results {
  width: 400px;
}

Babel + JSX

const THINGS = [
  ['Candy: Naranjú', 3],
  ['Candy: Palitos', 6],
  ['Candy: Misky', 6],
  ['Free time', 3],
  ['VG Time', 3],
  ['Treat yo\' self', 5],
  ['Buy with treat', 1],
  ['F Hub', 2],
  ['F Tai', 2],
  ['F Rei', 2],
  ['F Chn', 2],
  ['-Hot bath', 1],
  ['-Half day', 1],
  ['NADA', 1],
]

const RADIUS = 200

class Thing {
	constructor (name, weight, color) {
  	this.name = name
    this.weight = weight
    this.value = 0
    this.radianValue = 0
    this.color = color || this._md5Color()
  }
  
  setValue (total) {
  	this.value = this.weight / total
    this.radianValue = this.weight / total * Math.PI*2
  }
  
  _md5Color () {
  	let keyMd5 = md5(this.name)
    let c1 = parseInt(keyMd5.slice(0, 2), 16)
    let c2 = parseInt(keyMd5.slice(2, 4), 16)
    let c3 = parseInt(keyMd5.slice(4, 6), 16)
    
    return `rgb(${c1}, ${c2}, ${c3})`
  }
  
  _textAnalysisColor () {
    let c1 = key.charCodeAt(0)
    let c2 = key.charCodeAt(key.length-1)
    let c3 = key.charCodeAt(Math.floor(key.length/2))
    
    return `rgb(${c1}, ${c2}, ${c3})`
  }
}


class Things {
  constructor (things) {
    this.things = []
    this.total = 0
    for (let i = 0; i < things.length; ++i) {
      this.things.push(new Thing(...things[i]))
      this.total += this.things[i].weight
    }
    for (let i = 0; i < this.things.length; ++i) {
    	this.things[i].setValue(this.total)
    }
  }
}

class Roulette {
	constructor (things, canvas, onAdd) {
  	this.things = things
  	this.canvas = canvas
    this.canvas.width = RADIUS*2;
    this.canvas.height = RADIUS*2;
    this.ctx = canvas.getContext('2d')
    this.onAdd = onAdd
    
    this.angle = 0;
    this.friction = 0.002
    this.velocity = 0
    this.center()
    this.draw()
    this.canvas.addEventListener('mousedown', this.charge.bind(this))
    this.canvas.addEventListener('mouseup', this.release.bind(this))
    this.audioCtx = new window.webkitAudioContext()
    this.results
  }
  
  center () {
  	this.ctx.translate(RADIUS,...