Client modification : score bar blinking when finished
This commit is contained in:
parent
aa76fed43a
commit
3d007e8877
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
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');
|
||||
|
|
|
@ -171,6 +171,7 @@ function appendTo(container) {
|
|||
}
|
||||
|
||||
function setNextButton(target) {
|
||||
Coin.blink();
|
||||
$('#next').show();
|
||||
$('#next').click(function() {
|
||||
window.location = target;
|
||||
|
|
|
@ -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);});
|
||||
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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';
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in New Issue