woozle-scoreboard/derby.html

254 lines
5.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<!-- Presentation Timer 2011 Neale Pickett -->
<!-- Placed in the public domain. -->
<!-- Time-stamp: "2011-11-11 15:06:12 neale" -->
<html>
<head>
<title>LADD Scoreboard</title>
<meta charset="utf-8">
<style>
@font-face {
font-family: Most Wazted;
src: url(Mostwasted.ttf);
}
@font-face {
font-family: Comunicacion Digital;
src: url(Comunicacion.ttf);
}
body {
background: #222 url(stone-cmp.jpg);
color: #eee;
font-family: Most Wazted, fantasy;
font-size: 5em;
text-align: center;
}
table {
width: 100%;
}
td {
vertical-align: top;
}
p {
margin: 0;
}
.team {
font-family: Comunicacion Digital;
}
img.logo {
max-width: 100%;
}
.number {
color: yellow;
font-family: sans-serif;
font-weight: bold;
}
.timer {
background: #000;
font-size: 150%;
font-family: sans-serif;
border-radius: 15px;
padding: 0 0.1em;
}
</style>
<script type="text/javascript">
var nperiod = 1;
function pad(i) {
if (i < 10) {
return "0" + i;
} else {
return i;
}
}
// Start a timer on [element] for [duration] milliseconds.
function startTimer(element, precision) {
var beginning;
var duration;
var itimer;
function display(remain) {
var min = Math.floor(Math.abs(remain / 60000));
var sec = Math.abs(remain / 1000) % 60;
if (itimer) {
element.style.color = element.fg;
} else {
element.style.color = "#888";
}
if (! duration) {
element.style.backgroundColor = "#044";
} else if (remain < 20000) {
element.style.backgroundColor = "#f24";
} else {
element.style.backgroundColor = element.bg;
}
element.innerHTML = "";
if ((duration > 0) && (remain < 0)) {
element.innerHTML = "0:0" + (0).toFixed(precision);
this.stop();
return;
}
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 this a countdown timer?
this.descending = function () {
return ~~duration;
}
// Stop (clear timer)
this.stop = function () {
if (itimer) {
clearInterval(itimer);
itimer = undefined;
}
}
// Start
this.start = function () {
beginning = (new Date()).getTime();
if (itimer) {
return;
}
itimer = setInterval(update, 33);
display(duration);
}
// Pause/play toggle
this.toggle = function () {
var now = (new Date()).getTime();
if (itimer) {
this.stop();
duration -= now - beginning;
} else {
this.start();
}
display(duration);
}
// Re-set with a new time
this.reset = function (t) {
duration = t;
this.start();
display(duration);
}
if (precision == undefined) {
precision = 1;
}
if (element.bg == undefined) {
element.bg = element.style.backgroundColor;
element.fg = element.style.color;
}
}
function period() {
var pt = document.getElementById("period").timer;
var jt = document.getElementById("jam").timer;
if (! pt.descending()) {
pt.reset(1800000);
return;
} else if (pt.running()) {
// pause period clock, count jam clock up
jt.reset(0);
} else {
// Reset jam clock, resume period clock
jt.reset(120000);
}
pt.toggle();
}
function jam() {
var jt = document.getElementById("jam").timer;
var pt = document.getElementById("period").timer;
var jtext = document.getElementById("jamtext");
if (jt.descending()) {
jtext.innerHTML = "-";
jt.reset(0);
} else {
jtext.innerHTML = "Jam";
jt.reset(120000);
}
if (! pt.descending()) {
period();
}
}
function score(team, points) {
var te = document.getElementById("score-" + team);
var ts = Number(te.innerHTML);
ts += points;
te.innerHTML = ts;
}
function mockup() {
var p = document.getElementById("period");
var j = document.getElementById("jam");
p.timer = new startTimer(p, 0);
// p.timer.reset(1800000);
j.timer = new startTimer(j, 1);
// j.timer.reset(120000);
}
window.onload = mockup;
</script>
</head>
<body>
<table>
<tr>
<td width="20%" class="team" onclick="score('a', -1);">
Bombs<br>
<img src="bombs.png" alt="" class="logo">
</td>
<td width="60%" rowspan="2">
<p onclick="period();">
<span class="timer" id="period">--:--</span>
<br>
<span id="periodtext">---</span>
</p>
<p onclick="jam();">
<span id="jamtext">---</span>
<br>
<span class="timer" id="jam">-:--.--</span>
</p>
</td>
<td width="20%" class="team" onclick="score('b', -1);">
Animas<br>
<img src="animas.png" alt="" class="logo">
</td>
</tr>
<tr>
<td>
<span id="score-a" class="number" onclick="score('a', 1)";>0</span>
</td>
<td>
<span id="score-b" class="number" onclick="score('b', 1)";>0</span>
</td>
</tr>
</table>
</body>
</html>