woozle-scoreboard/usage.html

238 lines
6.4 KiB
HTML

<!DOCTYPE html>
<!-- Presentation Timer 2011 Neale Pickett -->
<!-- Placed in the public domain. -->
<!-- Time-stamp: "2011-12-02 17:29:58 neale" -->
<html>
<head>
<title>Using the LADD Roller Derby Scoreboard</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Using the LADD Roller Derby Scoreboard</h1>
<img src="scoreboard-explained.png" alt="Annotated scoreboard"
style="border: solid black 2px;">
<h1>Quick Guide for the Impatient</h1>
<ul>
<li>
When the state indicator reads "Setup", you can click on almost
anything to change it.
</li>
<li>
Reload the page (click "Reload" or press F5) to get back to
setup mode, without losing scores or period clock time.
</li>
<li>
Click the jam timer or press Space Bar to start and end the jam.
</li>
<li>
Click a score or press "A" or "B" to add a point. Hold down
Shift (Shift-click or capital "A" or "B") to take one away.
</li>
<li>
Click a team logo to deduct a point.
</li>
<li>
Click the period clock or press "T" to enter a timeout.
</li>
<li>
During timeout, click the period clock to edit the time it
shows.
</li>
<li>
Click the period indicator to change periods.
</li>
</ul>
<h1>Setup Mode</h1>
<p>
When in Setup mode (state indicator reads "Setup" and period
clock time is gray), you can click things to change them.
</p>
<p>
Clicking the jam clock in setup mode starts the clocks and begins
game mode.
</p>
<dl>
<dt>Team Names and Logos</dt>
<dd>
<p>
The scoreboard comes pre-set with a list of team names and logos,
including two generic logos. I would love to include your team's
logo: send it
to <a href="mailto:neale&#64;woozle.org">neale&#64;woozle.org</a>.
</p>
<p>
Click a team's name to change it from the name associated with the
logo. When you change the logo, this name will be overwritten.
</p>
<p>
Click a team's logo to cycle through this list. Holding down
shift goes backwards through the list. Changing the logo changes
the name, even if you set the name by hand.
</p>
<p>
<strong>Advanced:</strong> Hold down Ctrl or Alt while
clicking a logo to specify a URL to a team logo. This
unfortunately only works on certain browsers, in certain
platforms.
</p>
</dd>
<dt>Period clock</dt>
<dd>
<p>
You can set the period clock to any time you like by clicking on
it.
</p>
</dd>
<dt>Period number</dt>
<dd>
<p>
Click the period number to change it between 1 and 2.
</p>
</dd>
</dl>
<h1>Game Mode</h1>
<p>
When the first jam whistle sounds, click the jam clock or hit
space bar to begin the jam. This locks the team names and logos
into place and starts the game.
</p>
<dl>
<dt>Starting and stopping Jams</dt>
<dd>
<p>
Press the space bar or click the jam clock to start and stop
2-minute jams. When stopped, the jam clock automatically resets
to 30s for rotation.
</p>
</dd>
<dt>Timeouts</dt>
<dd>
<p>
Press "T" or click the period clock to move to a timeout. This
freezes the period clock and makes the jam clock count up from
0:00.
</p>
<p>
Press space bar or click the jam clock to end the timeout and
begin a jam.
</p>
</dd>
<dt>Adjusting the period clock</dt>
<dd>
<p>
During a timeout, click the period clock to set a new period clock
time.
</p>
</dd>
</dl>
<h1>Other actions</h1>
<dl>
<dt>Halftime timer</dt>
<dd>
<p>
If you'd like to display how long is left in a halftime,
switch to timeout mode, click the period clock, and enter the
halftime duration on the period clock. Then click the jam
clock to start the period clock counting down.
</p>
<p>
It's okay to let the jam clock run down to 0:00.
</p>
</dd>
<dt>Move to setup mode</dt>
<dd>
<p>
For the second bout of a double-header, you'll want to reset
team logos and names. Refresh the page by clicking the button
in your web browser or hitting F5, to move into Setup mode.
</p>
</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>
<ul>
<li>Period clock time</li>
<li>Team names</li>
<li>Team logo URLs</li>
<li>Team scores</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>
<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.
</p>
<p>
If you come up with a new design, or code improvements, I'd love
to see it!
</p>
<h1>If you have problems</h1>
<p>
If something goes wrong, please email me (link below) with as much
detail as you can remember, and I'll try to fix it for you and
everybody else. For example:
</p>
<blockquote>
<p>
I clicked the period timer during a timeout and the Team A logo
turned was replaced with a photo of a burrito.
</p>
</blockquote>
<h1>Enjoy!</h1>
<address>Neale Pickett <a href="mailto:neale&#64;woozle.org">&lt;neale&#64;woozle.org&gt;</a></address>
</body>
</html>