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

gussy her up a bit

This commit is contained in:
Neale Pickett 2012-03-15 18:41:46 -06:00
parent 894066a0fa
commit 1e4b52a630
3 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

45
track.html
View File

@ -19,10 +19,11 @@
<html> <html>
<head> <head>
<title>WFTDA 2010 Track</title> <title>WFTDA 2010 Track</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript" src="track.js"></script> <script type="text/javascript" src="track.js"></script>
<style type="text/css"> <style type="text/css">
html { html {
background: black; background: black url("../scoreboard/bg.jpg");
text-align: center; text-align: center;
color: white; color: white;
} }
@ -31,24 +32,56 @@ html, body, canvas {
margin: 0; margin: 0;
border: 0; border: 0;
} }
#link {
color: #8c8; #actions {
position: absolute; position: absolute;
left: 1em; left: 0em;
top: 1em; top: 0em;
text-align: left;
opacity: 0.7;
}
a {
color: #8c8;
} }
#debug { #debug {
position: absolute; position: absolute;
bottom: 1em; bottom: 1em;
right: 1em; right: 1em;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
}
#info {
position: absolute;
top: 0em;
right: 0em;
margin: 0;
color: white;
opacity: 0.5;
text-align: right;
} }
</style> </style>
<script type="application/javascript">
function about() {
var a = document.getElementById("about");
debug(a.style.display);
if (a.style.display == "none") {
a.style.display = "block";
} else {
a.style.display = "none";
}
}
</script>
</head> </head>
<body> <body>
<p id="debug"></p> <p id="debug"></p>
<ul id="actions">
<li><a id="link" href="#">link to this position</a></li>
<li><a href="http://woozle.org/scoreboard/">free derby scoreboard</a></li>
</ul>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<a id="link" href="#">link to this position</a> <p id="info">
<span title="Los Alamos Derby Dames">LADD</a> Track - ©2012 Neale Pickett - <a href="license.txt">GPLv3</a>
</p>
</body> </body>
</html> </html>

40
track.js
View File

@ -134,17 +134,15 @@ function player(color, pos) {
return e; return e;
} }
function outer(ctx) { function drawTrack(ctx) {
ctx.beginPath(); ctx.beginPath();
ctx.arc( halflen, -offset, ro, tau*3/4, tau*1/4); ctx.arc( halflen, -offset, ro, tau*3/4, tau*1/4);
ctx.arc(-halflen, offset, ro, tau*1/4, tau*3/4); ctx.arc(-halflen, offset, ro, tau*1/4, tau*3/4);
ctx.closePath(); ctx.lineTo( halflen, -offset - ro);
} ctx.moveTo( halflen, -ri);
ctx.lineTo(-halflen, -ri);
function inner(ctx) { ctx.arc(-halflen, 0, ri, tau*3/4, tau*1/4, true);
ctx.beginPath(); ctx.arc( halflen, 0, ri, tau*1/4, tau*3/4, true);
ctx.arc( halflen, 0, ri, tau*3/4, tau*1/4);
ctx.arc(-halflen, 0, ri, tau*1/4, tau*3/4);
ctx.closePath(); ctx.closePath();
} }
@ -153,7 +151,7 @@ function start() {
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
var win_width = window.innerWidth; var win_width = window.innerWidth;
var win_height = window.innerHeight - 5; // FF won't let me use all height var win_height = window.innerHeight - 20; // room for pentaly box
scale = Math.min(win_width / 100, win_height / 60); scale = Math.min(win_width / 100, win_height / 60);
canvas.width = scale * 100; canvas.width = scale * 100;
@ -171,7 +169,7 @@ function start() {
// Fill in track area // Fill in track area
ctx.fillStyle = "#888"; ctx.fillStyle = "#888";
outer(ctx); drawTrack(ctx);
ctx.fill(); ctx.fill();
// A bunch of lines // A bunch of lines
@ -179,10 +177,10 @@ function start() {
ctx.strokeStyle = "rgba(0, 0, 0, 0.4)"; ctx.strokeStyle = "rgba(0, 0, 0, 0.4)";
ctx.beginPath(); ctx.beginPath();
for (var i = 0; i < 4; i += 1) { for (var i = 0; i < 4; i += 1) {
ctx.moveTo(halflen - i*10, 0); ctx.moveTo(halflen - i*10, ri);
ctx.lineTo(halflen - i*10, ro + offset); ctx.lineTo(halflen - i*10, ro + offset);
ctx.moveTo(i*10 - halflen, 0); ctx.moveTo(i*10 - halflen, -ri);
ctx.lineTo(i*10 - halflen, -ro - offset); ctx.lineTo(i*10 - halflen, -ro - offset);
} }
@ -192,7 +190,7 @@ function start() {
ctx.rotate(j*tau/2); ctx.rotate(j*tau/2);
for (var i = 0; i < 5; i += 1) { for (var i = 0; i < 5; i += 1) {
ctx.rotate(-theta); ctx.rotate(-theta);
ctx.moveTo(0, 0); ctx.moveTo(0, ri);
ctx.lineTo(0, 12.5 + 15.0); ctx.lineTo(0, 12.5 + 15.0);
} }
ctx.restore(); ctx.restore();
@ -203,23 +201,17 @@ function start() {
ctx.lineWidth = 4/12; ctx.lineWidth = 4/12;
ctx.strokeStyle = "#000"; ctx.strokeStyle = "#000";
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(halflen , 0); ctx.moveTo(halflen , ri);
ctx.lineTo(halflen , ro + offset); ctx.lineTo(halflen , ro - offset);
ctx.moveTo(halflen - 30, 0); ctx.moveTo(halflen - 30, ri);
ctx.lineTo(halflen - 30, ro + offset); ctx.lineTo(halflen - 30, ro + offset);
ctx.stroke(); ctx.stroke();
// Outer oval // Now draw track boundaries
ctx.lineWidth = 4/12; ctx.lineWidth = 4/12;
ctx.strokeStyle = "#ff0"; ctx.strokeStyle = "#ff0";
outer(ctx);
ctx.stroke();
// Inner oval + clear inside
ctx.strokeStyle = "#ff0";
ctx.fillStyle = "#000"; ctx.fillStyle = "#000";
inner(ctx); drawTrack(ctx);
ctx.fill();
ctx.stroke(); ctx.stroke();