<!doctype html>
<html>
<head>
<title>Geometry Tracing Game - RJM Programming - October, 2015</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>

var coords=new Array();

var score=2000;
var goes=0;
var delaythis=false;

var delim='';

var areais=0.0;
var dh=400, dw=400, ih=-1, iw=-1;

var ashape=0;

var imageo=[];
var image_array=["one_sided.jpg", "two_sided.jpg", "three_sided.jpg", "four_sided.jpg", "five_sided.jpg", "six_sided.jpg", "seven_sided.jpg", "eight_sided.jpg", "nine_sided.jpg", "ten_sided.jpg"];
var ourareawas=[36213.0, 25382.0, 19608.0, 39366.5, 24471.5, 43679.5, 37633.5, 45130.5, 40987.5, 51842.5];

var iais=image_array.length;
var xto=0.0, yto=0.0, xfrom=0.0, yfrom=0.0, x=0.0, y=0.0, prevx=0.0, prevy=0.0;
var elem=null, which=0, ie, elemLeft=0, elemTop=0, context;

function drawashape() {
which=0;
x=0.0;
y=0.0;
prevx=0.0;
prevy=0.0;
if (ashape < 0) {
ashape=Math.abs(ashape);
} else {
ashape=Math.floor(Math.random() * eval(0 + image_array.length)) + 0;
}
context.clearRect(0, 0, elem.width, elem.height);
var imgis=document.getElementById("i" + ashape);
var ctx=elem.getContext("2d");
delayit();
if (eval(ashape) >= iais) {
if (iw >= 0 && ih >= 0 && 1 == 2) {
ctx.drawImage(imgis,20,20,iw,ih);
} else {
ctx.drawImage(imgis,20,20);
}
} else {
ctx.drawImage(imgis,0,0);
}
}

function retarea() {
var bits=document.getElementById('coords').value;
var lines=bits.split(",\n"), thisarea=0.0;
//alert(lines.length + " ... " + bits);
//document.title='';
for (var ii=0; ii<lines.length; ii++) {
if (eval(1 + ii) > eval(coords.length)) {
coords.push("" + "" + lines[ii]);
} else {
coords[ii]="" + lines[ii];
//document.title+='u' + ii + '[' + lines[ii] + ']';
}
}
thisarea=calculatearea(eval(0 - eval(lines.length)));
document.getElementById('area').value=thisarea;
return thisarea;
}


function restart() {
location.href='./geometry_tracing.html?score=' + score + '&goes=' + goes;
}

</script>
</head>
<body style='background-color:teal;' onresize=' setTimeout(restart,1000);'>
<h1 align='center'>Geometry Tracing Game</h1>
<h2 align='center'>RJM Programming - October, 2015</h2>
<h3 align='center'>Score (reduced by area differences): <span id='score'>2000</span> ... Goes (see how many goes you can stay positive): <span id='goes'>0</span></h3>
<h4 align='center'>Trace Around the Shape with Click/Touch and See How Well You Agree with the Areas We Found</h4>
<div align='center' id='mydiv'>
<table>
<tbody>
<tr><th>Co-ordinates</th><th>Interactive (at white canvas below)</th></tr>
<tr><td>Co-ordinates: <br><textarea id='coords' name='coords' rows=12 cols=20></textarea><br><br><input style='background-color:pink;' onclick="document.getElementById('area').value=retarea();" type='button' value='Calculate Area'></input><br><br>Area is: <input style='width:55%;' type='text' value='' readonly id='area'></input><br><br>Our Area was: <input style='width:36%;' type='text' value='' readonly id='ourarea'></input><br><br>Difference: <input style='width:45%;' type='text' value='' readonly id='difference'></input></td><td><canvas id='mycanvas' width=400 height=400 style='background-color:yellow;position:absolute;top:250px;left:50%;width:400px;height:400px;'></canvas></td></tr>
</tbody>
</table>
</div>
<script type='text/javascript'>


function maybeaddprefix(fromwhat) {
var towhat=fromwhat;
if ((fromwhat + ' ').toLowerCase().indexOf('base64') == 0) {
towhat="data:image/svg+xml;base64," + fromwhat.substring(6);
} else if (decodeURIComponent((fromwhat + ' ')).toLowerCase().indexOf('base64') == 0) {
towhat="data:image/svg+xml;base64," + decodeURIComponent(fromwhat).substring(6);
} else if ((fromwhat + ' ').toLowerCase().indexOf('<svg') == 0) {
towhat="data:image/svg+xml;utf8," + fromwhat;
} else if (decodeURIComponent((fromwhat + ' ')).toLowerCase().indexOf('<svg') == 0) {
towhat="data:image/svg+xml;utf8," + decodeURIComponent(fromwhat);
} else if ((fromwhat + ' ').indexOf(':') != -1) {
return towhat;
} else if (decodeURIComponent((fromwhat + ' ')).indexOf(':') != -1) {
return decodeURIComponent(towhat);
} else if ((fromwhat + ' ').indexOf('.') != -1) {
return towhat;
} else if (decodeURIComponent((fromwhat + ' ')).indexOf('.') != -1) {
return decodeURIComponent(towhat);
}
return towhat;
}

