neale
/
woozle-scoreboard
mirror of https://github.com/nealey/woozle-scoreboard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

simpler, more uniform, operation and manual

This commit is contained in:
Neale Pickett 2011-12-07 23:23:38 -07:00
parent de66ca26ec
commit 23f266ca2c
2 changed files with 101 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
scoreboard.js
View File

@ -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-b").val = dfl(localStorage.rdsb_timeout_b, 3);
adjust_timeouts("a", 0);
adjust_timeouts("b", 0);
period = localStorage.rdsb_period || 1;
e("periodtext").innerHTML = "Period " + period;
e("timeouts-a").innerHTML = dfl(localStorage.rdsb_timeout_a, 3);
e("timeouts-b").innerHTML = dfl(localStorage.rdsb_timeout_b, 3);
period = Number(localStorage.rdsb_period) || 0;
e("periodtext").innerHTML = periodtext[period];
e("jamtext").innerHTML = "Setup";
transition();
c = Number(localStorage.rdsb_period_clock || 1800000);
startTimer(p);

93
usage.html
View File

@ -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,
please <a href="mailto:neale&#64;woozle.org">mail them to me</a>
and I will add them.
If your team's logo and name isn't in <a href="logos.html">the
list</a>, please email them to me so I can 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",
and "Period 2".
Click the period indicator to cycle between "Period 1",
"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>
<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>
<h1>Advanced Tips</h1>
<ul>
<li>Period clock time</li>
<li>Team names</li>
<li>Team logo URLs</li>
<li>Team scores</li>
<li>
Hold down the "Shift" key to make counters, logos, etc. go the
other direction.
</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
like to try your hand at graphic design, feel encouraged to do
so. Just remember to keep the <code>onclick</code>
and <code>id</code> attributes in elements that have them, and
everything should continue to work.
If you use this, I want to add your logo and the logos of the
teams you play to the <a href="logos.html">included set of
logos</a>.
</p>
<p>
If you come up with a new design, or code improvements, I'd love
to see it!
The scoreboard is written in HTML5, CSS, and JavaScript, so a web
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