From cc2e1384904ff984208cf0236a9a5c6e957ba899 Mon Sep 17 00:00:00 2001
From: Patrick Davison <snapwilliam@gmail.com>
Date: Thu, 15 Sep 2011 00:41:14 -0700
Subject: Tutorial work

---
 css/mapstyle.css    | 10 +++++--
 includes/maps.php   | 81 +++++++++++++++++++++++++++++++++++++++++++++--------
 js/mapspecs.js      | 20 +++++++++----
 pages/howtoplay.php |  6 ++--
 pages/tutorial.php  | 57 ++++++++++++++++++++++++++++++++++---
 5 files changed, 147 insertions(+), 27 deletions(-)

diff --git a/css/mapstyle.css b/css/mapstyle.css
index 49d154c..8e989e1 100644
--- a/css/mapstyle.css
+++ b/css/mapstyle.css
@@ -25,12 +25,16 @@
 }
 
 
-.dsp_33 {
-	width:32%;
-}
+
 .dsp_60 {
 	width:60%;
 }
+.dsp_49 {
+	width:49%;
+}
+.dsp_33 {
+	width:32%;
+}
 .dsp_24 {
 	width:23%;
 }
diff --git a/includes/maps.php b/includes/maps.php
index c01af22..bef6c63 100644
--- a/includes/maps.php
+++ b/includes/maps.php
@@ -1,10 +1,19 @@
 <?PHP
 //Displays the map
-function DisplayMap($mapMatrix, $idprefix = 1, $example = false, $speed = NULL) {
+function DisplayMap($mapMatrix, $idprefix = 1, $style = 'normal', $speed = NULL) {
 	//Iterate through $mapMatrix and generate the html
 	$maptable = ""; //The string to return to the database.
 	$index = 0;	    //The current number of tiles from the last tile saved.
 	
+	$example = false;
+	if ($style == 'example') {
+		$example = true;
+	}
+
+	$puzzle = false;
+	if ($style == 'puzzle') {
+		$puzzle = true;
+	}
 	
 	if ($speed == NULL) {
 		if ($example) {
@@ -150,24 +159,74 @@ function DisplayMap($mapMatrix, $idprefix = 1, $example = false, $speed = NULL)
 		return $output;
 	}
 	//$date = date("m-d-y");
+	
+	
+	//OUTPUT FOR PUZZLE-STYLE MAPS
+	if ($puzzle) {
+		$output = "
+	<div id='$idprefix,outer' class='grid_outer' style='width:".($width+2)."px;height:".($height+60)."px;'>
+	
+		<div style='display:none;'>
+			<div id='$idprefix,dspID' title='MapID: $idprefix'>
+			</div>
+			
+			
+		</div>
+		
+			
+		<div id='$idprefix,dspbr' class='grid_dsp_left dsp_60'> 
+			<div id='$idprefix,dspCount' class='grid_dsp_data'> 
+			0 moves
+			</div>
+		</div>
+	
+		<div id='$idprefix,dsptr' class='grid_dsp_right dsp_32'>
+			<span id='$idprefix,dspWalls' class='grid_dsp_data'> 
+			".$mapdata['walls']." walls
+			</span>
+		</div>
+
+	
+		$maptable
+	
+	
+		<div id='$idprefix,dspbl' class='grid_dsp_left dsp_60'> 
+			<input id='$idprefix,btn' type='button' onclick='doSend($idprefix)' value='Go!' />
+			Speed:
+			<select onChange='savePref(\"speed\", this.value)' id='$idprefix,speed'>
+			$rOption
+			</select>
+		</div>
+
+		<div class='grid_dsp_mid dsp_24'>
+			$mutebutton
+		</div>
 
+		$mapdatadiv
+	
+	</div>
+		";
+		return $output;
+	}
+
+	//NORMAL OUTPUT:
 	$output = "
 		<div id='$idprefix,outer' class='grid_outer' style='width:".($width+2)."px;height:".($height+60)."px;'>
 
 		<div class='grid_dsp_left dsp_60'>
-		<div id='$idprefix,dspID' title='MapID: $idprefix'> 
-		MapID: $idprefix
-		</div>
+			<div id='$idprefix,dspID' title='MapID: $idprefix'> 
+			MapID: $idprefix
+			</div>
 		</div>
 
 
 		<div id='$idprefix,dsptr' class='grid_dsp_right dsp_33'>
-		<span id='$idprefix,dspWalls' class='grid_dsp_data'> 
-		".$mapdata['walls']." walls
-		</span>
-		<span>
-		( <a href='javascript:resetwalls($idprefix)'>Reset</a> )
-		</span>
+			<span id='$idprefix,dspWalls' class='grid_dsp_data'> 
+			".$mapdata['walls']." walls
+			</span>
+			<span>
+			( <a href='javascript:resetwalls($idprefix)'>Reset</a> )
+			</span>
 		</div>
 
 
@@ -187,7 +246,7 @@ function DisplayMap($mapMatrix, $idprefix = 1, $example = false, $speed = NULL)
 
 		<div id='$idprefix,dspbr' class='grid_dsp_right dsp_33'> 
 		<div id='$idprefix,dspCount' class='grid_dsp_data'> 
-		".$path['moves']." moves 
+		0 moves 
 		</div>
 		</div>
 
diff --git a/js/mapspecs.js b/js/mapspecs.js
index 17e4a74..2494800 100644
--- a/js/mapspecs.js
+++ b/js/mapspecs.js
@@ -8,11 +8,13 @@ window.onload = function(){
    //document.getElementById('blocksdisplay').innerHTML = "<b>"+blocks+"</b>";
 	//doSend();
 	loadSol();
-	if (ischallenge == true) {
-		challengehint();
+	if (isChallenge == true) {
+		challengeLoad();
 	}
 }
 
+var isChallenge = false;
+
 var solution = new Array();
 var blocks = new Array();
 var count = new Array();
@@ -55,13 +57,16 @@ function grid_click(obj) {
 	mapid = tmp[0] - 0;
 	y = tmp[1];
 	x = tmp[2];
-
+	
+	//The users solution - prepare it if it's not started
 	if (solution[mapid] == undefined) {
 		getmapdata(mapid);
 	}
 	//alert(obj.cv);
 	
+	//Is this placing a wall, or removing one?
    if (obj.cv) {
+		//Removing a wall
       obj.cv = false;
 		
       //obj.style.backgroundColor = '#ffffff';
@@ -74,6 +79,7 @@ function grid_click(obj) {
 		solution[mapid] = solution[mapid].replace('.'+y+','+x+'.', '.');
 		//alert(y+','+x+'.');
    } else {
+		//Placing a wall
       if (blocks[mapid] < 1) {
          //alert("Outa blocks!");
 			updateDsp(mapid, 'dspWalls', "OUT!");
@@ -90,7 +96,9 @@ function grid_click(obj) {
       blocks[mapid]--;
    }
    //document.getElementById('blocksdisplay').innerHTML = "<b>"+blocks[mapid]+"</b>";
-   
+   if (isChallenge == true) {
+		challengeWall(mapid);
+	}
 	updateDsp(mapid, 'dspWalls', blocks[mapid]+" walls");
 	//document.getElementById(mapid+',dspWalls').innerHTML = " "+blocks[mapid]+" walls";
 	
@@ -277,8 +285,8 @@ function animatePathDone(mapid) {
 		updateDsp(mapid, 'dspScore', htmlscores);
 		htmlscores = '';
 	}
-	if (ischallenge == true) {
-		challengecomplete(mapid);
+	if (isChallenge == true) {
+		challengeGo(mapid);
 	}
 }
 
diff --git a/pages/howtoplay.php b/pages/howtoplay.php
index 11dc429..294e89f 100644
--- a/pages/howtoplay.php
+++ b/pages/howtoplay.php
@@ -17,15 +17,15 @@ include('./includes/maps.php');
 
 //Demo nothing.
 $basicmapcode = '6x3.c0.r0.w9.t0.:0s.4f.0s.4f.0s.4f.';
-$basicmap = displaymap(GenerateMapByCode($basicmapcode), 1, true);
+$basicmap = displaymap(GenerateMapByCode($basicmapcode), 1, 'example');
 
 //Map Demoing the checkpoints
 $cpcode = "6x3.c5.r0.w9.t0.:0s.0a.2b.0f.0s.1e.2f.0s.0d.2c.0f.";
-$cpmap = displaymap(GenerateMapByCode($cpcode), 2, true);
+$cpmap = displaymap(GenerateMapByCode($cpcode), 2, 'example');
 
 //Map Demoing the teleports
 $tpcode = "6x3.c0.r0.w5.t4.:0s.0n.2t.0f.0s.4f.0s.0u.2m.0f.";
-$tpmap = displaymap(GenerateMapByCode($tpcode), 3, true);
+$tpmap = displaymap(GenerateMapByCode($tpcode), 3, 'example');
 
 ?>
 
diff --git a/pages/tutorial.php b/pages/tutorial.php
index c81c0e3..a614173 100644
--- a/pages/tutorial.php
+++ b/pages/tutorial.php
@@ -13,14 +13,15 @@ $requiredmoves = '18';
 ?>
 
 <script type="text/javascript">
-ischallenge = true;
+isChallenge = true;
 
-function challengecomplete(mapid) {
+function challengeGo(mapid) {
 	var moves = mapjson[mapid].moves;
 
 	if (moves == <? echo $requiredmoves; ?>) {
 		flashelement('nextbtn', 15, null, 400);
 		updateDsp(1, 'instructions', 'Great Job!<br />Lets move on to the next shall we?')
+		//Unlock next button.
 	} else {
 			//challengehint();
 		updateDsp(1, 'instructions', 'As you can see, the path travels from the Start to A to Finish.<hr />Place 2 walls where it\'s flashing to make the path longer')
@@ -30,6 +31,32 @@ function challengecomplete(mapid) {
 	}
 }
 
+function challengeWall(mapid) {
+	//Required walls:
+	var reqwall = new Array();
+	reqwall[0] = "3,5.";
+	reqwall[1] = "4,6.";
+	
+	for(var i in reqwall) {
+		//alert(solution[mapid].indexOf(reqwall[i]));
+		if (solution[mapid].indexOf(reqwall[i]) == -1) {
+			//Failed
+			return;
+		}
+	}
+	updateDsp(1, 'instructions', 'Excellent; those wall placements look good!<hr />Press Go and see the path it takes')
+	//indexOf
+}
+
+function challengeLoad() {
+
+}
+
+function highlightElement(Eid) {
+	
+}
+
+
 function challengehint() {
 	//setTimeout("flashelement('1,3,5', 10, '#cce', 620);", 100);
 	//setTimeout("flashelement('1,4,6', 10, '#cce', 620);", 100);
@@ -39,6 +66,8 @@ function challengehint() {
 }
 
 
+
+
 </script>
 
 <?php
@@ -47,6 +76,26 @@ include('./includes/maps.php');
 include('./includes/datas.php');
 
 
+//Page Load;
+//STAGE 1:
+//Intro and Instructions; press go!
+//Lightup; Go-button.
+
+//Go is done animating and GOAL is unachieved.
+//STAGE 2:
+//Show where walls go, and/or encourage them.
+//Lightup; Wall Spots
+
+//All walls have been placed correctly.
+//STAGE 3:
+//'That looks good, try pressing Go!'
+//Lightup; Go-Button
+
+//Go is done animating, and goal is achieved:
+//STAGE 4:
+//Horray! Move on to next - highlight 'Next'
+//Lightup; Next-Button
+
 ?>
 <div class="col2" style="text-align: center">
 <br /> <br /> 
@@ -95,9 +144,9 @@ $myparams['walls'] = 4;
 
 $map3 = GenerateShapedMap($challenge3, $myparams);
 
-echo DisplayMap($map1, 1);
+echo DisplayMap($map1, 1, 'puzzle');
 echo "<br />";
-echo "<br /><center>map2</center>";
+//echo "<br /><center>map2</center>";
 echo "<br />";
 //echo DisplayMap($map2, 2);
 
-- 
cgit v1.2.3