I am making a game with the Phaser-framework and I am coding automatic tests with Jasmine. All works fine in this code exept the function beforeAll() (called after a it (spec)) The console prints:
test2
test
when it should print test test2. I tried the beforeEach() but it does not make any difference.
describe("Hit Box", function() {
var collide = false;
beforeAll(function() {
game = new Phaser.Game(400, 400, Phaser.AUTO, '', { preload: preload, create: create, render:render}, false, true);
function preload() {
game.load.image('blue', 'assets/magicien100.png');
game.load.image('fire_ball', 'assets/red.png');
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.setBounds(0, 0, 400, 400);
game.dummyPlayer = game.add.sprite(100,100,'blue');
game.dummyPlayer.width = 100;
game.dummyPlayer.height = 100;
game.physics.arcade.enable(game.dummyPlayer);
game.dummySpell = game.add.sprite(50, 50, 'fire_ball');
game.dummySpell.width = 75;
game.dummySpell.height = 75;
game.physics.arcade.enable(game.dummySpell);
game.debug.spriteBounds(game.dummyPlayer);
game.debug.spriteBounds(game.dummySpell);
if (game.physics.arcade.overlap(game.dummyPlayer, game.dummySpell)) {
collide = true;
console.log('test');
}
}
function render(){
game.debug.spriteBounds(game.dummyPlayer);
game.debug.spriteBounds(game.dummySpell);
}
});
it("Should have a collision", function() {
expect(collide).toBe(true);
console.log('test2');
});
});
If Phaser.Game is asynchronous, it may still be creating when the it function is run.
Try returning a promise from the beforeAll:
describe("Hit Box", function() {
var collide = false;
beforeEach(function() {
return new Promise(function(resolve, reject) {
game = new Phaser.Game(400, 400, Phaser.AUTO, '', { preload: preload, create: create, render:render}, false, true);
function preload() {
// preload code
}
function create() {
// create code
resolve(); // to complete the promise
}
});
});
Related
I want to create a PWA which acts as a bar- and QR-code scanner. For detecting QR-codes I use jsQR (see: https://github.com/cozmo/jsQR), for barcodes, I want to use QuaggaJS (see: https://serratus.github.io/quaggaJS/). To select the type of code that should be detected, I have some radio buttons on my site, which call the function "triggerScannerInitialisation()" (see below). Scanning QR-codes is working already, but scanning barcodes causes some problems. The camera image is not loaded properly. If I run the same code on testing site that only uses QuaggaJS, scanning barcodes works as it should do. I assume that opening two camera streams from the same camera may cause a problem. Can anyone give me a hint on how to use both with the same camera stream?
// variables for stopping scanner types on next run
let stopJsQrOnNextRun = true;
function triggerScannerInitialisation() {
// get the selected code type
let codeTypeSelector = document.querySelector('input[name="code_type_selector"]:checked').value;
switch (codeTypeSelector) {
case 'barcode':
stopJsQrOnNextRun = true;
startQuaggaJs();
break;
case 'qr':
stopQuaggaJs();
stopJsQrOnNextRun = false;
startJsQr();
break;
default:
return false;
}
}
function startQuaggaJs() {
document.getElementById("barcode_camera_div").hidden = false;
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#barcode_camera_div'),
constraints: {
width: 480,
height: 320,
facingMode: "environment"
},
},
decoder: {
readers: [
"code_128_reader",
"ean_reader",
"ean_8_reader",
"code_39_reader",
"code_39_vin_reader",
"codabar_reader",
"upc_reader",
"upc_e_reader",
"i2of5_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
Quagga.onProcessed(function (result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
Quagga.onDetected(function (result) {
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
});
}
function stopQuaggaJs() {
// stop quagga JS
Quagga.stop();
document.getElementById("barcode_camera_div").hidden = true;
}
function startJsQr() {
let video = document.createElement("video");
let canvasElement = document.getElementById("canvas");
let canvas = canvasElement.getContext("2d");
let loadingMessage = document.getElementById("loadingMessage");
function drawLine(begin, end, color) {
canvas.beginPath();
canvas.moveTo(begin.x, begin.y);
canvas.lineTo(end.x, end.y);
canvas.lineWidth = 4;
canvas.strokeStyle = color;
canvas.stroke();
}
// Use facingMode: environment to attemt to get the front camera on phones
navigator.mediaDevices.getUserMedia({video: {facingMode: "environment"}}).then(function (stream) {
video.srcObject = stream;
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
video.play();
console.log("JSQR triggered");
requestAnimationFrame(tickQRcode);
});
function tickQRcode() {
loadingMessage.innerText = "⌛ Video laden...";
if (video.readyState === video.HAVE_ENOUGH_DATA) {
loadingMessage.hidden = true;
canvasElement.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
let imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
let code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (code) {
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
codeFound(code.data, 'qr');
}
}
if (!stopJsQrOnNextRun) {
requestAnimationFrame(tickQRcode);
} else {
stopJsQr();
}
}
function stopJsQr() {
// stop the stream
video.srcObject.getTracks().forEach(function (track) {
if (track.readyState === 'live') {
track.stop();
}
});
// remove HTML element properties
let canvasElement = document.getElementById('canvas');
canvasElement.setAttribute('hidden', 1);
canvasElement.removeAttribute('height');
canvasElement.removeAttribute('width');
}
}
Thank you for your help!
I have a spawn function which performs some task. Before the function returns, I would like to delay some another function call.
I tried using time.addEvent but with no luck as it does not seem to work within the spawn function. However the timer works perfectly inside the create function.
My code so far:
create(){
newMethod = spawn.bind(this);
newMethod();
}
function spawn(){
//do stuff
timer = this.time.addEvent({
delay: 3000,
callback: functionDelay,
loop: false
});
}
function functionDelay(){
console.log("Works!");
}
var delayText;
var delayedEvent;
class myScene extends Phaser.Scene {
constructor (config)
{
super(config);
}
preload ()
{
this.load.image('dude', 'sprites/phaser-dude.png')
}
create ()
{
delayText = this.add.text(50, 50);
delayedEvent = this.time.delayedCall(3000, this.spawn, [], this);
}
spawn()
{
var sprite = this.add.sprite(300, 50, 'dude')
}
update()
{
delayText.setText('Event.progress: ' + delayedEvent.getProgress().toString().substr(0, 4));
}
}
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
loader: {
baseURL: 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets#v2.0.0/assets/',
crossOrigin: 'anonymous'
},
width: 800,
height: 600
};
var game = new Phaser.Game(config);
game.scene.add('myScene', myScene, true);
<script src="//cdn.jsdelivr.net/npm/phaser#3.17.0/dist/phaser.min.js"></script>
I want to create a window and when it is created, run a function that has been pre-loaded. I do have to wait until the window is created, otherwise the function is not available and fails. And I'd say I can do it with a promise.
How to do it? Here there's the code with my attempt to do it
one().then(function() {
new_panel.contentWindow.load_content(something);
})
function one() {
var promise = chrome.app.window.create('empty.html',
{
id: 'protein_panel',
outerBounds: {
width: 300,
height: 800,
},
},
function(createdWindow) {
createdWindow.contentWindow.load_content = function(data) {
createdWindow.contentWindow.document.getElementById('loading_content').appendChild(data);
}
new_panel = createdWindow;
});
return promise;
}
It complains about the then of the one() function: Uncaught TypeError: Cannot read property 'then' of undefined
UPDATE: Slightly modified code, still doesn't work, I've used the promise from angular since I'm using it
one().then(function() {
new_panel.contentWindow.load_content(something);
})
function one() {
return chrome.app.window.create('empty.html',
{
id: 'protein_panel',
outerBounds: {
width: 300,
height: 800,
},
},
function(createdWindow) {
createdWindow.contentWindow.load_content = function(data) {
createdWindow.contentWindow.document.getElementById('loading_content').appendChild(data);
}
new_panel = createdWindow;
var deferred = $q.defer();
deferred.resolve();
console.log(deferred.promise)
return deferred.promise;
});
}
In theory, deferred.promise should only be returned when it is resolved, but it is like the then() function is executed before it actually happens. Why?
UPDATE2: or another way to do the same (doesn't work either)
one();
function one() {
chrome.app.window.create('empty.html',
{
id: 'protein_panel',
outerBounds: {
width: 300,
height: 800,
},
},
function(createdWindow) {
createdWindow.contentWindow.load_content = function(data) {
createdWindow.contentWindow.document.getElementById('loading_content').appendChild(data);
}
new_panel = createdWindow;
var deferred = $q.defer();
deferred.resolve();
console.log('first '+deferred.promise)
return deferred.promise;
}).then(function() {
console.log('second')
new_panel.contentWindow.load_content(something);
});
}
The log 'second' is printed before 'first'. Is there anything wrong with the code?
You want to synchronously return a promise from one() and resolve the promise with the new window once it has been created:
one().then(function(createdWindow) {
// Window has been created
createdWindow.contentWindow.load_content(something);
})
function one() {
// create a promise
var deferred = $q.defer();
chrome.app.window.create('empty.html',
{
id: 'protein_panel',
outerBounds: {
width: 300,
height: 800,
},
},
function(createdWindow) {
// resolve our promise and pass the window to the `then` block
deferred.resolve(createdWindow)
});
// synchronously return a promise
return deferred.promise;
}
Having a few teething problems with $.deferred, $.when and $.done.
I'm calling a method which has a couple of tasks inside on a timer. I'm looking at getting a callback when everything inside this method has completed, including the stuff in timers, so started looking at $.when() and $.done() to achieve this.
The problem I am getting is the function is firing before the tasks have completed, immediately as the method is called. So, I started playing with $.deferred and resolve(), but haven't managed to get anything working. Without the timers, I can do it.
This is where I call the method:
$.when(cover.start()).done(function() {
console.log("Cover has started.");
});
This is the entire method:
return {
other: function() {},
start: function() {
var dfd = $.Deferred();
el.filter.animate({
"opacity": "0.6", "filter": "alpha(opacity=60)"
}, 2000, "easeInOutCirc", function() {
el.share.removeClass('fa-spin');
setTimeout(function() {
el.share.removeClass('fa-cog').addClass('fa-bars');
},1000);
setTimeout(function() {
el.scroll.animate({
"opacity": "1",
"bottom": "40px"
}, 1200, "easeOutBounce", function() {
var pulseOptions = { opacity: "0" };
setTimeout(function() {
el.scroll.pulse(pulseOptions, {
duration : 400,
pulses: 3,
interval: 500,
returnDelay: 800
});
}, 2000);
dfd.resolve();
});
}, 2000);
return dfd.promise();
});
}
} // end return
As you can see, after my original attempt failed, I added dfd.resolve() to where I want the callback and tried to return the promise. However, the function still fires too early. Where am I going wrong?
The problem is, you need to return promise from the start method
return {
other: function () {},
start: function () {
var dfd = $.Deferred();
el.filter.animate({
"opacity": "0.6",
"filter": "alpha(opacity=60)"
}, 2000, "easeInOutCirc", function () {
el.share.removeClass('fa-spin');
setTimeout(function () {
el.share.removeClass('fa-cog').addClass('fa-bars');
}, 1000);
setTimeout(function () {
el.scroll.animate({
"opacity": "1",
"bottom": "40px"
}, 1200, "easeOutBounce", function () {
var pulseOptions = {
opacity: "0"
};
setTimeout(function () {
el.scroll.pulse(pulseOptions, {
duration: 400,
pulses: 3,
interval: 500,
returnDelay: 800
});
}, 2000);
dfd.resolve();
});
}, 2000);
});
//need to return from start
return dfd.promise();
}
} // end return
Not fishing to steal APJ's rep' but out of interest, you could avoid callback hell by exploiting .delay() and .promise(), both of which relate to the default "fx" animation queue.
Something along the following lines would fix the problem, and would be more readable :
//animation maps
var maps = [];
maps[0] = { 'opacity':0.6, 'filter':'alpha(opacity=60)' };
maps[1] = { 'opacity':1, 'bottom':'40px' };
maps[2] = { 'opacity':0 };
maps[3] = { 'duration':400, 'pulses':3, 'interval':500, 'returnDelay':800 };
//animation functions
var f = [];
f[0] = function () {
return el.filter.animate(maps[0], 2000, "easeInOutCirc").promise();
};
f[1] = function () {
return el.share.removeClass('fa-spin').delay(1000).promise();
};
f[2] = function () {
return el.share.removeClass('fa-cog').addClass('fa-bars').delay(1000).promise();
};
f[3] = function () {
el.scroll.animate(maps[1], 1200, "easeOutBounce").promise();
}
f[4] = function () {
return el.scroll.delay(2000).promise();//delay() could be called on any element. `el.scroll` is arbitrary.
};
f[5] = function () {
el.scroll.pulse(maps[2], maps[3]);
};
return {
other: function () {},
start: function () {
//animation sequence
var p = f[0]().then(f[1]).then(f[2]).then(f[3]);
p.then(f[4]).then(f[5]);
return p;//<<<< and here's the all important return
}
}
Not sure this is 100% correct - might need some work.
It's worth noting that there are performance pros and cons with this approach :
Pros: Reusable animation maps; Reusable functions;
Cons: More liberal use of promises will cause a larger memory spike.
I have this code:
function voteNewWindow(mailNum) {
chrome.windows.create({
url: 'http://www.google.com',
incognito: true
}, function (window) {
console.log('created ' + window.id);
chrome.tabs.query({
active: true,
windowId: window.id
}, function (tabs) {
var tab = tabs[0];
chrome.tabs.executeScript(tab.id, {
file: "jquery-2.1.1.min.js"
}, function () {
chrome.tabs.executeScript(tab.id, {
file: "content_script.js"
}, function () {
chrome.tabs.sendMessage(tab.id, {
email: JSON.parse(localStorage.mailList)[mailNum]
}, function (response) {
console.log(response);
chrome.windows.remove(window.id);
console.log('window ' + window.id + " removed");
});
});
});
});
});
}
function execute() {
for (var i = 0; i < JSON.parse(localStorage.mailList).length; i++) {
voteNewWindow(i);
}
}
The problem is that all windows open at the same time. I want a window to open only when the one before is closed. I want voteNewWindow() to finish all it has to do before another voteNewWindow() executes.
Any help would be appreciated. Thanks
JavaScript Promises to the rescue!
function voteNewWindow(mailNum) {
return function(){
return new Promise( function (resolve, reject){
chrome.windows.create({
/* ... */
}, function (response) {
console.log(response);
chrome.windows.remove(response.id);
console.log('window ' + response.id + " removed");
resolve(); // Proceed to the next
});
/* ... */
}
}
}
function execute() {
var sequence = Promise.resolve();
for (var i = 0; i < JSON.parse(localStorage.mailList).length; i++) {
sequence = sequence.then(voteNewWindow(i));
}
}
See this section to understand what's happening here. Basically, we're creating a chain of Promises glued together by then, which ensures the next one will start executing only after the previous one has finished.
If you need to do any other action after execute(), put it at the end of the sequence:
function execute(callback) {
var sequence = Promise.resolve();
for (var i = 0; i < JSON.parse(localStorage.mailList).length; i++) {
sequence = sequence.then(voteNewWindow(i));
}
sequence.then(callback);
}
You can use then-chrome library, that wraps chrome api in promise calls.
And your nested callbacks can be modified to something like this
var thenChrome = require('then-chrome');
function voteNewWindow(mailNum) {
return thenChrome.windows.create({url: 'http://www.google.com', incognito: true})
.then(function(window) {
return thenChrome.tabs.query({active: true, windowId: window.id})
})
.then(function(tabs) {
return tabs[0];
})
.then(function(tab) {
return thenChrome.tabs.executeScript(tab.id, {file: 'jquery.js'});
})
...