Client modification : score bar blinking when finished

controllers/thankyou/index.js

@@ -18,7 +18,6 @@ module.exports.index = function(req, res) {
         res.setHeader('Content-Type', 'text/html');
 
         res.render('index.jade', res.locals, function(err, result) {
-            console.log(err);
             res.send(result);
         });
 

js/l3d/apps/prototype/Coin.js

@@ -10,6 +10,15 @@ var Coin = function(x,y,z, callback) {
     }
 };
 
+function instantToColor(instant) {
+
+    var r = Math.floor(255 * instant);
+    var g = Math.floor(255 * (1-instant));
+
+    return 'rgb(' + r + ',' + g + ',0)';
+
+}
+
 var _toto = new Audio();
 Coin.extension = _toto.canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3";
 
@@ -27,6 +36,9 @@ Coin.domElement.style.top = "0px";
 Coin.domElement.style.left = "0px";
 
 Coin.lvl = 0;
+Coin.blinking = false;
+Coin.blinkingToRed = true;
+Coin.colorInstant = 0;
 
 Coin.setSize = function(width,height) {
     this.domElement.width = width;
@@ -52,12 +64,33 @@ Coin.update = function() {
     var x;
     try {
         x = containerSize.width() * 4.75 / 5;
-        Coin.domElement.width = containerSize.width();
+
-        Coin.domElement.height = containerSize.height();
+        if (Coin.domElement.width === undefined) {
+            Coin.domElement.width = containerSize.width();
+            Coin.domElement.height = containerSize.height();
+        }
     } catch (e) {
         return;
     }
 
+    if (Coin.blinking) {
+
+        Coin.colorInstant += Coin.blinkingToRed ? 0.025 : -0.025;
+
+        if (Coin.colorInstant < 0 || Coin.colorInstant > 1) {
+
+            Coin.colorInstant = Math.clamp(Coin.colorInstant, 0, 1);
+            Coin.blinkingToRed = !Coin.blinkingToRed;
+
+        }
+
+    } else {
+
+        Coin.colorInstant = 0;
+        Coin.blinkingToRed = true;
+
+    }
+
     // Coin.domElement.width = Coin.domElement.width;
 
     // Coin.ctx.drawImage(Coin.image, x + 75,25,30,30);
@@ -73,16 +106,18 @@ Coin.update = function() {
     // Coin.ctx.stroke();
     // Coin.ctx.fill();
 
-    Coin.domElement.width = Coin.domElement.width;
 
     var width = 10;
     var height = 100;
     var lvl = Coin.lvl;
-    var grd = Coin.ctx.createLinearGradient(x,20,width,height);
-    grd.addColorStop(1, "red");
-    grd.addColorStop(0.5, "green");
 
-    Coin.ctx.fillStyle = grd;
+    // if (Coin.previousLvl < lvl)
+    //     Coin.domElement.width = Coin.domElement.width;
+
+    Coin.ctx.save();
+
+    Coin.ctx.clearRect(x-70, 20, width +71, height);
+    Coin.ctx.fillStyle = instantToColor(Coin.colorInstant);
     Coin.ctx.fillRect(x,20 + (1-lvl)*height,10,(lvl*height));
 
     Coin.ctx.beginPath();
@@ -91,25 +126,38 @@ Coin.update = function() {
     Coin.ctx.lineTo(x+width,120);
     Coin.ctx.lineTo(x+width,20);
     Coin.ctx.stroke();
-    Coin.ctx.closePath();
 
     Coin.ctx.fillStyle = 'black';
     Coin.ctx.font="20px Arial";
     Coin.ctx.fillText('Score', x - 60, 25);
 
+    Coin.ctx.restore();
+
 };
 
+setInterval(function() {
+    Coin.update();
+}, 50);
+
 Coin.set = function() {
     var newLvl = Coin.total / Coin.max;
     Coin.lvl+=0.01*Math.sign(newLvl-Coin.lvl);
     if (Math.abs(Coin.lvl-newLvl) > 0.005) {
-        Coin.update();
+        Coin.shouldUpdate = true;
         setTimeout(function() {
             Coin.set(newLvl);
         },50);
+    } else {
+        Coin.shouldUpdate = Coin.blinking;
     }
 };
 
+Coin.blink = function(param) {
+    var blinking = param === undefined ? true : !!param;
+    Coin.blinking = blinking;
+    Coin.shouldUpdate = true;
+};
+
 // Coin.image.onload = Coin.update;
 
 Coin.ctx = Coin.domElement.getContext('2d');

js/l3d/apps/prototype/GlobalFunctions.js

@@ -171,6 +171,7 @@ function appendTo(container) {
 }
 
 function setNextButton(target) {
+    Coin.blink();
     $('#next').show();
     $('#next').click(function() {
         window.location = target;

js/l3d/apps/prototype/interactive/main.js

@@ -54,6 +54,8 @@ function main() {
     // Set the good size of cameras
     onWindowResize();
 
+    Coin.update(true);
+
     if (locked !== undefined && locked)
         startCanvas.render();
 
@@ -63,7 +65,6 @@ function main() {
     else
         L3D.DB.disable();
 
-    Coin.update();
     // startCanvas.render(L3D.StartCanvas.Black);
 
     // Bind previewer to renderer (for fixed option)
@@ -186,6 +187,8 @@ function render() {
     camera1.update(isNaN(currentTime) ? 20 : currentTime);
     previousTime = Date.now();
 
+    Coin.update();
+
     // Update the recommendations
     recommendations.map(function(reco) { reco.update(camera1);});
 

js/l3d/apps/prototype/tutorial/TutorialSteps.js

@@ -238,8 +238,8 @@ TutorialSteps.prototype.nextAction = function() {
         case  5: return 'rotate-keyboard';
         case 11: return 'translate-keyboard';
         case 13: return 'reset-camera';
-        case 15: // Fallthrough
+        case 15: return 'recommendation';
-        case 16: // Fallthrough
+        case 16: return;
         case 17: return 'recommendation';
     }
 };

js/l3d/apps/prototype/tutorial/main.js

@@ -54,7 +54,7 @@ function main() {
     // Set the good size of cameras
     onWindowResize();
 
-    Coin.update();
+    Coin.update(true);
 
     // Start tutorial
     tutorial.setCameras(recommendations);
@@ -83,6 +83,7 @@ function main() {
     setInterval(function() {logfps(stats.getFps());}, 500);
 
     Coin.onLastCoin = function() {
+        Coin.blink();
         $('#next').click(function() {
             window.location = '/before-begin';
         });

js/l3d/src/cameras/PointerCamera.js

@@ -339,8 +339,8 @@ L3D.PointerCamera.prototype.normalMotion = function(time) {
 
     if ( this.isLocked() || this.dragging) {
 
-        this.theta += (this.mouseMove.x * time / 20);
+        this.theta += (this.mouseMove.x); //  * Math.sqrt(time) / Math.sqrt(20));
-        this.phi   -= (this.mouseMove.y * time / 20);
+        this.phi   -= (this.mouseMove.y); //  * Math.sqrt(time) / Math.sqrt(20));
 
         this.mouseMove.x = 0;
         this.mouseMove.y = 0;
@@ -630,8 +630,8 @@ L3D.PointerCamera.prototype.onMouseMove = function(event) {
         this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
         this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
 
-        this.mouseMove.x = this.mouse.x - mouse.x;
+        this.mouseMove.x = (this.mouse.x - mouse.x) * 4;
-        this.mouseMove.y = this.mouse.y - mouse.y;
+        this.mouseMove.y = (this.mouse.y - mouse.y) * 4;
 
         this.mouseMoved = true;
     }
@@ -648,8 +648,8 @@ L3D.PointerCamera.prototype.onMouseMovePointer = function(e) {
         this.mouseMove.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
         this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
 
-        this.mouseMove.x *= -(this.sensitivity/5);
+        this.mouseMove.x *= -(this.sensitivity/10);
-        this.mouseMove.y *=  (this.sensitivity/5);
+        this.mouseMove.y *=  (this.sensitivity/10);
 
         this.mouseMoved = true;
 

lib/vcode.js

@@ -1,13 +1,8 @@
 var hash = require('sha256');
 var secretKey = require('../private.js').microSecretKey;
+var campaignId = require('../private.js').microCampaignId;
 
-module.exports = function(workerId, campaignId) {
+module.exports = function(workerId) {
-
-    if (campaignId === undefined) {
-
-        return 'mw-dummyvcode';
-
-    }
 
     return 'mw-' + hash(campaignId + workerId + secretKey);