|
-
- |
@@ -32,7 +54,8 @@ |
-
- |
+ full-screen version (with + keybindings) +
+ ++ The scoreboard is implemented in pure HTML5 and JavaScript. The + box above is a running scoreboard. If the box works, you + can run this scoreboard without installing anything else. Try + clicking on the Jam Timer to get things started. +
+ +Documentation
++ Full documentation comes bundled with the + download. +
+ + +Download
++ Download + the latest version to your hard drive to run a scoreboard + without Internet access (recommended). This + includes the +
+ ++ If your scoreboard computer has an Internet connection, you don't + need to download anything at all. Just load up + the full-screen version from this + page and you're all set. +
+ ++ You can + also browse + the source tree or clone it with git: +
git clone http://woozle.org/~neale/projects/scoreboard+ diff --git a/sb1.png b/sb1.png new file mode 100644 index 0000000..24d8188 Binary files /dev/null and b/sb1.png differ diff --git a/sb2.png b/sb2.png new file mode 100644 index 0000000..84d9885 Binary files /dev/null and b/sb2.png differ diff --git a/sb3.png b/sb3.png new file mode 100644 index 0000000..72fe242 Binary files /dev/null and b/sb3.png differ diff --git a/sb4.png b/sb4.png new file mode 100644 index 0000000..94e6574 Binary files /dev/null and b/sb4.png differ diff --git a/sb5.png b/sb5.png new file mode 100644 index 0000000..db42d42 Binary files /dev/null and b/sb5.png differ diff --git a/scoreboard-explained.png b/scoreboard-explained.png new file mode 100644 index 0000000..5fc9a22 Binary files /dev/null and b/scoreboard-explained.png differ diff --git a/scoreboard.css b/scoreboard.css new file mode 100644 index 0000000..7c214a7 --- /dev/null +++ b/scoreboard.css @@ -0,0 +1,44 @@ +@font-face { + font-family: Comunicacion Digital; + src: url(Comunicacion.ttf); +} +#scoreboard td { + vertical-align: top; + text-align: center; +} +#scoreboard p { + margin: 0; +} +.team { + font-family: Comunicacion Digital, sans-serif; +} +.team img { + max-width: 100%; + max-height: 2em; +} + +#score-a, #score-b, #jam, #period { + color: yellow; + font-family: sans-serif; + font-weight: bold; +} +#jam, #period { + background: #000; + font-size: 150%; + border-radius: 15px; + padding: 0 0.1em; +} + +/* States timers can be in */ +#jam.paused, #period.paused { + color: #888; +} +#jam.lowtime, #period.lowtime { + background: #f24; +} +#jam.ascending { + background: #044; +} +#jam.rotate { + background: #060; +} \ No newline at end of file diff --git a/scoreboard.js b/scoreboard.js index ff37d3f..f553a22 100644 --- a/scoreboard.js +++ b/scoreboard.js @@ -1,3 +1,21 @@ +/* + * LADD Roller Derby Scoreboard + * Copyright © 2011 Neale Pickett
Using the LADD Roller Derby Scoreboard
+ +
+
+ Quick Guide for the Impatient
+ +-
+
- + When the period clock is gray, you can click on almost + anything to change it. + +
- + Press Space Bar or "J", or click the jam timer, to begin a jam. + +
- + Press "A" to give a point to team A, or "B" to give a point to + team B. + +
- + Press "Shift+A" to deduct a point from team A, or "Shift+B" to + deduct a point from team B". + +
- + Press Space Bar, "R", or "L"; or click the jam timer, to end a + jam. + +
- + Press "T" or click the period clock for a timeout. This turns + the period clock gray: you can adjust elements (period clock, + scores, etc.) during timeouts by clicking them. + +
Getting Started
+ +
+ + When you first load the scoreboard, it will reset to some default + values. You can begin using it right away if you like, but you + will probably want to change the team names and logos first. + Until you start the first jam, and during timeouts, almost + everything on the screen can be edited by clicking it. +
+ +Set up team names and logos
+
+ + Click on a team name to change it, then click a team logo to + provide a URL for that team. You can copy and paste the URL of + any image you find on the Internet, but it's probably best to + download images to your hard drive so that your scoreboard doesn't + depend on an Internet connection to operate. +
+ +Adjust period clock and period number
++ The period clock defaults to 30:00 the first time the scoreboard + loads, but will use whatever value it last had from then on. If + you want to set the period clock to something else, click it and + type in the new time. +
+ ++ You can also click the period indicator to change from Period 1 to + Period 2. +
+ +Adjust team scores
++ Clicking on a team's score brings up a dialog box to adjust their + score. +
+ +Put the scoreboard on the projector
++ When everything is set up the way you want it, drag the browser + window to whatever screen is being projected, and make the browser + full-screen (usually the F11 key, or in the View menu). +
+ +Running a bout
+
+ + The scoreboard was designed to be easy to operate with the + keyboard: you can just hit space bar most of the time, with "T" + for timeouts, use "A" and "B" to award points, and "Shift-A" and + "Shift-B" to deduct points. +
+ +Starting a jam
++ When the ref signals the start of the first jam (one short + whistle), start the jam timer by clicking on it, or typing Space + Bar or "J". You're off! The state indicator will show "Jam" and + the jam timer will count down from 2 minutes. +
+ +Awarding or deducting points
++ To award points to teams, click on the team's score or type "A" or + "B". You can award points during a jam or between jams. +
+ ++ To deduct points, click on the team's name or logo, or type + "Shift-A" or "Shift-B". Points can be deducted during a jam or + between jams. +
+ + +Ending a jam
+
+ + When the ref signals the end of the jam (four short whistles), + click the jam timer again, or type Space Bar, "R", or "L". The + state indicator will show "Rotation" and the jam timer will count + down from 30 seconds. +
+ + +Timeouts
+
+ + For any timeout, be it a team timeout or official timeout, click + the period clock or type "T". This changes the state indicator to + "Timeout", pauses the period clock, and makes the jam timer track + how long the timeout has lasted by counting up from 0. +
+ ++ Team timeouts are only supposed to last one minute. It's the + referee's responsibility to signal the start of the next jam, and + the period clock shouldn't start counting down again until this + happens. +
+ +Making changes during a bout
++ If you need to adjust the period clock or make major adujustments + to team scores, you must first enter a timeout by clicking the + period clock or typing "T". When in timeout, the procedure for + making changes things is the same as during setup. +
+ +If the browser exits
+
+ Shit happens. So every second, the scoreboard saves its state to the
+ browser's long-term storage using the
+ HTML5 localStorage object. The following information
+ is stored, and will come back the way it was when the browser exited:
+
-
+
- Period clock time +
- Team names +
- Team logo URLs +
- Team scores +
+ 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. +
+ +Customizing the display
+
+ 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 onclick
+ and id attributes in elements that have them, and
+ everything should continue to work.
+
+ If you come up with a new design, or code improvements, I'd love + to see it! +
+ +If you have problems
++ 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: +
+++ ++ I clicked the period timer during a timeout and the Team A logo + turned was replaced with a photo of a burrito. +
+