Improved tutorial

This commit is contained in:
Thomas FORGIONE 2015-06-10 10:06:14 +02:00
parent 8909981426
commit 2de85f3fa6
4 changed files with 97 additions and 23 deletions

View File

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

View File

@ -293,34 +293,94 @@ TutoCamera.prototype.onKeyEvent = function(event, toSet) {
var motionJsonCopy = JSON.stringify(this.motion); var motionJsonCopy = JSON.stringify(this.motion);
if (this.allowed.keyboardTranslate) { if (this.allowed.keyboardTranslate) {
if (this.tutorial.nextAction() === 'translate-keyboard') {
this.tutorial.nextStep();
}
switch ( event.keyCode ) { switch ( event.keyCode ) {
// yes... lots of duplication near there
// if fact, I gave up trying to have a tutorial well coded...
// Azerty keyboards // 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 // 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.allowed.keyboardRotate) {
if (this.tutorial.nextAction() === 'rotate-keyboard') {
this.tutorial.nextStep();
}
switch ( event.keyCode ) { 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;
} }
} }

View File

@ -10,7 +10,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
this.instructions = [ 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 justclick:true
}, },
{ {
@ -173,8 +173,9 @@ TutorialSteps.prototype.alert = function(myString, justclicked) {
} }
TutorialSteps.prototype.notify = function(myString, justclick) { TutorialSteps.prototype.notify = function(myString, justclick) {
var alert = 'alert-' + (justclick ? 'warning' : 'info');
$('#alert-placeholder').html( $('#alert-placeholder').html(
'<div class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' + '<div id="toto" class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
(justclick ? (justclick ?
'<button type="button" class="close" aria-hidden="true"' + '<button type="button" class="close" aria-hidden="true"' +
'onclick="setTimeout(onWindowResize, 100); nextStep();' + '">' + 'onclick="setTimeout(onWindowResize, 100); nextStep();' + '">' +
@ -182,7 +183,17 @@ TutorialSteps.prototype.notify = function(myString, justclick) {
'</button>' : '') + '</button>' : '') +
'<span><strong>' + '<span><strong>' +
myString + myString +
(justclick ?
' <a href="#" onclick="setTimeout(onWindowResize, 100); nextStep();"><em>(next)</em></span>' : '' ) +
'</strong></span>' + '</strong></span>' +
'</div>' '</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);
} }

View File

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