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

213
scoreboard.js
View File

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