neale
/
woozle-scoreboard
mirror of https://github.com/nealey/woozle-scoreboard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Editable, persistent

This commit is contained in:
Neale Pickett 2011-11-14 22:41:03 -07:00
parent 7943678472
commit 2c30d72b42
3 changed files with 168 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
animas.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 52 KiB

28
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- Presentation Timer 2011 Neale Pickett --> <!-- Presentation Timer 2011 Neale Pickett -->
<!-- Placed in the public domain. --> <!-- Placed in the public domain. -->
<!-- Time-stamp: "2011-11-12 08:11:20 neale" --> <!-- Time-stamp: "2011-11-14 16:44:07 neale" -->
<html> <html>
<head> <head>
<title>LADD Scoreboard</title> <title>LADD Scoreboard</title>
@ -10,38 +10,38 @@
<script type="text/javascript" src="scoreboard.js"></script> <script type="text/javascript" src="scoreboard.js"></script>
</head> </head>
<body> <body>
<table> <table onclick="handle(event);">
<tr> <tr>
<td width="20%" class="team" onclick="score('a', -1);"> <td width="20%" class="team">
Bombs <span id="name-a">-</span>
<br> <br>
<img src="bombs.png" alt="" class="logo"> <img src="" alt="" class="logo" id="logo-a">
</td> </td>
<td width="60%" rowspan="2"> <td width="60%" rowspan="2">
<p onclick="timer(0);"> <p>
<span class="timer" id="period">--:--</span> <span class="timer" id="period">--:--</span>
<br> <br>
<span id="periodtext">---</span> <span id="periodtext">-</span>
</p> </p>
<p onclick="timer(1);"> <p>
<span id="jamtext">---</span> <span id="jamtext">-</span>
<br> <br>
<span class="timer" id="jam">-:--.--</span> <span class="timer" id="jam">-:--.--</span>
</p> </p>
</td> </td>
<td width="20%" class="team" onclick="score('b', -1);"> <td width="20%" class="team">
Animas <span id="name-b">-</span>
<br> <br>
<img src="animas.png" alt="" class="logo"> <img src="" alt="" class="logo" id="logo-b">
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<span id="score-a" class="number" onclick="score('a', 1)";>0</span> <span id="score-a" class="number">-</span>
</td> </td>
<td> <td>
<span id="score-b" class="number" onclick="score('b', 1)";>0</span> <span id="score-b" class="number">-</span>
</td> </td>
</tr> </tr>
</table> </table>

213
scoreboard.js
View File

