2011-11-14 22:41:03 -07:00
|
|
|
var TIMEOUT = 0;
|
2011-11-11 23:20:31 -07:00
|
|
|
var JAM = 1;
|
|
|
|
var ROTATE = 2;
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
var state = TIMEOUT;
|
2011-11-11 23:20:31 -07:00
|
|
|
|
|
|
|
function pad(i) {
|
|
|
|
if (i < 10) {
|
|
|
|
return "0" + i;
|
|
|
|
} else {
|
|
|
|
return i;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Start a timer on [element] for [duration] milliseconds.
|
|
|
|
function startTimer(element, precision, duration, callback) {
|
|
|
|
var beginning;
|
|
|
|
var itimer;
|
|
|
|
var precmult = 1;
|
2011-11-12 08:24:11 -07:00
|
|
|
var bg;
|
2011-11-11 23:20:31 -07:00
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
var display = function () {
|
|
|
|
var remain = element.remaining();
|
2011-11-11 23:20:31 -07:00
|
|
|
var min = Math.floor(Math.abs(remain / 60000));
|
|
|
|
var sec = Math.abs(remain / 1000) % 60;
|
|
|
|
|
|
|
|
/* Scale sec to precision, since toFixed only rounds */
|
|
|
|
sec = Math.floor(sec * precmult) / precmult;
|
|
|
|
|
|
|
|
if (itimer) {
|
|
|
|
element.style.color = element.fg;
|
|
|
|
} else {
|
|
|
|
element.style.color = "#888";
|
|
|
|
}
|
|
|
|
|
2011-11-12 08:24:11 -07:00
|
|
|
if (! bg) {
|
|
|
|
if (! duration) {
|
|
|
|
element.style.backgroundColor = "#044";
|
|
|
|
} else if (remain <= 20000) {
|
|
|
|
element.style.backgroundColor = "#f24";
|
|
|
|
} else {
|
|
|
|
element.style.backgroundColor = element.bg;
|
|
|
|
}
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
element.innerHTML = "";
|
|
|
|
if ((duration > 0) && (remain <= 0)) {
|
2011-11-14 22:41:03 -07:00
|
|
|
element.stop();
|
2011-11-11 23:20:31 -07:00
|
|
|
element.innerHTML = "0:0" + (0).toFixed(precision);
|
|
|
|
if (callback) callback();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
element.innerHTML += min + ":" + pad(sec.toFixed(precision));
|
|
|
|
}
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
// Is element timer running?
|
|
|
|
element.running = function () {
|
|
|
|
return !!itimer;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Is element a countdown timer?
|
|
|
|
element.descending = function () {
|
|
|
|
return !!duration;
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
element.d = function() {
|
|
|
|
return [beginning, duration];
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
2011-11-14 22:41:03 -07:00
|
|
|
|
|
|
|
// Return time on clock
|
|
|
|
element.remaining = function () {
|
|
|
|
if (element.running()) {
|
|
|
|
return beginning + duration - (new Date()).getTime();
|
|
|
|
} else {
|
|
|
|
return duration;
|
|
|
|
}
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
// Stop (clear timer)
|
2011-11-14 22:41:03 -07:00
|
|
|
element.stop = function () {
|
2011-11-11 23:20:31 -07:00
|
|
|
if (itimer) {
|
|
|
|
clearInterval(itimer);
|
|
|
|
itimer = undefined;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Start
|
2011-11-14 22:41:03 -07:00
|
|
|
element.start = function () {
|
2011-11-11 23:20:31 -07:00
|
|
|
beginning = (new Date()).getTime();
|
|
|
|
if (itimer) {
|
|
|
|
return;
|
|
|
|
}
|
2011-11-14 22:41:03 -07:00
|
|
|
itimer = setInterval(display, 100);
|
|
|
|
display();
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
// Unpause if paused
|
2011-11-14 22:41:03 -07:00
|
|
|
element.go = function () {
|
2011-11-11 23:20:31 -07:00
|
|
|
if (itimer) return;
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
element.start();
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
// Pause if unpaused
|
2011-11-14 22:41:03 -07:00
|
|
|
element.pause = function () {
|
2011-11-11 23:20:31 -07:00
|
|
|
if (! itimer) return;
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
element.stop();
|
2011-11-11 23:20:31 -07:00
|
|
|
duration -= (new Date()).getTime() - beginning;
|
2011-11-14 22:41:03 -07:00
|
|
|
display();
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
// Restart with a new time
|
2011-11-14 22:41:03 -07:00
|
|
|
element.reset = function (t, color) {
|
2011-11-12 08:24:11 -07:00
|
|
|
bg = color;
|
|
|
|
if (color) {
|
|
|
|
element.style.backgroundColor = color;
|
|
|
|
}
|
|
|
|
|
2011-11-11 23:20:31 -07:00
|
|
|
duration = t;
|
|
|
|
display(duration);
|
|
|
|
}
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
// Setup
|
|
|
|
for (var i = 0; i < precision; i += 1) {
|
|
|
|
precmult *= 10;
|
|
|
|
}
|
|
|
|
|
2011-11-11 23:20:31 -07:00
|
|
|
if (precision == undefined) {
|
|
|
|
precision = 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (element.bg == undefined) {
|
|
|
|
element.bg = element.style.backgroundColor;
|
|
|
|
element.fg = element.style.color;
|
|
|
|
}
|
2011-11-14 22:41:03 -07:00
|
|
|
display();
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
// Transition state machine based on state
|
|
|
|
function transition() {
|
2011-11-14 22:41:03 -07:00
|
|
|
var jt = document.getElementById("jam");
|
|
|
|
var pt = document.getElementById("period");
|
2011-11-11 23:20:31 -07:00
|
|
|
var ptext = document.getElementById("periodtext");
|
|
|
|
var jtext = document.getElementById("jamtext");
|
|
|
|
|
|
|
|
if (state == JAM) {
|
|
|
|
pt.go();
|
|
|
|
jt.reset(120000);
|
2011-11-14 22:41:03 -07:00
|
|
|
jt.start();
|
2011-11-11 23:20:31 -07:00
|
|
|
jtext.innerHTML = "Jam";
|
|
|
|
} else if (state == ROTATE) {
|
|
|
|
pt.go();
|
2011-11-12 08:24:11 -07:00
|
|
|
jt.reset(30000, "#060");
|
2011-11-14 22:41:03 -07:00
|
|
|
jt.start();
|
2011-11-11 23:20:31 -07:00
|
|
|
jtext.innerHTML = "Rotation";
|
|
|
|
} else if (state == TIMEOUT) {
|
|
|
|
pt.pause();
|
|
|
|
jt.reset(0);
|
2011-11-14 22:41:03 -07:00
|
|
|
jt.start();
|
2011-11-11 23:20:31 -07:00
|
|
|
jtext.innerHTML = "Timeout";
|
|
|
|
}
|
|
|
|
ptext.innerHTML = "Period " + period;
|
|
|
|
}
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
function save() {
|
|
|
|
localStorage.rdsb_name_a = e("name-a").innerHTML;
|
|
|
|
localStorage.rdsb_name_b = e("name-b").innerHTML;
|
|
|
|
localStorage.rdsb_score_a = e("score-a").innerHTML;
|
|
|
|
localStorage.rdsb_score_b = e("score-b").innerHTML;
|
|
|
|
localStorage.rdsb_period = period;
|
|
|
|
localStorage.rdsb_period_clock = e("period").remaining();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2011-11-11 23:20:31 -07:00
|
|
|
// A timer was clicked
|
|
|
|
// 0 = period timer
|
|
|
|
// 1 = jam timer
|
|
|
|
function timer(tn) {
|
|
|
|
transition();
|
|
|
|
}
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
function e(id) {
|
|
|
|
return document.getElementById(id);
|
|
|
|
}
|
|
|
|
|
2011-11-11 23:20:31 -07:00
|
|
|
function score(team, points) {
|
|
|
|
var te = document.getElementById("score-" + team);
|
|
|
|
var ts = Number(te.innerHTML);
|
|
|
|
|
|
|
|
ts += points;
|
|
|
|
te.innerHTML = ts;
|
|
|
|
}
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
function teamname(t, v) {
|
|
|
|
if (! v) return;
|
|
|
|
e("name-" + t).innerHTML = v || "Home";
|
|
|
|
e("logo-" + t).src = v.toLowerCase() + ".png";
|
|
|
|
}
|
2011-11-11 23:20:31 -07:00
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
function handle(event) {
|
|
|
|
var e = event.target;
|
2011-11-11 23:20:31 -07:00
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
if (state == TIMEOUT) {
|
|
|
|
// During startup, everything is editable
|
|
|
|
var team = e.id.substr(e.id.length - 1);
|
|
|
|
|
|
|
|
switch (e.id) {
|
|
|
|
case "name-a":
|
|
|
|
case "name-b":
|
|
|
|
teamname(team, prompt("Enter team " + team + " name", e.innerHTML));
|
|
|
|
break;
|
|
|
|
case "score-a":
|
|
|
|
case "score-b":
|
|
|
|
var s = prompt("Enter team " + team + " score", e.innerHTML);
|
|
|
|
if (! s) return;
|
|
|
|
|
|
|
|
e.innerHTML = s;
|
|
|
|
break;
|
|
|
|
case "period":
|
|
|
|
var r = prompt("Enter new time for period clock", e.innerHTML);
|
|
|
|
if (! r) return;
|
|
|
|
|
|
|
|
var t = r.split(":");
|
|
|
|
var sec = 0;
|
|
|
|
|
|
|
|
if (t.length > 3) {
|
|
|
|
e.innerHTML = "What?";
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (var i in t) {
|
|
|
|
var v = t[i];
|
|
|
|
|
|
|
|
sec = (sec * 60) + Number(v);
|
|
|
|
}
|
|
|
|
|
|
|
|
e.reset(sec*1000);
|
|
|
|
break;
|
|
|
|
case "periodtext":
|
|
|
|
period = 3 - period;
|
|
|
|
e.innerHTML = "Period " + period;
|
|
|
|
break;
|
|
|
|
case "jam":
|
2011-11-11 23:20:31 -07:00
|
|
|
state = JAM;
|
2011-11-14 22:41:03 -07:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
switch (e.id) {
|
|
|
|
case "period":
|
|
|
|
state = TIMEOUT;
|
|
|
|
break;
|
|
|
|
case "jam":
|
|
|
|
if (state == JAM) {
|
|
|
|
state = ROTATE;
|
|
|
|
} else {
|
|
|
|
state = JAM;
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
case "name-a":
|
|
|
|
case "logo-a":
|
|
|
|
score("a", -1);
|
|
|
|
break;
|
|
|
|
case "score-a":
|
|
|
|
score("a", 1);
|
|
|
|
break;
|
|
|
|
case "name-b":
|
|
|
|
case "logo-b":
|
|
|
|
score("b", -1);
|
|
|
|
break;
|
|
|
|
case "score-b":
|
|
|
|
score("b", 1);
|
|
|
|
break;
|
2011-11-11 23:20:31 -07:00
|
|
|
}
|
|
|
|
transition();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2011-11-14 22:41:03 -07:00
|
|
|
function start() {
|
|
|
|
var p = document.getElementById("period");
|
|
|
|
var j = document.getElementById("jam");
|
|
|
|
|
|
|
|
teamname("a", localStorage.rdsb_name_a || "Home");
|
|
|
|
teamname("b", localStorage.rdsb_name_b || "Visitor");
|
|
|
|
e("score-a").innerHTML = localStorage.rdsb_score_a || 0;
|
|
|
|
e("score-b").innerHTML = localStorage.rdsb_score_b || 0;
|
|
|
|
period = localStorage.rdsb_period || 1;
|
|
|
|
|
|
|
|
c = Number(localStorage.rdsb_period_clock || 1800000);
|
|
|
|
startTimer(p, 0, c);
|
|
|
|
startTimer(j, 1, 120000);
|
|
|
|
|
|
|
|
save_itimer = setInterval(save, 1000);
|
|
|
|
transition();
|
|
|
|
}
|
|
|
|
|
|
|
|
window.onload = start;
|