tweak highvis, describe layouts in index
This commit is contained in:
parent
41325c1934
commit
18c733b643
|
|
@ -56,8 +56,18 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
#notice {
|
||||||
|
font-size: 150px;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 20%;
|
||||||
|
width: 60%;
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript" src="logos.js"></script>
|
|
||||||
<script type="text/javascript" src="scoreboard.js"></script>
|
<script type="text/javascript" src="scoreboard.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onkeypress = key;
|
window.onkeypress = key;
|
||||||
|
|
@ -80,6 +90,12 @@ tenths = true;
|
||||||
<p>
|
<p>
|
||||||
<span id="jam" onclick="handle(event);">-:--.-</span>
|
<span id="jam" onclick="handle(event);">-:--.-</span>
|
||||||
</p>
|
</p>
|
||||||
|
<div id="notice">
|
||||||
|
<div id="notice-1">Power Jam</div>
|
||||||
|
<div id="notice-2">Grand Slam</div>
|
||||||
|
<div id="notice-3">Ouch!</div>
|
||||||
|
<div id="notice-4">OMG</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
23
index.html
23
index.html
|
|
@ -123,7 +123,8 @@
|
||||||
on projectors
|
on projectors
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
Appearance can be customized in HTML and CSS
|
Appearance can be customized in HTML and CSS; comes with 4
|
||||||
|
pre-tuned variants
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
Runs on practically anything, including older computers,
|
Runs on practically anything, including older computers,
|
||||||
|
|
@ -133,6 +134,22 @@
|
||||||
Ships with <a href="logos.html">an ever-expanding set of
|
Ships with <a href="logos.html">an ever-expanding set of
|
||||||
team logos</a>
|
team logos</a>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
The <b>only</b> scoreboard conforming to 9.1.5.4, requiring
|
||||||
|
<a href="penalties.html">penalty tracking</a>.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h1>Variants</h1>
|
||||||
|
<ul>
|
||||||
|
<li><a href="scoreboard.html">Normal layout</a> similar to most
|
||||||
|
other roller derby scoreboards</li>
|
||||||
|
<li><a href="penalties.html">Penalty tracking</a> layout</li>
|
||||||
|
<li><a href="highvis.html">High-visibility</a> for
|
||||||
|
low-power projectors or outdoor bouts</li>
|
||||||
|
<li><a href="micro.html">Timers-only</a> if you track
|
||||||
|
scores some other way</li>
|
||||||
|
<li>Build your own using only HTML5 and CSS</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h1>Documentation</h1>
|
<h1>Documentation</h1>
|
||||||
|
|
@ -174,6 +191,10 @@
|
||||||
A free <a href="http://woozle.org/track/">online track</a>,
|
A free <a href="http://woozle.org/track/">online track</a>,
|
||||||
to help you work out strategies.
|
to help you work out strategies.
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
A free <a href="timer.html">penalty timer</a> (soon to be on
|
||||||
|
the Android market)
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="http://woozle.org/~neale/papers/derby-av.html">
|
<a href="http://woozle.org/~neale/papers/derby-av.html">
|
||||||
Running Audio/Visual for a Derby Bout</a> contains specific
|
Running Audio/Visual for a Derby Bout</a> contains specific
|
||||||
|
|
|
||||||
36
micro.html
36
micro.html
|
|
@ -22,28 +22,22 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="scoreboard.css">
|
<link rel="stylesheet" type="text/css" href="scoreboard.css">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
@font-face {
|
body {
|
||||||
font-family: Most Wazted;
|
background: black;
|
||||||
src: url(Mostwasted.ttf);
|
text-align: center;
|
||||||
}
|
}
|
||||||
body {
|
#jam, #period {
|
||||||
background: black;
|
color: white;
|
||||||
background-size: 100% auto;
|
}
|
||||||
color: #eee;
|
#scoreboard {
|
||||||
font-family: Most Wazted, fantasy;
|
font-size: 155px;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#scoreboard {
|
html, p {
|
||||||
font-size: 155px;
|
padding: 0;
|
||||||
width: 100%;
|
margin: 0;
|
||||||
}
|
}
|
||||||
html, p {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript" src="logos.js"></script>
|
|
||||||
<script type="text/javascript" src="scoreboard.js"></script>
|
<script type="text/javascript" src="scoreboard.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onkeypress = key;
|
window.onkeypress = key;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Roller Derby Scoreboard Copyright © 2011 Neale Pickett
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU General Public License as published by
|
||||||
|
the Free Software Foundation, either version 3 of the License, or
|
||||||
|
(at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful, but
|
||||||
|
WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU General Public License
|
||||||
|
along with this program. If not, see
|
||||||
|
<http://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>LADD Scoreboard</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<style type="text/css">
|
||||||
|
@font-face {
|
||||||
|
font-family: Most Wazted;
|
||||||
|
src: url(Mostwasted.ttf);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: url(bg.jpg) #222;
|
||||||
|
background-size: 100% auto;
|
||||||
|
color: #eee;
|
||||||
|
font-family: Most Wazted, fantasy;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#scoreboard {
|
||||||
|
font-size: 5em;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" type="text/css" href="scoreboard.css">
|
||||||
|
<script type="text/javascript" src="logos.js"></script>
|
||||||
|
<script type="text/javascript" src="scoreboard.js"></script>
|
||||||
|
<script type="text/javascript" src="penalties.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
window.onkeypress = key;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table id="scoreboard">
|
||||||
|
<tr>
|
||||||
|
<td width="20%" class="team">
|
||||||
|
<span id="name-a" onclick="handle(event);">-</span>
|
||||||
|
<br>
|
||||||
|
<img src="" alt="☻" id="logo-a" onclick="handle(event);">
|
||||||
|
</td>
|
||||||
|
<td width="60%" rowspan="2">
|
||||||
|
<p>
|
||||||
|
<span id="period" onclick="handle(event);">--:--</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span id="timeouts-a" onclick="handle(event);">0</span>
|
||||||
|
<span id="periodtext" onclick="handle(event);">-</span>
|
||||||
|
<span id="timeouts-b" onclick="handle(event);">0</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span id="jammer-a" onclick="handle(event);">★</span>
|
||||||
|
<span id="jamtext">-</span>
|
||||||
|
<span id="jammer-b" onclick="handle(event);">★</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span id="jam" onclick="handle(event);">-:--.-</span>
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td width="20%" class="team">
|
||||||
|
<span id="name-b" onclick="handle(event);">-</span>
|
||||||
|
<br>
|
||||||
|
<img src="" alt="☻" id="logo-b" onclick="handle(event);">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<span id="score-a" onclick="handle(event);">-</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span id="score-b" onclick="handle(event);">-</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div id="penalties">
|
||||||
|
<table id="penalties-a">
|
||||||
|
<tr class="majors"></tr>
|
||||||
|
<tr class="minors"></tr>
|
||||||
|
<tr class="sk8ers"></tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<!-- Right here would be an excellent place for a sponsor logo -->
|
||||||
|
|
||||||
|
<table id="penalties-b">
|
||||||
|
<tr class="majors"></tr>
|
||||||
|
<tr class="minors"></tr>
|
||||||
|
<tr class="sk8ers"></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="notice">
|
||||||
|
<div id="notice-1">Power Jam</div>
|
||||||
|
<div id="notice-2">Grand Slam</div>
|
||||||
|
<div id="notice-3">Ouch!</div>
|
||||||
|
<div id="notice-4">OMG</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -113,26 +113,9 @@
|
||||||
/*
|
/*
|
||||||
* Notices
|
* Notices
|
||||||
*/
|
*/
|
||||||
#penalties.notice {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#notice div {
|
#notice div {
|
||||||
font-family: Crack Babies, Comunicacion Digital, sans-serif;
|
|
||||||
font-size: 1000%;
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#notice .active {
|
#notice .active {
|
||||||
display: block;
|
display: block;
|
||||||
-moz-animation-duration: 0.5s;
|
|
||||||
-moz-animation-name: grow;
|
|
||||||
-moz-animation-iteration-count: infinite;
|
|
||||||
-moz-animation-direction: alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-keyframes grow {
|
|
||||||
0% {color: red;}
|
|
||||||
50% {color: yellow;}
|
|
||||||
75% {color: blue;}
|
|
||||||
100% {color: magenta;}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -36,12 +36,36 @@
|
||||||
font-size: 5em;
|
font-size: 5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
#notice div {
|
||||||
|
font-family: Crack Babies, Comunicacion Digital, sans-serif;
|
||||||
|
font-size: 7em;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 20%;
|
||||||
|
width: 60%;
|
||||||
|
display: none;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
#notice .active {
|
||||||
|
display: block;
|
||||||
|
-moz-animation-duration: 0.5s;
|
||||||
|
-moz-animation-name: grow;
|
||||||
|
-moz-animation-iteration-count: infinite;
|
||||||
|
-moz-animation-direction: alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes grow {
|
||||||
|
0% {color: red;}
|
||||||
|
50% {color: yellow;}
|
||||||
|
75% {color: blue;}
|
||||||
|
100% {color: magenta;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<link rel="stylesheet" type="text/css" href="scoreboard.css">
|
<link rel="stylesheet" type="text/css" href="scoreboard.css">
|
||||||
<script type="text/javascript" src="logos.js"></script>
|
<script type="text/javascript" src="logos.js"></script>
|
||||||
<script type="text/javascript" src="scoreboard.js"></script>
|
<script type="text/javascript" src="scoreboard.js"></script>
|
||||||
<script type="text/javascript" src="penalties.js"></script>
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
window.onkeypress = key;
|
window.onkeypress = key;
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -89,22 +113,6 @@ window.onkeypress = key;
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<div id="penalties">
|
|
||||||
<table id="penalties-a">
|
|
||||||
<tr class="majors"></tr>
|
|
||||||
<tr class="minors"></tr>
|
|
||||||
<tr class="sk8ers"></tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<!-- Right here would be an excellent place for a sponsor logo -->
|
|
||||||
|
|
||||||
<table id="penalties-b">
|
|
||||||
<tr class="majors"></tr>
|
|
||||||
<tr class="minors"></tr>
|
|
||||||
<tr class="sk8ers"></tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="notice">
|
<div id="notice">
|
||||||
<div id="notice-1">Power Jam</div>
|
<div id="notice-1">Power Jam</div>
|
||||||
<div id="notice-2">Grand Slam</div>
|
<div id="notice-2">Grand Slam</div>
|
||||||
|
|
|
||||||
|
|
@ -186,7 +186,7 @@ function transition(newstate) {
|
||||||
var notice_timer;
|
var notice_timer;
|
||||||
|
|
||||||
function notice_expire(n) {
|
function notice_expire(n) {
|
||||||
var p = document.getElementById("penalties");
|
var p = document.getElementById("notice-vanish");
|
||||||
var pClassName = "";
|
var pClassName = "";
|
||||||
|
|
||||||
for (var i = 0; i < 10; i += 1) {
|
for (var i = 0; i < 10; i += 1) {
|
||||||
|
|
@ -231,6 +231,15 @@ function score(team, points) {
|
||||||
|
|
||||||
var logo = {a:-1, b:-1};
|
var logo = {a:-1, b:-1};
|
||||||
|
|
||||||
|
function leadJammer(team) {
|
||||||
|
tgt = e("jammer-" + team);
|
||||||
|
var on = ! tgt.className;
|
||||||
|
|
||||||
|
e("jammer-a").className = "";
|
||||||
|
e("jammer-b").className = "";
|
||||||
|
if (on) tgt.className = "lead";
|
||||||
|
}
|
||||||
|
|
||||||
function handle(event) {
|
function handle(event) {
|
||||||
var tgt = event.target || window.event.srcElement;
|
var tgt = event.target || window.event.srcElement;
|
||||||
var team = tgt.id.substr(tgt.id.length - 1);
|
var team = tgt.id.substr(tgt.id.length - 1);
|
||||||
|
|
@ -280,11 +289,7 @@ function handle(event) {
|
||||||
break;
|
break;
|
||||||
case "jammer-a":
|
case "jammer-a":
|
||||||
case "jammer-b":
|
case "jammer-b":
|
||||||
var on = ! tgt.className;
|
leadJammer(team);
|
||||||
|
|
||||||
e("jammer-a").className = "";
|
|
||||||
e("jammer-b").className = "";
|
|
||||||
if (on) tgt.className = "lead";
|
|
||||||
break;
|
break;
|
||||||
case "timeouts-a":
|
case "timeouts-a":
|
||||||
case "timeouts-b":
|
case "timeouts-b":
|
||||||
|
|
@ -369,17 +374,27 @@ function key(event) {
|
||||||
newstate = TIMEOUT;
|
newstate = TIMEOUT;
|
||||||
break;
|
break;
|
||||||
case "a":
|
case "a":
|
||||||
|
case "[":
|
||||||
score('a', 1);
|
score('a', 1);
|
||||||
break;
|
break;
|
||||||
case "b":
|
case "b":
|
||||||
|
case "]":
|
||||||
score('b', 1);
|
score('b', 1);
|
||||||
break;
|
break;
|
||||||
case "A":
|
case "A":
|
||||||
|
case "{":
|
||||||
score('a', -1);
|
score('a', -1);
|
||||||
break;
|
break;
|
||||||
case "B":
|
case "B":
|
||||||
|
case "}":
|
||||||
score('b', -1);
|
score('b', -1);
|
||||||
break;
|
break;
|
||||||
|
case ",":
|
||||||
|
leadJammer('a');
|
||||||
|
break;
|
||||||
|
case ".":
|
||||||
|
leadJammer('b');
|
||||||
|
break;
|
||||||
case "1":
|
case "1":
|
||||||
case "2":
|
case "2":
|
||||||
case "3":
|
case "3":
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue