tweak highvis, describe layouts in index
This commit is contained in:
parent
41325c1934
commit
18c733b643
|
|
@ -56,8 +56,18 @@
|
|||
padding: 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>
|
||||
<script type="text/javascript" src="logos.js"></script>
|
||||
<script type="text/javascript" src="scoreboard.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onkeypress = key;
|
||||
|
|
@ -80,6 +90,12 @@ tenths = true;
|
|||
<p>
|
||||
<span id="jam" onclick="handle(event);">-:--.-</span>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
23
index.html
23
index.html
|
|
@ -123,7 +123,8 @@
|
|||
on projectors
|
||||
</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>
|
||||
Runs on practically anything, including older computers,
|
||||
|
|
@ -133,6 +134,22 @@
|
|||
Ships with <a href="logos.html">an ever-expanding set of
|
||||
team logos</a>
|
||||
</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>
|
||||
|
||||
<h1>Documentation</h1>
|
||||
|
|
@ -174,6 +191,10 @@
|
|||
A free <a href="http://woozle.org/track/">online track</a>,
|
||||
to help you work out strategies.
|
||||
</li>
|
||||
<li>
|
||||
A free <a href="timer.html">penalty timer</a> (soon to be on
|
||||
the Android market)
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://woozle.org/~neale/papers/derby-av.html">
|
||||
Running Audio/Visual for a Derby Bout</a> contains specific
|
||||
|
|
|
|||
36
micro.html
36
micro.html
|
|
@ -22,28 +22,22 @@
|
|||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="scoreboard.css">
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: Most Wazted;
|
||||
src: url(Mostwasted.ttf);
|
||||
}
|
||||
body {
|
||||
background: black;
|
||||
background-size: 100% auto;
|
||||
color: #eee;
|
||||
font-family: Most Wazted, fantasy;
|
||||
text-align: center;
|
||||
}
|
||||
#scoreboard {
|
||||
font-size: 155px;
|
||||
width: 100%;
|
||||
}
|
||||
html, p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: black;
|
||||
text-align: center;
|
||||
}
|
||||
#jam, #period {
|
||||
color: white;
|
||||
}
|
||||
#scoreboard {
|
||||
font-size: 155px;
|
||||
width: 100%;
|
||||
}
|
||||
html, p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="logos.js"></script>
|
||||
<script type="text/javascript" src="scoreboard.js"></script>
|
||||
<script type="text/javascript">
|
||||
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
|
||||
*/
|
||||
#penalties.notice {
|
||||
display: none;
|
||||
}
|
||||
#notice div {
|
||||
font-family: Crack Babies, Comunicacion Digital, sans-serif;
|
||||
font-size: 1000%;
|
||||
display: none;
|
||||
}
|
||||
#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;}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,12 +36,36 @@
|
|||
font-size: 5em;
|
||||
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>
|
||||
<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>
|
||||
|
|
@ -89,22 +113,6 @@ window.onkeypress = key;
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ function transition(newstate) {
|
|||
var notice_timer;
|
||||
|
||||
function notice_expire(n) {
|
||||
var p = document.getElementById("penalties");
|
||||
var p = document.getElementById("notice-vanish");
|
||||
var pClassName = "";
|
||||
|
||||
for (var i = 0; i < 10; i += 1) {
|
||||
|
|
@ -231,6 +231,15 @@ function score(team, points) {
|
|||
|
||||
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) {
|
||||
var tgt = event.target || window.event.srcElement;
|
||||
var team = tgt.id.substr(tgt.id.length - 1);
|
||||
|
|
@ -280,11 +289,7 @@ function handle(event) {
|
|||
break;
|
||||
case "jammer-a":
|
||||
case "jammer-b":
|
||||
var on = ! tgt.className;
|
||||
|
||||
e("jammer-a").className = "";
|
||||
e("jammer-b").className = "";
|
||||
if (on) tgt.className = "lead";
|
||||
leadJammer(team);
|
||||
break;
|
||||
case "timeouts-a":
|
||||
case "timeouts-b":
|
||||
|
|
@ -369,17 +374,27 @@ function key(event) {
|
|||
newstate = TIMEOUT;
|
||||
break;
|
||||
case "a":
|
||||
case "[":
|
||||
score('a', 1);
|
||||
break;
|
||||
case "b":
|
||||
case "]":
|
||||
score('b', 1);
|
||||
break;
|
||||
case "A":
|
||||
case "{":
|
||||
score('a', -1);
|
||||
break;
|
||||
case "B":
|
||||
case "}":
|
||||
score('b', -1);
|
||||
break;
|
||||
case ",":
|
||||
leadJammer('a');
|
||||
break;
|
||||
case ".":
|
||||
leadJammer('b');
|
||||
break;
|
||||
case "1":
|
||||
case "2":
|
||||
case "3":
|
||||
|
|
|
|||
Loading…
Reference in New Issue