Finished tutorial

js/TutoCamera.js

@@ -169,6 +169,10 @@ TutoCamera.prototype.normalMotion = function(time) {
 }
 
 TutoCamera.prototype.reset = function() {
+    if (this.tutorial.nextAction() === 'reset-camera') {
+        this.tutorial.nextStep();
+    }
+
     this.resetPosition();
     this.moving = false;
     this.movingHermite = false;
@@ -226,6 +230,10 @@ TutoCamera.prototype.move = function(otherCamera, toSave) {
 }
 
 TutoCamera.prototype.moveHermite = function(otherCamera, toSave) {
+    if (this.tutorial.nextAction() === 'recommendation') {
+        this.tutorial.nextStep();
+    }
+
     if (toSave === undefined)
         toSave = true;
 

js/prototype/Coin.js

@@ -12,7 +12,6 @@ var _toto = new Audio();
 Coin.extension = _toto.canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3";
 
 Coin.prototype.init = function(x,y,z) {
-    Coin.nextSound = new Audio(static_path + 'data/music/redcoins/1' + Coin.extension);
     if (Coin.BASIC_MESH !== null) {
         this.mesh = Coin.BASIC_MESH.clone();
         this.mesh.position.x = x;
@@ -81,6 +80,9 @@ Coin.BASIC_MESH = null;
 Coin._loader = new THREE.OBJLoader();
 
 Coin.init = function(scale) {
+    if (!Coin.initialized) {
+        Coin.initialized = true;
+
         if (scale === undefined) {
             scale = 0.005;
         }
@@ -99,4 +101,7 @@ Coin.init = function(scale) {
                 });
             }
         );
+
+        Coin.nextSound = new Audio(static_path + 'data/music/redcoins/1' + Coin.extension);
+    }
 }

js/prototype/TutorialSteps.js

@@ -47,7 +47,35 @@ var TutorialSteps = function(tutoCamera) {
             justclick: false
         },
         {
-            text: "You got it ! I think you're ready to play !",
+            text: "You got it ! Try to click on reset camera !",
+            justclick: false
+        },
+        {
+            text: "Nice ! Let me introduce you to <emp>recommendations</em>",
+            justclick: true
+        },
+        {
+            text: "This is a recommendation, by hovering it, you should see a preview, and by clicking on it, you should go to the recommended viewpoint",
+            justclick: false
+        },
+        {
+            text: "The recommendation will change color once you clicked on it, just like a web link",
+            justclick:true
+        },
+        {
+            text: "Here are some more recommendations, try to browse the scene and find the missing red coins (5/8)",
+            justclick:false
+        },
+        {
+            text:"6/8 : you can use the arrow buttons to go to the previous / next position",
+            justclick: false
+        },
+        {
+            text: "7/8 ! Only one more !",
+            justclick: false
+        },
+        {
+            text: "Congratulations ! You've successfully finished the tutorial !",
             justclick: false
         }
     ];
@@ -65,10 +93,7 @@ TutorialSteps.prototype.nextStep = function() {
             case 2: this.camera.allowed.keyboardRotate    = true; break;
             case 3:
                 this.camera.allowed.keyboardRotate    = true;
-                coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, function() {
+                coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
-                    self.nextStep();
-                    self.coins++;
-                }));
                 coins[coins.length-1].addToScene(scene);
                 break;
             case 4:
@@ -87,6 +112,28 @@ TutorialSteps.prototype.nextStep = function() {
                 coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
                 coins[coins.length-1].addToScene(scene);
                 break;
+            case 12:
+                var cam = createPeachCameras(container_size.width(), container_size.height())[2];
+                cameras.push(cam);
+                cam.addToScene(scene);
+                this.camera.move({
+                    position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
+                    target:  new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
+                });
+                break;
+            case 14:
+                var cams = createPeachCameras(container_size.width(), container_size.height());
+                for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
+                    cameras.push(cams[i]);
+                    cams[i].addToScene(scene);
+                }
+
+                coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
+                coins[coins.length-1].addToScene(scene);
+                coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback));
+                coins[coins.length-1].addToScene(scene);
+                coins.push(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback));
+                coins[coins.length-1].addToScene(scene);
         }
         this.step++;
     }
@@ -97,6 +144,8 @@ TutorialSteps.prototype.nextAction = function() {
         case 2: return 'rotate-mouse';
         case 3: return 'rotate-keyboard';
         case 9: return 'translate-keyboard';
+        case 11: return 'reset-camera';
+        case 13: return 'recommendation';
     }
 }
 
@@ -113,15 +162,15 @@ TutorialSteps.prototype.alert = function(myString, justclicked) {
 
 TutorialSteps.prototype.notify = function(myString, justclick) {
     $('#alert-placeholder').html(
-        '<div class="alert alert-warning alert-dismissable">' +
+        '<div class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
             (justclick ?
             '<button type="button" class="close" aria-hidden="true"' +
                      'onclick="setTimeout(onWindowResize, 100); tutorial.nextStep();' + '">' +
                 '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>' +
             '</button>' : '') +
-            '<span>' +
+            '<span><strong>' +
                 myString +
-            '</span>' +
+            '</strong></span>' +
         '</div>'
     );
 }

js/prototype/initScene.js

@@ -176,21 +176,33 @@ function createPeachCameras(width, height) {
             new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813)
     ));
 
-    cams.push(createCamera(
+    // cams.push(createCamera(
-            new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783),
+    //         new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783),
-            new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774)
+    //         new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774)
-    ));
+    // ));
 
-    cams.push(createCamera(
+    // cams.push(createCamera(
-            new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845),
+    //        new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845),
-            new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945)
+    //        new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945)
-    ));
+    // ));
 
     cams.push(createCamera(
             new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124),
             new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961)
     ));
 
+    cams.push(createCamera(
+        new THREE.Vector3(-3.912436457101955,1.4571795397310319,-7.361700012948173),
+        new THREE.Vector3(26.60153755572943,-12.280244389383581,-29.274722938506393)
+    ));
+
+    cams.push(createCamera(
+        new THREE.Vector3(4.734058048040269,0.9171350442568073,0.12604632828978296),
+        new THREE.Vector3(25.163187055614348,-27.08137327531798,-19.842284094421995)
+    ));
+
+    cams.forEach(function(cam) {cam.setSize(0.2);});
+
     return cams;
 }