tforgione
/
3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
controllers/prototype/views/tutorial.jade
View File

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

98
js/TutoCamera.js
View File

@ -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;
}
}

17
js/prototype/TutorialSteps.js vendored
View File

@ -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);
}

2
views/main.jade
View File

@ -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