Multipath support for UI

1 files changed, 148 insertions, 56 deletions

diff --git a/js/mapspecs.js b/js/mapspecs.js
index 4d4acbe..cbb642c 100644
--- a/js/mapspecs.js
+++ b/js/mapspecs.js
@@ -268,7 +268,7 @@ function request_path_done() {
 	mixpanel.track('click go', {

 		'speed': speed,

 		'mute': mute,

-		'mapid': JO.mapid,

+		'mapid': mapid,

 		'type': mapType,

 		'response time': responseTime

 	});

@@ -284,9 +284,16 @@ function request_path_done() {
 	var disptext = "Record: "+JO.best+" by "+JO.bestby;

 	updateDsp(JO.mapid, 'dspID', disptext);

 	

-	animatePath(JO.path1.path, JO.mapid, JO.path1.start);

-

-	animatePath(JO.path2.path, JO.mapid, JO.path2.start);

+	mapdata[mapid].moveCount = new Object;

+	mapdata[mapid].restoreTiles = new Array();

+	mapdata[mapid].pathColor = new Object;

+	

+	for(var i in JO.path) {

+		mapdata[mapid].moveCount[i] = 0;

+		mapdata[mapid].pathColor[i] = '#ffffff';

+		animatePath(JO.path[i].path, mapid, JO.path[i].start, i);

+	}

+	mapdata[JO.mapid].pathsPending = i;

 }

 

 function decryptJSON(text) {

@@ -300,7 +307,7 @@ function decryptJSON(text) {
 }

 

 

-function animatePath(path, mapid, start) {

+function animatePath(path, mapid, start, pathNumber) {

 	tmp = start.split(',');

 	y = tmp[0];

 	x = tmp[1];

@@ -310,12 +317,14 @@ function animatePath(path, mapid, start) {
 	t = '';

 	//count[mapid] = 0;

 	document.getElementById(mapid+',btn').disabled = true;

-	doanimate(x, y, p, t, mapid);

+	doanimate(x, y, p, t, mapid, pathNumber);

 	//setTimeout("doanimate("+x+","+y+",'"+p+"',"+t+")",500);

 }

 

 function animatePathDone(mapid) {

-	// console.log('Animate Path Done', mapid);

+

+	//console.log('Animate Path Done', mapid);

+	

 	scoresRequestPage(mapid, currentPage[mapid]);

 	document.getElementById(mapid+',btn').disabled = false;

 	if (isChallenge == true) {

@@ -334,8 +343,7 @@ function checkSound(mapid) {
 }

 

 var snake = new Array();

-var snakeeffected = new Array();

-function doanimate(x, y, p, c, mapid) {

+function doanimate(x, y, p, c, mapid, pathNumber) {

 

 	//x, y  position

 	//p  path string being trunicated.

@@ -349,19 +357,22 @@ function doanimate(x, y, p, c, mapid) {
 	}

 	if (snake[mapid] == undefined) {

 		snake[mapid] = new Array();

-		snake[mapid]['color'] = '#ccc';

+		mapdata[mapid].pathColor[pathNumber] = '#ccc';

 	}

 	if (count[mapid] == 0) {

 		if (t == 'a') {

-			snake[mapid]['color'] = '#F777FF';

+			mapdata[mapid].pathColor[pathNumber] = '#F777FF';

 		}

 		if (t == 'f') {

-			snake[mapid]['color'] = '#ccc';

+			mapdata[mapid].pathColor[pathNumber] = '#ccc';

 		}

 	}

 	

 	//Display movecount

-	updateDsp(mapid, 'dspCount', count[mapid]+ " moves");

+	if (mapdata[mapid].moveCount[1] > 0) {

+		updateDsp(mapid, 'dspCount', mapdata[mapid].moveCount[0] + ' + ' + mapdata[mapid].moveCount[1] + ' = ' + count[mapid] + " moves");

+	} else 

+		updateDsp(mapid, 'dspCount', count[mapid]+ " moves");

 	//document.getElementById(mapid+',dspCount').innerHTML = count[mapid]+ " moves";

 	

 	//Get a handle on the element.

@@ -376,15 +387,15 @@ function doanimate(x, y, p, c, mapid) {
 	

 	//Maintain our original classname, no matter the cost!

 	origclass = handle.className;

-	if (	origclass == 'grid_td_path1' || 

-			origclass == 'grid_td_path2' || 

-			origclass == 'grid_td_path3' || 

-			origclass == 'grid_td_path4' ) {

+	if (	origclass == 'grid_td_path'+pathNumber+'-1' || 

+			origclass == 'grid_td_path'+pathNumber+'-2' || 

+			origclass == 'grid_td_path'+pathNumber+'-3' || 

+			origclass == 'grid_td_path'+pathNumber+'-4' ) {

 	// if (origclass == 'grid_td_animate' || origclass == 'grid_td_animate_pre' ) {

 		origclass = handle.classOrigName;

 		//setTimeout(handle.setAttribute('class', origclass), 850);

 	}

-	//handle.style.backgroundColor = snake[mapid]['color'];

+	//handle.style.backgroundColor = mapdata[mapid].pathColor[pathNumber];

 	handle.classOrigName = origclass;

 	

 	

@@ -395,16 +406,19 @@ function doanimate(x, y, p, c, mapid) {
 			if (count[mapid] !== 0)

 				break;

 			count[mapid]--;

+			mapdata[mapid].moveCount[pathNumber]--;

+			//break;

 		case '1': 		//1 - Up

 		case '2':		//2 - Right

 		case '3': 		//3 - Down

 		case '4': 		//4 - Left

 			count[mapid]++;

+			mapdata[mapid].moveCount[pathNumber]++;

 		

 		//Starting;

 		switch(count[mapid]) {

 			case mapjson[mapid].best:

-				flashelement(mapid+',dspCount', 4, "#FF0000");

+				//flashelement(mapid+',dspCount', 4, "#FF0000");

 			break;

 			case 500:

 			case 400:

@@ -425,47 +439,68 @@ function doanimate(x, y, p, c, mapid) {
 		

 		childdiv = document.getElementById('child_'+handle.id);

 		if (childdiv.className != 'grid_td_walls') {

-			childdiv.setAttribute('class', 'grid_td_path'+c);

-

-			handle.style.backgroundColor = snake[mapid]['color'];

-			var origColor = handle.style.backgroundColor;

+			childdiv.setAttribute('class', 'grid_td_path'+pathNumber+'-'+c);

+			

+			var origColor = rgbStringToHex(handle.style.backgroundColor);

+			console.log("OriginalColor", origColor);

+			

+			handle.style.backgroundColor = mapdata[mapid].pathColor[pathNumber];

 			

-			string = "if (document.getElementById('"+'child_'+eid+"').className == 'grid_td_path"+c+"')";

+			

+			string = "if (document.getElementById('"+'child_'+eid+"').className == 'grid_td_path"+pathNumber+'-'+c+"')";

 			string += "document.getElementById('"+'child_'+eid+"').removeAttribute('class');";

 			setTimeout(string, 855);

 			

+			//Reset our color back to the way it was.

+			//setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '"+origColor+"';", 865);

 			//Maintain disabled appearnce of checkpoints

 			if (handle.pressed == true) {

-				setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865);

+				setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '"+origColor+"';", 865);

 			} else {

 				setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '';", 865);

 			}

 		}

 

-		

 		break;

 		//Teleports

-		case 't':

-		//case 'u':

-		case 'm':

-		case 'g':

-		case 'i':

-		case 'k':

+		case 't': case 'u': case 'm': case 'g': case 'i': case 'k':

 		

 		case 'q': //Teleport out;

-		case 'b': //Checkpoints

-		case 'c':

-		case 'd':

-		case 'e':

+		//Checkpoints

 		

 		case 'r':

+			if (handle.pressed == true)

+				break;

+		case 'b': case 'c': case 'd': case 'e':

+		

+		

 			//handle.setAttribute('class', 'grid_td_pressed');

 			//handle.classOrigName = 'grid_td_pressed';

-			snakeeffected.push("document.getElementById('"+eid+"').style.backgroundColor = '';");

-			snakeeffected.push("document.getElementById('"+eid+"').pressed = false;");

-			handle.style.backgroundColor = '#dddddd';

-			setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865);

+			if (handle.pressed == true) {

+				handle.style.backgroundColor = '#dddddd';

+				setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865);

+				//alert("Pressed Point Solid Grayed is " + c);

+				break;

+			}

+

+			var currentColor = rgbStringToHex(handle.style.backgroundColor);

+			if (currentColor == '')

+				break;

+

+			var dulled = '#'+dullColor(currentColor, .6);

+			

+			console.log('bgcolor', dulled, currentColor);

+			//handle.style.backgroundColor = '#dddddd';

+			

+			handle.style.backgroundColor = dulled;

+			setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '"+dulled+"';", 865);

+			

 			handle.pressed = true;

+			mapdata[mapid].restoreTiles.push("document.getElementById('"+eid+"').style.backgroundColor = '';");

+			mapdata[mapid].restoreTiles.push("document.getElementById('"+eid+"').pressed = false;");

+			

+			//alert(mapdata[mapid].pathColor[pathNumber]);

+			

 		break;

 	}

 	

@@ -483,6 +518,13 @@ function doanimate(x, y, p, c, mapid) {
 	//Speaking of the next tile - does it exist?

 	//End of the line?

 	if (t == '') {

+	

+		mapdata[mapid].pathsPending--;

+		//console.log('path pending', mapdata[mapid].pathsPending);

+		if (mapdata[mapid].pathsPending >= 0)

+			return;

+			

+		//console.log('path pending complete', mapdata[mapid].pathsPending);

 

 		//Did we beat or tie any records?

 		//Saw someone do this, thought it was clever.

@@ -524,14 +566,14 @@ function doanimate(x, y, p, c, mapid) {
 	

 		//This is the end, lets reset stuff to defaults.

 		count[mapid] = 0;

-		snake[mapid]['color'] = '#ffffff';

+		mapdata[mapid].pathColor[pathNumber] = '#ffffff';

 		//Bring the color back to our checkpoints/teleports.

-		for(var i in snakeeffected) {

-			//eval(snakeeffected[i]);

-			setTimeout((snakeeffected[i]), 2000);

+		for(var i in mapdata[mapid].restoreTiles) {

+			//eval(mapdata[mapid].restoreTiles[i]);

+			setTimeout((mapdata[mapid].restoreTiles[i]), 2000);

 		}

 		//Clear

-		snakeeffected = new Array();

+		mapdata[mapid].restoreTiles = new Array();

 		//We're done,

 		animatePathDone(mapid);

 		return;

@@ -575,29 +617,29 @@ function doanimate(x, y, p, c, mapid) {
 		//Checkpoint targets:

 		case 'a': 

 			// rs = rs * 9; 

-			snake[mapid]['color'] = '#F777FF';

+			mapdata[mapid].pathColor[pathNumber] = '#F777FF';

 		break;

 		case 'b': 

 			rs = rs + 410; 

-			snake[mapid]['color'] = '#FFFF11';

+			mapdata[mapid].pathColor[pathNumber] = '#FFFF11';

 			//handle.style.backgroundColor = "#000000";

 		break;

 		case 'c': 

 			rs = rs + 410; 

-			snake[mapid]['color'] = '#FF4466';

+			mapdata[mapid].pathColor[pathNumber] = '#FF4466';

 		break; 

 		case 'd': 

 			rs = rs + 410; 

-			snake[mapid]['color'] = '#ff9911';

+			mapdata[mapid].pathColor[pathNumber] = '#ff9911';

 		break; 

 		case 'e': 

 			rs = rs + 410; 

-			snake[mapid]['color'] = '#00FFFF';

+			mapdata[mapid].pathColor[pathNumber] = '#00FFFF';

 		break; 

 		//Finish target

 		case 'f': 

 			rs = rs + 410;  

-			snake[mapid]['color'] = '#ccc';

+			mapdata[mapid].pathColor[pathNumber] = '#ccc';

 		break; 

 		

 		//Hey, we've ran into a teleport.

@@ -622,21 +664,22 @@ function doanimate(x, y, p, c, mapid) {
 			document.getElementById(eid).style.backgroundColor='#CCCCCC';

 			document.getElementById(tpEid).style.backgroundColor='#CCCCCC';

 			

-			flashelement(tpEid, 8, snake[mapid]['color']);

+			flashelement(tpEid, 8, mapdata[mapid].pathColor[pathNumber]);

 

 			//The path once teleported - and an r to indicate to gray the teleport-out too.

 			p = 'q'+tmp[2];

 			//Slow down

 			rs = rs + 1200;  

-			setTimeout("doanimate("+x+","+y+",'"+p+"','"+t+"',"+mapid+")",rs);

-			return;

 		break; 

 	}

 	//Remove move from p

 	p = p.substring(1);

 	//rs = (10 * p.length) + 40;

+	// if (mapdata[mapid].moveCount[1] < mapdata[mapid].moveCount[pathNumber] - 2

+		// || mapdata[mapid].moveCount[0] < mapdata[mapid].moveCount[pathNumber] - 2)

+		// rs = rs + 100;

 

-	setTimeout("doanimate("+x+","+y+",'"+p+"','"+t+"','"+mapid+"')",rs);

+	setTimeout("doanimate("+x+","+y+",'"+p+"','"+t+"','"+mapid+"','"+pathNumber+"')",rs);

 }

 

 function flashelement(eid, times, color, speed) {

@@ -673,6 +716,56 @@ function flashelement(eid, times, color, speed) {
 }

 

 

+function dullColor(colorAsHex, value) {

+	var r = hexToR(colorAsHex);

+	var g = hexToG(colorAsHex);

+	var b = hexToB(colorAsHex);

+	

+	r = r + ((221 - r) * value)

+	g = g + ((221 - g) * value)

+	b = b + ((221 - b) * value)

+	r = parseInt(r);

+	g = parseInt(g);

+	b = parseInt(b);

+	// r = r + value;

+	// g = g + value;

+	// b = b + value;

+	return rgbToHex(r, g, b);

+}

+

+//Color modifications

+// Thanks javascripter.net

+function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}

+function toHex(n) {

+ n = parseInt(n,10);

+ if (isNaN(n)) return "00";

+ n = Math.max(0,Math.min(n,255));

+ return "0123456789ABCDEF".charAt((n-n%16)/16)

+      + "0123456789ABCDEF".charAt(n%16);

+}

+function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}

+function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}

+function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}

+function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

+

+//Thanks stackExchange

+function rgbStringToHex(rgbString) {

+	if (rgbString == '')

+		return '';

+	// var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.

+

+	var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

+	// parts now should be ["rgb(0, 70, 255", "0", "70", "255"]

+

+	delete (parts[0]);

+	for (var i = 1; i <= 3; ++i) {

+		parts[i] = parseInt(parts[i]).toString(16);

+		if (parts[i].length == 1) parts[i] = '0' + parts[i];

+	} 

+	return hexString ='#'+parts.join('').toUpperCase(); // "#0070FF"

+}

+

+

 

 function savePref(pref, value) {

 	setCookie('pref_'+pref, value,31);

@@ -702,7 +795,6 @@ for (i=0;i<ARRcookies.length;i++)
 }

 

 

-

 //== Outdated functions

 var de = false;

 function displaymap(obj) {