Improved tutorial

controllers/prototype/views/tutorial.jade

@@ -1,5 +1,8 @@
 extends ./prototype
 
+block append extrahead
+    link(rel="stylesheet", href="/static/css/tutorial.css")
+
 block title
     title #{title} - Prototype - Tutorial
 

js/TutoCamera.js

@@ -293,34 +293,94 @@ TutoCamera.prototype.onKeyEvent = function(event, toSet) {
     var motionJsonCopy = JSON.stringify(this.motion);
 
     if (this.allowed.keyboardTranslate) {
-        if (this.tutorial.nextAction() ===  'translate-keyboard') {
+
-            this.tutorial.nextStep();
-        }
         switch ( event.keyCode ) {
+            // yes... lots of duplication near there
+            // if fact, I gave up trying to have a tutorial well coded...
+
             // Azerty keyboards
-            case 38: case 90:  this.motion.moveForward   = toSet; break; // up / z
+            case 38: case 90: // up / z
-            case 37: case 81:  this.motion.moveLeft      = toSet; break; // left / q
+                this.motion.moveForward = toSet;
-            case 40: case 83:  this.motion.moveBackward  = toSet; break; // down / s
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
-            case 39: case 68:  this.motion.moveRight     = toSet; break; // right / d
+                    this.tutorial.nextStep();
-            case 32:           this.motion.boost         = toSet; break;
+                break;
+
+            case 37: case 81: // left / q
+                this.motion.moveLeft = toSet;
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
+            case 40: case 83: // down / s
+                this.motion.moveBackward = toSet;
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
+            case 39: case 68: // right / d
+                this.motion.moveRight = toSet;
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
+            case 32:
+                this.motion.boost = toSet;
+                break;
 
             // Qwerty keyboards
-            case 38: case 87:  this.motion.moveForward   = toSet; break; // up / w
+            case 38: case 87: // up / w
-            case 37: case 65:  this.motion.moveLeft      = toSet; break; // left / a
+                this.motion.moveForward   = toSet;
-            case 40: case 83:  this.motion.moveBackward  = toSet; break; // down / s
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
-            case 39: case 68:  this.motion.moveRight     = toSet; break; // right / d
+                    this.tutorial.nextStep();
+                break; // up / w
+
+            case 37: case 65: // left / a
+                this.motion.moveLeft      = toSet;
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
+            case 40: case 83: // down / s
+                this.motion.moveBackward  = toSet;
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
+            case 39: case 68: // right / d
+                this.motion.moveRight     = toSet;
+                if (this.tutorial.nextAction() ===  'translate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
         }
     }
 
     if (this.allowed.keyboardRotate) {
-        if (this.tutorial.nextAction() === 'rotate-keyboard') {
+
-            this.tutorial.nextStep();
-        }
         switch ( event.keyCode ) {
-            case 73: case 104: this.motion.increasePhi   = toSet; break; // 8 Up for angle
+            case 73: case 104: // 8 / i Up for angle
-            case 75: case 98:  this.motion.decreasePhi   = toSet; break; // 2 Down for angle
+                this.motion.increasePhi = toSet;
-            case 74: case 100: this.motion.increaseTheta = toSet; break; // 4 Left for angle
+                if (this.tutorial.nextAction() === 'rotate-keyboard')
-            case 76: case 102: this.motion.decreaseTheta = toSet; break; // 6 Right for angle
+                    this.tutorial.nextStep();
+                break;
+
+            case 75: case 98: // 2 / k Down for angle
+                this.motion.decreasePhi = toSet;
+                if (this.tutorial.nextAction() === 'rotate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
+            case 74: case 100: // 4 / j Left for angle
+                this.motion.increaseTheta = toSet;
+                if (this.tutorial.nextAction() === 'rotate-keyboard')
+                    this.tutorial.nextStep();
+                break;
+
+            case 76: case 102: // 6 / l Right for angle
+                this.motion.decreaseTheta = toSet;
+                if (this.tutorial.nextAction() === 'rotate-keyboard')
+                    this.tutorial.nextStep();
+                break;
         }
     }
 

js/prototype/TutorialSteps.js

@@ -10,7 +10,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
 
     this.instructions = [
         {
-            text:"Welcome to this tutorial ! Click on the right arrow to go to the next instruction !",
+            text:"Welcome to this tutorial ! Click on <em>next</em> to go to the next instruction !",
             justclick:true
         },
         {
@@ -173,8 +173,9 @@ TutorialSteps.prototype.alert = function(myString, justclicked) {
 }
 
 TutorialSteps.prototype.notify = function(myString, justclick) {
+    var alert = 'alert-' + (justclick ? 'warning' : 'info');
     $('#alert-placeholder').html(
-        '<div class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
+        '<div id="toto" class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
             (justclick ?
             '<button type="button" class="close" aria-hidden="true"' +
                      'onclick="setTimeout(onWindowResize, 100); nextStep();' + '">' +
@@ -182,7 +183,17 @@ TutorialSteps.prototype.notify = function(myString, justclick) {
             '</button>' : '') +
             '<span><strong>' +
                 myString +
+                (justclick ?
+                 ' <a href="#" onclick="setTimeout(onWindowResize, 100); nextStep();"><em>(next)</em></span>' : '' ) +
             '</strong></span>' +
         '</div>'
-    );
+    )
+
+    $('#toto').removeClass(function (index, css) {
+            return (css.match (/(^|\s)alert-\S+/g) || []).join(' ');
+    }).addClass('alert-danger').addClass('alert-dismissable');
+
+    setTimeout(function() {
+        $('#toto').removeClass('alert-danger').addClass(alert);
+    }, 500);
 }

views/main.jade

@@ -12,8 +12,8 @@ html(lang='fr')
         link(rel="stylesheet", href="/static/bootstrap/css/bootstrap.css")
         link(rel="stylesheet", href="/static/css/style.css")
         link(rel="stylesheet", href="/static/css/syntax.css")
-        link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic")
         block extrahead
+        link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic")
         block title
             title Hello