New penalty timer app

2012-03-21 23:28:24 -06:00 · 2012-03-21 23:28:24 -06:00 · 434ebbf6bf
parent 8de60408cb
commit 434ebbf6bf
1 changed files with 188 additions and 0 deletions
--- a/timer.html
+++ b/timer.html
@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>LADD Penalty Timer</title>
+        <style type="text/css">
+body {
+    background: black;
+    color: white;
+    text-align: center;
+}
+p {
+    width: 40%;
+    display: inline-block;
+    border: solid #444 2px;
+    border-radius: 15px;
+    margin: 1em;
+    padding: 1em;
+}
+.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;
+
+    tgt.set((tgt.remaining() + 60000) % (60000*7));
+    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 i = 0; i < 8; i += 1) {
+        var e = document.createElement("p");
+
+        startTimer(e, true);
+        e.set(0);
+        e.onclick = clicky;
+        t.appendChild(e);
+        timers.push(e);
+    }
+    update_itimer = setInterval(update, 33);
+}
+
+window.onload = start;
+        </script>
+    </head>
+    <body>
+        <div id="timers"></div>
+        <input type="button" value="Pause" onclick="pause(event)">
+    </body>
+</html>