Support for dual-layer animation & achievements.

These changes specific to mapspecs.js alone.
Changed: the speeds slightly for slow, normal, fast, ultra.
Add: support for challenges/tutorials in the request with do.php to check and add achievements.
Add: Dual layer animation creates transparency which strenthens the users view that the start & end tiles are pathable.
Add: Support for notifications.
Add: Support for JSON mapdata w/o use of a div.
Add: Support for changing wall-color and emblems.
Fix: Where starting location square was not animated.
Add: Support for checking and recieving achievements.

1 files changed, 116 insertions, 64 deletions

diff --git a/js/mapspecs.js b/js/mapspecs.js
index 5361d9d..ff86a28 100644
--- a/js/mapspecs.js
+++ b/js/mapspecs.js
@@ -20,6 +20,7 @@ else if (document.attachEvent) { // IE 8-
 }

 

 var isChallenge = false;

+var challengeID = false;

 

 var solution = new Array();

 var blocks = new Array();

@@ -27,6 +28,7 @@ var count = new Array();
 var mapdata = new Array();

 var mapjson = new Array();

 var htmlscores = '';

+var htmlnotification = '';

 var jsonmapdata = new Object;

 

 

@@ -53,6 +55,24 @@ function loadSol(sol) {
 	}

 }

 

+function showNotification(html) {

+	var div = document.createElement('div');

+	var pref = '<div class="notification" align="center">';

+	var suff = '<button onclick="this.parentNode.parentNode.removeChild(this.parentNode);">'

+	suff += 'Close</button></div>';

+	div.innerHTML = pref+html+suff;

+	document.body.appendChild(div.firstChild);

+}

+

+function changeWallColor(newColor) {

+	playerWallColor = newColor;

+	loadSol(null);

+}

+function changeWallEmblem(newEmblem) {

+	playerWallEmblem = newEmblem;

+	loadSol(null);

+}

