diff options
| -rw-r--r-- | css/tutorial.css | 8 | ||||
| -rw-r--r-- | 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>
|