function checkinget() {
var two=2;
var newone=(location.search.split('svg=')[1] ? ('' + maybeaddprefix(location.search.split('svg=')[1].split('&')[0]) + '') : '');
var newarea=(location.search.split('area=')[1] ? ('' + maybeaddprefix(location.search.split('area=')[1].split('&')[0]) + '') : '');
if (newone != "" && newarea != "") {
image_array.push(newone);
ourareawas.push(eval(newarea));
ashape=eval(1 - image_array.length);
while ((location.search.split('svg' + two + '=')[1] ? ('' + maybeaddprefix(location.search.split('svg' + two + '=')[1].split('&')[0]) + '') : '') != '') {
newone=(location.search.split('svg' + two + '=')[1] ? ('' + maybeaddprefix(location.search.split('svg' + two + '=')[1].split('&')[0]) + '') : '');
newarea=(location.search.split('area' + two + '=')[1] ? ('' + maybeaddprefix(location.search.split('area' + two + '=')[1].split('&')[0]) + '') : '');
if (newone != "" && newarea != "") {
ashape=0;
image_array.push(newone);
ourareawas.push(eval(newarea));
}
two++;
}
}
if (ashape < 0) setTimeout(drawashape, 500);
}

function drawaline(thex, they) {
//alert(elem.style.top);
var endp, distaway=999.0;
if (which == 1 && eval(eval(prevx) + eval(prevy)) < 0.0001) which = 0;
if (which == 0) {
delim='';
document.getElementById('coords').value=delim + thex + "," + they;
delim=",\n";
//context.clearRect(0, 0, elem.width, elem.height);
context.beginPath();
context.strokeStyle = 'red';
context.lineWidth = 10;
context.moveTo(thex,they);
context.lineTo(thex,they);
context.stroke();
//xfrom=thex;
//yfrom=ychange(they);
prevx=thex;
prevy=they;
if (eval(1 + which) > eval(coords.length)) {
//document.title='p0';
coords.push("" + thex + "," + they);
} else {
//document.title='u0';
coords[which]="" + thex + "," + they;
}

} else {
//context.clearRect(0, 0, elem.width, elem.height);
document.getElementById('coords').value+=delim + thex + "," + they;
context.beginPath();
context.strokeStyle = 'blue';
context.lineWidth = 3;
context.moveTo(prevx,prevy);
context.lineTo(thex,they);
context.stroke();
//xto=thex;
//yto=ychange(they);
//document.getElementById('area').value=retareaform();
//alert(prevx + "," + prevy + " ... " + thex + "," + they);
if (eval(1 + which) > eval(coords.length)) {
coords.push("" + thex + "," + they);
//document.title+='p' + which + "[" + eval(which) + "]=" + coords[eval(0 + which)];
} else {
//document.title='u' + which;
coords[which]="" + thex + "," + they;
}
prevx=thex;
prevy=they;
if (eval(ashape) >= iais) {
//alert(8);
endp=coords[0].split(",");
distaway=(eval(thex) - eval(endp[0])) * (eval(thex) - eval(endp[0])) + (eval(they) - eval(endp[1])) * (eval(they) - eval(endp[1]));
if (eval(distaway) < 15.0) {
which++;
thex=eval(endp[0]);
they=eval(endp[1]);
if (eval(1 + which) > eval(coords.length)) {
//document.title+='p' + which;
coords.push("" + thex + "," + they);
} else {
//document.title+='u' + which;
coords[which]="" + thex + "," + they;
}
context.lineTo(thex,they);
context.stroke();
areais=calculatearea(eval(1 + which));
document.getElementById('area').value=areais;
document.getElementById('ourarea').value=ourareawas[ashape];
document.getElementById('difference').value=eval(eval(areais) - eval(ourareawas[ashape]));
score-=Math.abs(eval(document.getElementById('difference').value));
goes++;
document.getElementById('score').innerHTML=score;
document.getElementById('goes').innerHTML=goes;
if (eval(score) <= 0) {
alert('You survived for ' + goes + ' goes. That last go you traced ' + document.getElementById('area').value + ' compared to ' + document.getElementById('ourarea').value + ' (you losing ' + document.getElementById('difference').value + ' points).');
location.href='./geometry_tracing.html';
}
}
} else if (eval(which) == eval(ashape) && eval(ashape) > 1) {
context.moveTo(prevx,prevy);
endp=coords[0].split(",");
thex=eval(endp[0]);
they=eval(endp[1]);
document.getElementById('coords').value+=delim + thex + "," + they;
which++;
if (eval(1 + which) > eval(coords.length)) {
document.title+='p' + which;
coords.push("" + thex + "," + they);
} else {
document.title+='u' + which;
coords[which]="" + thex + "," + they;
}
context.lineTo(thex,they);
context.stroke();
areais=calculatearea(eval(1 + ashape));
document.getElementById('area').value=areais;
document.getElementById('ourarea').value=ourareawas[ashape];
document.getElementById('difference').value=eval(eval(areais) - eval(ourareawas[ashape]));
score-=Math.abs(eval(document.getElementById('difference').value));
goes++;
document.getElementById('score').innerHTML=score;
document.getElementById('goes').innerHTML=goes;
if (eval(score) <= 0) {
alert('You survived for ' + goes + ' goes. That last go you traced ' + document.getElementById('area').value + ' compared to ' + document.getElementById('ourarea').value + ' (you losing ' + document.getElementById('difference').value + ' points).');
location.href='./geometry_tracing.html';
}
} else if (eval(ashape) <= 1 && eval(which) > 3) {
endp=coords[0].split(",");
distaway=(eval(thex) - eval(endp[0])) * (eval(thex) - eval(endp[0])) + (eval(they) - eval(endp[1])) * (eval(they) - eval(endp[1]));
if (eval(distaway) < 15.0) {
which++;
thex=eval(endp[0]);
they=eval(endp[1]);
if (eval(1 + which) > eval(coords.length)) {
//document.title+='p' + which;
coords.push("" + thex + "," + they);
} else {
//document.title+='u' + which;
coords[which]="" + thex + "," + they;
}
context.lineTo(thex,they);
context.stroke();
areais=calculatearea(eval(1 + which));
document.getElementById('area').value=areais;
document.getElementById('ourarea').value=ourareawas[ashape];
document.getElementById('difference').value=eval(eval(areais) - eval(ourareawas[ashape]));
score-=Math.abs(eval(document.getElementById('difference').value));
goes++;
document.getElementById('score').innerHTML=score;
document.getElementById('goes').innerHTML=goes;
if (eval(score) <= 0) {
alert('You survived for ' + goes + ' goes. That last go you traced ' + document.getElementById('area').value + ' compared to ' + document.getElementById('ourarea').value + ' (you losing ' + document.getElementById('difference').value + ' points).');
location.href='./geometry_tracing.html';
}
}
}
}
}


