Working penalty tracker, but ugly code

penalties.js

@@ -0,0 +1,160 @@
+function penalties (team) {
+    var table = document.getElementById("penalties-" + team);
+
+    var minors = table.getElementsByClassName("minors")[0];
+    var majors = table.getElementsByClassName("majors")[0];
+    var sk8ers = table.getElementsByClassName("sk8ers")[0];
+
+    var mindiv = minors.getElementsByTagName("div");
+    var majdiv = majors.getElementsByTagName("div");
+    var sk8div = sk8ers.getElementsByTagName("div");
+
+    var ret = [];
+
+    for (var i = 0; i < 20; i += 1) {
+        ret.push([sk8div[i].text,
+                  mindiv[i].value || 0,
+                  majdiv[i].value || 0]);
+    }
+
+    return ret;
+}
+
+function penalties_save () {
+    var name_a = document.getElementById("name-a").innerHTML;
+    var name_b = document.getElementById("name-b").innerHTML;
+
+    var pen_a = JSON.stringify(penalties("a"));
+    var pen_b = JSON.stringify(penalties("b"));
+
+    localStorage["rdsb_penalties_a"] = pen_a;
+    localStorage["rdsb_penalties_b"] = pen_b;
+
+    console.log(name_a);
+    localStorage["rdsb_roster " + name_a] = pen_a;
+    localStorage["rdsb_roster " + name_b] = pen_b;
+}
+
+function penalties_setdiv (div, value) {
+    if (div.text == undefined) {
+        div.value = value;
+        div.style.height = (value||0) + "em";
+        div.innerHTML = value?value:"";
+    } else {
+        div.text = value;
+        div.innerHTML = value?"":"•";
+        for (var i in value) {
+            var c = value[i];
+            // XXX: use CSS "text-wrap: unrestricted" when supported
+            div.innerHTML += c + " ";
+        }
+    }
+}
+
+function penalties_load (team, values) {
+    var table = document.getElementById("penalties-" + team);
+
+    var minors = table.getElementsByClassName("minors")[0];
+    var majors = table.getElementsByClassName("majors")[0];
+    var sk8ers = table.getElementsByClassName("sk8ers")[0];
+
+    var mindiv = minors.getElementsByTagName("div");
+    var majdiv = majors.getElementsByTagName("div");
+    var sk8div = sk8ers.getElementsByTagName("div");
+
+    for (var i = 0; i < values.length; i += 1) {
+        penalties_setdiv(sk8div[i], values[i][0]);
+        penalties_setdiv(mindiv[i], values[i][1]);
+        penalties_setdiv(majdiv[i], values[i][2]);
+    }
+}
+
+function penalties_setTeamName (team, name) {
+    var roster_in = localStorage["rdsb_roster " + name];
+    var roster_out = [];
+
+    if (roster_in) {
+        roster_in = JSON.parse(roster_in);
+    }
+
+    for (var i = 0; i < 20; i += 1) {
+        if (! roster_in) {
+            roster_out.push(["", 0, 0]);
+        } else {
+            roster_out.push([roster_in[i][0], 0, 0])
+        }
+    }
+    penalties_load(team, roster_out);
+}
+
+function penalties_click (event) {
+    var element = event.currentTarget;
+    var pops = element.parentNode;
+    var div = element.getElementsByTagName("div")[0];
+    var inc = event.shiftKey?-1:1;
+    var val;
+
+    if (pops.className == "minors") {
+        val = ((div.value || 0) + inc + 4) % 4;
+        if ((inc == 1) && (val == 0)) {
+            var majdiv = div.majdiv;
+            
+            penalties_setdiv(majdiv, ((majdiv.value || 0) + 1) % 9);
+        }
+    } else if (pops.className == "majors") {
+        val = ((div.value || 0) + inc + 9) % 9;
+    } else {
+        val = prompt("Enter skater number", div.text);
+    }
+
+    if (val != undefined) {
+        penalties_setdiv(div, val);
+        penalties_save();
+    }
+}
+
+function penalties_init () {
+    // Populate ALL THREE ROWS AT ONCE because I'm crazy like that.
+    for (var j = 0; j < 2; j += 1) {
+        var team = (j==0)?"a":"b";
+
+        var table = document.getElementById("penalties-" + team);
+        var minors = table.getElementsByClassName("minors")[0];
+        var majors = table.getElementsByClassName("majors")[0];
+        var sk8ers = table.getElementsByClassName("sk8ers")[0];
+
+        for (var i = 0; i < 20; i += 1) {
+            var td;
+            var div;
+
+            var majdiv = document.createElement("div");
+            td = document.createElement("td");
+            td.onclick = penalties_click;
+            td.appendChild(majdiv);
+            majors.appendChild(td);
+
+
+            td = document.createElement("td");
+            div = document.createElement("div");
+            div.majdiv = majdiv;
+            td.onclick = penalties_click;
+            td.appendChild(div);
+            minors.appendChild(td);
+
+
+            div = document.createElement("div");
+            div.text = "";
+            td = document.createElement("td");
+            td.onclick = penalties_click;
+            td.appendChild(div);
+            sk8ers.appendChild(td);
+        }
+    }
+
+    if (localStorage.rdsb_penalties_a) {
+        penalties_load("a", JSON.parse(localStorage.rdsb_penalties_a));
+    }
+    if (localStorage.rdsb_penalties_b) {
+        penalties_load("b", JSON.parse(localStorage.rdsb_penalties_b));
+    }
+}

