2012-03-21 23:28:24 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>LADD Penalty Timer</title>
|
2012-03-22 12:52:12 -06:00
|
|
|
<meta name="viewport" content="width=device-width">
|
2012-03-21 23:28:24 -06:00
|
|
|
<style type="text/css">
|
|
|
|
|
body {
|
2012-03-22 12:52:12 -06:00
|
|
|
background: url(bg.jpg) #222;
|
|
|
|
|
background-size: 100% auto;
|
|
|
|
|
color: #eee;
|
2012-03-21 23:28:24 -06:00
|
|
|
text-align: center;
|
|
|
|
|
}
|
2012-03-22 12:52:12 -06:00
|
|
|
table {
|
|
|
|
|
margin: auto auto;
|
|
|
|
|
}
|
|
|
|
|
td {
|
|
|
|
|
font-size: 200%;
|
2012-03-21 23:28:24 -06:00
|
|
|
border: solid #444 2px;
|
|
|
|
|
border-radius: 15px;
|
|
|
|
|
margin: 1em;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
}
|
2012-03-22 12:52:12 -06:00
|
|
|
.jammer td {
|
|
|
|
|
border-color: #aa0;
|
|
|
|
|
}
|
2012-03-21 23:28:24 -06:00
|
|
|
.expired {
|
|
|
|
|
background: #080;
|
|
|
|
|
}
|
|
|
|
|
.lowtime {
|
|
|
|
|
background: #880;
|
|
|
|
|
}
|
|
|
|
|
.paused {
|
|
|
|
|
background: #444;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var timer_updates = [];
|
|
|
|
|
function update() {
|
|
|
|
|
for (i in timer_updates) {
|
|
|
|
|
var u = timer_updates[i];
|
|
|
|
|
|
|
|
|
|
u();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Create a timer on [element].
|
|
|
|
|
// If [tenths] is true, show tenths of a second.
|
|
|
|
|
// If [callback] is defined, call it when time runs out.
|
|
|
|
|
function startTimer(element, tenths, callback) {
|
|
|
|
|
var itimer;
|
|
|
|
|
var startTime;
|
|
|
|
|
var duration = 0;
|
|
|
|
|
var className;
|
|
|
|
|
|
|
|
|
|
// Re-calculate and update displayed time
|
|
|
|
|
function refresh() {
|
|
|
|
|
var remain = element.remaining();
|
|
|
|
|
var min = Math.floor(Math.abs(remain / 60000));
|
|
|
|
|
var sec = (Math.floor(Math.abs(remain / 100)) / 10) % 60;
|
|
|
|
|
|
|
|
|
|
// Set classes
|
|
|
|
|
element.className = className;
|
|
|
|
|
if (! itimer) {
|
|
|
|
|
element.className += " paused";
|
|
|
|
|
}
|
|
|
|
|
if (! className) {
|
|
|
|
|
if (remain <= 0) {
|
|
|
|
|
element.className += " expired";
|
|
|
|
|
} else if (remain <= 10000) {
|
|
|
|
|
element.className += " lowtime";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Has the timer run out?
|
|
|
|
|
if ((duration > 0) && (remain <= 0)) {
|
|
|
|
|
duration = 0;
|
|
|
|
|
sec = 0;
|
|
|
|
|
clearInterval(itimer);
|
|
|
|
|
itimer = undefined;
|
|
|
|
|
if (callback) {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// .toFixed() rounds, we want to truncate
|
|
|
|
|
if (! tenths) {
|
|
|
|
|
sec = Math.floor(sec);
|
|
|
|
|
} else {
|
|
|
|
|
sec = sec.toFixed(1);
|
|
|
|
|
}
|
|
|
|
|
// Zero-pad
|
|
|
|
|
if (sec < 10) {
|
|
|
|
|
sec = "0" + sec;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var t = min + ":" + sec;
|
|
|
|
|
if (t != element.innerHTML) {
|
|
|
|
|
element.innerHTML = t;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Return remaining time in milliseconds
|
|
|
|
|
element.remaining = function() {
|
|
|
|
|
if (itimer) {
|
|
|
|
|
var now = (new Date()).getTime();
|
|
|
|
|
return duration - (now - startTime);
|
|
|
|
|
} else {
|
|
|
|
|
return duration;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Set timer to [d] milliseconds.
|
|
|
|
|
// Put element into class [cn], if set.
|
|
|
|
|
element.set = function(t, cn) {
|
|
|
|
|
startTime = (new Date()).getTime();
|
|
|
|
|
duration = t;
|
|
|
|
|
className = cn;
|
|
|
|
|
refresh();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Start timer
|
|
|
|
|
element.start = function() {
|
|
|
|
|
if (! itimer) {
|
|
|
|
|
startTime = (new Date()).getTime();
|
|
|
|
|
itimer = setInterval(refresh, 33);
|
|
|
|
|
}
|
|
|
|
|
refresh();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Stop timer
|
|
|
|
|
element.stop = function() {
|
|
|
|
|
if (itimer) {
|
|
|
|
|
duration = element.remaining();
|
|
|
|
|
clearInterval(itimer);
|
|
|
|
|
itimer = undefined;
|
|
|
|
|
}
|
|
|
|
|
refresh();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clicky(event) {
|
|
|
|
|
var tgt = event.target || window.event.srcElement;
|
2012-03-22 12:52:12 -06:00
|
|
|
var rem = tgt.remaining();
|
|
|
|
|
var orem = (tgt.other?tgt.other.remaining():null);
|
|
|
|
|
|
|
|
|
|
if (tgt.other && (orem > 0)) {
|
|
|
|
|
// If jammer B gets a penalty when jammer A is in the box,
|
|
|
|
|
// deduct a minute from A. If the result is negative, A
|
|
|
|
|
// gets out and B serves the absolute value: this works
|
|
|
|
|
// out to be the amount of time under a minute A served.
|
|
|
|
|
|
|
|
|
|
orem -= 60000;
|
|
|
|
|
if (orem < 0) {
|
|
|
|
|
tgt.set(-orem);
|
|
|
|
|
tgt.start();
|
|
|
|
|
tgt.other.set(0);
|
|
|
|
|
tgt.other.stop();
|
|
|
|
|
} else {
|
|
|
|
|
tgt.other.set(orem);
|
|
|
|
|
tgt.other.start();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
tgt.set((rem + 60000) % (60000*8));
|
|
|
|
|
tgt.start();
|
|
|
|
|
}
|
2012-03-21 23:28:24 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var timers = [];
|
|
|
|
|
|
|
|
|
|
function pause(event) {
|
|
|
|
|
var tgt = event.target || window.event.srcElement;
|
|
|
|
|
var pause = (tgt.value == "Pause");
|
|
|
|
|
|
|
|
|
|
for (var i in timers) {
|
|
|
|
|
var e = timers[i];
|
|
|
|
|
|
|
|
|
|
if (e.remaining()) {
|
|
|
|
|
if (pause) {
|
|
|
|
|
e.stop();
|
|
|
|
|
} else {
|
|
|
|
|
e.start();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (pause) {
|
|
|
|
|
tgt.value = "Resume";
|
|
|
|
|
} else {
|
|
|
|
|
tgt.value = "Pause";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function start() {
|
|
|
|
|
var t = document.getElementById("timers");
|
|
|
|
|
|
2012-03-22 12:52:12 -06:00
|
|
|
for (var j = 0; j < 4; j += 1) {
|
|
|
|
|
var r = document.createElement("tr");
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < 2; i += 1) {
|
|
|
|
|
var d = document.createElement("td");
|
|
|
|
|
|
|
|
|
|
startTimer(d, true);
|
|
|
|
|
d.set(0);
|
|
|
|
|
d.onclick = clicky;
|
|
|
|
|
r.appendChild(d);
|
|
|
|
|
timers.push(d);
|
|
|
|
|
}
|
|
|
|
|
if (j == 0) {
|
|
|
|
|
// Jammers are speshul
|
|
|
|
|
|
|
|
|
|
var a = r.children[0];
|
|
|
|
|
var b = r.children[1];
|
2012-03-21 23:28:24 -06:00
|
|
|
|
2012-03-22 12:52:12 -06:00
|
|
|
a.other = b;
|
|
|
|
|
b.other = a;
|
|
|
|
|
r.className = "jammer";
|
|
|
|
|
}
|
|
|
|
|
t.appendChild(r);
|
2012-03-21 23:28:24 -06:00
|
|
|
}
|
|
|
|
|
update_itimer = setInterval(update, 33);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.onload = start;
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2012-03-22 12:52:12 -06:00
|
|
|
<table id="timers">
|
|
|
|
|
</table>
|
2012-03-21 23:28:24 -06:00
|
|
|
<input type="button" value="Pause" onclick="pause(event)">
|
2012-03-22 12:52:12 -06:00
|
|
|
<ul>
|
|
|
|
|
<li>Tap a timer once per penalty</li>
|
|
|
|
|
<li>Top timers are for jammers and behave differently</li>
|
|
|
|
|
<li>Reload page to reset all timers to 0:00</li>
|
|
|
|
|
<li>WFTDA rules are unclear on how the penalty timer handles no-jammer jams.
|
|
|
|
|
You'll need to work it out with the refs.</li>
|
|
|
|
|
</ul>
|
2012-03-21 23:28:24 -06:00
|
|
|
</body>
|
|
|
|
|
</html>
|
