From 2de85f3fa69863956ed0e0827605063c5ff4d9a0 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Wed, 10 Jun 2015 10:06:14 +0200 Subject: [PATCH] Improved tutorial --- controllers/prototype/views/tutorial.jade | 3 + js/TutoCamera.js | 98 ++++++++++++++++++----- js/prototype/TutorialSteps.js | 17 +++- views/main.jade | 2 +- 4 files changed, 97 insertions(+), 23 deletions(-) diff --git a/controllers/prototype/views/tutorial.jade b/controllers/prototype/views/tutorial.jade index 44dda74..5d3a783 100644 --- a/controllers/prototype/views/tutorial.jade +++ b/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 diff --git a/js/TutoCamera.js b/js/TutoCamera.js index 468ff9b..7c6ba4f 100644 --- a/js/TutoCamera.js +++ b/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 37: case 81: this.motion.moveLeft = toSet; break; // left / q - case 40: case 83: this.motion.moveBackward = toSet; break; // down / s - case 39: case 68: this.motion.moveRight = toSet; break; // right / d - case 32: this.motion.boost = toSet; break; + case 38: case 90: // up / z + this.motion.moveForward = toSet; + if (this.tutorial.nextAction() === 'translate-keyboard') + this.tutorial.nextStep(); + 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 37: case 65: this.motion.moveLeft = toSet; break; // left / a - case 40: case 83: this.motion.moveBackward = toSet; break; // down / s - case 39: case 68: this.motion.moveRight = toSet; break; // right / d + case 38: case 87: // up / w + this.motion.moveForward = toSet; + if (this.tutorial.nextAction() === 'translate-keyboard') + 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 75: case 98: this.motion.decreasePhi = toSet; break; // 2 Down for angle - case 74: case 100: this.motion.increaseTheta = toSet; break; // 4 Left for angle - case 76: case 102: this.motion.decreaseTheta = toSet; break; // 6 Right for angle + case 73: case 104: // 8 / i Up for angle + this.motion.increasePhi = toSet; + if (this.tutorial.nextAction() === 'rotate-keyboard') + 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; } } diff --git a/js/prototype/TutorialSteps.js b/js/prototype/TutorialSteps.js index d567e94..bd349fd 100644 --- a/js/prototype/TutorialSteps.js +++ b/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 next 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( - '
' + + '
' + (justclick ? '' : '') + '' + myString + + (justclick ? + ' (next)' : '' ) + '' + '
' - ); + ) + + $('#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); } diff --git a/views/main.jade b/views/main.jade index eedd66d..e51cb63 100644 --- a/views/main.jade +++ b/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