woozle-scoreboard/scoreboard.html

216 lines
6.0 KiB
HTML

<!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%;
}
#penalties-a {
float: left;
border-collapse: collapse;
}
#penalties-b {
float: right;
border-collapse: collapse;
}
#penalties td {
border: 1px solid rgba(255, 255, 255, 0.075);
}
#penalties .minors {
height: 3.2em;
vertical-align: bottom;
}
#penalties .majors {
height: 8.2em;
vertical-align: bottom;
}
#penalties .minors div {
background-color: #880;
color: black;
}
#penalties .majors div {
background-color: #800;
}
#penalties .sk8ers div {
transform: rotate(90deg);
/* Remove all the cruft below here when browsers handle CSS3 rotation */
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
width: 1em;
}
</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">
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>
<br>
<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>
<br>
<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>
<table id="penalties-b">
<tr class="majors"></tr>
<tr class="minors"></tr>
<tr class="sk8ers"></tr>
</table>
</div>
<script type="text/javascript">
function penalties (table) {
var minors = table.getElementById
}
function clicko (event) {
var element = event.currentTarget;
var pops = element.parentNode;
var div = element.getElementsByTagName("div")[0];
var max;
if (pops.className == "minors") {
max = 4;
} else if (pops.className == "majors") {
max = 9;
} else {
var s = prompt("Enter skater number", div.innerHTML);
if (s) {
div.innerHTML = s;
}
return;
}
div.value = ((div.value || 0) + 1) % max;
div.style.height = div.value + "em";
div.innerHTML = div.value?div.value:"";
}
function go () {
// Populate ALL THREE ROWS AT ONCE because I'm crazy like that.
for (var j = 0; j < 2; j += 1) {
var team = (j==0)?"a":"b";
var table = document.getElementById("penalties-" + team);
var minors = table.getElementsByClassName("minors")[0];
var majors = table.getElementsByClassName("majors")[0];
var sk8ers = table.getElementsByClassName("sk8ers")[0];
for (var i = 0; i < 20; i += 1) {
var td;
var div;
td = document.createElement("td");
div = document.createElement("div");
div.value = (i % 4);
div.style.height = div.value + "em";
div.appendChild(document.createTextNode(div.value?div.value:""));
td.onclick = clicko;
td.appendChild(div);
minors.appendChild(td);
div = document.createElement("div");
div.value = (i % 9);
div.style.height = div.value + "em";
div.appendChild(document.createTextNode(div.value?div.value:""));
td = document.createElement("td");
td.onclick = clicko;
td.appendChild(div);
majors.appendChild(td);
div = document.createElement("div");
div.appendChild(document.createTextNode(i));
td = document.createElement("td");
td.onclick = clicko;
td.appendChild(div);
sk8ers.appendChild(td);
}
}
}
go();
</script>
</body>
</html>