Working penalty tracker, but ugly code

This commit is contained in:
Neale Pickett 2011-12-12 19:36:09 -07:00
parent ad6deae616
commit 235edc2d09
4 changed files with 217 additions and 120 deletions

160
penalties.js Normal file
View File

@ -0,0 +1,160 @@
function penalties (team) {
var table = document.getElementById("penalties-" + team);
var minors = table.getElementsByClassName("minors")[0];
var majors = table.getElementsByClassName("majors")[0];
var sk8ers = table.getElementsByClassName("sk8ers")[0];
var mindiv = minors.getElementsByTagName("div");
var majdiv = majors.getElementsByTagName("div");
var sk8div = sk8ers.getElementsByTagName("div");
var ret = [];
for (var i = 0; i < 20; i += 1) {
ret.push([sk8div[i].text,
mindiv[i].value || 0,
majdiv[i].value || 0]);
}
return ret;
}
function penalties_save () {
var name_a = document.getElementById("name-a").innerHTML;
var name_b = document.getElementById("name-b").innerHTML;
var pen_a = JSON.stringify(penalties("a"));
var pen_b = JSON.stringify(penalties("b"));
localStorage["rdsb_penalties_a"] = pen_a;
localStorage["rdsb_penalties_b"] = pen_b;
console.log(name_a);
localStorage["rdsb_roster " + name_a] = pen_a;
localStorage["rdsb_roster " + name_b] = pen_b;
}
function penalties_setdiv (div, value) {
if (div.text == undefined) {
div.value = value;
div.style.height = (value||0) + "em";
div.innerHTML = value?value:"";
} else {
div.text = value;
div.innerHTML = value?"":"•";
for (var i in value) {
var c = value[i];
// XXX: use CSS "text-wrap: unrestricted" when supported
div.innerHTML += c + " ";
}
}
}
function penalties_load (team, values) {
var table = document.getElementById("penalties-" + team);
var minors = table.getElementsByClassName("minors")[0];
var majors = table.getElementsByClassName("majors")[0];
var sk8ers = table.getElementsByClassName("sk8ers")[0];
var mindiv = minors.getElementsByTagName("div");
var majdiv = majors.getElementsByTagName("div");
var sk8div = sk8ers.getElementsByTagName("div");
for (var i = 0; i < values.length; i += 1) {
penalties_setdiv(sk8div[i], values[i][0]);
penalties_setdiv(mindiv[i], values[i][1]);
penalties_setdiv(majdiv[i], values[i][2]);
}
}
function penalties_setTeamName (team, name) {
var roster_in = localStorage["rdsb_roster " + name];
var roster_out = [];
if (roster_in) {
roster_in = JSON.parse(roster_in);
}
for (var i = 0; i < 20; i += 1) {
if (! roster_in) {
roster_out.push(["", 0, 0]);
} else {
roster_out.push([roster_in[i][0], 0, 0])
}
}
penalties_load(team, roster_out);
}
function penalties_click (event) {
var element = event.currentTarget;
var pops = element.parentNode;
var div = element.getElementsByTagName("div")[0];
var inc = event.shiftKey?-1:1;
var val;
if (pops.className == "minors") {
val = ((div.value || 0) + inc + 4) % 4;
if ((inc == 1) && (val == 0)) {
var majdiv = div.majdiv;
penalties_setdiv(majdiv, ((majdiv.value || 0) + 1) % 9);
}
} else if (pops.className == "majors") {
val = ((div.value || 0) + inc + 9) % 9;
} else {
val = prompt("Enter skater number", div.text);
}
if (val != undefined) {
penalties_setdiv(div, val);
penalties_save();
}
}
function penalties_init () {
// 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;
var majdiv = document.createElement("div");
td = document.createElement("td");
td.onclick = penalties_click;
td.appendChild(majdiv);
majors.appendChild(td);
td = document.createElement("td");
div = document.createElement("div");
div.majdiv = majdiv;
td.onclick = penalties_click;
td.appendChild(div);
minors.appendChild(td);
div = document.createElement("div");
div.text = "";
td = document.createElement("td");
td.onclick = penalties_click;
td.appendChild(div);
sk8ers.appendChild(td);
}
}
if (localStorage.rdsb_penalties_a) {
penalties_load("a", JSON.parse(localStorage.rdsb_penalties_a));
}
if (localStorage.rdsb_penalties_b) {
penalties_load("b", JSON.parse(localStorage.rdsb_penalties_b));
}
}

View File

@ -64,3 +64,42 @@
#jam.rotate {
background: #060;
}
/*
* Penalties
*/
#penalties-a {
float: left;
border-collapse: collapse;
}
#penalties-b {
float: right;
border-collapse: collapse;
}
#penalties td {
cursor: crosshair;
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 {
vertical-align: top;
width: 1em;
line-height: 75%;
}

View File

@ -37,48 +37,12 @@
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" src="penalties.js"></script>
<script type="text/javascript">
window.onkeypress = key;
</script>
@ -137,79 +101,5 @@
<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>

View File

@ -28,7 +28,7 @@
/* State names */
var SETUP = 0; // !P 30:00 !J 2:00
var JAM = 1; // P J 2:00
var ROTATE = 2; // P J 1:00
var LINEUP = 2; // P J 1:00
var TIMEOUT = 3; // !P J 1:00
var periodtext = ["Period 1", "Halftime", "Period 2", "Break"];
@ -152,11 +152,11 @@ function transition(newstate) {
jt.set(120000);
jt.start();
jtext.innerHTML = "Jam";
} else if (state == ROTATE) {
} else if (state == LINEUP) {
pt.start();
jt.set(30000, "rotate");
jt.set(30000);
jt.start();
jtext.innerHTML = "Rotation";
jtext.innerHTML = "Lineup";
} else if (state == TIMEOUT) {
pt.stop();
if (pt.remaining() <= 0) {
@ -203,6 +203,7 @@ function handle(event) {
if (tn) {
tgt.innerHTML = tn;
}
penalties_setTeamName(team, tn);
}
break;
case "logo-a":
@ -222,6 +223,10 @@ function handle(event) {
e("name-" + team).innerHTML = t[0];
tgt.src = "logos/" + t[1];
if (window.penalties) {
penalties_setTeamName(team, t[0]);
}
}
} else {
score(team, -adj);
@ -282,7 +287,7 @@ function handle(event) {
break;
case "jam":
if (state == JAM) {
newstate = ROTATE;
newstate = LINEUP;
} else {
newstate = JAM;
}
@ -308,7 +313,7 @@ function key(event) {
switch (String.fromCharCode(event.which || 0)) {
case " ":
if (state == JAM) {
newstate = ROTATE;
newstate = LINEUP;
} else {
newstate = JAM;
}
@ -353,8 +358,9 @@ function save() {
}
function start() {
var p = document.getElementById("period");
var j = document.getElementById("jam");
if (window.penalties) {
window.penalties_init();
}
e("name-a").innerHTML = dfl(localStorage.rdsb_name_a, "Home");
e("name-b").innerHTML = dfl(localStorage.rdsb_name_b, "Visitor");
@ -369,10 +375,12 @@ function start() {
e("jamtext").innerHTML = "Setup";
transition();
var p = document.getElementById("period");
c = Number(localStorage.rdsb_period_clock || 1800000);
startTimer(p);
p.set(c);
var j = document.getElementById("jam");
startTimer(j, true);
j.set(120000);