Penalty timer needs to be its own thing
This commit is contained in:
parent
e70a430dcb
commit
687f809817
238
timer.html
238
timer.html
|
|
@ -1,238 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>LADD Penalty Timer</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: url(bg.jpg) #222;
|
||||
background-size: 100% auto;
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
}
|
||||
table {
|
||||
margin: auto auto;
|
||||
}
|
||||
td {
|
||||
font-size: 200%;
|
||||
border: solid #444 2px;
|
||||
border-radius: 15px;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
.jammer td {
|
||||
border-color: #aa0;
|
||||
}
|
||||
.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;
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
|
||||
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];
|
||||
|
||||
a.other = b;
|
||||
b.other = a;
|
||||
r.className = "jammer";
|
||||
}
|
||||
t.appendChild(r);
|
||||
}
|
||||
update_itimer = setInterval(update, 33);
|
||||
}
|
||||
|
||||
window.onload = start;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<table id="timers">
|
||||
</table>
|
||||
<input type="button" value="Pause" onclick="pause(event)">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue