neale
/
woozle-scoreboard
mirror of https://github.com/nealey/woozle-scoreboard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update alternate layouts

This commit is contained in:
Neale Pickett 2012-07-06 23:45:03 -06:00
parent 6a1f89e5d1
commit b9944870b6
9 changed files with 183 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
highvis.html
View File

@ -28,20 +28,19 @@
text-align: center; text-align: center;
} }
#scoreboard { #scoreboard {
font-size: 120px; font-size: 1.4em;
width: 100%; width: 100%;
} }
#jam, #period, #score-a, #score-b, #jammer-a.lead, #jammer-b.lead { #jam, #period, #score-a, #score-b, #jammer-a.lead, #jammer-b.lead {
color: white; color: white;
} }
#score-a, #score-b { #score-a, #score-b {
font-size: 150px;
position: absolute; position: absolute;
top: 35%; top: 1.4em;
} }
#jammer-a, #jammer-b { #jammer-a, #jammer-b {
position: absolute; position: absolute;
top: 10px; bottom: 0;
} }
#jamtext { #jamtext {
font-family: monospace; font-family: monospace;
@ -57,7 +56,6 @@
margin: 0; margin: 0;
} }
#notice { #notice {
font-size: 150px;
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 20%; left: 20%;

84
index.html
View File

