countdown timer

main.js

var d = require('global/document')
var yo = require('yo-yo')
var ready = require('document-ready')
var css = require('sheetify')

var prefix = css `
  :host {
    display: flex;
    justify-context: center;
  }
  :host>div {
    cursor: pointer;
  }
`

var sprintf = require('sprintf')

var timer = require('./timer-component')({
  seconds: 72,
  onEnd: () => {
    console.log('!finish')
  }
}, (h, m, s) => {
  h = sprintf('%02d', h)
  m = sprintf('%02d', m)
  s = sprintf('%02d', s)
  return yo `
    <h2>${h}:${m}:${s}</h2>
  `
})

var root = yo `
  <div id="root">
   <section class=${prefix}>
     <div onclick=${timer.toggle}>${timer}</div>
   </section>
  </div>
`

ready(() => timer.toggle())

d.body.appendChild(root)

timer-component.js

var yo = require('yo-yo')
var w = require('global/window')

module.exports = function createTimer (arg, r) {
  arg || (arg = {})
  var ms = arg.seconds || 0
  var onEnd = arg.onEnd || (() => {})
  var el = render()
  var id

  el.stop = stop
  el.resume = resume
  el.toggle = toggle

  return el

  function stop () {
    w.clearInterval(id)
    id = null
  }

  function resume () {
    if (id != null) return
    id = w.setInterval(() => {
      if ((ms -= 1) >= 0) el = yo.update(el, render())
      else stop()
      if (ms === 0 && typeof onEnd === 'function') onEnd()
    }, 1000)
  }

  function toggle () {
    ;(id == null) ? resume() : stop()
  }

  function render () {
    var hour = Math.floor(ms / 3600)
    var min = Math.floor((ms % 3600) / 60)
    var sec = ms % 60
    return yo `
      <div>${r(hour, min, sec)}</div>
    `
  }
}