+

 function grid_click(obj) {

 

 	//Prepare data

@@ -67,14 +87,23 @@ function grid_click(obj) {
 	}

 	

 	//Is this placing a wall, or removing one?

+	var tmp = obj.id;

+	childdiv = document.getElementById('child_'+tmp);

    if (obj.cv) {

 		//Removing a wall

       obj.cv = false;

 		

-      //obj.style.backgroundColor = '#ffffff';

-      obj.setAttribute("class", "grid_td");

-		//IE 7

+		//Reset childdiv to it's default.

+		childdiv.removeAttribute("class");

+		childdiv.setAttribute("class", "grid_inner");

+		//childdiv.style.backgroundColor = 'transparent';

+

+		//return the td obj back to it's default.

 		obj.style.backgroundColor = '';

+		obj.style.backgroundImage = '';

+		obj.removeAttribute("class");

+		obj.setAttribute("class", "grid_td");

+		

       blocks[mapid]++;

 		//Remove wall

 		solution[mapid] = solution[mapid].replace('.'+y+','+x+'.', '.');

@@ -82,14 +111,22 @@ function grid_click(obj) {
 		//Placing a wall

       if (blocks[mapid] < 1) {

 			updateDsp(mapid, 'dspWalls', "OUT!");

-			//document.getElementById(mapid+',dspWalls').innerHTML = "OUT!";

          return;

       }

       obj.cv = true;

-      //obj.style.backgroundColor = '#ff0000';

-      obj.setAttribute("class", "grid_td_walls");

-		//IE 7:

-		obj.style.backgroundColor = '#666666';

+		

+		childdiv.removeAttribute("class");

+      childdiv.setAttribute("class", "grid_td_walls");

+		if (typeof playerWallColor === 'undefined' || playerWallColor == '')

+			obj.style.backgroundColor = '#666666';

+		else 

+			obj.style.backgroundColor = playerWallColor;

+		

+		if (typeof playerWallEmblem === 'undefined') 

+			'';

+		else

+			obj.style.backgroundImage="url(images/marks/"+playerWallEmblem+")";

+

 		//Add Wall

 		solution[mapid] += y+','+x+'.';

       blocks[mapid]--;

@@ -146,7 +183,7 @@ function doSend(mapid) {
 

 	//document.getElementById('dispdo').innerHTML = "http://mazetd.4xg.net/do.php?r=getpath"+reqstr

 

-	ajax.requestFile = "do.php?r=getpath"+reqstr; //prepare strdata

+	ajax.requestFile = "do.php?challengeID="+challengeID+"&isChallenge="+isChallenge+"&r=getpath"+reqstr; //prepare strdata

 	ajax.onCompletion = request_path_done; // specify function to be executed on response

 	ajax.runAJAX();

 

@@ -188,9 +225,19 @@ function clearwalls(mapid) {
 		eid = mapid+','+tmp[0]+','+tmp[1];

 		if (document.getElementById(eid) != undefined) {

 			obj = document.getElementById(eid);

-			obj.setAttribute("class", "grid_td");

-			obj.style.backgroundColor = '';

 			obj.cv = false;

+			

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

+			

+			//Reset childdiv to it's default.

+			childdiv.removeAttribute("class");

+			childdiv.setAttribute("class", "grid_inner");

+

+			//return the td obj back to it's default.

+			obj.style.backgroundColor = '';

+			obj.style.backgroundImage = '';

+			obj.removeAttribute("class");

+			obj.setAttribute("class", "grid_td");

 		}

 	}

 	solution[mapid] = undefined;

@@ -218,37 +265,24 @@ function request_path_done() {
 	

 	mapjson[JO.mapid] = JO;

 	

-	// if (typeof(JSON) == undefined) {

-		// var JO = eval(ajax.response);

-	// } else {

-		// var JO = JSON.parse(ajax.response);

-	// }

-	if (JO.scores) {

+	if (JO.scores)

 		updateDsp(JO.mapid, 'dspScore', JO.scores);

-	}

-	

-	for(var i in JO.error) {

+

+	for(var i in JO.error)

 		console.error('\n JO error ' + JO.error[i]);

-	}

-	

-	//document.getElementById('disp').innerHTML = JO.map;

-	

+

 	if (JO.blocked) {

 		alert("The path is blocked!");

 		return;

 	}

-	//document.write(JO.map);

-	//document.getElementById('disppath').innerHTML = JO.path;

-	//document.getElementById('disptotalmoves').innerHTML = JO.moves;

+

 	var disptext = "Record: "+JO.best+" by "+JO.bestby;

-	

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

-	//document.getElementById(JO.mapid+',dspID').innerHTML = JO.best;

 	

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

 	

 	//Get score update.

-	ajax.requestFile = "do.php?r=getscores&mapid="+JO.mapid; //prepare strdata

+	ajax.requestFile = "do.php?checkachieve=true&r=getscores&mapid="+JO.mapid; //prepare strdata

    ajax.onCompletion = request_scores_done; // Specify function to be executed on response.

    ajax.runAJAX();// Do it!

 }

@@ -273,6 +307,15 @@ function animatePathDone(mapid) {
 		updateDsp(mapid, 'dspScore', htmlscores);

 		htmlscores = '';

 	}

+	if (htmlnotification) {

+		//setTimeout("showNotification('"+htmlnotification+"');", 300);

+		showNotification(htmlnotification);

+		if (checkSound(mapid)) {

+			soundManager.setVolume('achieve', 50);

+			setTimeout("soundManager.play('achieve');", 350);

+		}

+		htmlnotification = '';

+	}

 	if (isChallenge == true) {

 		challengeGo(mapid);

 	}

@@ -289,6 +332,7 @@ function request_scores_done() {
 		var JO = JSON.parse(ajax.response);

 	}

 	htmlscores = JO.scores;

+	htmlnotification = JO.notificationtext;

 }

 

 

@@ -318,7 +362,15 @@ function doanimate(x, y, p, c, mapid) {
 	}

 	if (snake[mapid] == undefined) {

 		snake[mapid] = new Array();

-		snake[mapid]['color'] = '#4444bb';

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

+	}

+	if (count[mapid] == 0) {

+		if (t == 'a') {

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

+		}

+		if (t == 'f') {

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

+		}

 	}

 	

 	//Display movecount

@@ -351,12 +403,18 @@ function doanimate(x, y, p, c, mapid) {
 	

 	//Animate.

 	switch(c) {

+		case 'f':

+		case 'a':

+			if (count[mapid] !== 0)

+				break;

+			count[mapid]--;

 		case '1': 		//1 - Up

 		case '2':		//2 - Right

 		case '3': 		//3 - Down

 		case '4': 		//4 - Left

-		count[mapid]++;

+			count[mapid]++;

 		

+		//Starting;

 		switch(count[mapid]) {

 			case mapjson[mapid].best:

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

@@ -377,30 +435,26 @@ function doanimate(x, y, p, c, mapid) {
 			flashelement(mapid+',dspCount', 4);

 			break;

 		}

-		//if (checkSound(mapid)) {

-			//soundManager.play('bling');

-			//soundManager.play('sc');

-			//soundManager.setVolume('click', 50);

-			//soundManager.play('click');

-			//soundManager.play('charm');

-			//soundManager.play('ufoblip');

-		//}

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

-		handle.className = 'grid_td_path'+c;

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

-		

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

-		string += "document.getElementById('"+eid+"').className = '"+origclass+"';";

-		setTimeout(string, 855);

-		//And incase that didn't work...

-		//setTimeout("document.getElementById('"+eid+"').className = '"+origclass+"'", 7500);

-		//setTimeout("document.getElementById('"+eid+"').setAttribute('class', '"+origclass+"')", 855);

 		

-		if (handle.pressed == true) {

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

-		} else {

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

+		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;

+			

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

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

+			setTimeout(string, 855);

+			

+			//Maintain disabled appearnce of checkpoints

+			if (handle.pressed == true) {

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

+			} else {

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

+			}

 		}

+

 		

 		break;

 		//Teleports

@@ -412,12 +466,11 @@ function doanimate(x, y, p, c, mapid) {
 		case 'k':

 		

 		case 'q': //Teleport out;

-		case 'b':

+		case 'b': //Checkpoints

 		case 'c':

 		case 'd':

 		case 'e':

 		

-		//break

 		case 'r':

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

 			//handle.classOrigName = 'grid_td_pressed';

@@ -426,7 +479,6 @@ function doanimate(x, y, p, c, mapid) {
 			handle.style.backgroundColor = '#dddddd';

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

 			handle.pressed = true;

-			

 		break;

 	}

 	

@@ -485,7 +537,7 @@ function doanimate(x, y, p, c, mapid) {
 	

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

 		count[mapid] = 0;

-		snake[mapid]['color'] = '#4444bb';

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

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

 		for(var i in snakeeffected) {

 			//eval(snakeeffected[i]);

@@ -500,25 +552,25 @@ function doanimate(x, y, p, c, mapid) {
 	

 	

 	//The next tile exists, how fast should we get there?

-	rs = 85;

+	rs = 84;

 	//How fast should we be going?

 	selectbox = document.getElementById(mapid+',speed');

 	selected = selectbox.options[selectbox.selectedIndex].value;

 	switch (selected) {

 		case '1':

-		rs =310;

+		rs =120;

 		break;

 		

 		case '2':

-		rs =85;

+		rs =84;

 		break;

 		

 		case '3':

-		rs =45;

+		rs =44;

 		break;

 		

 		case '4':

-		rs =23;

+		rs =22;

 		break;

 		

 	}

@@ -558,7 +610,7 @@ function doanimate(x, y, p, c, mapid) {
 		//Finish target

 		case 'f': 

 			rs = rs + 500;  

-			snake[mapid]['color'] = '#4444bb';

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

 		break; 

 		

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