fixes from watching tonight
This commit is contained in:
parent
15d40d257e
commit
eaefa14d37
253
derby.html
253
derby.html
|
|
@ -1,253 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Presentation Timer 2011 Neale Pickett -->
|
||||
<!-- Placed in the public domain. -->
|
||||
<!-- Time-stamp: "2011-11-11 15:06:12 neale" -->
|
||||
<html>
|
||||
<head>
|
||||
<title>LADD Scoreboard</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: Most Wazted;
|
||||
src: url(Mostwasted.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: Comunicacion Digital;
|
||||
src: url(Comunicacion.ttf);
|
||||
}
|
||||
body {
|
||||
background: #222 url(stone-cmp.jpg);
|
||||
color: #eee;
|
||||
font-family: Most Wazted, fantasy;
|
||||
font-size: 5em;
|
||||
text-align: center;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.team {
|
||||
font-family: Comunicacion Digital;
|
||||
}
|
||||
img.logo {
|
||||
max-width: 100%;
|
||||
}
|
||||
.number {
|
||||
color: yellow;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
.timer {
|
||||
background: #000;
|
||||
font-size: 150%;
|
||||
font-family: sans-serif;
|
||||
border-radius: 15px;
|
||||
padding: 0 0.1em;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var nperiod = 1;
|
||||
|
||||
function pad(i) {
|
||||
if (i < 10) {
|
||||
return "0" + i;
|
||||
} else {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
// Start a timer on [element] for [duration] milliseconds.
|
||||
function startTimer(element, precision) {
|
||||
var beginning;
|
||||
var duration;
|
||||
var itimer;
|
||||
|
||||
function display(remain) {
|
||||
var min = Math.floor(Math.abs(remain / 60000));
|
||||
var sec = Math.abs(remain / 1000) % 60;
|
||||
|
||||
if (itimer) {
|
||||
element.style.color = element.fg;
|
||||
} else {
|
||||
element.style.color = "#888";
|
||||
}
|
||||
|
||||
if (! duration) {
|
||||
element.style.backgroundColor = "#044";
|
||||
} else if (remain < 20000) {
|
||||
element.style.backgroundColor = "#f24";
|
||||
} else {
|
||||
element.style.backgroundColor = element.bg;
|
||||
}
|
||||
|
||||
element.innerHTML = "";
|
||||
if ((duration > 0) && (remain < 0)) {
|
||||
element.innerHTML = "0:0" + (0).toFixed(precision);
|
||||
this.stop();
|
||||
return;
|
||||
}
|
||||
element.innerHTML += min + ":" + pad(sec.toFixed(precision));
|
||||
}
|
||||
|
||||
function update() {
|
||||
var now = (new Date()).getTime();
|
||||
var remain = beginning + duration - now;
|
||||
|
||||
display(remain);
|
||||
}
|
||||
|
||||
// Is this timer running?
|
||||
this.running = function () {
|
||||
return ~~itimer;
|
||||
}
|
||||
|
||||
// Is this a countdown timer?
|
||||
this.descending = function () {
|
||||
return ~~duration;
|
||||
}
|
||||
|
||||
// Stop (clear timer)
|
||||
this.stop = function () {
|
||||
if (itimer) {
|
||||
clearInterval(itimer);
|
||||
itimer = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// Start
|
||||
this.start = function () {
|
||||
beginning = (new Date()).getTime();
|
||||
if (itimer) {
|
||||
return;
|
||||
}
|
||||
itimer = setInterval(update, 33);
|
||||
display(duration);
|
||||
}
|
||||
|
||||
// Pause/play toggle
|
||||
this.toggle = function () {
|
||||
var now = (new Date()).getTime();
|
||||
|
||||
if (itimer) {
|
||||
this.stop();
|
||||
duration -= now - beginning;
|
||||
} else {
|
||||
this.start();
|
||||
}
|
||||
display(duration);
|
||||
}
|
||||
|
||||
// Re-set with a new time
|
||||
this.reset = function (t) {
|
||||
duration = t;
|
||||
this.start();
|
||||
display(duration);
|
||||
}
|
||||
|
||||
if (precision == undefined) {
|
||||
precision = 1;
|
||||
}
|
||||
|
||||
if (element.bg == undefined) {
|
||||
element.bg = element.style.backgroundColor;
|
||||
element.fg = element.style.color;
|
||||
}
|
||||
}
|
||||
|
||||
function period() {
|
||||
var pt = document.getElementById("period").timer;
|
||||
var jt = document.getElementById("jam").timer;
|
||||
|
||||
if (! pt.descending()) {
|
||||
pt.reset(1800000);
|
||||
return;
|
||||
} else if (pt.running()) {
|
||||
// pause period clock, count jam clock up
|
||||
jt.reset(0);
|
||||
} else {
|
||||
// Reset jam clock, resume period clock
|
||||
jt.reset(120000);
|
||||
}
|
||||
pt.toggle();
|
||||
}
|
||||
|
||||
function jam() {
|
||||
var jt = document.getElementById("jam").timer;
|
||||
var pt = document.getElementById("period").timer;
|
||||
var jtext = document.getElementById("jamtext");
|
||||
|
||||
if (jt.descending()) {
|
||||
jtext.innerHTML = "-";
|
||||
jt.reset(0);
|
||||
} else {
|
||||
jtext.innerHTML = "Jam";
|
||||
jt.reset(120000);
|
||||
}
|
||||
if (! pt.descending()) {
|
||||
period();
|
||||
}
|
||||
}
|
||||
|
||||
function score(team, points) {
|
||||
var te = document.getElementById("score-" + team);
|
||||
var ts = Number(te.innerHTML);
|
||||
|
||||
ts += points;
|
||||
te.innerHTML = ts;
|
||||
}
|
||||
|
||||
function mockup() {
|
||||
var p = document.getElementById("period");
|
||||
var j = document.getElementById("jam");
|
||||
|
||||
p.timer = new startTimer(p, 0);
|
||||
// p.timer.reset(1800000);
|
||||
|
||||
j.timer = new startTimer(j, 1);
|
||||
// j.timer.reset(120000);
|
||||
}
|
||||
|
||||
window.onload = mockup;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td width="20%" class="team" onclick="score('a', -1);">
|
||||
Bombs<br>
|
||||
<img src="bombs.png" alt="" class="logo">
|
||||
</td>
|
||||
<td width="60%" rowspan="2">
|
||||
<p onclick="period();">
|
||||
<span class="timer" id="period">--:--</span>
|
||||
<br>
|
||||
<span id="periodtext">---</span>
|
||||
</p>
|
||||
<p onclick="jam();">
|
||||
<span id="jamtext">---</span>
|
||||
<br>
|
||||
<span class="timer" id="jam">-:--.--</span>
|
||||
</p>
|
||||
</td>
|
||||
<td width="20%" class="team" onclick="score('b', -1);">
|
||||
Animas<br>
|
||||
<img src="animas.png" alt="" class="logo">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="score-a" class="number" onclick="score('a', 1)";>0</span>
|
||||
</td>
|
||||
<td>
|
||||
<span id="score-b" class="number" onclick="score('b', 1)";>0</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- Presentation Timer 2011 Neale Pickett -->
|
||||
<!-- Placed in the public domain. -->
|
||||
<!-- Time-stamp: "2011-11-11 22:43:12 neale" -->
|
||||
<html>
|
||||
<head>
|
||||
<title>LADD Scoreboard</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script type="text/javascript" src="scoreboard.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<tr>
|
||||
<td width="20%" class="team" onclick="score('a', -1);">
|
||||
Bombs
|
||||
<br>
|
||||
<img src="bombs.png" alt="" class="logo">
|
||||
</td>
|
||||
<td width="60%" rowspan="2">
|
||||
<p onclick="timer(0);">
|
||||
<span class="timer" id="period">--:--</span>
|
||||
<br>
|
||||
<span id="periodtext">---</span>
|
||||
</p>
|
||||
<p onclick="timer(1);">
|
||||
<span id="jamtext">---</span>
|
||||
<br>
|
||||
<span class="timer" id="jam">-:--.--</span>
|
||||
</p>
|
||||
</td>
|
||||
<td width="20%" class="team" onclick="score('b', -1);">
|
||||
Animas
|
||||
<br>
|
||||
<img src="animas.png" alt="" class="logo">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<span id="score-a" class="number" onclick="score('a', 1)";>0</span>
|
||||
</td>
|
||||
<td>
|
||||
<span id="score-b" class="number" onclick="score('b', 1)";>0</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
var START = 0;
|
||||
var JAM = 1;
|
||||
var ROTATE = 2;
|
||||
var TIMEOUT = 3;
|
||||
|
||||
var period = 1;
|
||||
var state = START;
|
||||
|
||||
function pad(i) {
|
||||
if (i < 10) {
|
||||
return "0" + i;
|
||||
} else {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
||||
// Start a timer on [element] for [duration] milliseconds.
|
||||
function startTimer(element, precision, duration, callback) {
|
||||
var beginning;
|
||||
var itimer;
|
||||
var precmult = 1;
|
||||
|
||||
for (var i = 0; i < precision; i += 1) {
|
||||
precmult *= 10;
|
||||
}
|
||||
|
||||
function display(remain) {
|
||||
var min = Math.floor(Math.abs(remain / 60000));
|
||||
var sec = Math.abs(remain / 1000) % 60;
|
||||
|
||||
/* Scale sec to precision, since toFixed only rounds */
|
||||
sec = Math.floor(sec * precmult) / precmult;
|
||||
|
||||
if (itimer) {
|
||||
element.style.color = element.fg;
|
||||
} else {
|
||||
element.style.color = "#888";
|
||||
}
|
||||
|
||||
if (! duration) {
|
||||
element.style.backgroundColor = "#044";
|
||||
} else if (remain <= 20000) {
|
||||
element.style.backgroundColor = "#f24";
|
||||
} else {
|
||||
element.style.backgroundColor = element.bg;
|
||||
}
|
||||
|
||||
element.innerHTML = "";
|
||||
if ((duration > 0) && (remain <= 0)) {
|
||||
this.stop();
|
||||
element.innerHTML = "0:0" + (0).toFixed(precision);
|
||||
if (callback) callback();
|
||||
return;
|
||||
}
|
||||
element.innerHTML += min + ":" + pad(sec.toFixed(precision));
|
||||
}
|
||||
|
||||
function update() {
|
||||
var now = (new Date()).getTime();
|
||||
var remain = beginning + duration - now;
|
||||
|
||||
display(remain);
|
||||
}
|
||||
|
||||
// Is this timer running?
|
||||
this.running = function () {
|
||||
return ~~itimer;
|
||||
}
|
||||
|
||||
// Is this a countdown timer?
|
||||
this.descending = function () {
|
||||
return ~~duration;
|
||||
}
|
||||
|
||||
// Stop (clear timer)
|
||||
this.stop = function () {
|
||||
if (itimer) {
|
||||
clearInterval(itimer);
|
||||
itimer = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// Start
|
||||
this.start = function () {
|
||||
beginning = (new Date()).getTime();
|
||||
if (itimer) {
|
||||
return;
|
||||
}
|
||||
itimer = setInterval(update, 100);
|
||||
display(duration);
|
||||
}
|
||||
|
||||
// Unpause if paused
|
||||
this.go = function () {
|
||||
if (itimer) return;
|
||||
|
||||
this.start();
|
||||
}
|
||||
|
||||
// Pause if unpaused
|
||||
this.pause = function () {
|
||||
if (! itimer) return;
|
||||
|
||||
this.stop();
|
||||
duration -= (new Date()).getTime() - beginning;
|
||||
display(duration);
|
||||
}
|
||||
|
||||
// Restart with a new time
|
||||
this.reset = function (t) {
|
||||
duration = t;
|
||||
this.start();
|
||||
display(duration);
|
||||
}
|
||||
|
||||
if (precision == undefined) {
|
||||
precision = 1;
|
||||
}
|
||||
|
||||
if (element.bg == undefined) {
|
||||
element.bg = element.style.backgroundColor;
|
||||
element.fg = element.style.color;
|
||||
}
|
||||
}
|
||||
|
||||
// Transition state machine based on state
|
||||
function transition() {
|
||||
var jt = document.getElementById("jam").timer;
|
||||
var pt = document.getElementById("period").timer;
|
||||
var ptext = document.getElementById("periodtext");
|
||||
var jtext = document.getElementById("jamtext");
|
||||
|
||||
if (state == JAM) {
|
||||
pt.go();
|
||||
jt.reset(120000);
|
||||
jtext.innerHTML = "Jam";
|
||||
} else if (state == ROTATE) {
|
||||
pt.go();
|
||||
jt.reset(30000);
|
||||
jtext.innerHTML = "Rotation";
|
||||
} else if (state == TIMEOUT) {
|
||||
pt.pause();
|
||||
jt.reset(0);
|
||||
jtext.innerHTML = "Timeout";
|
||||
}
|
||||
ptext.innerHTML = "Period " + period;
|
||||
}
|
||||
|
||||
// A timer was clicked
|
||||
// 0 = period timer
|
||||
// 1 = jam timer
|
||||
function timer(tn) {
|
||||
if (tn == 0) {
|
||||
if ((state == JAM) || (state == ROTATE)) {
|
||||
state = TIMEOUT;
|
||||
} else {
|
||||
state = JAM;
|
||||
}
|
||||
} else {
|
||||
if (state == JAM) {
|
||||
state = ROTATE;
|
||||
} else {
|
||||
state = JAM;
|
||||
}
|
||||
}
|
||||
transition();
|
||||
}
|
||||
|
||||
function score(team, points) {
|
||||
var te = document.getElementById("score-" + team);
|
||||
var ts = Number(te.innerHTML);
|
||||
|
||||
ts += points;
|
||||
te.innerHTML = ts;
|
||||
}
|
||||
|
||||
function mockup() {
|
||||
var p = document.getElementById("period");
|
||||
var j = document.getElementById("jam");
|
||||
|
||||
p.timer = new startTimer(p, 0, 1800000);
|
||||
|
||||
function jtexp() {
|
||||
if (state == JAM) {
|
||||
state = ROTATE;
|
||||
} else {
|
||||
state = JAM;
|
||||
}
|
||||
transition();
|
||||
}
|
||||
j.timer = new startTimer(j, 1, 120000, jtexp);
|
||||
}
|
||||
|
||||
window.onload = mockup;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
@font-face {
|
||||
font-family: Most Wazted;
|
||||
src: url(Mostwasted.ttf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: Comunicacion Digital;
|
||||
src: url(Comunicacion.ttf);
|
||||
}
|
||||
body {
|
||||
background: #222 url(stone-cmp.jpg);
|
||||
color: #eee;
|
||||
font-family: Most Wazted, fantasy;
|
||||
font-size: 5em;
|
||||
text-align: center;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.team {
|
||||
font-family: Comunicacion Digital;
|
||||
}
|
||||
img.logo {
|
||||
max-width: 100%;
|
||||
}
|
||||
.number {
|
||||
color: yellow;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
.timer {
|
||||
background: #000;
|
||||
color: yellow;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 150%;
|
||||
border-radius: 15px;
|
||||
padding: 0 0.1em;
|
||||
}
|
||||
Loading…
Reference in New Issue