diff options
| -rw-r--r-- | css/page.css | 4 | ||||
| -rw-r--r-- | css/tutorial.css | 4 | ||||
| -rw-r--r-- | pages/howtoplay.php | 4 | ||||
| -rw-r--r-- | pages/tutorial.php | 151 |
4 files changed, 100 insertions, 63 deletions
diff --git a/css/page.css b/css/page.css index f4fb112..31c0647 100644 --- a/css/page.css +++ b/css/page.css @@ -1,8 +1,8 @@ html {
- font-family: Helvetica, sans-serif;
+ font-family: Helvetica, Arial, sans-serif;
}
html.wf-active {
- font-family: Cantarell, Helvetica, sans-serif;
+ font-family: Cantarell, Helvetica, Arial, sans-serif;
}
body {
diff --git a/css/tutorial.css b/css/tutorial.css index 269ff52..5c7e9ae 100644 --- a/css/tutorial.css +++ b/css/tutorial.css @@ -1,3 +1,7 @@ +#tut-wrapper { + text-align: center; +} + table.padded td:first-child { padding-right: 5px; } diff --git a/pages/howtoplay.php b/pages/howtoplay.php index bfad879..a1e07c4 100644 --- a/pages/howtoplay.php +++ b/pages/howtoplay.php @@ -110,13 +110,13 @@ $tpmap = displaymap(GenerateMapByCode($tpcode), 3, 'example'); </div> <script> -function showTutorial(type) { +function showTutorial(num) { for (var i = 0; i < 3; i++) { var elem = document.getElementById("tut-" + i); if (elem.className.indexOf('hidden') < 0) elem.className += 'hidden'; } - var elem = document.getElementById("tut-" + type); + var elem = document.getElementById("tut-" + num); elem.className = elem.className.replace('hidden', ''); } showTutorial(0); diff --git a/pages/tutorial.php b/pages/tutorial.php index f40845f..ba8d21b 100644 --- a/pages/tutorial.php +++ b/pages/tutorial.php @@ -1,74 +1,71 @@ -<?PHP
+<?php
htmlHeader(array('tutorial'));
?>
+
<body>
+
<?php
topbar($Links);
-
?>
-<script type="text/javascript" src="sounds/script/soundmanager.js"></script>
+<script src="sounds/script/soundmanager.js"></script>
-
-<script type="text/javascript">
+<script>
isChallenge = true;
-
-
-
function challengeGo(mapid) {
+ console.log('called with ', mapid);
var moves = mapjson[mapid].moves;
- var tiles = new Array();
switch (mapid) {
- case '1':
- flashelement('nextbtn', 15, null, 400);
- updateDsp(1, 'instructions', "Now that you see what's going on, let's move on to some puzzles.")
+ case '1':
+ flashelement('nextbtn', 15, null, 400);
+ updateDsp(1, 'instructions', "Now that you see what's going on, let's move on to some puzzles.");
break;
- case '2':
- if (moves == 18) {
+ case '2':
+ if (moves >= 18) {
flashelement('nextbtn', 15, null, 400);
- updateDsp(1, 'instructions', 'Great Job, 18 moves!<br />Lets move on to the next shall we?')
+ updateDsp(1, 'instructions', 'Great Job, 18 moves!<br />Lets move on to the next shall we?');
//Unlock next button.
} else {
- 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')
- tiles=["2,3,5","2,4,6"];
+ 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');
+ var tiles = ["2,3,5","2,4,6"];
markTiles(tiles);
}
break;
- case '3':
- if (moves == 64) {
+ case '3':
+ if (moves >= 64) {
flashelement('nextbtn', 15, null, 400);
- updateDsp(1, 'instructions', 'I almost confused you! hehe.<br />Next?')
+ updateDsp(1, 'instructions', 'I almost confused you! hehe.<br />Next?');
//Unlock next button.
} else {
- updateDsp(1, 'instructions', 'The path can travel over the start and end tiles too.<br />')
- tiles=["3,3,6","3,4,7","3,3,2","3,2,1"];
+ updateDsp(1, 'instructions', 'The path can travel over the start and end tiles too.<br />');
+ var tiles = ["3,3,6","3,4,7","3,3,2","3,2,1"];
markTiles(tiles);
}
break;
- case '4':
- if (moves == 45) {
+ case '4':
+ 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")
+ updateDsp(1, 'instructions', "Figure out how that teleport worked?<br />Play with it if you didn't");
//Unlock next button.
} 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.")
- tiles=["4,1,5","4,2,6","4,3,7","4,5,9"];
+ 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"];
markTiles(tiles);
}
break;
- case '5':
- if (moves == 75) {
+ case '5':
+ if (moves >= 75) {
flashelement('nextbtn', 15, null, 400);
- updateDsp(1, 'instructions', 'Look at you so pro.<br />Go play the game!')
+ updateDsp(1, 'instructions', 'Look at you so pro.<br />Go play the game!');
//Unlock next button.
} else {
- updateDsp(1, 'instructions', 'Now it gets more difficult.<br />')
- tiles=["5,1,5","5,2,6","5,3,3","5,4,2","5,3,1"];
+ updateDsp(1, 'instructions', 'Now it gets more difficult.<br />');
+ var tiles = ["5,1,5","5,2,6","5,3,3","5,4,2","5,3,1"];
markTiles(tiles);
}
break;
@@ -78,7 +75,7 @@ function challengeGo(mapid) { function markTiles(tiles) {
for(var i in tiles) {
- tmp = tiles[i];
+ var tmp = tiles[i];
setTimeout('document.getElementById("'+tiles[i]+'").style.backgroundColor = "#ccccdd"', i*150 + 900);
}
}
@@ -91,25 +88,54 @@ function challengeWall(mapid) { 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 TutorialView(low, high) {
+ this.low = low;
+ this.high = high;
+ this.cur = low;
+ this.nextbtn = document.getElementById('nextbtn');
+ this.prevbtn = document.getElementById('prevbtn');
+}
+TutorialView.prototype.showTutorial = function(num) {
+ for (var i = this.low; i <= this.high; i++) {
+ var elem = document.getElementById("tut-" + i);
+ if (elem.className.indexOf('hidden') < 0)
+ elem.className += 'hidden';
+ }
+ var elem = document.getElementById("tut-" + num);
+ elem.className = elem.className.replace('hidden', '');
+}
+TutorialView.prototype.next = function() {
+ this.showTutorial(++this.cur);
+ if (this.cur == this.high) {
+ if (this.nextbtn.className.indexOf('hidden') < 0)
+ this.nextbtn.className += 'hidden';
+ } else
+ this.nextbtn.className = this.nextbtn.className.replace('hidden', '');
+ this.prevbtn.className = this.prevbtn.className.replace('hidden', '');
+}
+TutorialView.prototype.prev = function() {
+ this.showTutorial(--this.cur);
+ if (this.cur == this.low) {
+ if (this.prevbtn.className.indexOf('hidden') < 0)
+ this.prevbtn.className += 'hidden';
+ } else
+ this.prevbtn.className = this.prevbtn.className.replace('hidden', '');
+ this.nextbtn.className = this.nextbtn.className.replace('hidden', '');
+}
</script>
<?php
@@ -137,16 +163,15 @@ include('./includes/maps.php'); //Lightup; Next-Button
?>
-<div class="col2" style="text-align: center">
-<br /> <br />
-<strong><div style='height:80px;' id='1,instructions'>
-The point of this game is to create the longest <i>path</i> between the start and the finish
-<hr />Press Go!
-</div>
-</strong>
-<br />
+<div id="tut-wrapper">
+ <div style='height:80px;' id='1,instructions'>
+ <p>
+ The point of this game is to create the longest <i>path</i> between the start and the finish.
+ </p><p>
+ Press Go!
+ </p>
+ </div>
<?
-echo "<a href='#'>Previous</a> | <a href='#' id='nextbtn'>Next</a> ";
//Prepare maps.
$example1[] = "sraoorooof";
@@ -199,25 +224,33 @@ $myparams['teleports'] = 1; $myparams['walls'] = 5;
$map5 = GenerateShapedMap($challenge5, $myparams);
-
//Display maps.
-echo "<br />Target: 35 moves.";
+echo '<div id="tut-1" class="hidden">';
echo DisplayMap($map1, 1, 'puzzle');
-echo "<br />Target: 18 moves.";
+echo '</div><div id="tut-2" class="hidden">Target: 18 moves';
echo DisplayMap($map2, 2, 'puzzle');
-echo "<br />Target: 64 moves.";
+echo '</div><div id="tut-3" class="hidden">Target: 64 moves';
echo DisplayMap($map3, 3, 'puzzle');
-echo "<br />Target: 45 moves.";
+echo '</div><div id="tut-4" class="hidden">Target: 45 moves';
echo DisplayMap($map4, 4, 'puzzle');
-echo "<br />Target: 75 moves.";
+echo '</div><div id="tut-5" class="hidden">Target: 75 moves';
echo DisplayMap($map5, 5, 'puzzle');
-echo "<br />";
-
-echo "<br />";
+echo '</div>';
?>
+
+ <div class="wrapper">
+ <a href="javascript:tv.next()" id="nextbtn" class="next">Next</a>
+ <a href="javascript:tv.prev()" id="prevbtn" class="next hidden">Previous</a>
+ </div>
</div>
-<script type="text/javascript">soundManagerInit();</script>
-</body>
-</html>
+<script>
+var tv = new TutorialView(1, 5);
+tv.showTutorial(1);
+soundManagerInit();
+</script>
+
+<?php
+htmlFooter(array('tutorial'));
+?>
|