@ -21,90 +21,22 @@
<title>LADD Roller Derby Scoreboard</title> <title>LADD Roller Derby Scoreboard</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="scoreboard.css">
</head> </head>
<body> <body>
<h1>LADD Roller Derby Scoreboard</h1> <h1>LADD Roller Derby Scoreboard</h1>
<p> <p>
This is a free WFTDA-rules scoreboard, created with ease-of-use This is a free WFTDA-rules scoreboard, created with ease-of-use
in mind. in mind. It is known to work on PC, Mac, Android, iOS, or Linux, using any
It is known to work on: common web browser.
</p> </p>
<ul> <p id="screenshot">
<li>Windows (XP or later)</li> <img src="screenshot.png">
<li>MacOS</li> <br>
<li>Linux</li> You can <a href="scoreboard.html">try it right now</a>--it
<li>Android Phones and Tablets</li> runs in a web browser (but doesn't require Internet access).
<li>iPad</li> </p>
<li>iPhone</li>
</ul>
<script type="text/javascript" src="logos.js"></script>
<script type="text/javascript" src="scoreboard.js"></script>
<div id="screenshot">
<img src="screenshot.png">
<p>
The scoreboard requires JavaScript. If your browser is capable
of JavaScript, enable it for this page to try the scoreboard
in your browser!
</p>
</div>
<table id="scoreboard" style="display: none;">
<caption>
<b>Your browser is already running the scoreboard right now!</b>
Click on the team logos below, then the bottom timer to start a jam.
<a href="scoreboard.html">Full-screen version here</a>.
</caption>
<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>
<script type="text/javascript">
var sb = document.getElementById("scoreboard");
sb.style.display = "table";
sb = document.getElementById("screenshot");
sb.style.display = "none";
</script>
<h1>Features</h1> <h1>Features</h1>

26
micro.html
View File

@ -24,14 +24,27 @@
<style type="text/css"> <style type="text/css">
body { body {
background: black; background: black;
}
#scoreboard {
font-size: 2em;
text-align: center; text-align: center;
} }
#jam, #period { #jam, #period {
position: inherit;
margin: inherit;
width: inherit;
left: inherit;
color: white; color: white;
} }
#scoreboard { #jamtext {
font-size: 155px; font-family: inherit;
width: 100%; font-size: 50%;
margin: inherit;
width: inherit;
position: inherit;
bottom: 0em;
left: 0em;
} }
html, p { html, p {
padding: 0; padding: 0;
@ -40,8 +53,8 @@
</style> </style>
<script type="text/javascript" src="scoreboard.js"></script> <script type="text/javascript" src="scoreboard.js"></script>
<script type="text/javascript"> <script type="text/javascript">
window.onkeypress = key; jamtext = ["J", "L", "T", "S"];
window.tenths = false; tenths = false;
</script> </script>
</head> </head>
<body> <body>
@ -50,7 +63,8 @@ window.tenths = false;
<span id="period" onclick="handle(event);">--:--</span> <span id="period" onclick="handle(event);">--:--</span>
</p> </p>
<p> <p>
<span id="jam" onclick="handle(event);">-:--.-</span> <span id="jamtext">S</span>
<span id="jam" onclick="handle(event);">-:--</span>
</p> </p>
</div> </div>
</body> </body>

159
penalties.html
View File

@ -20,25 +20,82 @@
<head> <head>
<title>LADD Scoreboard</title> <title>LADD Scoreboard</title>
<meta charset="utf-8"> <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%;
}
</style>
<link rel="stylesheet" type="text/css" href="scoreboard.css"> <link rel="stylesheet" type="text/css" href="scoreboard.css">
<style type="text/css">
#scoreboard {
font-size: 75%;
}
#score-a, #score-b {
top: 2.1em;
}
#jamtext {
top: 3.1em;
bottom: inherit;
}
#jamno {
top: 5em;
bottom: inherit;
}
#jam, #jammer-a, #jammer-b {
top: 3em;
bottom: inherit;
}
#jammer-a {
left: 1.2em;
}
#jammer-b {
right: 1.2em;
}
#timeouts-a, #timeouts-b {
top: 7em;
}
/*
* Penalties
*/
#penalties-a, #penalties-b {
position: absolute;
font-size: 13%;
bottom: 2px;
border-collapse: collapse;
}
#penalties-a {
left: 0;
}
#penalties-b {
right: 0;
}
#penalties td {
cursor: pointer;
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 {
font-family: sans-serif;
vertical-align: top;
width: 1em;
line-height: 75%;
}
</style>
<script type="text/javascript" src="logos.js"></script> <script type="text/javascript" src="logos.js"></script>
<script type="text/javascript" src="scoreboard.js"></script> <script type="text/javascript" src="scoreboard.js"></script>
<script type="text/javascript" src="penalties.js"></script> <script type="text/javascript" src="penalties.js"></script>
@ -46,48 +103,32 @@
window.onkeypress = key; window.onkeypress = key;
</script> </script>
</head> </head>
<body> <body>
<table id="scoreboard"> <div id="scoreboard">
<tr> <p>
<td width="20%" class="team"> <span id="name-a" onclick="handle(event);">Home</span>
<span id="name-a" onclick="handle(event);">-</span> <img src="" alt="A" id="logo-a" onclick="handle(event);">
<br> <span id="timeouts-a" onclick="handle(event);">0</span>
<img src="" alt="☻" id="logo-a" onclick="handle(event);"> <span id="jammer-a" onclick="handle(event);">★</span>
</td> <span id="score-a" onclick="handle(event);">-</span>
<td width="60%" rowspan="2"> </p>
<p>
<span id="period" onclick="handle(event);">--:--</span>
</p>
<p>
<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>
</p>
<p>
<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> <p>
<td> <span id="period" onclick="handle(event);">--:--</span>
<span id="score-a" onclick="handle(event);">-</span> <span id="periodtext" onclick="handle(event);"></span>
</td> <span id="jam" onclick="handle(event);">-:--.-</span>
<td> <span id="jamtext" onclick="handle(event);"></span>
<span id="score-b" onclick="handle(event);">-</span> <span id="jamno" onclick="handle(event);">0</span>
</td> </p>
</tr>
</table> <p>
<span id="name-b" onclick="handle(event);">Vis</span>
<img src="" alt="B" id="logo-b" onclick="handle(event);">
<span id="timeouts-b" onclick="handle(event);">0</span>
<span id="jammer-b" onclick="handle(event);">★</span>
<span id="score-b" onclick="handle(event);">-</span>
</p>
</div>
<div id="penalties"> <div id="penalties">
<table id="penalties-a"> <table id="penalties-a">

