jamesona/chessclock.html

## chessclock.html
<!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>
	<!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>