From 3d007e88775cdfe1242ecd5fcec5b37885cc8ef1 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Thu, 1 Oct 2015 15:24:32 +0200 Subject: [PATCH] Client modification : score bar blinking when finished --- controllers/thankyou/index.js | 1 - js/l3d/apps/prototype/Coin.js | 66 ++++++++++++++++--- js/l3d/apps/prototype/GlobalFunctions.js | 1 + js/l3d/apps/prototype/interactive/main.js | 5 +- .../apps/prototype/tutorial/TutorialSteps.js | 4 +- js/l3d/apps/prototype/tutorial/main.js | 3 +- js/l3d/src/cameras/PointerCamera.js | 12 ++-- lib/vcode.js | 9 +-- 8 files changed, 74 insertions(+), 27 deletions(-) diff --git a/controllers/thankyou/index.js b/controllers/thankyou/index.js index d83310c..fb4accc 100644 --- a/controllers/thankyou/index.js +++ b/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); }); diff --git a/js/l3d/apps/prototype/Coin.js b/js/l3d/apps/prototype/Coin.js index 4a68c5e..6296592 100644 --- a/js/l3d/apps/prototype/Coin.js +++ b/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'); diff --git a/js/l3d/apps/prototype/GlobalFunctions.js b/js/l3d/apps/prototype/GlobalFunctions.js index 05f0cba..064f3a2 100644 --- a/js/l3d/apps/prototype/GlobalFunctions.js +++ b/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; diff --git a/js/l3d/apps/prototype/interactive/main.js b/js/l3d/apps/prototype/interactive/main.js index e45bf5d..17a4cd8 100644 --- a/js/l3d/apps/prototype/interactive/main.js +++ b/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);}); diff --git a/js/l3d/apps/prototype/tutorial/TutorialSteps.js b/js/l3d/apps/prototype/tutorial/TutorialSteps.js index 2fa3dfa..b6d1ad8 100644 --- a/js/l3d/apps/prototype/tutorial/TutorialSteps.js +++ b/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 16: // Fallthrough + case 15: return 'recommendation'; + case 16: return; case 17: return 'recommendation'; } }; diff --git a/js/l3d/apps/prototype/tutorial/main.js b/js/l3d/apps/prototype/tutorial/main.js index dc45eea..1f28d22 100644 --- a/js/l3d/apps/prototype/tutorial/main.js +++ b/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'; }); diff --git a/js/l3d/src/cameras/PointerCamera.js b/js/l3d/src/cameras/PointerCamera.js index 002de05..f43d7ad 100644 --- a/js/l3d/src/cameras/PointerCamera.js +++ b/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.phi -= (this.mouseMove.y * time / 20); + this.theta += (this.mouseMove.x); // * Math.sqrt(time) / Math.sqrt(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.y = this.mouse.y - mouse.y; + this.mouseMove.x = (this.mouse.x - mouse.x) * 4; + 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.y *= (this.sensitivity/5); + this.mouseMove.x *= -(this.sensitivity/10); + this.mouseMove.y *= (this.sensitivity/10); this.mouseMoved = true; diff --git a/lib/vcode.js b/lib/vcode.js index be22910..624e60c 100644 --- a/lib/vcode.js +++ b/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) { - - if (campaignId === undefined) { - - return 'mw-dummyvcode'; - - } +module.exports = function(workerId) { return 'mw-' + hash(campaignId + workerId + secretKey);