I am just starting to use phaser and the first thing I tried doing is to explore 'hello world' with image project that comes as a demo with installation. I have index.html, phaser.png and phaser.min.js in the same location in a folder. I am running Node.js and started it using npm http-server. When I actually do that, all I see if a black square with size 800x600 and nothing else. The code is like his:
<html>
<head>
<meta charset="UTF-8" />
<title>hello phaser!</title>
<script src="phaser.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload () {
game.load.image('logo', 'phaser.png');
}
function create () {
var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
logo.anchor.setTo(0.5, 0.5);
}
};
</script>
</body>
</html>
What is missing here?
You're trying to mix the old style Phaser2 Game constructor while importing Phaser3 so you're callbacks don't work.
See the Phaser3 "Hello World" tutorial here for more working code: https://phaser.io/tutorials/getting-started-phaser3/part5
Related
I am trying to do a hello world example with d3 just to see if I can use the library. To this effect I copied this ultraminimialistic example into vscodes webview example.
This gave me the following code:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vscode = require("vscode");
const d3 = require("d3");
function activate(context) {
// Create and show a new webview
const panel = vscode.window.createWebviewPanel('catCoding', // Identifies the type of the webview. Used internally
'Cat Coding', // Title of the panel displayed to the user
vscode.ViewColumn.One, // Editor column to show the new webview panel in.
{} // Webview options. More on these later.
);
panel.webview.html = getWebviewContent();
d3.select(panel.document).append("span").text("Hello, world!");
context.subscriptions.push(vscode.commands.registerCommand('catCoding.start', () => {
}));
}
exports.activate = activate;
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
d3.select("body").append("span")
.text("Hello, world!");
</script>
</body>
</html>`;
}
// this method is called when your extension is deactivated
function deactivate() { }
exports.deactivate = deactivate;
//# sourceMappingURL=extension.js.map
My expectation was to see a hello world just like int he example, but I see this instead:
There are no alert messages, the problems, output and debug consoles are all fine and even the chrome dev console reports no errors. I am stuck.
There's 2 different attempts at using d3 in here, they both fail, one uses JS directly, the other uses HTML.
I am trying to write a simple Hello world app in react.js using component based approach. So I am using requie.js. I have 4 files in the same folder namely index.html, index.js,world.js and require.js. I am having a script tag in index.html which will load index.js. But I am loading the world.js via require.js using module.exports, which would result in error. Here is my code
index.html
<head>
<script src="https://fb.me/react-0.13.3.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script data-main="index.js" src="require.js"></script>
</script>
</head>
<body>
<script type="text/jsx" src="index.js"></script>
</body>
index.js
var world = require('./world');
var Hello = React.createClass({
render:function(){
return (<div>
<div>Hello,</div>
<world/>
</div>)
}
})
var element = React.createElement(Hello);
React.render(element,document.body);
world.js
module.exports = React.createClass({
render: function(){
return (<div>World!</div)
}
})
I am intending to show Hello, World. But I'm getting the following errors
Uncaught SyntaxError: Unexpected token <
fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js:314 You are using the in-browser JSX transformer. Be sure to precompile your JSX for production - http://facebook.github.io/react/docs/tooling-integration.html#jsx
require.js:8 Uncaught Error: Module name "world" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
:8000/index.js:5 Uncaught SyntaxError: Unexpected token <
First of all, the component "world" should start with an upper case. I went ahead and put the code in a single file so that you can see it a little more clear:
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
<script src="https://fb.me/react-0.13.3.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var World = React.createClass({
render: function(){
return (
<div>World!</div>
);
}
});
var Hello = React.createClass({
render:function(){
return (
<div>
<div>Hello,
<World />
</div>
</div>
);
}
});
React.render(<Hello />,document.getElementById('example'));
</script>
</body>
</html>
What I would recommend is that you setup a proper environment for development with node and npm installed. I have a project in github that is a skeleton that you can use to get up and running without having to worry about how it works for now: reactjs skeleton.
I hope this helps!
There are at least three issues here. First, you are not using the correct require syntax for asynchronous loading. Your index.js should be:
define(['world'], function(world) {
var Hello = React.createClass({
render:function(){
return (<div>
<div>Hello,</div>
<world/>
</div>)
}
})
var element = React.createElement(Hello);
React.render(element,document.body);
});
Second, since index.js and world.js are jsx files, requirejs needs a plugin that will tell it that. Something like:
https://github.com/philix/jsx-requirejs-plugin
Finally, since you are loading index.js via requirejs, you don't need:
<script type="text/jsx" src="index.js"></script>
Using canvas#1.2.3 & jsdom#3.1.2 with node v0.12.2, I'm getting an error while trying to use the canvas toDataURL() function.
canvasTest.js:
$(function(){
var canvas = $('<canvas></canvas>').attr({'id':'canvasTest', 'width':'500', 'height':'500'});
var ctx=canvas[0].getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
$('#canvasWrap').append(canvas);
});
HTML Test:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="canvasTest.js"></script>
<script type="text/javascript">
$(function(){
console.log($('body').html());
console.log($('#canvasTest').length);
console.log($('#canvasTest')[0].toDataURL());
})
</script>
</head>
<body>
<div id="canvasWrap"></div>
</body>
</html>
jsdom Test:
var canvas = require('canvas');
var jsdom = require('jsdom');
jsdom.env({
html: '<html><body><div id="canvasWrap"></div></body></html>',
scripts: ['127.0.0.1/jquery-2.1.4.min.js','127.0.0.1/canvasTest.js'],
done:function (err,win) {
var $ = win.jQuery;
$(function(){
console.log($('body').html());
console.log($('#canvasTest').length);
console.log($('#canvasTest')[0].toDataURL());
});
}
});
On my HTML Test in Chrome I get the correct base64-encoded canvas data, while in node.js, the error reads:
TypeError: Cannot read property 'toDataURL' of undefined
You are selecting by ID, so there is no array. Drop the [0] and it should work, or select it another way, with an array:
console.log($('canvas')[0].toDataURL());
or try this:
console.log($('#canvasTest').toDataURL());
or this:
console.log(win.$("#canvasTest").toDataURL());
or this:
console.log(win.document.getElementById("canvasTest").toDataURL());
or this:
console.log(win.document.getElementsByTagName("canvas")[0].toDataURL());
I have a html that looks like this:
<head>
<script src="../js/vendor/jquery-2.1.0.js"></script>
<script src="../js/vendor/react.js"></script>
<script src="../js/jsx/todo.js"></script>
</head>
<body>
<div id="ola"></div>
<script src="../js/popup.js"></script>
</body>
My todo.js is the compiled version TODO app from http://facebook.github.io/react/ minus the last line.
My last popup.js is:
$(function() {
React.renderComponent(TodoApp, document.getElementById('ola'));
})
But the page shows nothing! The console shows an error:
Uncaught TypeError: Object function (props, children) {
var instance = new Constructor();
instance.construct.apply(instance, arguments);
return instance;
} has no method 'mountComponentIntoNode' react.js:10052
I really don't know why is that, I've just tried to recreate from the example in the website. If it matters, it is in a chrome extension.
Ahhh got one line wrong on render!
popup.js should be:
React.renderComponent(TodoApp(), document.getElementById('ola'));
I'm using Yeoman to scaffold my project. It comes with several handy things, including a PhantomJS-based test runner.
My problem is that while my tests run correctly in the browser, they time out while trying to run them with PhantomJS in the CLI.
Here's how my test index.html looks like:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mocha Spec Runner</title>
<link rel="stylesheet" href="lib/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="lib/mocha/mocha.js"></script>
<!-- assertion framework -->
<script src="lib/chai.js"></script>
<!-- include source files here... -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<script>
mocha.setup({ui: 'bdd', ignoreLeaks: true});
expect = chai.expect;
should = chai.should();
require(['../spec/map.spec'], function () {
setTimeout(function () {
require(['../runner/mocha']);
}, 100);
});
</script>
</body>
</html>
Here's map.spec.js:
require(['map'], function (Map) {
describe('Choropleth Map Generator', function() {
describe('Configure the map', function () {
it("should enforce mandatory parameters in the configuration", function () {
var config = {title: 'test configuration'};
var map = new Map(config);
(function () {
map.getConfig();
}).should.throw(Error);
});
});
});
});
Now, when I do yeoman test, I get this:
Running "server:phantom" (server) task
Starting static web server on port 3501
[...]
Running "mocha:all" (mocha) task
Testing index.html
<WARN> PhantomJS timed out, possibly due to a missing Mocha run() call. Use --force to continue. </WARN>
Aborted due to warnings.
As I said, yeoman server:test shows my assertions correctly in the browser.
I'm using Yeoman 0.9.6 and PhantomJS 1.7.0. Any help is appreciated.
I solved that same warning by double-checking the path to mocha in test/index.html
<link rel="stylesheet" href="lib/mocha/mocha.css">
</head>
<body>
<div id="mocha"></div>
<script src="lib/mocha/mocha.js"></script>
What is your mocha config In Gruntfile. Do you have something like:
mocha: {
all: ['http://localhost:3501/index.html']
},