Client modification : score bar blinking when finished

This commit is contained in:
Thomas FORGIONE 2015-10-01 15:24:32 +02:00
parent aa76fed43a
commit 3d007e8877
8 changed files with 74 additions and 27 deletions

View File

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

View File

@ -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(); var _toto = new Audio();
Coin.extension = _toto.canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3"; Coin.extension = _toto.canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3";
@ -27,6 +36,9 @@ Coin.domElement.style.top = "0px";
Coin.domElement.style.left = "0px"; Coin.domElement.style.left = "0px";
Coin.lvl = 0; Coin.lvl = 0;
Coin.blinking = false;
Coin.blinkingToRed = true;
Coin.colorInstant = 0;
Coin.setSize = function(width,height) { Coin.setSize = function(width,height) {
this.domElement.width = width; this.domElement.width = width;
@ -52,12 +64,33 @@ Coin.update = function() {
var x; var x;
try { try {
x = containerSize.width() * 4.75 / 5; x = containerSize.width() * 4.75 / 5;
if (Coin.domElement.width === undefined) {
Coin.domElement.width = containerSize.width(); Coin.domElement.width = containerSize.width();
Coin.domElement.height = containerSize.height(); Coin.domElement.height = containerSize.height();
}
} catch (e) { } catch (e) {
return; 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.domElement.width = Coin.domElement.width;
// Coin.ctx.drawImage(Coin.image, x + 75,25,30,30); // Coin.ctx.drawImage(Coin.image, x + 75,25,30,30);
@ -73,16 +106,18 @@ Coin.update = function() {
// Coin.ctx.stroke(); // Coin.ctx.stroke();
// Coin.ctx.fill(); // Coin.ctx.fill();
Coin.domElement.width = Coin.domElement.width;
var width = 10; var width = 10;
var height = 100; var height = 100;
var lvl = Coin.lvl; 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.fillRect(x,20 + (1-lvl)*height,10,(lvl*height));
Coin.ctx.beginPath(); Coin.ctx.beginPath();
@ -91,25 +126,38 @@ Coin.update = function() {
Coin.ctx.lineTo(x+width,120); Coin.ctx.lineTo(x+width,120);
Coin.ctx.lineTo(x+width,20); Coin.ctx.lineTo(x+width,20);
Coin.ctx.stroke(); Coin.ctx.stroke();
Coin.ctx.closePath();
Coin.ctx.fillStyle = 'black'; Coin.ctx.fillStyle = 'black';
Coin.ctx.font="20px Arial"; Coin.ctx.font="20px Arial";
Coin.ctx.fillText('Score', x - 60, 25); Coin.ctx.fillText('Score', x - 60, 25);
Coin.ctx.restore();
}; };
setInterval(function() {
Coin.update();
}, 50);
Coin.set = function() { Coin.set = function() {
var newLvl = Coin.total / Coin.max; var newLvl = Coin.total / Coin.max;
Coin.lvl+=0.01*Math.sign(newLvl-Coin.lvl); Coin.lvl+=0.01*Math.sign(newLvl-Coin.lvl);
if (Math.abs(Coin.lvl-newLvl) > 0.005) { if (Math.abs(Coin.lvl-newLvl) > 0.005) {
Coin.update(); Coin.shouldUpdate = true;
setTimeout(function() { setTimeout(function() {
Coin.set(newLvl); Coin.set(newLvl);
},50); },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.image.onload = Coin.update;
Coin.ctx = Coin.domElement.getContext('2d'); Coin.ctx = Coin.domElement.getContext('2d');

View File

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

View File

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

View File

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

View File

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

View File

@ -339,8 +339,8 @@ L3D.PointerCamera.prototype.normalMotion = function(time) {
if ( this.isLocked() || this.dragging) { 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.x = 0;
this.mouseMove.y = 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.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.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; 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.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 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; this.mouseMoved = true;

View File

@ -1,13 +1,8 @@
var hash = require('sha256'); var hash = require('sha256');
var secretKey = require('../private.js').microSecretKey; 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); return 'mw-' + hash(campaignId + workerId + secretKey);