widget.js

var h = require('hyperscript')
var o = require('observable')
//TODO make this just a small square that goes red/orange/green

module.exports = function (emitter) {
  var color = o(), count = o()
  color('red'); count(' ')

  var el = h('div', {
    style: {
      background: color,
      width: '1em', height: '1em',
      display: 'inline-block',
      'text-align': 'center',
      border: '1px solid black'
    }, 
    onclick: function () {
      emitter.connected 
        ? emitter.disconnect()
        : emitter.connect()
    }
  },
  count
  )
  var int
  emitter.on('reconnect', function (n, d) {
    var delay = Math.round(d / 1000) + 1
    count(delay)
    color('red')
    clearInterval(int)
    int = setInterval(function () {
      count(delay > 0 ? --delay : 0)
      color(delay ? 'red' :'orange')      
    }, 1e3)
  })
  emitter.on('connect',   function () {
    count(' ')
    color('green')
    clearInterval(int)
  })
  emitter.on('disconnect', function () {
    //count('  ')
    color('red')
  })
  return el
}