function calculatearea(wh) {
var iendp, jendp, j, i;
areais = 0.0;
for (i=0; i<Math.abs(wh); i++) {
iendp=coords[i].split(",");
j = eval(eval((1 + i) % Math.abs(wh)));
//document.title+=j;
jendp=coords[j].split(",");
areais += iendp[0] * jendp[1];
areais -= jendp[0] * iendp[1];
//if (eval(wh) < 0) alert(areais);
}

areais = eval(Math.abs(areais) / 2.0);
if (eval(wh) >= 0) setTimeout(drawashape,2000);
return areais;
}

function ychange(ay) {
return eval(-ay + 1000.0);
}

function antiychange(ay) {
return eval(-(ay - 1000.0));
}

function delayit() {
if (delaythis) {
for (var i=0; i<image_array.length; i++) {
if (image_array[i].indexOf('data:') == 0) {
if (dw != 400 && dh != 400 && elem) {
elem.width=eval('' + dw); // + 'px';
elem.height=eval('' + dh); // + 'px';
elem.style.width='' + dw + 'px';
elem.style.height='' + dh + 'px';
return;
} else if (dw != 400 && elem) {
elem.width=eval('' + dw); // + 'px';
elem.style.width='' + dw + 'px';
return;
} else if (dh != 400 && elem) {
//if (document.getElementById('mycanvas').height) alert(2 + ' ... ' + dw + ' ... ' + dh);
elem.height=eval('' + dh); // + 'px';
//if (document.getElementById('mycanvas').width) document.getElementById('mycanvas').width='' + dh + 'px';
elem.style.height='' + dh + 'px';
//if (document.getElementById('mycanvas')) document.getElementById('mycanvas').style.width='' + dh + 'px';
//alert(22);
return;
}
}
}
}
}