8
scoreboard.css
View File

@ -19,6 +19,14 @@
font-style: normal; font-style: normal;
} }
body {
background: url(bg.jpg) #222;
background-size: 100% auto;
font-size: 160px;
color: #eee;
margin: 0;
}
#scoreboard { #scoreboard {
cursor: default; cursor: default;
font-family: sans-serif; font-family: sans-serif;

53
scoreboard.html
View File

@ -20,60 +20,9 @@
<head> <head>
<title>LADD Scoreboard</title> <title>LADD Scoreboard</title>
<meta charset="utf-8"> <meta charset="utf-8">
<style type="text/css">
body {
background: url(bg.jpg) #222;
background-size: 100% auto;
font-size: 160px;
color: #eee;
margin: 0;
}
#scoreboard {
width: 100%;
}
</style>
<link rel="stylesheet" type="text/css" href="scoreboard.css"> <link rel="stylesheet" type="text/css" href="scoreboard.css">
<script type="text/javascript" src="logos.js"></script> <script type="text/javascript" src="logos.js"></script>
<script type="text/javascript" src="scoreboard.js"></script> <script type="text/javascript" src="scoreboard.js"></script>
<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 = 800;
h = 600;
}
w /= 7;
h /= 5;
var fs = Math.min(w, h);
b.style.fontSize = fs + 'px';
}
function localstart() {
start();
resize();
}
window.onresize = resize;
window.onload = localstart;
window.onkeypress = key;
</script>
</head> </head>
<body> <body>
<!-- <!--
@ -104,7 +53,7 @@ window.onkeypress = key;
<span id="jammer-b" onclick="handle(event);">★</span> <span id="jammer-b" onclick="handle(event);">★</span>
<span id="score-b" onclick="handle(event);">-</span> <span id="score-b" onclick="handle(event);">-</span>
</p> </p>
</table> </div>
<div id="notice"> <div id="notice">
<div id="notice-1">Power Jam</div> <div id="notice-1">Power Jam</div>

33
scoreboard.js
View File

@ -495,7 +495,40 @@ function start() {
save_timer = setInterval(save, 1000); save_timer = setInterval(save, 1000);
update_itimer = setInterval(update, 33); update_itimer = setInterval(update, 33);
resize();
}
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 = 800;
h = 600;
}
w /= 7;
h /= 5;
var fs = Math.min(w, h);
b.style.fontSize = fs + 'px';
} }
window.onload = start; window.onload = start;
window.onkeypress = key;
window.onresize = resize;
window.tenths = true; window.tenths = true;

BIN
screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 65 KiB

19
style.css
View File

@ -1,7 +1,14 @@
@font-face { @font-face {
font-family: Most Wazted; font-family: 'MostWaztedRegular';
src: url(Mostwasted.ttf); src: url('mostwasted-webfont.eot');
src: url('mostwasted-webfont.eot?#iefix') format('embedded-opentype'),
url('mostwasted-webfont.woff') format('woff'),
url('mostwasted-webfont.ttf') format('truetype'),
url('mostwasted-webfont.svg#MostWaztedRegular') format('svg');
font-weight: normal;
font-style: normal;
} }
body { body {
background: #222 url(bg.jpg); background: #222 url(bg.jpg);
background-size: 100% auto; background-size: 100% auto;
@ -11,7 +18,7 @@ body {
} }
h1 { h1 {
color: #fd8; color: #fd8;
font-family: Most Wazted, fantasy, sans-serif; font-family: MostWaztedRegular, fantasy, sans-serif;
font-size-adjust: 1.0; font-size-adjust: 1.0;
} }
h2 { h2 {
@ -24,12 +31,6 @@ dt {
a { a {
color: yellow; color: yellow;
} }
#scoreboard {
font-size: 3em;
font-family: Most Wazted, fantasy;
border: solid black 4px;
width: 100%;
}
caption { caption {
font-size: 33%; font-size: 33%;
font-family: default; font-family: default;