Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype html>
<title>Chessclock</title>
<link href='https://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.5/mithril.min.js"></script>
<style>
* {
font-family: 'Nixie One', sans-serif;
color: #E41B21;
}
body, html {
background: black;
font-size: 10px;
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
table {
margin: 10% auto;
width: 80%;
}
td {
width: 50%;
border-collapse: collapse;
margin: 0;
text-align: center;
vertical-align: middle;
}
button {
font-size: 5vw;
background: none;
border: 1vw dashed;
padding: 1vw 3vw;
}
.display {
font-size: 15vw;
}
</style>
<body>
<script>
window.onload = function(){
var clock = {
Timer: function(params){ // {time: '60', running: true, count: 'down'}
const factor = 60 // how many units in a minute; I'm using seconds
this.time = m.prop(params.time) || m.prop('0') // default to zero
this.running = m.prop(params.running) || false // default to stopped
this.count = m.prop(params.count) || m.prop('up') // default to counting up
this.interval = null
this.display = function(){ // pretty print the time
var min = Math.floor(this.time() / factor),
mod = ''+Math.floor(this.time() % factor),
sec = ('00'+mod).substring(mod.length)
return min + ':' + sec
}
this.start = function(){ // start the timer
var self = this
this.interval = setInterval(function(){
m.startComputation()
if (self.count() == 'up') {
self.time = m.prop(self.time()+1)
} else if (self.count() == 'down') {
self.time = m.prop(self.time()-1)
if (self.time() <= 0) {
self.stop()
alert("Time's up!")
}
} else {
throw new ReferenceError('Timer was instantiated with an unknown value for count')
}
m.endComputation()
}, 1000)
}
this.stop = function(){ // stop the timer
clearInterval(this.interval)
}
if (this.running()) this.start()
},
vm: {
init: function(){
this.players = [
new clock.Timer({time: '300', running: true, count: 'down'}),
new clock.Timer({time: '300', running: false, count: 'down'})
]
},
switch: function(players){
players.forEach(function(player, index, players){
if (player.running()) {
player.stop()
} else {
player.start()
}
player.running = m.prop(!player.running())
})
}
},
controller: function(){
clock.vm.init()
},
view: function(){
var vm = clock.vm
return m('html', [
m('body', [
m('table', [
m('tr', vm.players.map(function(v, i, a){
return m('td', [
m('button', {
onclick: vm.switch.bind(vm, vm.players)
}, (vm.players[i].running()) ? 'Stop' : 'Start')
])
})
),
m('tr', vm.players.map(function(v, i, a){
return m('td', [
m('span.display',{}, vm.players[i].display())
])
})
)
])
])
])
}
}
m.mount(document.body, {controller: clock.controller, view: clock.view});
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.