Further AJAX work for challenges. -

 Ported PHP getChallengeDisplayString to JS.

1 files changed, 142 insertions, 19 deletions

diff --git a/pages/challengelist.php b/pages/challengelist.php
index 05a8000..df04bdd 100644
--- a/pages/challengelist.php
+++ b/pages/challengelist.php
@@ -30,12 +30,13 @@ function navShowChallengeTiers() {
 }
 
 function navShowLevels(tier) {
-	$('#t')
+	$('#mainDisplay')
 		.hide()
 		.html("")
 		.slideDown('fast');
 	
-	var urlString = 'ajax/challenges.ajax.php?getChallengeIDs=true&userID=3';
+	var urlString = 'ajax/challenges.ajax.php?getChallengeIDs=true';
+	urlString += "&userID="+userObj.ID;
 	$.ajax({
 		type: "GET",  
 		url: urlString,
@@ -51,13 +52,13 @@ function showLevelsResponse(response) {
 	$.each(json, function(key, challengeObj) {
 		console.log("tests", key, challengeObj);
 		//$("#thumb_"+mapID).html(formatMapThumbForNav(data.responseText)).show();
-		$("#t").append(formatChallengeThumbnail(challengeObj.mapObject)).show();
+		$("#mainDisplay").append(formatChallengeThumbnail(challengeObj.mapObject)).show();
 		mapdata[key] = challengeObj.mapObject;
 	});
-	$("#t").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
-	$("#t").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
-	$("#t").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
-	$("#t").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
+	$("#mainDisplay").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
+	$("#mainDisplay").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
+	$("#mainDisplay").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
+	$("#mainDisplay").append('<div style="float:left; margin:8px; width:200px; height:180px;" class="mapThumbnail">Grayed out Obscured Map Here.</div>').show();
 }
 
 function formatChallengeThumbnail(map) {
@@ -68,26 +69,149 @@ function formatChallengeThumbnail(map) {
 }
 
 function displayChallengeMap(challengeMapID) {
-	$("#t").html(mapAsHTML(mapdata[challengeMapID]));
-	$("#t").append(challengesHTML());
+	$("#mainDisplay").html(mapAsHTML(mapdata[challengeMapID]));
+	getmapdata(challengeMapID);
+	
+	var urlString = 'ajax/challenges.ajax.php?getChallenges=true&challengeMapID='+challengeMapID;
+	urlString += "&userID="+userObj.ID;
+	$.ajax({
+		type: "GET",  
+		url: urlString,
+		cache: true,
+		data: '', 
+		fail: function() { alert("ajax error - if this persists check your connection."); },
+		complete: function(data) {
+			$("#mainDisplay").append(challengesHTML(data.responseText, challengeMapID));
+		}
+	});
+	$("#mainDisplay").append(challengeNextBtn(challengeMapID));
+	$("#mainDisplay").append(challengePrevBtn(challengeMapID));
 }
 
-function challengesHTML(challenges) {
+function challengeNextBtn(challengeMapID) {
+	var next = (challengeMapID-0)+1;
+	return '<a class="next" id="challengesNextBtn" href="javascript:displayChallengeMap('+next+')" >Next &gt;</a>';
+}
+function challengePrevBtn(challengeMapID) {
+	var prev = challengeMapID-1;
+	return '<a class="next" id="challengesPrevBtn" href="javascript:displayChallengeMap('+prev+')" >&lt; Prev</a>';
+}
 
+
+function challengesHTML(response, challengeMapID) {
+	
+	var json = decryptJSON(response);
 	var r = '<div id="challenges">';
-	r += '<div id="challenges_title">Challenges</div>';
+	r += '<div id="challenges_title">Challenges:</div>';
 	r += '<div id="challenges_listing"><ul class="challenge_ulist">';
 	
-	$.each({}, function(key, challenges) {
-		r += "<li class='$cssClass' id='challenge_id_$challengeId'>";
-		//r += getChallengeDisplayString($challenge);
-		r += " $loadSolutionString </li>";
+	console.log('CC', json, challengeMapID);
+	
+	var cssClass;
+	$.each(json, function(key, challenge) {
+		console.log('d', key, challenge);
+		if (challenge.dateSolved) cssClass = 'challenge_complete';
+		else cssClass = 'challenge_incomplete';
+		var loadSolutionString = " <a href='javascript:requestChallengeSolution(\""+challengeMapID+"\", \""+challenge.challengeID+"\");'> Load this solution</a>";
+		r += "<li class='"+cssClass+"' id='challenge_id_"+challenge.challengeID+"'>"
+		r += getChallengeDisplayString(challenge) + loadSolutionString + "</li>";
 	});
 	r += "</ul></div></div>";
-	
 	return r;
 }
 
+/**
+ * Returns a user-friendly string describing the challenge.
+ * Example: "Get at least 245, using at most 10 walls and starting from (6,2)
+ */
+function getChallengeDisplayString(challenge)
+{
+	var returnMe = "";
+	if(challenge.goal == 0)
+		returnMe += "Complete the maze";
+	else if (challenge.inequality == "greater than")
+		returnMe += "Get " + challenge.goal + ' or more';
+	else if (challenge.inequality == "less than")
+		returnMe += "Get LESS THAN " . challenge.goal;
+	else //inequality == "equal"
+		returnMe += "Get EXACTLY " + challenge.goal;
+	
+	var restrictions = new Array();
+	var addUsingToText = false; //Grammar hack - specifies whether we want to add the word "using" to $returnMe
+
+	//Wall-count restriction
+	if(challenge.restrictWallCount)
+	{
+		restrictions.push("only " + challenge.restrictWallCount + " wall" + (challenge.restrictWallCount == 1 ? "" : "s"));
+		addUsingToText = true;
+	}
+
+	
+	//Wall-placement restriction
+	if(challenge.restrictWallPlacement)
+	{
+		invalidWalls = challenge.restrictWallPlacement.split(".");
+		invalidWallsString = invalidWalls.join(") or (");
+		restrictions.push("no walls at (" + invalidWallsString + ")");
+		addUsingToText = true;
+	}
+	
+
+	//Teleport-count
+	if(challenge.restrictTeleportCount)
+	{
+		if(challenge.restrictTeleportCount == 0)
+			restrictions.push("no teleports");
+		else
+			restrictions.push("exactly " + challenge.restrictTeleportCount + " teleports");
+		addUsingToText = true;
+	}
+	
+	//Teleport points
+	if(challenge.restrictTeleportsUsed)
+	{
+		invalidTeleports = challenge.restrictTeleportsUsed.split(".");
+		invalidTeleportsString = invalidTeleports.join(") or (");
+		restrictions.push("without using the teleport" + (invalidTeleports.length == 1 ? "" : "s") + " at (" + invalidTeleportsString + ")");
+	}
+	
+	//Start point
+	if(challenge.restrictStartPoint)
+	{
+		restrictions.push("starting from (" + challenge.restrictStartPoint + ")");
+	}
+	
+	//End point
+	if(challenge.restrictEndPoint)
+	{
+		restrictions.push("ending at (" + challenge.restrictEndPoint + ")");
+	}
+	
+	//Here comes the tricky part:  we want to join all the $restriction strings with commas, EXCEPT for the last
+	//two, which should be separated by " and ".
+	var restrictionCount = restrictions.length;
+	if(restrictionCount > 0)
+	{
+		if(restrictionCount == 1)
+		{
+			restrictionString = restrictions[0];
+		}
+		else
+		{
+			lastRestriction = restrictions[restrictionCount - 1];
+			restrictions[restrictionCount - 1] = '';
+			restrictionString = restrictions.join(", ") + " and " + lastRestriction;
+		}
+		
+		returnMe += ", " + (addUsingToText ? "using " : "") + restrictionString;
+	}
+	
+	
+	returnMe += ".";
+	return returnMe;
+}
+
+
 function hideNav() {
 
 }
@@ -99,12 +223,11 @@ function showNav() {
 
 </script>
 
-
 <div id="challengelist_wrapper" class="wrapper" style='overflow: auto;'>
 <h3>Challenges - I'z working on this stuff.</h3>
 
-<div id='backBtn'><a href=''>Back Btn</a></div>
-<div id='t' style='border:1px solid red; width:99%;overflow: hidden;'>
+<div id='backBtn'><a href='' class='next'>Back Btn</a></div>
+<div id='mainDisplay' style='width:99%;overflow: hidden;'>
 	<div onclick='navShowLevels(1);' style='float:left; margin:20px; border:20px solid white;padding:40px'>
 		<h2>Easy</h2>
 	</div>