@ -1,10 +1,8 @@
var START = 0; var TIMEOUT = 0;
var JAM = 1; var JAM = 1;
var ROTATE = 2; var ROTATE = 2;
var TIMEOUT = 3;
var period = 1; var state = TIMEOUT;
var state = START;
function pad(i) { function pad(i) {
if (i < 10) { if (i < 10) {
@ -21,11 +19,8 @@ function startTimer(element, precision, duration, callback) {
var precmult = 1; var precmult = 1;
var bg; var bg;
for (var i = 0; i < precision; i += 1) { var display = function () {
precmult *= 10; var remain = element.remaining();
}
function display(remain) {
var min = Math.floor(Math.abs(remain / 60000)); var min = Math.floor(Math.abs(remain / 60000));
var sec = Math.abs(remain / 1000) % 60; var sec = Math.abs(remain / 1000) % 60;
@ -50,7 +45,7 @@ function startTimer(element, precision, duration, callback) {
element.innerHTML = ""; element.innerHTML = "";
if ((duration > 0) && (remain <= 0)) { if ((duration > 0) && (remain <= 0)) {
this.stop(); element.stop();
element.innerHTML = "0:0" + (0).toFixed(precision); element.innerHTML = "0:0" + (0).toFixed(precision);
if (callback) callback(); if (callback) callback();
return; return;
@ -58,25 +53,31 @@ function startTimer(element, precision, duration, callback) {
element.innerHTML += min + ":" + pad(sec.toFixed(precision)); element.innerHTML += min + ":" + pad(sec.toFixed(precision));
} }
function update() { // Is element timer running?
var now = (new Date()).getTime(); element.running = function () {
var remain = beginning + duration - now; return !!itimer;
display(remain);
}
// Is this timer running?
this.running = function () {
return ~~itimer;
} }
// Is this a countdown timer? // Is element a countdown timer?
this.descending = function () { element.descending = function () {
return ~~duration; return !!duration;
}
element.d = function() {
return [beginning, duration];
}
// Return time on clock
element.remaining = function () {
if (element.running()) {
return beginning + duration - (new Date()).getTime();
} else {
return duration;
}
} }
// Stop (clear timer) // Stop (clear timer)
this.stop = function () { element.stop = function () {
if (itimer) { if (itimer) {
clearInterval(itimer); clearInterval(itimer);
itimer = undefined; itimer = undefined;
@ -84,43 +85,47 @@ function startTimer(element, precision, duration, callback) {
} }
// Start // Start
this.start = function () { element.start = function () {
beginning = (new Date()).getTime(); beginning = (new Date()).getTime();
if (itimer) { if (itimer) {
return; return;
} }
itimer = setInterval(update, 100); itimer = setInterval(display, 100);
display(duration); display();
} }
// Unpause if paused // Unpause if paused
this.go = function (color) { element.go = function () {
if (itimer) return; if (itimer) return;
this.start(); element.start();
} }
// Pause if unpaused // Pause if unpaused
this.pause = function () { element.pause = function () {
if (! itimer) return; if (! itimer) return;
this.stop(); element.stop();
duration -= (new Date()).getTime() - beginning; duration -= (new Date()).getTime() - beginning;
display(duration); display();
} }
// Restart with a new time // Restart with a new time
this.reset = function (t, color) { element.reset = function (t, color) {
bg = color; bg = color;
if (color) { if (color) {
element.style.backgroundColor = color; element.style.backgroundColor = color;
} }
duration = t; duration = t;
this.start();
display(duration); display(duration);
} }
// Setup
for (var i = 0; i < precision; i += 1) {
precmult *= 10;
}
if (precision == undefined) { if (precision == undefined) {
precision = 1; precision = 1;
} }
@ -129,51 +134,56 @@ function startTimer(element, precision, duration, callback) {
element.bg = element.style.backgroundColor; element.bg = element.style.backgroundColor;
element.fg = element.style.color; element.fg = element.style.color;
} }
display();
} }
// Transition state machine based on state // Transition state machine based on state
function transition() { function transition() {
var jt = document.getElementById("jam").timer; var jt = document.getElementById("jam");
var pt = document.getElementById("period").timer; var pt = document.getElementById("period");
var ptext = document.getElementById("periodtext"); var ptext = document.getElementById("periodtext");
var jtext = document.getElementById("jamtext"); var jtext = document.getElementById("jamtext");
if (state == JAM) { if (state == JAM) {
pt.go(); pt.go();
jt.reset(120000); jt.reset(120000);
jt.start();
jtext.innerHTML = "Jam"; jtext.innerHTML = "Jam";
} else if (state == ROTATE) { } else if (state == ROTATE) {
pt.go(); pt.go();
jt.reset(30000, "#060"); jt.reset(30000, "#060");
jt.start();
jtext.innerHTML = "Rotation"; jtext.innerHTML = "Rotation";
} else if (state == TIMEOUT) { } else if (state == TIMEOUT) {
pt.pause(); pt.pause();
jt.reset(0); jt.reset(0);
jt.start();
jtext.innerHTML = "Timeout"; jtext.innerHTML = "Timeout";
} }
ptext.innerHTML = "Period " + period; ptext.innerHTML = "Period " + period;
} }
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();
}
// A timer was clicked // A timer was clicked
// 0 = period timer // 0 = period timer
// 1 = jam timer // 1 = jam timer
function timer(tn) { function timer(tn) {
if (tn == 0) {
if ((state == JAM) || (state == ROTATE)) {
state = TIMEOUT;
} else {
state = JAM;
}
} else {
if (state == JAM) {
state = ROTATE;
} else {
state = JAM;
}
}
transition(); transition();
} }
function e(id) {
return document.getElementById(id);
}
function score(team, points) { function score(team, points) {
var te = document.getElementById("score-" + team); var te = document.getElementById("score-" + team);
var ts = Number(te.innerHTML); var ts = Number(te.innerHTML);
@ -182,21 +192,106 @@ function score(team, points) {
te.innerHTML = ts; te.innerHTML = ts;
} }
function mockup() { function teamname(t, v) {
var p = document.getElementById("period"); if (! v) return;
var j = document.getElementById("jam"); e("name-" + t).innerHTML = v || "Home";
e("logo-" + t).src = v.toLowerCase() + ".png";
}
p.timer = new startTimer(p, 0, 1800000); function handle(event) {
var e = event.target;
function jtexp() { if (state == TIMEOUT) {
if (state == JAM) { // During startup, everything is editable
state = ROTATE; var team = e.id.substr(e.id.length - 1);
} else {
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":
state = JAM; state = JAM;
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;
} }
transition(); transition();
} }
j.timer = new startTimer(j, 1, 120000, jtexp);
} }
window.onload = mockup; 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;