310 lines
7.7 KiB
HTML
310 lines
7.7 KiB
HTML
|
<!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>
|