Penalty timer needs to be its own thing

2012-04-09 21:20:08 -06:00 · 2012-04-09 21:20:08 -06:00 · 687f809817
parent e70a430dcb
commit 687f809817
1 changed files with 0 additions and 238 deletions
--- a/timer.html
+++ b/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>