Editable, persistent
This commit is contained in:
parent
7943678472
commit
2c30d72b42
BIN
animas.jpg
BIN
animas.jpg
Binary file not shown.
Before Width: | Height: | Size: 52 KiB |
28
index.html
28
index.html
|
@ -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>
|
||||||
|
|
203
scoreboard.js
203
scoreboard.js
|
@ -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?
|
// Is element a countdown timer?
|
||||||
this.running = function () {
|
element.descending = function () {
|
||||||
return ~~itimer;
|
return !!duration;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Is this a countdown timer?
|
element.d = function() {
|
||||||
this.descending = function () {
|
return [beginning, duration];
|
||||||
return ~~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) {
|
||||||
|
// 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":
|
||||||
|
state = JAM;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
switch (e.id) {
|
||||||
|
case "period":
|
||||||
|
state = TIMEOUT;
|
||||||
|
break;
|
||||||
|
case "jam":
|
||||||
if (state == JAM) {
|
if (state == JAM) {
|
||||||
state = ROTATE;
|
state = ROTATE;
|
||||||
} else {
|
} else {
|
||||||
state = JAM;
|
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;
|
||||||
|
|
Loading…
Reference in New Issue