238 lines
6.4 KiB
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@woozle.org">neale@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@woozle.org"><neale@woozle.org></a></address>
|
|
|
|
</body>
|
|
</html>
|