Add standalone penalty tracker
This commit is contained in:
parent
53135afd0c
commit
3613d64030
|
|
@ -0,0 +1,309 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Scrimmage Tracker</title>
|
||||
<style type="text/css">
|
||||
#left, #right {
|
||||
width: 5.8em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#left {
|
||||
left: 0;
|
||||
}
|
||||
#right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ejected {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.fourminor {
|
||||
background-color: #0f0;
|
||||
}
|
||||
|
||||
*[id] {
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table.penalties {
|
||||
border-collapse: collapse;
|
||||
font-size: 40%;
|
||||
width: 100%;
|
||||
}
|
||||
table.penalties td {
|
||||
border: solid black 1px;
|
||||
height: 1.3em;
|
||||
min-width: 4em;
|
||||
}
|
||||
|
||||
#skater {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 50%;
|
||||
width: 10em;
|
||||
margin-left: -4em;
|
||||
text-align: center;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
#skater input {
|
||||
width: 3em;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function resize() {
|
||||
var b = document.getElementsByTagName("body")[0];
|
||||
var w, h;
|
||||
|
||||
// Internet Explorer makes everything a pain in the ass
|
||||
if (window.innerWidth) {
|
||||
w = window.innerWidth;
|
||||
h = window.innerHeight;
|
||||
} else if (document.documentElement && document.documentElement.clientWidth) {
|
||||
w = document.documentElement.clientWidth;
|
||||
h = document.documentElement.clientHeight;
|
||||
} else if (document.body) {
|
||||
w = document.body.clientWidth;
|
||||
h = document.body.clientHeight;
|
||||
} else {
|
||||
// Punt
|
||||
w = 600;
|
||||
h = 800;
|
||||
}
|
||||
|
||||
b.style.fontSize = Math.min(w/12, h/12) + 'px';
|
||||
}
|
||||
|
||||
penalties = [
|
||||
["A", "High Block / Block To Head"],
|
||||
["B", "Back Block"],
|
||||
["E", "Elbows"],
|
||||
["F", "Forearms / Hands"],
|
||||
["O", "Out of Bounds Block"],
|
||||
["L", "Low Block / Tripping"],
|
||||
["C", "Direction of Gameplay"],
|
||||
["M", "Multi-Player Block"],
|
||||
["I", "Illegal Procedure"],
|
||||
["S", "Skating Out of Bounds"],
|
||||
["X", "Track Cut"],
|
||||
["P", "Out of Play"],
|
||||
["H", "Head"],
|
||||
["G", "Gross Misconduct / Misconduct"],
|
||||
["N", "Insubordination"],
|
||||
];
|
||||
|
||||
function clear_skater() {
|
||||
var old = document.getElementById("skater");
|
||||
if (old) {
|
||||
old.parentNode.removeChild(old);
|
||||
}
|
||||
}
|
||||
|
||||
function set_name(row, name) {
|
||||
var td = row.childNodes[0];
|
||||
|
||||
td.innerHTML = name.value;
|
||||
clear_skater();
|
||||
|
||||
}
|
||||
|
||||
function set_majors(row, str) {
|
||||
var td = row.childNodes[1];
|
||||
|
||||
td.innerHTML = str;
|
||||
if (td.innerHTML.length >= 8) {
|
||||
row.className = "ejected";
|
||||
} else if (td.innerHTML.substr(-1) == "4") {
|
||||
row.className = "fourminor";
|
||||
} else {
|
||||
row.className = "";
|
||||
}
|
||||
clear_skater();
|
||||
}
|
||||
|
||||
function add_major(row, code) {
|
||||
var td = row.childNodes[1];
|
||||
|
||||
set_majors(row, td.innerHTML + code);
|
||||
}
|
||||
|
||||
function set_minors(row, n) {
|
||||
var td = row.childNodes[2];
|
||||
|
||||
if (n >= 4) {
|
||||
n = 0;
|
||||
add_major(row, "4");
|
||||
}
|
||||
|
||||
td.innerHTML = '';
|
||||
for (var i = 0; i < n; i += 1) {
|
||||
td.innerHTML += String(i+1);
|
||||
}
|
||||
|
||||
clear_skater();
|
||||
}
|
||||
|
||||
function add_minor(row) {
|
||||
var td = row.childNodes[2];
|
||||
var n = td.innerHTML.length;
|
||||
|
||||
n += 1;
|
||||
set_minors(row, n);
|
||||
}
|
||||
|
||||
|
||||
function update_skater(row) {
|
||||
clear_skater();
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.id = "skater";
|
||||
|
||||
var name = document.createElement("input");
|
||||
name.onchange = function() { set_name(row, name); };
|
||||
name.value = row.childNodes[0].innerHTML;
|
||||
div.appendChild(name);
|
||||
|
||||
var maj = document.createElement("input");
|
||||
maj.onchange = function() { set_majors(row, maj.value); };
|
||||
maj.value = row.childNodes[1].innerHTML;
|
||||
div.appendChild(maj);
|
||||
|
||||
var min = document.createElement("input");
|
||||
min.onchange = function() { set_minors(row, Number(min.value)); };
|
||||
min.value = row.childNodes[2].innerHTML.length;
|
||||
div.appendChild(min);
|
||||
|
||||
div.appendChild(document.createElement("br"));
|
||||
|
||||
var sel = document.createElement("select");
|
||||
div.appendChild(sel);
|
||||
|
||||
var b = document.createElement("option");
|
||||
b.innerHTML = "Major";
|
||||
sel.appendChild(b);
|
||||
|
||||
for (var i in penalties) {
|
||||
var code = penalties[i][0];
|
||||
var desc = penalties[i][1];
|
||||
|
||||
var b = document.createElement("option");
|
||||
b.innerHTML = code + " - " + desc;
|
||||
b.onclick = function (code) {
|
||||
return function() { add_major(row, code); };
|
||||
} (code);
|
||||
sel.appendChild(b);
|
||||
}
|
||||
|
||||
div.appendChild(document.createElement("br"));
|
||||
|
||||
var min = document.createElement("button");
|
||||
min.innerHTML = "Minor";
|
||||
min.onclick = function() { add_minor(row); };
|
||||
div.appendChild(min);
|
||||
|
||||
document.body.appendChild(div);
|
||||
name.focus();
|
||||
}
|
||||
|
||||
function handle(e, id) {
|
||||
var tgt;
|
||||
var team;
|
||||
|
||||
if (id) {
|
||||
tgt = document.getElementById(id);
|
||||
} else {
|
||||
tgt = e.target || window.event.srcElement;
|
||||
id = tgt.id;
|
||||
}
|
||||
team = id.substr(id.length - 1);
|
||||
|
||||
switch (id) {
|
||||
case "name-a":
|
||||
case "name-b":
|
||||
var tn = prompt("Enter team " + team + " name", tgt.innerHTML);
|
||||
|
||||
if (tn) {
|
||||
tgt.innerHTML = tn;
|
||||
}
|
||||
break;
|
||||
case "score-a":
|
||||
case "score-b":
|
||||
tgt.innerHTML = Number(tgt.innerHTML) + 1;
|
||||
break;
|
||||
case "penalties-a":
|
||||
case "penalties-b":
|
||||
var col = e.target || window.event.srcElement;
|
||||
var row = col.parentElement;
|
||||
|
||||
update_skater(row);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function start() {
|
||||
resize();
|
||||
}
|
||||
|
||||
window.onload = start;
|
||||
window.onresize = resize;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="left">
|
||||
<p class="name" id="name-a" onclick="handle(event);">A</p>
|
||||
<p class="score" id="score-a" onclick="handle(event);">0</p>
|
||||
<table class="penalties" id="penalties-a" onclick="handle(event, 'penalties-a');">
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="right">
|
||||
<p class="name" id="name-b" onclick="handle(event);">B</p>
|
||||
<p class="score" id="score-b" onclick="handle(event);">0</p>
|
||||
<table class="penalties" id="penalties-b" onclick="handle(event, 'penalties-b');">
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
<tr><td></td><td></td><td></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue