From 8a7969ad2e6189d1d536b9fd58ef9e53ed94b555 Mon Sep 17 00:00:00 2001
From: Patrick Davison <snapwilliam@gmail.com>
Date: Tue, 15 Nov 2011 22:54:49 -0800
Subject: Locking and Unlocking for the "Next" button in tutorial.

---
 css/tutorial.css   |  8 ++++++++
 pages/tutorial.php | 33 ++++++++++++++++++++++++++-------
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/css/tutorial.css b/css/tutorial.css
index 5c7e9ae..971bfce 100644
--- a/css/tutorial.css
+++ b/css/tutorial.css
@@ -16,11 +16,19 @@ a.next {
 	box-shadow: 0 0 1px #445;
 	float: right;
 	margin: 0 10px;
+	cursor: pointer;
 }
 a.next:hover {
 	background-color: #446;
 	border: 1px solid #223;
 }
+a.next.disabled, a.next.disabled:hover {
+	color: #447;
+	background-color: #557;
+	border: 1px solid #446;
+	cursor: default;
+}
+
 
 .hidden {
 	display: none;
diff --git a/pages/tutorial.php b/pages/tutorial.php
index d7d4b24..d3a1aa0 100644
--- a/pages/tutorial.php
+++ b/pages/tutorial.php
@@ -18,6 +18,7 @@ function challengeGo(mapid) {
 	
 	switch (mapid) {
 	case '1':
+		tv.unlock(2);
 		flashelement('nextbtn', 15, null, 400);
 		updateDsp(1, 'instructions', "Now that you see what's going on, let's move on to some puzzles.");
 		break;
@@ -26,7 +27,7 @@ function challengeGo(mapid) {
 		if (moves >= 18) {
 			flashelement('nextbtn', 15, null, 400);
 			updateDsp(1, 'instructions', "Great, that's 18 moves!<br />Lets move on to the next shall we?");
-			//Unlock next button.
+			tv.unlock(3);
 		} else {
 			updateDsp(1, 'instructions', "The goal for this map is 18 moves.<br />Place 2 walls to make the path longer");
 			var tiles = ["2,3,5","2,4,6"];
@@ -38,7 +39,7 @@ function challengeGo(mapid) {
 		if (moves >= 64) {
 			flashelement('nextbtn', 15, null, 400);
 			updateDsp(1, 'instructions', '<p>I almost confused you! hehe.</p><p>Next?</p>');
-			//Unlock next button.
+			tv.unlock(4);
 		} else {
 			updateDsp(1, 'instructions', '<p>The path can travel over the start and end tiles too.</p><br>');
 			var tiles = ["3,3,6","3,4,7","3,3,2","3,2,1"];
@@ -50,7 +51,7 @@ function challengeGo(mapid) {
 		if (moves >= 45) {
 			flashelement('nextbtn', 15, null, 400);
 			updateDsp(1, 'instructions', "Figure out how that teleport worked?<br />Play with it if you didn't");
-			//Unlock next button.
+			tv.unlock(5);
 		} else {
 			updateDsp(1, 'instructions', "Let's use that teleport to block the way to the A!<br />We can also make it take longer to get to A in the process.");
 			var tiles = ["4,1,5","4,2,6","4,3,7","4,5,9"];
@@ -100,7 +101,9 @@ function challengeWall(mapid) {
 
 function challengeLoad() {}
 
-function challenge() {}
+function challenge() {
+//this.
+}
 challenge.prototype.unlock = function(id) {
 }
 
@@ -138,6 +141,8 @@ function TutorialView(low, high) {
 	this.low = low;
 	this.high = high;
 	this.cur = low;
+	//Lock them all.
+	this.locked = low;
 	this.nextbtn = document.getElementById('nextbtn');
 	this.prevbtn = document.getElementById('prevbtn');
 }
@@ -149,13 +154,20 @@ TutorialView.prototype.showTutorial = function(num) {
 	}
 	var elem = document.getElementById("tut-" + num);
 	elem.className = elem.className.replace('hidden', '');
+	//Is the map after this disabled?
+	this.nextbtn.className = this.nextbtn.className.replace('disabled', '');
+	if (this.locked <= this.cur)
+		this.nextbtn.className += ' disabled';
 	startChallenge(num);
 }
 TutorialView.prototype.next = function() {
+	//Is the next map locked?
+	if (this.locked <= this.cur)
+		return;
 	this.showTutorial(++this.cur);
 	if (this.cur == this.high) {
 		if (this.nextbtn.className.indexOf('hidden') < 0)
-			this.nextbtn.className += 'hidden';
+			this.nextbtn.className += ' hidden';
 	} else
 		this.nextbtn.className = this.nextbtn.className.replace('hidden', '');
 	this.prevbtn.className = this.prevbtn.className.replace('hidden', '');
@@ -164,11 +176,18 @@ TutorialView.prototype.prev = function() {
 	this.showTutorial(--this.cur);
 	if (this.cur == this.low) {
 		if (this.prevbtn.className.indexOf('hidden') < 0)
-			this.prevbtn.className += 'hidden';
+			this.prevbtn.className += ' hidden';
 	} else
 		this.prevbtn.className = this.prevbtn.className.replace('hidden', '');
 	this.nextbtn.className = this.nextbtn.className.replace('hidden', '');
 }
+TutorialView.prototype.unlock = function(num) {
+	if (num > this.locked) {
+		this.locked = num;
+		if (this.locked >= this.cur)
+			this.nextbtn.className = this.nextbtn.className.replace('disabled', '');
+	}
+}
 </script>
 
 <?php
@@ -273,7 +292,7 @@ echo '</div>';
 ?>
 
 	<div class="wrapper">
-	<a href="javascript:tv.next()" id="nextbtn" class="next ">Next</a>
+	<a href="javascript:tv.next()" id="nextbtn" class="next disabled">Next</a>
 	<a href="javascript:tv.prev()" id="prevbtn" class="next hidden">Previous</a>
 	</div>
 </div>
-- 
cgit v1.2.3