Merge branch 'reflow'
Conflicts: scoreboard.css scoreboard.html
This commit is contained in:
commit
ec6e6947b0
|
@ -112,6 +112,9 @@
|
||||||
<li>
|
<li>
|
||||||
Free to use, share, and change (GPLv3)
|
Free to use, share, and change (GPLv3)
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
No Internet connection required
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
Easy mouse-driven (with hotkeys) setup and operation
|
Easy mouse-driven (with hotkeys) setup and operation
|
||||||
</li>
|
</li>
|
||||||
|
|
3
logos.js
3
logos.js
|
@ -19,6 +19,9 @@ teams = [
|
||||||
["MT", "minorthreat.png", "Minor Threat"],
|
["MT", "minorthreat.png", "Minor Threat"],
|
||||||
["CCR", "choicecity.png", "Choice City Rebels"],
|
["CCR", "choicecity.png", "Choice City Rebels"],
|
||||||
["DIA", "dia.png", "Derby Intelligence Agency"],
|
["DIA", "dia.png", "Derby Intelligence Agency"],
|
||||||
|
["TRD", "tucson.png", "Tucson Roller Derby"],
|
||||||
|
["TST", "saddletramps.jpg","Tucson Saddle Tramps"],
|
||||||
|
["TC", "tallcity.png", "Tall City Roller Betties"],
|
||||||
];
|
];
|
||||||
teams.sort();
|
teams.sort();
|
||||||
|
|
||||||
|
|
BIN
logos/logo.png
BIN
logos/logo.png
Binary file not shown.
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
202
scoreboard.css
202
scoreboard.css
|
@ -2,72 +2,142 @@
|
||||||
font-family: Comunicacion Digital;
|
font-family: Comunicacion Digital;
|
||||||
src: url(Comunicacion.ttf);
|
src: url(Comunicacion.ttf);
|
||||||
}
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Most Wazted;
|
||||||
|
src: url(Mostwasted.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
#scoreboard {
|
#scoreboard {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
-moz-user-select: none;
|
font-family: sans-serif;
|
||||||
-khtml-user-select: none;
|
font-weight: bold;
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
#scoreboard td {
|
|
||||||
vertical-align: top;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
#scoreboard p {
|
#scoreboard p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
#scoreboard *[id] {
|
#scoreboard *[id] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
.team {
|
|
||||||
font-family: Comunicacion Digital, sans-serif;
|
#name-a, #name-b {
|
||||||
font-weight: normal;
|
display: none;
|
||||||
font-size: 90%;
|
|
||||||
}
|
}
|
||||||
.team img {
|
|
||||||
max-width: 2em;
|
#logo-a, #logo-b {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
max-width: 1.8em;
|
||||||
max-height: 2em;
|
max-height: 2em;
|
||||||
}
|
}
|
||||||
|
#logo-a {
|
||||||
#timeouts-a, #timeouts-b, #score-a, #score-b, #jam, #period {
|
left: 0;
|
||||||
color: white;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 133%;
|
|
||||||
}
|
}
|
||||||
|
#logo-b {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#timeouts-a, #timeouts-b {
|
#timeouts-a, #timeouts-b {
|
||||||
|
position: absolute;
|
||||||
font-size: 50%;
|
font-size: 50%;
|
||||||
color: fuchsia;
|
bottom: 1em;
|
||||||
|
color: #0f0;
|
||||||
}
|
}
|
||||||
#timeouts-a, #jammer-a {
|
#timeouts-a {
|
||||||
float: left;
|
left: 0em;
|
||||||
}
|
}
|
||||||
#timeouts-b, #jammer-b {
|
#timeouts-b {
|
||||||
float: right;
|
right: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Jammer indicators */
|
||||||
#jammer-a, #jammer-b {
|
#jammer-a, #jammer-b {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0em;
|
||||||
color: #444;
|
color: #444;
|
||||||
}
|
}
|
||||||
|
#jammer-a.lead, #jammer-b.lead, #jamtext, #periodtext {
|
||||||
#jammer-a.lead, #jammer-b.lead {
|
color: yellow;
|
||||||
color: white;
|
}
|
||||||
|
#jammer-a {
|
||||||
|
left: 0.5em;
|
||||||
|
}
|
||||||
|
#jammer-b {
|
||||||
|
right: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#jam, #period {
|
#jam, #period {
|
||||||
|
text-align: center;
|
||||||
background: #000;
|
background: #000;
|
||||||
font-size: 150%;
|
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
padding: 0 0.1em;
|
}
|
||||||
|
#period {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 3.4em;
|
||||||
|
margin-left: -1.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jam {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0em;
|
||||||
|
left: 50%;
|
||||||
|
width: 4em;
|
||||||
|
margin-left: -2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jamtext, #periodtext {
|
||||||
|
text-align: center;
|
||||||
|
font-family: Most Wazted, sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 75%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
width: 4em;
|
||||||
|
margin-left: -2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#periodtext {
|
||||||
|
top: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jamtext {
|
||||||
|
bottom: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#score-a, #score-b {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 1.2em;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -0.6em;
|
||||||
|
}
|
||||||
|
#score-a {
|
||||||
|
left: 0em;
|
||||||
|
}
|
||||||
|
#score-b {
|
||||||
|
right: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#jamno {
|
#jamno {
|
||||||
float: right;
|
color: #0f0;
|
||||||
font-size: 0.6em;
|
position: absolute;
|
||||||
|
font-size: 50%;
|
||||||
|
bottom: 2.2em;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: 3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* States timers can be in */
|
|
||||||
|
/*
|
||||||
|
* States timers can be in
|
||||||
|
*/
|
||||||
#jam.paused, #period.paused {
|
#jam.paused, #period.paused {
|
||||||
color: #888;
|
color: #aaf;
|
||||||
}
|
}
|
||||||
#jam.lowtime, #period.lowtime {
|
#jam.lowtime, #period.lowtime {
|
||||||
background: #f24;
|
background: #f24;
|
||||||
|
@ -80,52 +150,36 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Penalties
|
|
||||||
*/
|
|
||||||
#penalties-a {
|
|
||||||
float: left;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
#penalties-b {
|
|
||||||
float: right;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
#penalties td {
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.075);
|
|
||||||
padding: 0;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
#penalties .minors td {
|
|
||||||
height: 3em;
|
|
||||||
}
|
|
||||||
#penalties .majors td {
|
|
||||||
height: 8em;
|
|
||||||
}
|
|
||||||
#penalties .minors div {
|
|
||||||
background-color: #880;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
#penalties .majors div {
|
|
||||||
background-color: #800;
|
|
||||||
}
|
|
||||||
#penalties .sk8ers td {
|
|
||||||
font-family: sans-serif;
|
|
||||||
vertical-align: top;
|
|
||||||
width: 1em;
|
|
||||||
line-height: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Notices
|
* Notices
|
||||||
*/
|
*/
|
||||||
#notice div {
|
#notice div {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
|
font-family: Comunicacion Digital, sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.1em;
|
||||||
|
opacity: 0.9;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1.8em;
|
||||||
|
left: 50%;
|
||||||
|
width: 3em;
|
||||||
|
margin-left: -1.5em;
|
||||||
}
|
}
|
||||||
#notice .active {
|
#notice .active {
|
||||||
display: block;
|
display: inherit;
|
||||||
|
-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;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
145
scoreboard.html
145
scoreboard.html
|
@ -25,101 +25,76 @@ body {
|
||||||
background: url(bg.jpg) #222;
|
background: url(bg.jpg) #222;
|
||||||
background-size: 100% auto;
|
background-size: 100% auto;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
font-family: sans;
|
margin: 0;
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
#scoreboard {
|
#scoreboard {
|
||||||
font-size: 5em;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#periodtext {
|
|
||||||
font-size: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#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">
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function resize() {
|
||||||
|
var b = document.getElementsByTagName("body")[0];
|
||||||
|
var w = window.innerWidth;
|
||||||
|
var h = window.innerHeight;
|
||||||
|
|
||||||
|
w /= 7;
|
||||||
|
h /= 5;
|
||||||
|
|
||||||
|
var fs = Math.min(w, h);
|
||||||
|
|
||||||
|
b.style.fontSize = fs + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
function localstart() {
|
||||||
|
start();
|
||||||
|
resize();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onresize = resize;
|
||||||
|
window.onload = localstart;
|
||||||
window.onkeypress = key;
|
window.onkeypress = key;
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<table id="scoreboard">
|
<!--
|
||||||
<tr>
|
HTML5 says not to use tables for layout. Since this is
|
||||||
<td width="20%" class="team">
|
a highly-styled page, it looks awful without CSS. Sorry.
|
||||||
<span id="name-a" onclick="handle(event);">-</span>
|
-->
|
||||||
<br>
|
<div id="scoreboard">
|
||||||
<img src="" alt="☻" id="logo-a" onclick="handle(event);">
|
<p>
|
||||||
</td>
|
<span id="name-a" onclick="handle(event);">Home</span>
|
||||||
<td width="60%" rowspan="2">
|
<img src="" alt="A" id="logo-a" onclick="handle(event);">
|
||||||
<p>
|
<span id="timeouts-a" onclick="handle(event);">0</span>
|
||||||
<span id="period" onclick="handle(event);">--:--</span>
|
<span id="jammer-a" onclick="handle(event);">★</span>
|
||||||
</p>
|
<span id="score-a" 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>
|
|
||||||
<span id="jamno" onclick="handle(event);">0</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>
|
<p>
|
||||||
<td>
|
<span id="period" onclick="handle(event);">--:--</span>
|
||||||
<span id="score-a" onclick="handle(event);">-</span>
|
<span id="periodtext" onclick="handle(event);"></span>
|
||||||
</td>
|
<span id="jam" onclick="handle(event);">-:--.-</span>
|
||||||
<td>
|
<span id="jamtext" onclick="handle(event);"></span>
|
||||||
<span id="score-b" onclick="handle(event);">-</span>
|
<span id="jamno" onclick="handle(event);">0</span>
|
||||||
</td>
|
</p>
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<div id="notice">
|
<p>
|
||||||
<div id="notice-1">Power Jam</div>
|
<span id="name-b" onclick="handle(event);">Vis</span>
|
||||||
<div id="notice-2">Grand Slam</div>
|
<img src="" alt="B" id="logo-b" onclick="handle(event);">
|
||||||
<div id="notice-3">Ouch!</div>
|
<span id="timeouts-b" onclick="handle(event);">0</span>
|
||||||
<div id="notice-4">OMG</div>
|
<span id="jammer-b" onclick="handle(event);">★</span>
|
||||||
</div>
|
<span id="score-b" onclick="handle(event);">-</span>
|
||||||
</body>
|
</p>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<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>
|
</html>
|
||||||
|
|
|
@ -0,0 +1,126 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: Comunicacion Digital;
|
||||||
|
src: url(Comunicacion.ttf);
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Most Wazted;
|
||||||
|
src: url(Mostwasted.ttf);
|
||||||
|
}
|
||||||
|
|
||||||
|
#scoreboard {
|
||||||
|
cursor: default;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
#scoreboard p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
#scoreboard *[id] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#name-a, #name-b {
|
||||||
|
font-family: Comunicacion Digital, sans-serif;
|
||||||
|
}
|
||||||
|
#logo-a, #logo-b {
|
||||||
|
max-width: 2em;
|
||||||
|
max-height: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timeouts-a, #timeouts-b, #score-a, #score-b, #jam, #period {
|
||||||
|
color: yellow;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#timeouts-a, #timeouts-b {
|
||||||
|
font-size: 50%;
|
||||||
|
color: fuchsia;
|
||||||
|
}
|
||||||
|
#timeouts-a, #jammer-a {
|
||||||
|
}
|
||||||
|
#timeouts-b, #jammer-b {
|
||||||
|
}
|
||||||
|
|
||||||
|
#jammer-a, #jammer-b {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jammer-a.lead, #jammer-b.lead {
|
||||||
|
color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jam, #period {
|
||||||
|
background: #000;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 0 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#jamtext, #periodtext {
|
||||||
|
font-family: Most Wazted, sans-serif;
|
||||||
|
font-size: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* States timers can be in */
|
||||||
|
#jam.paused, #period.paused {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
#jam.lowtime, #period.lowtime {
|
||||||
|
background: #f24;
|
||||||
|
}
|
||||||
|
#jam.timeout {
|
||||||
|
background: #044;
|
||||||
|
}
|
||||||
|
#jam.lineup {
|
||||||
|
background: #060;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Penalties
|
||||||
|
*/
|
||||||
|
#penalties-a {
|
||||||
|
float: left;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
#penalties-b {
|
||||||
|
float: right;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#penalties td {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.075);
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
#penalties .minors td {
|
||||||
|
height: 3em;
|
||||||
|
}
|
||||||
|
#penalties .majors td {
|
||||||
|
height: 8em;
|
||||||
|
}
|
||||||
|
#penalties .minors div {
|
||||||
|
background-color: #880;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
#penalties .majors div {
|
||||||
|
background-color: #800;
|
||||||
|
}
|
||||||
|
#penalties .sk8ers td {
|
||||||
|
font-family: sans-serif;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 1em;
|
||||||
|
line-height: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Notices
|
||||||
|
*/
|
||||||
|
#notice div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#notice .active {
|
||||||
|
display: block;
|
||||||
|
}
|
Loading…
Reference in New Issue