window.onload = (function(){
checkinget();
score=location.search.split('score=')[1] ? location.search.split('score=')[1].split('&')[0] : score;
goes=location.search.split('goes=')[1] ? location.search.split('goes=')[1].split('&')[0] : goes;

document.getElementById('score').innerHTML=score;
document.getElementById('goes').innerHTML=goes;

if (document.body.innerHTML.indexOf("<im" + "g ") == -1) {
for (var i=0; i<image_array.length; i++) {
if (image_array[i].indexOf('data:') == 0) {
delaythis=true;
if (1 == 1) {
imageo.push(new Image());
imageo[eval(-1 + imageo.length)].onload = function () {
iw=eval(('' + this.width).replace('px',''));
ih=eval(('' + this.height).replace('px',''));
if (eval((20 + eval(('' + this.width).replace('px','')))) > dw && eval((20 + eval(('' + this.height).replace('px','')))) > dh) {
dw=eval((40 + eval(('' + this.width).replace('px',''))));
dh=eval((40 + eval(('' + this.height).replace('px',''))));
//if (document.getElementById('mycanvas').width) document.getElementById('mycanvas').width=eval((40 + ('' + this.width).replace('px','')));
//if (document.getElementById('mycanvas').height) document.getElementById('mycanvas').height=eval((40 + ('' + this.height).replace('px','')));
} else if (eval((20 + eval(('' + this.width).replace('px','')))) > dw) {
dw=eval((40 + eval(('' + this.width).replace('px',''))));
//if (document.getElementById('mycanvas').width) document.getElementById('mycanvas').width=eval((40 + ('' + this.width).replace('px','')));
} else if (eval((20 + eval(('' + this.height).replace('px','')))) > dh) {
dh=eval((40 + eval(('' + this.height).replace('px',''))));
//if (document.getElementById('mycanvas').height) document.getElementById('mycanvas').height=eval((40 + ('' + this.height).replace('px','')));
}
if (iw == 0) {
iw=-1;
ih=-1;
}
if (ih == 0) {
iw=-1;
ih=-1;
}
};
imageo[eval(-1 + imageo.length)].src=image_array[i].replace(/\#/g,"%23");
//alert(54);
document.body.innerHTML+='<im' + 'g id="i' + i + '" style="display:none;" src="' + "" + '"></img>';
//alert(542);
document.getElementById('i' + i).src=image_array[i].replace(/\#/g,"%23");
//alert(543);
document.title=image_array[i];
//alert(image_array[i]);
}
} else {
document.body.innerHTML+='<im' + 'g id="i' + i + '" style="display:none;" src="' + image_array[i] + '"></img>';
}
}
}

ie = (function(){ // thanks to http://stackoverflow.com/questions/5574842/best-way-to-check-for-ie-less-than-9-in-javascript-without-library

var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');

while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);

return v > 4 ? v : undef;

}());

if (ie < 9) {
elem=document.getElementById('mydiv');
elem.attachEvent('onclick', function(event) {
if (event.clientX || event.clientY) {
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
} else {
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
}
if (eval(which) <= 0) {
//document.getElementById('xfrom').value=xfrom;
//document.getElementById('yfrom').value=ychange(yfrom);
xfrom=x;
yfrom=ychange(y);
which=0;
} else {
//document.getElementById('xto').value=xto;
//document.getElementById('yto').value=ychange(yto);
xto=x;
yto=ychange(y);
//document.getElementById('area').value=retarea();
}
which++; //=eval(1 - which);
});
} else {
//alert(981);
elem=document.getElementById('mycanvas');
//alert(982 + elem.id);
context = elem.getContext("2d");
//context.drawImage(img,0,0);
//alert(983);
elemLeft = elem.offsetLeft;
//alert(984);
elemTop = elem.offsetTop;
//alert(985 + " " + elemTop);
if (ashape >= 0) drawashape();
elem.addEventListener('mousedown', function(event) {
//alert(wsize[0] + " ... - ... " + window.width);
if (event.clientX || event.clientY) {
//drawaline(event.clientX, event.clientY);
x = event.clientX - elemLeft;
y = event.clientY - elemTop;
} else {
//drawaline(event.pageX, event.pageY);
x = event.pageX - elemLeft;
y = event.pageY - elemTop;
}
if (eval(which) <= 0) {
drawaline(x, y);
//document.getElementById('xfrom').value=x;
//document.getElementById('yfrom').value=ychange(y);
xfrom=x;
yfrom=ychange(y);
which=0;
} else {
drawaline(x, y);
//document.getElementById('xto').value=x;
//document.getElementById('yto').value=ychange(y);
xto=x;
yto=ychange(y);
//document.getElementById('area').value=retarea();
}
which++; //=eval(1 - which);
}, false);
//alert(986);
}


}());

</script>
</body>
</html>