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

Add persistence links

This commit is contained in:
Neale Pickett 2012-03-15 17:37:50 -06:00
parent 6566286e78
commit 5c1f7c91ef
2 changed files with 44 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
track.html
View File

@ -14,12 +14,24 @@ html, body, canvas {
margin: 0; margin: 0;
border: 0; border: 0;
} }
#link {
color: #8c8;
position: absolute;
left: 1em;
top: 1em;
}
#debug { #debug {
position: absolute; position: absolute;
bottom: 1em;
right: 1em;
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
} }
</style> </style>
</head> </head>
<body><p id="debug"></p><canvas id="canvas"></canvas></body> <body>
<p id="debug"></p>
<canvas id="canvas"></canvas>
<a id="link" href="#">link to this position</a>
</body>
</html> </html>

35
track.js
View File

@ -15,13 +15,14 @@ var theta = Math.acos(1 - (curve_d * curve_d) / (2 * ri * ri));
var rp = 1; // Radius of a piece var rp = 1; // Radius of a piece
var JAMMER = 0; var JAMMER = 0;
var PIVOT = 1; var PIVOT = 1;
var players = [];
function debug(msg) { function debug(msg) {
var e = document.getElementById("debug"); var e = document.getElementById("debug");
e.innerHTML = msg; e.innerHTML = msg;
} }
function player(color, type) { function player(color, pos) {
var e = document.createElement("canvas"); var e = document.createElement("canvas");
var ctx = e.getContext("2d"); var ctx = e.getContext("2d");
var body = document.getElementsByTagName("body")[0]; var body = document.getElementsByTagName("body")[0];
@ -41,11 +42,19 @@ function player(color, type) {
var x = (evt.pageX - window.innerWidth/2) / scale; var x = (evt.pageX - window.innerWidth/2) / scale;
var y = (evt.pageY - window.innerHeight/2) / scale; var y = (evt.pageY - window.innerHeight/2) / scale;
debug(x + "<br>" + y);
e.moveTo(x, y); e.moveTo(x, y);
} }
function mouseUp() { function mouseUp() {
var l = document.getElementById("link");
var positions = [];
for (var i = 0; i < players.length; i += 1) {
positions.push(players[i].pos);
}
l.href = "#" + JSON.stringify(positions);
window.onmousemove = null; window.onmousemove = null;
window.onmouseup = null; window.onmouseup = null;
} }
@ -56,6 +65,7 @@ function player(color, type) {
} }
e.onmousedown = mouseDown; e.onmousedown = mouseDown;
players.push(e);
body.appendChild(e); body.appendChild(e);
e.style.position = "absolute"; e.style.position = "absolute";
e.moveTo(0, 0); e.moveTo(0, 0);
@ -77,14 +87,14 @@ function player(color, type) {
ctx.fill(); ctx.fill();
ctx.stroke(); ctx.stroke();
if (type == PIVOT) { if (pos == PIVOT) {
ctx.fillStyle = "#fff"; ctx.fillStyle = "#fff";
ctx.beginPath(); ctx.beginPath();
ctx.arc(0, 0, rp, tau*31/32, tau* 1/32); ctx.arc(0, 0, rp, tau*31/32, tau* 1/32);
ctx.arc(0, 0, rp, tau*15/32, tau*17/32); ctx.arc(0, 0, rp, tau*15/32, tau*17/32);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
} else if (type == JAMMER) { } else if (pos == JAMMER) {
ctx.save(); ctx.save();
ctx.fillStyle = "#fff"; ctx.fillStyle = "#fff";
ctx.beginPath(); ctx.beginPath();
@ -98,6 +108,10 @@ function player(color, type) {
} }
ctx.fill(); ctx.fill();
ctx.restore(); ctx.restore();
} else {
ctx.fillStyle = "#fff";
ctx.font = midpoint + "px sans-serif";
ctx.fillText(pos, -0.5, 0.5);
} }
return e; return e;
} }
@ -191,12 +205,23 @@ function start() {
ctx.stroke(); ctx.stroke();
var positions;
try {
positions = JSON.parse(location.hash.substr(1));
}
catch (e) {
// Pass
}
for (var team = 0; team < 2; team += 1) { for (var team = 0; team < 2; team += 1) {
for (var pos = 0; pos < 5; pos += 1) { for (var pos = 0; pos < 5; pos += 1) {
var p = player(team?"#080":"#f0f", pos); var p = player(team?"#080":"#f0f", pos);
if (pos == JAMMER) { if (positions) {
var coord = positions[team*5 + pos];
p.moveTo(coord[0], coord[1]);
} else if (pos == JAMMER) {
p.moveTo(halflen - 30 - rp, ri + rp*(team*4 + 4)); p.moveTo(halflen - 30 - rp, ri + rp*(team*4 + 4));
} else { } else {
p.moveTo(halflen-rp - team * (rp*3), ri + rp*(2.5*pos)); p.moveTo(halflen-rp - team * (rp*3), ri + rp*(2.5*pos));