scoreboard.css

@@ -63,4 +63,43 @@
 }
 #jam.rotate {
     background: #060;
-}
+}
+
+
+/*
+ * Penalties
+ */
+#penalties-a {
+    float: left;
+    border-collapse: collapse;
+}
+#penalties-b {
+    float: right;
+    border-collapse: collapse;
+}
+
+#penalties td {
+    cursor: crosshair;
+    border: 1px solid rgba(255, 255, 255, 0.075);
+    padding: 0;
+    vertical-align: bottom;
+}
+
+#penalties .minors td {
+    height: 3em;
+}
+#penalties .majors td {
+    height: 8em;
+}
+#penalties .minors div {
+    background-color: #880;
+    color: black;
+}
+#penalties .majors div {
+    background-color: #800;
+}
+#penalties .sk8ers td {
+    vertical-align: top;
+    width: 1em;
+    line-height: 75%;
+}

scoreboard.html

@@ -37,48 +37,12 @@
         width: 100%;
       }
 
-#penalties-a {
-    float: left;
-    border-collapse: collapse;
-}
-#penalties-b {
-    float: right;
-    border-collapse: collapse;
-}
-
-#penalties td {
-    border: 1px solid rgba(255, 255, 255, 0.075);
-}
-
-#penalties .minors {
-    height: 3.2em;
-    vertical-align: bottom;
-}
-#penalties .majors {
-    height: 8.2em;
-    vertical-align: bottom;
-}
-#penalties .minors div {
-    background-color: #880;
-    color: black;
-}
-#penalties .majors div {
-    background-color: #800;
-}
-#penalties .sk8ers div {
-    transform: rotate(90deg);
-    /* Remove all the cruft below here when browsers handle CSS3 rotation */
-    -moz-transform: rotate(90deg); 
-    -webkit-transform: rotate(90deg); 
-    -o-transform: rotate(90deg); 
-    -ms-transform: rotate(90deg); 
-    width: 1em;
-}
 
     </style>
     <link rel="stylesheet" type="text/css" href="scoreboard.css">
     <script type="text/javascript" src="logos.js"></script>
     <script type="text/javascript" src="scoreboard.js"></script>
+    <script type="text/javascript" src="penalties.js"></script>
     <script type="text/javascript">
       window.onkeypress = key;
     </script>
@@ -137,79 +101,5 @@
         <tr class="sk8ers"></tr>
       </table>
     </div>
