simpler, more uniform, operation and manual

scoreboard.js

@@ -19,6 +19,9 @@
 /* You can only have one scoreboard per page.  This limitation is mostly
  * because elements need specific id= attributes, and these attribumets
  * must be unique within a page.
+ *
+ * Corollary: don't change element ids without making a corresponding
+ * change in this file.
  */
 
 
@@ -28,7 +31,7 @@ var JAM = 1;                    //  P          J 2:00
 var ROTATE = 2;                 //  P          J 1:00
 var TIMEOUT = 3;                // !P          J 1:00
 
-var periods = ["Period 1", "Break", "Period 2"];
+var periodtext = ["Period 1", "Halftime", "Period 2", "Break"];
 var period = 0;
 
 var state = SETUP;
@@ -128,11 +131,8 @@ function startTimer(element, tenths, callback) {
 function transition(newstate) {
     var jt = document.getElementById("jam");
     var pt = document.getElementById("period");
-    var ptext = document.getElementById("periodtext");
     var jtext = document.getElementById("jamtext");
 
-    ptext.innerHTML = periods[period];
-
     if ((newstate == undefined) || (newstate == state)) {
         return;
     }
@@ -159,17 +159,6 @@ function transition(newstate) {
     }
 }
 
-function save() {
-    localStorage.rdsb_name_a = e("name-a").innerHTML;
-    localStorage.rdsb_name_b = e("name-b").innerHTML;
-    localStorage.rdsb_logo_a = e("logo-a").src;
-    localStorage.rdsb_logo_b = e("logo-b").src;
-    localStorage.rdsb_score_a = e("score-a").innerHTML;
-    localStorage.rdsb_score_b = e("score-b").innerHTML;
-    localStorage.rdsb_period = period;
-    localStorage.rdsb_period_clock = e("period").remaining();
-}
-    
 
 function e(id) {
     return document.getElementById(id);
@@ -183,15 +172,6 @@ function score(team, points) {
     te.innerHTML = ts;
 }
 
-function adjust_timeouts(team, dir) {
-    var i;
-    var t = e("timeouts-" + team);
-
-    t.val = (t.val + 4 + dir) % 4;
-
-    t.innerHTML = t.val;
-}
-
 var preset = {a:-1, b:-1};
 function logo_rotate(team, dir) {
     var t;
@@ -206,6 +186,8 @@ function logo_rotate(team, dir) {
 function handle(event) {
     var e = event.target;
     var team = e.id.substr(e.id.length - 1);
+    var adj = event.shiftKey?-1:1;
+    var mod = (event.ctrlKey || event.altKey);
     var newstate;
 
     switch (e.id) {
@@ -222,22 +204,27 @@ function handle(event) {
     case "logo-a":
     case "logo-b":
         if (state == SETUP) {
-            if (event.ctrlKey || event.altKey) {
+            if (mod) {
                 var u = prompt("Enter URL to team " + team + " logo");
 
                 if (u) {
                     e.src = u;
                 }
             } else {
-                logo_rotate(team, event.shiftKey?-1:1);
+                logo_rotate(team, adj);
             }
         } else {
-            score(team, -1);
+            score(team, -adj);
         }
         break;
     case "timeouts-a":
     case "timeouts-b":
-        adjust_timeouts(team, -1);
+        // Allow for timeouts > 3
+        var v = Number(e.innerHTML);
+
+        v -= adj;
+        if (v == -1) v = 3;
+        e.innerHTML = v;
         break;
     case "period":
         if ((state == SETUP) || (state == TIMEOUT)) {
@@ -263,7 +250,17 @@ function handle(event) {
         }
         break;
     case "periodtext":
-        period = (period + 1) % 3;
+        var pt;
+
+        if (mod) {
+            pt = prompt("Enter new period indicator text", e.innerHTML);
+        } else {
+            var ptl = periodtext.length;
+
+            period = (period + ptl + adj) % ptl;
+            pt = periodtext[period];
+        }
+        if (pt) e.innerHTML = pt;
         break;
     case "jam":
         if (state == JAM) {
@@ -279,10 +276,8 @@ function handle(event) {
             if (s) {
                 e.innerHTML = s;
             }
-        } else if (event.shiftKey) {
-            score(team, -1);
         } else {
-            score(team, 1);
+            score(team, adj);
         }
         break;
     }
@@ -328,6 +323,17 @@ function dfl(v, d) {
     }
 }
 
+function save() {
+    localStorage.rdsb_name_a = e("name-a").innerHTML;
+    localStorage.rdsb_name_b = e("name-b").innerHTML;
+    localStorage.rdsb_logo_a = e("logo-a").src;
+    localStorage.rdsb_logo_b = e("logo-b").src;
+    localStorage.rdsb_score_a = e("score-a").innerHTML;
+    localStorage.rdsb_score_b = e("score-b").innerHTML;
+    localStorage.rdsb_period = period;
+    localStorage.rdsb_period_clock = e("period").remaining();
+}
+    
 function start() {
     var p = document.getElementById("period");
     var j = document.getElementById("jam");
@@ -338,13 +344,12 @@ function start() {
     e("logo-b").src = dfl(localStorage.rdsb_logo_b, "#");
     e("score-a").innerHTML = dfl(localStorage.rdsb_score_a, 0);
     e("score-b").innerHTML = dfl(localStorage.rdsb_score_b, 0);
-    e("timeouts-a").val = dfl(localStorage.rdsb_timeout_a, 3);
+    e("timeouts-a").innerHTML = dfl(localStorage.rdsb_timeout_a, 3);
-    e("timeouts-b").val = dfl(localStorage.rdsb_timeout_b, 3);
+    e("timeouts-b").innerHTML = dfl(localStorage.rdsb_timeout_b, 3);
-    adjust_timeouts("a", 0);
+    period = Number(localStorage.rdsb_period) || 0;
-    adjust_timeouts("b", 0);
+    e("periodtext").innerHTML = periodtext[period];
-    period = localStorage.rdsb_period || 1;
-    e("periodtext").innerHTML = "Period " + period;
     e("jamtext").innerHTML = "Setup";
+    transition();
 
     c = Number(localStorage.rdsb_period_clock || 1800000);
     startTimer(p);

usage.html

@@ -28,22 +28,43 @@
     <img src="scoreboard-explained.png" alt="Annotated scoreboard"
          style="border: solid black 2px;">
 
+    <p>
+      If you don't like reading manuals, just start clicking on things;
+      it's supposed to be easy to figure out.
+    </p>
+
+    <dl>
+      <dt>Space Bar</dt>
+      <dd>Switch between Jam and Rotation</dd>
+
+      <dt>T</dt>
+      <dd>Enter timeout</dd>
+
+      <dt>A / Shift-A</dt>
+      <dd>Add / subtract a point on the left</dd>
+
+      <dt>B / Shift-B</dt>
+      <dd>Add / subtract a point on the right</dd>
+
+      <dt>F5</dt>
+      <dd>Enter Setup mode</dd>
+    </dl>
+
     <h1>Setup</h1>
 
     <ul>
       <li>
-        When the state indicator reads "Setup", you can click on almost
+        When the state indicator says "Setup", you can click on almost
         anything to change it.
       </li>
       <li>
         Set the logo before you change the team name.
       </li>
       <li>
-        If your team's logo and name isn't in the list,
+        If your team's logo and name isn't in <a href="logos.html">the
-        please <a href="mailto:neale&#64;woozle.org">mail them to me</a>
+        list</a>, please email them to me so I can add them.
-        and I will add them.
       <li>
-        Reload the page (click "Reload" or type F5) to get back to setup
+        Reload the page (click "Reload" or type F5) to get back to Setup
         mode.  Scores, timeouts, and period clock time are all saved.
       </li>
       <li>
@@ -102,8 +123,8 @@
         it to change it to a different time.
       </li>
       <li>
-        Click the period indicator to cycle between "Period 1", "Break",
+        Click the period indicator to cycle between "Period 1",
-        and "Period 2".
+        "Halftime", "Period 2", and "Break".
       </li>
     </ul>
 
@@ -115,9 +136,10 @@
       <dd>
         <ol>
           <li>Type "T" to enter timeout mode.</li>
-          <li>Click the period indicator until it says "Break"</li>
+          <li>Click the period indicator until it says "Halftime" or
+          "Break"</li>
           <li>Click the period clock.</li>
-          <li>Enter the duration of halftime.</li>
+          <li>Enter the duration of the break.</li>
           <li>Type Space Bar to start counting down.</li>
           <li>It's okay to let the jam clock reach 0:00.</li>
         </ol>
@@ -126,50 +148,51 @@
       <dt>20-minute periods</dt>
       <dd>
         <ol>
-          <li>During setup or timeout, click the period clock.</li>
+          <li>During Setup or Timeout, click the period clock.</li>
           <li>Enter "20:00" for the new time.</li>
           <li>Click the period indicator until it displays the
-            appropriate period</li>
+            right period.</li>
         </ol>
       </dd>
     </dl>
 
 
-    <h1>If the browser exits</h1>
+    <h1>Advanced Tips</h1>
-    <p>
-      Shit happens.  So every second, the scoreboard saves its state to the
-      browser's long-term storage using the
-      HTML5 <code>localStorage</code> object.  The following information
-      is stored, and will come back the way it was when the browser exited:
-    </p>
 
     <ul>
-      <li>Period clock time</li>
+      <li>
-      <li>Team names</li>
+        Hold down the "Shift" key to make counters, logos, etc. go the
-      <li>Team logo URLs</li>
+        other direction.
-      <li>Team scores</li>
+      </li>
+      <li>
+        Hold down the "Ctrl" or "Alt" key while clicking a team logo in
+        Setup mode to provide a URL.
+      </li>
+      <li>
+        Hold down the "Ctrl" or "Alt" key while clicking the period
+        indicator to change it to any text.
+      </li>
+      <li>
+        Timeouts can exceed three by clicking them while holding the
+        "Shift" key.
+      </li>
     </ul>
 
-    <p>
-      It is a good idea to verify that your browser actually stores this
-      information around before you run a bout, by starting a pretend
-      jam, exiting, then re-opening.
-    </p>
 
-    <h1>Customizing the display</h1>
+    <h1>Customizing</h1>
     <p>
-      The scoreboard is written in HTML5, CSS, and JavaScript.  If you'd
+      If you use this, I want to add your logo and the logos of the
-      like to try your hand at graphic design, feel encouraged to do
+      teams you play to the <a href="logos.html">included set of
-      so.  Just remember to keep the <code>onclick</code>
+      logos</a>.
-      and <code>id</code> attributes in elements that have them, and
-      everything should continue to work.
     </p>
 
     <p>
-      If you come up with a new design, or code improvements, I'd love
+      The scoreboard is written in HTML5, CSS, and JavaScript, so a web
-      to see it!
+      designer should be able to season to taste.  Send me what you come
+      up with, I want to see it!
     </p>
 
+
     <h1>If you have problems</h1>
     <p>
       If something goes wrong, please email me (link below) with as much