Huge changes; started deprecation of PHP's displayMap()

New JS function 'mapAsHTML(mapAsObject)'
getScores() will now return solutions if the map has expired.
Homepage now uses mapAsHTML.
Removed some padding on scoreboard.
scoresFormatPage() supports solutions if available. (This can be row-specific)
And tons of CSS - deprecating old CSS.

2 files changed, 247 insertions, 56 deletions

diff --git a/js/mapspecs.js b/js/mapspecs.js
index 5c4141d..4adc3d1 100644
--- a/js/mapspecs.js
+++ b/js/mapspecs.js
@@ -19,6 +19,9 @@ else if (document.attachEvent) { // IE 8-
 	window.attachEvent("onload", ready);

 }

 

+var wallColor = false;

+var wallEmblem = false;

+

 var isChallenge = false;

 var isTutorial = false;

 

@@ -100,17 +103,12 @@ function grid_click(obj) {
 	if (obj.cv) {

 		//Removing a wall

 		obj.cv = false;

-		

-		//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.

+		//Remove Customized Background Color & Image

 		obj.style.backgroundColor = '';

 		obj.style.backgroundImage = '';

-		obj.removeAttribute("class");

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

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

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

 		

 		blocks[mapid]++;

 		//Remove wall

@@ -123,16 +121,34 @@ function grid_click(obj) {
 		}

 		obj.cv = true;

 		

-		childdiv.removeAttribute("class");

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

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

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

-		else 

-			obj.style.backgroundColor = playerWallColor;

+		//Color goes on the bottom, Parent.

+		//Then the chosen emblem in the Parent.

+		// Then the emblem and color are smoothed with the faceted tile on top.

+		

+		//childdiv.removeAttribute("class");

+		childdiv.setAttribute("class", "child w");

+		

+		if (wallColor == false) {

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

+				wallColor = '#666666';

+				playerWallColor = '#666666';

+			} else {

+				wallColor = playerWallColor;

+			}

+		}

+		if (wallEmblem == false) {

+			if (typeof playerWallEmblem !== 'undefined' && playerWallEmblem !== '') {

+				wallEmblem = playerWallEmblem;

+			} 

+		}

+		console.log('using wallcolors:', wallColor, wallEmblem);

 		

-		if (typeof playerWallEmblem !== 'undefined' && playerWallEmblem !== '')

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

+		obj.style.backgroundColor = wallColor;

 

+		if (wallEmblem !== false) {

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

+		}

+		

 		//Add Wall

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

 		blocks[mapid]--;

@@ -159,6 +175,7 @@ function updateDsp(mapid, element, data) {
 

 function getmapdata(mapid) {

 

+	//console.log('getting data for mapID', mapid);

 	if (typeof(mapdata[mapid]) != 'object')

 		mapdata[mapid] = decryptJSON(jsonmapdata[mapid]);

 

@@ -220,13 +237,12 @@ function clearwalls(mapid) {
 			

 			//Reset childdiv to it's default.

 			childdiv.removeAttribute("class");

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

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

 

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

 			obj.style.backgroundColor = '';

 			obj.style.backgroundImage = '';

-			obj.removeAttribute("class");

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

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

 		}

 	}

 	solution[mapid] = undefined;

@@ -387,20 +403,6 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 	}

 	handle = document.getElementById(eid);

 	

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

-	origclass = handle.className;

-	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 = mapdata[mapid].pathColor[pathNumber];

-	handle.classOrigName = origclass;

-	

-	

 	//Animate the first square in a path.

 	if (count[mapid] == 0 && !(c > 0)) {

 		count[mapid]--;

@@ -410,7 +412,6 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 			c = '2';

 	}

 	

-	

 	switch(c) {

 		//The path is moving to a new position

 		case '1': 		//1 - Up

@@ -423,18 +424,9 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 		

 			//Notify users on score levels;

 			switch(count[mapid]) {

-				//case mapjson[mapid].best:

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

-				//break;

-				case 500:

-				case 400:

-				//case 350:

-				case 300:

-				//case 250:

-				case 200:

-				//case 150:

-				case 100:

-					//case 50:

+				case 100: case 200: case 300: case 400:

+				case 500: case 600: case 700: case 800:

+				case 900: case 1000: 

 					if (checkSound(mapid)) {

 						soundManager.setVolume('charm', 40);

 						soundManager.setPan('charm', 75)

@@ -445,21 +437,24 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 					break;

 			}

 		

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

-			if (childdiv.className.indexOf('grid_td_walls') < 0) {

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

+			var childID = 'child_'+handle.id;

+			childdiv = document.getElementById(childID);

+			if (childdiv.className.indexOf('w') < 0) {

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

 			

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

-			

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

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

+

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

+				string += "document.getElementById('"+'child_'+eid+"').setAttribute('class', 'child');";

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

+					string = "if (document.getElementById('"+childID+"').className.indexOf('w') < 0) ";

+					string += "document.getElementById('"+eid+"').style.backgroundColor = '';";

+					setTimeout(string, 865);

 				}

 			}

 

@@ -850,6 +845,185 @@ function setMute(value)
 	}

 }

 

+//Shows a solution temporarly

+function useSolution(mapid, inputSolution, moves, tempWallColor, tempWallEmblem) {

+	solution[mapid] = inputSolution;

+	var animateA = "showTempSolution(\""+mapid+"\", \""+inputSolution+"\", \""+moves+"\", \""+tempWallColor+"\", \""+tempWallEmblem+"\");";

+	var animateB = "showTempSolution(\""+mapid+"\", \""+inputSolution+"\", \""+moves+"\", false, false);";

+	setTimeout(animateA, 50);

+	setTimeout(animateB, 100);

+	setTimeout(animateA, 150);

+	setTimeout(animateB, 200);

+	setTimeout(animateA, 250);

+	setTimeout(animateB, 450);

+}

+//TODO

+function showTempSolution(mapid, tempSolution, moves, tempWallColor, tempWallEmblem) {

+

+	//console.log('showTempSolution', mapid, solution, moves, tempWallColor, tempWallEmblem);

+	var savedSolution = '';

+	if (typeof solution[mapid] !== 'undefined') {

+		savedSolution = solution[mapid];

+	}

+	wallEmblem = tempWallEmblem;

+	wallColor = tempWallColor;

+	

+	position = tempSolution.split('.');

+	

+	clearwalls(mapid);

+	for(var i in position) {

+		if (document.getElementById(mapid+','+position[i]) != undefined) {

+			object = document.getElementById(mapid+','+position[i]);

+			grid_click(object);

+			

+		}

+	}

+	if (moves && mapid) {

+		updateDsp(mapid, 'dspCount', moves+ " moves");

+	}

+	

+	mapdata[mapid].savedSolution = savedSolution;

+}

+

+function restoreSolution(mapid) {

+	showTempSolution(mapid, mapdata[mapid].savedSolution, 0, false, false);

+}

+

+

+//NEW MAP INSERTING METHOD

+//Map as object.

+function mapAsHTML(map, targetWidth, demo) {

+	

+	console.log("loading MapHTML for ", map);

+	map.mapid = map.ID;

+	console.log("MapID:", map.mapid);

+	console.log("MapObj", map);

+	mapdata[map.ID] = map;

+	

+	//595

+	if (!targetWidth) targetWidth = (map.width * 35);

+	var scale = map.width / targetWidth;

+	//alert(scale);

+	

+	var width = parseInt(map.width / scale);

+	var height = parseInt(map.height / scale);

+	var tileWidth = parseInt(width / map.width);

+	

+	width = tileWidth * map.width;

+	

+	var mapgrid = '';

+	

+	mapgrid += '<div style="clear:both;"></div><div class="map playable" style="width:'+width+'px; height:'+height+'px">';

+	for (var y in map.tiles) {

+		for (var x in map.tiles[y]) {

+			var type = map.tiles[y][x][0];

+			var value = map.tiles[y][x][1];

+			if (!value) value = '';

+			

+			//TODO: If we want to change this line to something that's not retarded _

+				// we'll need to do a TON of other work... See Blossom "Implement mapclass"

+			var oldy = (y*1)+1;

+			var idHandle = map.ID+','+oldy+','+x;

+			

+			// GOAL WOULD BE THIS LINE INSTEAD.. As it's not retarded.

+			//var idHandle = map.ID+','+x+','+y;

+			

+			//oldy is used for Position too... for now

+			if (type == 'o') {

+				mapgrid += "<div style='float:left; width:"+tileWidth+"px; height:"+tileWidth+"px; ' class='mapcell "+type+value+"' title='Position: "+x+","+oldy+"' id='"+idHandle+"' onClick='grid_click(this)' >";

+				mapgrid += "<div id='child_"+idHandle+"' class='child'></div></div>";

+			} else {

+				mapgrid += "<div style='float:left; width:"+tileWidth+"px; height:"+tileWidth+"px; ' class='mapcell "+type+value+"' title='Position: "+x+","+oldy+"' id='"+idHandle+"' >";

+				mapgrid += "<div id='child_"+idHandle+"' class='child'></div></div>";

+			}

+		}

+	}

+	mapgrid += '</div>';

+	

+	var r = '';

+	

+	//TODO: Track down where that 1 pixel is comingfrom, width-1 is a hack.

+	r += "<div id='"+map.ID+",outer' class='grid_outer' style='width:"+(width)+"px;height:"+(height+60)+"px;'>";

+	

+	r += "	<div class='grid_dsp_left dsp_60'>";

+	r += "		<div id='"+map.ID+",dspID' title='MapID: "+map.ID+"'>";

+	r += "		MapID: "+map.ID;

+	r += "		</div>";

+	r += "	</div>";

+	

+	r += "		<div id='"+map.ID+",dsptr' class='grid_dsp_right dsp_33'>";

+	r += "		<span id='"+map.ID+",dspWalls' class='grid_dsp_data'> ";

+	r += "		"+map.walls+" walls";

+	r += "		</span>";

+	r += "		<span>";

+	r += "		( <a href='javascript:resetwalls("+map.ID+")'>Reset</a> )";

+	r += "		</span>";

+	r += "	</div>";

+	

+	r += mapgrid;

+	

+	

+	r += "	<div id='"+map.ID+",dspbl' class='grid_dsp_left dsp_49'> ";

+	r += "	<input id='"+map.ID+",btn' type='button' onclick='doSend("+map.ID+")' value='Go!' />";

+	r += "	Speed:";

+	r += getSpeedOptions(map.ID);

+	r += "	</div>";

+	

+	// stopped here, mute button next

+

+	r += "	<div class='grid_dsp_mid dsp_16'>";

+	r += getMuteOption(map.ID);

+	r += "	</div>";

+	

+	r += "	<div id='"+map.ID+",dspbr' class='grid_dsp_right dsp_33'> ";

+	r += "		<div id='"+map.ID+",dspCount' class='grid_dsp_data'> ";

+	r += "		0 moves";

+	r += "		</div>";

+	r += "	</div>";

+	r += "</div>";

+	

+	return r;

+}

+

+function getMuteOption(mapID) {

+	var selectedSpeed = 2;

+	var r = '';

+	var checked = '';

+	if (getCookie('pref_mute') == 'true') {

+		checked = "checked='checked' ";

+	}

+	r += "<label><input onclick='setMute(this.checked)' type='checkbox' id='"+mapID+",mute' class='checkbox_mute' "+checked+"/>Mute</label>";

+	return r;

+}

+

+function getSpeedOptions(mapID) {

+	var listObj = new Object;

+	var selectedSpeed = 2;

+	if (getCookie('pref_speed')) {

+		selectedSpeed = getCookie('pref_speed');

+	}

+	listObj[1] = 'Slow';

+	listObj[2] = 'Med';

+	listObj[3] = 'Fast';

+	listObj[4] = 'Ultra';

+	var r = '';

+	r += "	<select onChange='savePref(\"speed\", this.value)' id='"+mapID+",speed'>";

+	for (var i in listObj) {

+		r += "<option value='"+i+"'";

+		if (i == selectedSpeed) r += "selected='selected'";

+		r += ">"+listObj[i]+"</option>";

+	}

+	r += "	</select>";

+	return r;

+}

+//END METHOD

+

+

+

+

+

+

+

 

 function savePref(pref, value) {

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

diff --git a/js/scores.js b/js/scores.js
index 840ba33..c327fe2 100644
--- a/js/scores.js
+++ b/js/scores.js
@@ -142,7 +142,24 @@ function scoresFormatPage(JO) {
 		var scoredTimeFormat = (false ? "mmm d, h:MM:ss TT" : "h:MM:ss TT");

 		var scoredTimeStr = scoredLocalTime.format(scoredTimeFormat);

 		

-		p = p+ "<tr style='"+styleClass+" background-color: "+u.background+"; color:"+u.displayColor+";' title='Scored "+scoredTimeStr+"'>";

+		var rowclass = 'scoreRow'+((i % 2)+1);

+		

+		if (u.isUser) {

+			rowclass = 'scoreRowSelf';

+		}

+		

+		if (u.solution) {

+			rowclass += ' scoreRowSolutionAvailable';

+			p += "<tr class='"+rowclass+"' ";

+			p += "onmouseover='showTempSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\")'";

+			p += "onclick='useSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\")'";

+			p += "onmouseout='restoreSolution(\""+JO.mapid+"\")' ";

+			p += " style='"+styleClass+" color:"+u.displayColor+";' title='Scored "+scoredTimeStr+"'>";

+		} else {

+			p = p+ "<tr class='"+rowclass+"' style='"+styleClass+" color:"+u.displayColor+";' title='Scored "+scoredTimeStr+"'>";

+		}

+		// background-color: "+u.background+";

+		

 		p = p+ "<td class='scoreMedal'>";

 		

 		if (u.medal == 'gold') {

@@ -225,7 +242,7 @@ function scoresFormatPageNavi(JO) {
 var membersPages = new Object;

 var membersCurrentPage = 1;

 var membersPageDivide = 50;

-var membersOrderBy = 'dateJoined';

+var membersOrderBy = 'totalMovesThisWeek';

 var membersOrder = 'DESC';

 

 function membersRequestPage(page) {