-
-    <script type="text/javascript">
-function penalties (table) {
-    var minors = table.getElementById
-}
-
-function clicko (event) {
-    var element = event.currentTarget;
-    var pops = element.parentNode;
-    var div = element.getElementsByTagName("div")[0];
-    var max;
-
-    if (pops.className == "minors") {
-        max = 4;
-    } else if (pops.className == "majors") {
-        max = 9;
-    } else {
-        var s = prompt("Enter skater number", div.innerHTML);
-
-        if (s) {
-            div.innerHTML = s;
-        }
-        return;
-    }
-
-    div.value = ((div.value || 0) + 1) % max;
-    div.style.height = div.value + "em";
-    div.innerHTML = div.value?div.value:"";
-}
-
-function go () {
-    // Populate ALL THREE ROWS AT ONCE because I'm crazy like that.
-    for (var j = 0; j < 2; j += 1) {
-        var team = (j==0)?"a":"b";
-
-        var table = document.getElementById("penalties-" + team);
-        var minors = table.getElementsByClassName("minors")[0];
-        var majors = table.getElementsByClassName("majors")[0];
-        var sk8ers = table.getElementsByClassName("sk8ers")[0];
-
-        for (var i = 0; i < 20; i += 1) {
-            var td;
-            var div;
-
-            td = document.createElement("td");
-            div = document.createElement("div");
-            div.value = (i % 4);
-            div.style.height = div.value + "em";
-            div.appendChild(document.createTextNode(div.value?div.value:""));
-            td.onclick = clicko;
-            td.appendChild(div);
-            minors.appendChild(td);
-
-            div = document.createElement("div");
-            div.value = (i % 9);
-            div.style.height = div.value + "em";
-            div.appendChild(document.createTextNode(div.value?div.value:""));
-            td = document.createElement("td");
-            td.onclick = clicko;
-            td.appendChild(div);
-            majors.appendChild(td);
-
-            div = document.createElement("div");
-            div.appendChild(document.createTextNode(i));
-            td = document.createElement("td");
-            td.onclick = clicko;
-            td.appendChild(div);
-            sk8ers.appendChild(td);
-        }
-    }
-}
-
-go();
-    </script>
   </body>
 </html>

scoreboard.js

@@ -28,7 +28,7 @@
 /* State names */
 var SETUP = 0;                  // !P 30:00   !J 2:00
 var JAM = 1;                    //  P          J 2:00  
-var ROTATE = 2;                 //  P          J 1:00
+var LINEUP = 2;                 //  P          J 1:00
 var TIMEOUT = 3;                // !P          J 1:00
 
 var periodtext = ["Period 1", "Halftime", "Period 2", "Break"];
@@ -152,11 +152,11 @@ function transition(newstate) {
         jt.set(120000);
         jt.start();
         jtext.innerHTML = "Jam";
-    } else if (state == ROTATE) {
+    } else if (state == LINEUP) {
         pt.start();
-        jt.set(30000, "rotate");
+        jt.set(30000);
         jt.start();
-        jtext.innerHTML = "Rotation";
+        jtext.innerHTML = "Lineup";
     } else if (state == TIMEOUT) {
         pt.stop();
         if (pt.remaining() <= 0) {
@@ -203,6 +203,7 @@ function handle(event) {
             if (tn) {
                 tgt.innerHTML = tn;
             }
+            penalties_setTeamName(team, tn);
         }
         break;
     case "logo-a":
@@ -222,6 +223,10 @@ function handle(event) {
 
                 e("name-" + team).innerHTML = t[0];
                 tgt.src = "logos/" + t[1];
+
+                if (window.penalties) {
+                    penalties_setTeamName(team, t[0]);
+                }
             }
         } else {
             score(team, -adj);
@@ -282,7 +287,7 @@ function handle(event) {
         break;
     case "jam":
         if (state == JAM) {
-            newstate = ROTATE;
+            newstate = LINEUP;
         } else {
             newstate = JAM;
         }
@@ -308,7 +313,7 @@ function key(event) {
     switch (String.fromCharCode(event.which || 0)) {
     case " ":
         if (state == JAM) {
-            newstate = ROTATE;
+            newstate = LINEUP;
         } else {
             newstate = JAM;
         }
@@ -353,8 +358,9 @@ function save() {
 }
     
 function start() {
-    var p = document.getElementById("period");
+    if (window.penalties) {
-    var j = document.getElementById("jam");
+        window.penalties_init();
+    }
 
     e("name-a").innerHTML = dfl(localStorage.rdsb_name_a, "Home");
     e("name-b").innerHTML = dfl(localStorage.rdsb_name_b, "Visitor");
@@ -369,10 +375,12 @@ function start() {
     e("jamtext").innerHTML = "Setup";
     transition();
 
+    var p = document.getElementById("period");
     c = Number(localStorage.rdsb_period_clock || 1800000);
     startTimer(p);
     p.set(c);
 
+    var j = document.getElementById("jam");
     startTimer(j, true);
     j.set(120000);