├── .gitignore
├── Gruntfile.js
├── README.md
├── app.js
├── bin
└── www
├── package.json
├── public
├── app
│ ├── components
│ │ ├── alt
│ │ │ ├── alt.components.js
│ │ │ ├── alt.components.js.map
│ │ │ └── alt.components.ts
│ │ ├── app
│ │ │ ├── app.components.js
│ │ │ ├── app.components.js.map
│ │ │ └── app.components.ts
│ │ ├── home
│ │ │ ├── home.components.js
│ │ │ ├── home.components.js.map
│ │ │ └── home.components.ts
│ │ └── routes
│ │ │ ├── app.routes.js
│ │ │ ├── app.routes.js.map
│ │ │ └── app.routes.ts
│ ├── main.js
│ ├── main.js.map
│ ├── main.ts
│ └── stylesheets
│ │ └── style.css
├── gameDemo
│ ├── demo.js
│ └── phaser_logo.png
├── package.json
├── stylesheets
│ └── style.css
├── systemjs.config.js
└── tsconfig.json
├── routes
├── api.js
└── index.js
├── tsconfig.json
└── views
├── error.jade
└── index.jade
/.gitignore:
--------------------------------------------------------------------------------
1 | OS generated files #
2 | ######################
3 | .DS_Store
4 | .DS_Store?
5 | ._*
6 | .Trashes
7 | ehthumbs.db
8 | Thumbs.db
9 |
10 | # PACKAGES #
11 | ######################
12 | node_modules/
13 | bower_components/
14 | public/node_modules/
15 | public/bower_components/
16 |
17 | # FILES #
18 | ######################
19 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function(grunt) {
2 |
3 | // required
4 | require('load-grunt-tasks')(grunt);
5 | require('time-grunt')(grunt);
6 |
7 | // grunt plugins
8 | grunt.loadNpmTasks('grunt-contrib-watch');
9 | grunt.loadNpmTasks('grunt-nodemon');
10 |
11 |
12 | // Project configuration.
13 | grunt.initConfig({
14 |
15 | //-------------
16 | concurrent: {
17 | options:{
18 | limit: 10,
19 | logConcurrentOutput: true
20 | },
21 | watch: [
22 | 'shell:start', 'watch:reloads', 'nodemon:dev'
23 | ]
24 | },
25 | //-------------
26 |
27 |
28 |
29 | //-------------
30 | watch: {
31 |
32 | //------------------
33 | reloads: {
34 | files: [
35 | 'views/*.*',
36 | 'public/app/**/*.*',
37 | ],
38 | options: {
39 | livereload: 35729, // https://github.com/gruntjs/grunt-contrib-watch#optionslivereload
40 | spawn: false
41 | },
42 | },
43 | //------------------
44 | },
45 | //-------------
46 |
47 |
48 | //--------------------------
49 | /* WATCHES FOR CHANGES ON APP.JS FILE */
50 | nodemon: {
51 | dev: {
52 | script: 'app.js'
53 | },
54 | },
55 | //--------------------------
56 |
57 |
58 | //-------------
59 | shell: {
60 | options: {
61 | stderr: false,
62 | maxBuffer: Infinity
63 | },
64 | start: {
65 | command: 'npm start'
66 | }
67 | }
68 | //-------------
69 |
70 | });
71 |
72 |
73 | // ***** GRUNT COMMANDS *******//
74 | //*****************************//
75 |
76 |
77 | // -------------------
78 | grunt.registerTask('default', ['concurrent:watch']);
79 | // -------------------
80 |
81 | //*****************************//
82 |
83 | };
84 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Phaser - Angular 2 Demo Seed Project
2 |
3 | ### Live Preview
4 | [Click here](https://phaser-angular2-demo.herokuapp.com/)
5 |
6 | ### Why?
7 | Start making games now with Angular2 and Phaser! Seed project is a MEAN stack but all you have to do to start building a game is:
8 |
9 | ```
10 | git clone https://github.com/allenRoyston/phaser-angular2-demo.git
11 | cd phaser-angular2-demo
12 | npm install
13 | npm start
14 |
15 | // open a browser and enter localhost:3000
16 | ```
17 |
18 | This will install everything and start a local server. From here, start making the game of your dreams. A few tips to help you get started.
19 |
20 | ### Getting Started
21 |
22 | - I'd recommend looking over the [Phaser.io](http://phaser.io/ "Phaser.io") website. You can copy and paste a lot of sample code to get your footing before diving in.
23 | - I'd start with modifying the sample game file located in public/app/gameDemo/demo.js. This is where your game logic will live, and it's completely abstracted from how your site operates (so you can build them independently).
24 | - The sample game file is structured around preloading assets, loading screens, and then the game cycle. It takes a lot to make a game, but this should give you a solid foundational start.
25 | - Lastly, I'd also recommend giving the [directive itself](httpshttps://github.com/allenRoyston/ang2-phaser) a once over.
26 | - I know this isn't exactly beginner friendly so I'll try and add a better guide in the future. Just know that you can [make some really awesome stuff](https://www.angularattack.com/entries/1181-totally-not-a-robot/launch) once you have the basics down. That entry was made in roughly 38 hours.
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | // express setup
2 | var express = require('express'),
3 | path = require('path');
4 |
5 | // npm modules
6 | var favicon = require('serve-favicon'),
7 | logger = require('morgan'),
8 | cookieParser = require('cookie-parser'),
9 | bodyParser = require('body-parser'),
10 | os = require('os'),
11 | compression = require('compression');
12 |
13 | // routes
14 | var site = require('./routes/index'),
15 | api = require('./routes/api'),
16 | router = express.Router();
17 |
18 | // app
19 | var app = express();
20 |
21 | // view engine setup
22 | app.set('view engine', 'jade');
23 |
24 | // uncomment after placing your favicon in /public
25 | //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
26 | app.use(compression()); // https://www.npmjs.com/package/compression
27 | app.use(require('prerender-node')); // https://prerender.io/
28 | app.use(logger('dev'));
29 | app.use(bodyParser.json());
30 | app.use(bodyParser.urlencoded({ extended: false }));
31 | app.use(cookieParser());
32 | app.use(express.static(path.join(__dirname, 'public')));
33 |
34 | // pathing
35 | app.use('/node_modules', express.static(__dirname + '/node_modules'));
36 |
37 | // route middleware that will happen on every request
38 | router.use(function(req, res, next) {
39 |
40 | //-------------------
41 | if(req.headers.host == 'localhost:3000'){
42 | req.enviroment = "development";
43 | }else{
44 | req.enviroment = "production";
45 | }
46 | //-------------------
47 |
48 | //------------------- user detection
49 | var ua = req.header('user-agent');
50 |
51 | // detect mobile
52 | if(/mobile/i.test(ua)) {
53 | isMobile = true;
54 | } else {
55 | isMobile = false;
56 | }
57 |
58 | // detect iPhone
59 | if(/iPhone/i.test(ua)) {
60 | isIphone = true;
61 | } else {
62 | isIphone = false;
63 | }
64 |
65 | // detect iPhone
66 | if(/iPad/i.test(ua)) {
67 | isIpad = true;
68 | } else {
69 | isIpad = false;
70 | }
71 |
72 | // detect Android
73 | if(/Android/i.test(ua)) {
74 | isAndroid = true;
75 | } else {
76 | isAndroid = false;
77 | }
78 | //-------------------
79 |
80 | //-------------------
81 | var device = {
82 | enviroment: req.enviroment,
83 | isMobile: isMobile,
84 | isIphone: isIphone,
85 | isIpad: isIpad,
86 | isAndroid: isAndroid,
87 | userAgent: ua
88 | };
89 | //-------------------
90 |
91 | req.device = device;
92 | next();
93 | })
94 |
95 |
96 | // routing
97 | router.get('/api/v1/', api.endpoint);
98 | router.get('/*', site.home);
99 |
100 |
101 | // initiate
102 | app.use('/', router);
103 |
104 | // 404 and redirect
105 | app.use(function(req, res, next) {
106 | res.redirect("/")
107 | });
108 |
109 | // DEV ERROR
110 | if (app.get('env') === 'development') {
111 | app.use(function(err, req, res, next) {
112 | res.status(err.status || 500);
113 | res.render('error', {
114 | message: err.message,
115 | error: err
116 | });
117 | });
118 | }
119 |
120 | // PRODUCTION ERROR
121 | app.use(function(err, req, res, next) {
122 | res.status(err.status || 500);
123 | res.render('error', {
124 | message: err.message,
125 | error: {}
126 | });
127 | });
128 |
129 | // export app
130 | module.exports = app;
131 |
--------------------------------------------------------------------------------
/bin/www:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | /**
4 | * Module dependencies.
5 | */
6 |
7 | var app = require('../app');
8 | var debug = require('debug')('app:server');
9 | var http = require('http');
10 |
11 | /**
12 | * Get port from environment and store in Express.
13 | */
14 |
15 | var port = normalizePort(process.env.PORT || '3000');
16 |
17 |
18 |
19 | app.set('port', port);
20 |
21 | /**
22 | * Create HTTP server.
23 | */
24 |
25 | var server = http.createServer(app);
26 |
27 | /**
28 | * Listen on provided port, on all network interfaces.
29 | */
30 |
31 | server.listen(port);
32 | server.on('error', onError);
33 | server.on('listening', onListening);
34 |
35 | /**
36 | * Normalize a port into a number, string, or false.
37 | */
38 |
39 | function normalizePort(val) {
40 | var port = parseInt(val, 10);
41 |
42 | if (isNaN(port)) {
43 | // named pipe
44 | return val;
45 | }
46 |
47 | if (port >= 0) {
48 | // port number
49 | return port;
50 | }
51 |
52 | return false;
53 | }
54 |
55 | /**
56 | * Event listener for HTTP server "error" event.
57 | */
58 |
59 | function onError(error) {
60 | if (error.syscall !== 'listen') {
61 | throw error;
62 | }
63 |
64 | var bind = typeof port === 'string'
65 | ? 'Pipe ' + port
66 | : 'Port ' + port;
67 |
68 |
69 | // handle specific listen errors with friendly messages
70 | switch (error.code) {
71 | case 'EACCES':
72 | console.error(bind + ' requires elevated privileges');
73 | process.exit(1);
74 | break;
75 | case 'EADDRINUSE':
76 | console.error(bind + ' is already in use');
77 | process.exit(1);
78 | break;
79 | default:
80 | throw error;
81 | }
82 | }
83 |
84 | /**
85 | * Event listener for HTTP server "listening" event.
86 | */
87 |
88 | function onListening() {
89 | var addr = server.address();
90 | var bind = typeof addr === 'string'
91 | ? 'pipe ' + addr
92 | : 'port ' + addr.port;
93 | debug('Listening on ' + bind);
94 | }
95 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "app",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "node ./bin/www",
7 | "postinstall": "cd public && npm install"
8 | },
9 | "dependencies": {
10 | "body-parser": "~1.13.2",
11 | "compression": "^1.6.1",
12 | "cookie-parser": "~1.3.5",
13 | "debug": "~2.2.0",
14 | "express": "~4.13.1",
15 | "express-useragent": "^0.2.4",
16 | "jade": "~1.11.0",
17 | "mobile-detect": "^1.3.1",
18 | "morgan": "~1.6.1",
19 | "prerender-node": "^2.2.0",
20 | "serve-favicon": "~2.3.0"
21 | },
22 | "devDependencies": {
23 | "better-console": "^0.2.4",
24 | "del": "^2.2.0",
25 | "extend": "^3.0.0",
26 | "grunt-concurrent": "^2.1.0",
27 | "grunt-contrib-watch": "^0.6.1",
28 | "grunt-env": "^0.4.4",
29 | "grunt-nodemon": "^0.4.1",
30 | "grunt-shell": "^1.1.2",
31 | "install": "^0.4.2",
32 | "load-grunt-tasks": "^3.4.0",
33 | "map-stream": "0.0.6",
34 | "npm": "^3.7.1",
35 | "require-dot-file": "^0.4.0",
36 | "run-sequence": "^1.1.5",
37 | "time-grunt": "^1.3.0",
38 | "yamljs": "^0.2.4"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/public/app/components/alt/alt.components.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | var __metadata = (this && this.__metadata) || function (k, v) {
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10 | };
11 | var core_1 = require('@angular/core');
12 | var ng2phaser_1 = require('../../../node_modules/ang2-phaser/ng2phaser');
13 | var AltComponent = (function () {
14 | function AltComponent() {
15 | }
16 | //---------------
17 | AltComponent.prototype.phaserLink1 = function (phaser) {
18 | var js = document.createElement("script");
19 | js.type = "text/javascript";
20 | js.src = '../../../node_modules/ang2-phaser/game_demos/phaser2_demo.js';
21 | document.body.appendChild(js);
22 | js.onload = function () {
23 | __phaser.game.init(phaser.container, this);
24 | };
25 | };
26 | //---------------
27 | //---------------
28 | AltComponent.prototype.destroyGame = function () {
29 | __phaser.destroyGame(function () {
30 | // do something
31 | });
32 | };
33 | //---------------
34 | //---------------
35 | AltComponent.prototype.ngOnDestroy = function () {
36 | this.destroyGame();
37 | };
38 | AltComponent = __decorate([
39 | core_1.Component({
40 | selector: 'about-home',
41 | directives: [
42 | ng2phaser_1.NG2_PHASER
43 | ],
44 | template: "\n
\n Angular2 - Phaser Demo
\n \n \n "
45 | }),
46 | __metadata('design:paramtypes', [])
47 | ], AltComponent);
48 | return AltComponent;
49 | }());
50 | exports.AltComponent = AltComponent;
51 | //# sourceMappingURL=alt.components.js.map
--------------------------------------------------------------------------------
/public/app/components/alt/alt.components.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"alt.components.js","sourceRoot":"","sources":["alt.components.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAC1C,0BAA0B,6CAE1B,CAAC,CAFsE;AAevE;IAAA;IA6BA,CAAC;IA3BC,iBAAiB;IACjB,kCAAW,GAAX,UAAY,MAAU;QAEnB,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACtC,EAAE,CAAC,IAAI,GAAG,iBAAiB,CAAC;QAC5B,EAAE,CAAC,GAAG,GAAG,8DAA8D,CAAC;QACxE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC9B,EAAE,CAAC,MAAM,GAAG;YACT,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAC9C,CAAC,CAAA;IACR,CAAC;IACD,iBAAiB;IAEjB,iBAAiB;IACjB,kCAAW,GAAX;QACG,QAAQ,CAAC,WAAW,CAAC;YACf,eAAe;QACrB,CAAC,CAAC,CAAC;IACN,CAAC;IACD,iBAAiB;IAEjB,iBAAiB;IACjB,kCAAW,GAAX;QACE,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAtCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,YAAY;YACtB,UAAU,EAAE;gBACV,sBAAU;aACX;YACD,QAAQ,EAAE,qIAKT;SACF,CAAC;;oBAAA;IA8BF,mBAAC;AAAD,CAAC,AA7BD,IA6BC;AA7BY,oBAAY,eA6BxB,CAAA"}
--------------------------------------------------------------------------------
/public/app/components/alt/alt.components.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {NG2_PHASER} from '../../../node_modules/ang2-phaser/ng2phaser'
3 |
4 | declare var __phaser:any;
5 | @Component({
6 | selector: 'about-home',
7 | directives: [
8 | NG2_PHASER
9 | ],
10 | template: `
11 |
12 | Angular2 - Phaser Demo
13 |
14 |
15 | `
16 | })
17 | export class AltComponent {
18 |
19 | //---------------
20 | phaserLink1(phaser:any){
21 |
22 | var js = document.createElement("script");
23 | js.type = "text/javascript";
24 | js.src = '../../../node_modules/ang2-phaser/game_demos/phaser2_demo.js';
25 | document.body.appendChild(js);
26 | js.onload = function(){
27 | __phaser.game.init(phaser.container, this);
28 | }
29 | }
30 | //---------------
31 |
32 | //---------------
33 | destroyGame(){
34 | __phaser.destroyGame(function(){
35 | // do something
36 | });
37 | }
38 | //---------------
39 |
40 | //---------------
41 | ngOnDestroy() {
42 | this.destroyGame();
43 | }
44 | //---------------
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/public/app/components/app/app.components.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | var __metadata = (this && this.__metadata) || function (k, v) {
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10 | };
11 | var core_1 = require('@angular/core');
12 | var router_1 = require('@angular/router');
13 | var AppComponent = (function () {
14 | function AppComponent() {
15 | }
16 | AppComponent = __decorate([
17 | core_1.Component({
18 | selector: 'my-app',
19 | template: "\n\n Game 1\n\t Game 2\n \n \n
\n ",
20 | // add our router directives we will be using
21 | directives: [router_1.ROUTER_DIRECTIVES]
22 | }),
23 | __metadata('design:paramtypes', [])
24 | ], AppComponent);
25 | return AppComponent;
26 | }());
27 | exports.AppComponent = AppComponent;
28 | //# sourceMappingURL=app.components.js.map
--------------------------------------------------------------------------------
/public/app/components/app/app.components.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"app.components.js","sourceRoot":"","sources":["app.components.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAC1C,uBAAkC,iBAAiB,CAAC,CAAA;AAepD;IAAA;IAA4B,CAAC;IAb7B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,oLAOT;YACD,6CAA6C;YAC7C,UAAU,EAAE,CAAC,0BAAiB,CAAC;SAChC,CAAC;;oBAAA;IAC0B,mBAAC;AAAD,CAAC,AAA7B,IAA6B;AAAhB,oBAAY,eAAI,CAAA"}
--------------------------------------------------------------------------------
/public/app/components/app/app.components.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ROUTER_DIRECTIVES } from '@angular/router';
3 |
4 | @Component({
5 | selector: 'my-app',
6 | template: `
7 |
8 | Game 1
9 | Game 2
10 |
11 |
12 |
13 | `,
14 | // add our router directives we will be using
15 | directives: [ROUTER_DIRECTIVES]
16 | })
17 | export class AppComponent { }
18 |
--------------------------------------------------------------------------------
/public/app/components/home/home.components.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6 | return c > 3 && r && Object.defineProperty(target, key, r), r;
7 | };
8 | var __metadata = (this && this.__metadata) || function (k, v) {
9 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10 | };
11 | var core_1 = require('@angular/core');
12 | var ng2phaser_1 = require('../../../node_modules/ang2-phaser/ng2phaser');
13 | var HomeComponent = (function () {
14 | function HomeComponent() {
15 | }
16 | //---------------
17 | HomeComponent.prototype.phaserLink1 = function (phaser) {
18 | var js = document.createElement("script");
19 | js.type = "text/javascript";
20 | js.src = '../../../gameDemo/demo.js';
21 | document.body.appendChild(js);
22 | js.onload = function () {
23 | __phaser.game.init(phaser.container, this);
24 | };
25 | };
26 | //---------------
27 | //---------------
28 | HomeComponent.prototype.destroyGame = function () {
29 | __phaser.destroyGame(function () {
30 | // do something
31 | });
32 | };
33 | //---------------
34 | //---------------
35 | HomeComponent.prototype.ngOnDestroy = function () {
36 | this.destroyGame();
37 | };
38 | HomeComponent = __decorate([
39 | core_1.Component({
40 | selector: 'my-app',
41 | directives: [
42 | ng2phaser_1.NG2_PHASER
43 | ],
44 | template: "\n \n Angular2 - Phaser Demo
\n \n \n "
45 | }),
46 | __metadata('design:paramtypes', [])
47 | ], HomeComponent);
48 | return HomeComponent;
49 | }());
50 | exports.HomeComponent = HomeComponent;
51 | //# sourceMappingURL=home.components.js.map
--------------------------------------------------------------------------------
/public/app/components/home/home.components.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"home.components.js","sourceRoot":"","sources":["home.components.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAC1C,0BAA0B,6CAE1B,CAAC,CAFsE;AAgBvE;IAAA;IA8BA,CAAC;IA5BC,iBAAiB;IACjB,mCAAW,GAAX,UAAY,MAAU;QAEnB,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACtC,EAAE,CAAC,IAAI,GAAG,iBAAiB,CAAC;QAC5B,EAAE,CAAC,GAAG,GAAG,2BAA2B,CAAC;QACrC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC9B,EAAE,CAAC,MAAM,GAAG;YACT,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;QAC9C,CAAC,CAAA;IACR,CAAC;IACD,iBAAiB;IAEjB,iBAAiB;IACjB,mCAAW,GAAX;QACG,QAAQ,CAAC,WAAW,CAAC;YACf,eAAe;QACrB,CAAC,CAAC,CAAC;IACN,CAAC;IACD,iBAAiB;IAEjB,iBAAiB;IACjB,mCAAW,GAAX;QACE,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAtCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE;gBACV,sBAAU;aACX;YACD,QAAQ,EAAE,qIAKT;SACF,CAAC;;qBAAA;IA+BF,oBAAC;AAAD,CAAC,AA9BD,IA8BC;AA9BY,qBAAa,gBA8BzB,CAAA"}
--------------------------------------------------------------------------------
/public/app/components/home/home.components.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {NG2_PHASER} from '../../../node_modules/ang2-phaser/ng2phaser'
3 |
4 | declare var __phaser:any;
5 |
6 | @Component({
7 | selector: 'my-app',
8 | directives: [
9 | NG2_PHASER
10 | ],
11 | template: `
12 |
13 | Angular2 - Phaser Demo
14 |
15 |
16 | `
17 | })
18 | export class HomeComponent {
19 |
20 | //---------------
21 | phaserLink1(phaser:any){
22 |
23 | var js = document.createElement("script");
24 | js.type = "text/javascript";
25 | js.src = '../../../gameDemo/demo.js';
26 | document.body.appendChild(js);
27 | js.onload = function(){
28 | __phaser.game.init(phaser.container, this);
29 | }
30 | }
31 | //---------------
32 |
33 | //---------------
34 | destroyGame(){
35 | __phaser.destroyGame(function(){
36 | // do something
37 | });
38 | }
39 | //---------------
40 |
41 | //---------------
42 | ngOnDestroy() {
43 | this.destroyGame();
44 | }
45 | //---------------
46 |
47 |
48 | }
49 |
--------------------------------------------------------------------------------
/public/app/components/routes/app.routes.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var router_1 = require('@angular/router');
3 | var home_components_1 = require('../../components/home/home.components');
4 | var alt_components_1 = require('../../components/alt/alt.components');
5 | exports.routes = [
6 | {
7 | path: '',
8 | component: home_components_1.HomeComponent
9 | },
10 | {
11 | path: 'alt',
12 | component: alt_components_1.AltComponent
13 | }
14 | ];
15 | exports.APP_ROUTER_PROVIDERS = [
16 | router_1.provideRouter(exports.routes)
17 | ];
18 | //# sourceMappingURL=app.routes.js.map
--------------------------------------------------------------------------------
/public/app/components/routes/app.routes.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"app.routes.js","sourceRoot":"","sources":["app.routes.ts"],"names":[],"mappings":";AAAA,uBAA4C,iBAAiB,CAAC,CAAA;AAC9D,gCAA8B,uCAAuC,CAAC,CAAA;AACtE,+BAA6B,qCAAqC,CAAC,CAAA;AAGtD,cAAM,GAAiB;IAClC;QACE,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,+BAAa;KACzB;IACD;QACE,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,6BAAY;KACxB;CACF,CAAC;AAEW,4BAAoB,GAAG;IAClC,sBAAa,CAAC,cAAM,CAAC;CACtB,CAAC"}
--------------------------------------------------------------------------------
/public/app/components/routes/app.routes.ts:
--------------------------------------------------------------------------------
1 | import { provideRouter, RouterConfig } from '@angular/router';
2 | import { HomeComponent } from '../../components/home/home.components';
3 | import { AltComponent } from '../../components/alt/alt.components';
4 |
5 |
6 | export const routes: RouterConfig = [
7 | {
8 | path: '',
9 | component: HomeComponent
10 | },
11 | {
12 | path: 'alt',
13 | component: AltComponent
14 | }
15 | ];
16 |
17 | export const APP_ROUTER_PROVIDERS = [
18 | provideRouter(routes)
19 | ];
20 |
--------------------------------------------------------------------------------
/public/app/main.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
3 | var app_components_1 = require('./components/app/app.components');
4 | var app_routes_1 = require('./components/routes/app.routes');
5 | var core_1 = require('@angular/core');
6 | if (_root.globals.enviroment != "development") {
7 | core_1.enableProdMode();
8 | }
9 | platform_browser_dynamic_1.bootstrap(app_components_1.AppComponent, [
10 | app_routes_1.APP_ROUTER_PROVIDERS
11 | ]);
12 | //# sourceMappingURL=main.js.map
--------------------------------------------------------------------------------
/public/app/main.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";AAAA,yCAA2B,mCAAmC,CAAC,CAAA;AAC/D,+BAA2B,iCAAiC,CAAC,CAAA;AAC7D,2BAAqC,gCAAgC,CAAC,CAAA;AACtE,qBAA6B,eAAe,CAAC,CAAA;AAI7C,EAAE,CAAA,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,IAAI,aAAa,CAAC,CAAA,CAAC;IAC5C,qBAAc,EAAE,CAAC;AACnB,CAAC;AAED,oCAAS,CAAC,6BAAY,EAAE;IACtB,iCAAoB;CACrB,CAAC,CAAC"}
--------------------------------------------------------------------------------
/public/app/main.ts:
--------------------------------------------------------------------------------
1 | import {bootstrap} from '@angular/platform-browser-dynamic';
2 | import {AppComponent} from './components/app/app.components';
3 | import { APP_ROUTER_PROVIDERS } from './components/routes/app.routes';
4 | import {enableProdMode} from '@angular/core';
5 |
6 | declare var _root:any;
7 |
8 | if(_root.globals.enviroment != "development"){
9 | enableProdMode();
10 | }
11 |
12 | bootstrap(AppComponent, [
13 | APP_ROUTER_PROVIDERS
14 | ]);
15 |
--------------------------------------------------------------------------------
/public/app/stylesheets/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
3 | }
4 |
5 | a {
6 | color: #00B7FF;
7 | }
8 |
9 | .is-pointer{
10 | cursor: pointer;
11 | }
12 |
13 |
14 | html.ios {
15 | overflow-x: hidden;
16 | -webkit-overflow-scrolling: touch;
17 | }
18 | html.ios,
19 | html.ios body {
20 | height: initial !important;
21 | }
22 |
23 |
24 | /* VISIBLITY CLASSES
25 | CLASSES:
26 | mobile, tablet, computer, large monitor, widescreen monitor
27 | */
28 | /* Mobile */
29 | @media only screen and (max-width: 767px) {
30 | [class*="mobile vanish"]{
31 | opacity: 0!important;
32 | height: 0px;
33 | }
34 | }
35 |
36 | @media only screen and (max-width: 767px) {
37 | [class*="mobile hidden"],
38 | [class*="tablet only"]:not(.mobile),
39 | [class*="computer only"]:not(.mobile),
40 | [class*="large monitor only"]:not(.mobile),
41 | [class*="widescreen monitor only"]:not(.mobile),
42 | [class*="or lower hidden"] {
43 | display: none !important;
44 | }
45 | }
46 |
47 |
48 | /* Tablet / iPad Portrait */
49 | @media only screen and (min-width: 768px) and (max-width: 991px) {
50 | [class*="mobile only"]:not(.tablet),
51 | [class*="tablet hidden"],
52 | [class*="computer only"]:not(.tablet),
53 | [class*="large monitor only"]:not(.tablet),
54 | [class*="widescreen monitor only"]:not(.tablet),
55 | [class*="or lower hidden"]:not(.mobile) {
56 | display: none !important;
57 | }
58 | }
59 |
60 |
61 | /* Computer / Desktop / iPad Landscape */
62 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
63 | [class*="mobile only"]:not(.computer),
64 | [class*="tablet only"]:not(.computer),
65 | [class*="computer hidden"],
66 | [class*="large monitor only"]:not(.computer),
67 | [class*="widescreen monitor only"]:not(.computer),
68 | [class*="or lower hidden"]:not(.tablet):not(.mobile) {
69 | display: none !important;
70 | }
71 | }
72 |
73 |
74 | /* Large Monitor */
75 | @media only screen and (min-width: 1200px) and (max-width: 1919px) {
76 | [class*="mobile only"]:not([class*="large monitor"]),
77 | [class*="tablet only"]:not([class*="large monitor"]),
78 | [class*="computer only"]:not([class*="large monitor"]),
79 | [class*="large monitor hidden"],
80 | [class*="widescreen monitor only"]:not([class*="large monitor"]),
81 | [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
82 | display: none !important;
83 | }
84 | }
85 |
86 |
87 | /* Widescreen Monitor */
88 | @media only screen and (min-width: 1920px) {
89 | [class*="mobile only"]:not([class*="widescreen monitor"]),
90 | [class*="tablet only"]:not([class*="widescreen monitor"]),
91 | [class*="computer only"]:not([class*="widescreen monitor"]),
92 | [class*="large monitor only"]:not([class*="widescreen monitor"]),
93 | [class*="widescreen monitor hidden"],
94 | [class*="widescreen monitor or lower hidden"] {
95 | display: none !important;
96 | }
97 | }
98 |
99 | .ui[class*="top fixed"]{
100 | position: fixed!important;
101 | top: 0px!important;
102 | left: 0px!important;
103 | }
104 |
105 | /* STICKY PAGE */
106 | .main.container {
107 | margin-top: 2em;
108 | }
109 |
110 | .main.menu {
111 | margin-top: 4em;
112 | border-radius: 0;
113 | border: none;
114 | box-shadow: none;
115 | transition:
116 | box-shadow 0.5s ease,
117 | padding 0.5s ease
118 | ;
119 | }
120 | .main.menu .item img.logo {
121 | margin-right: 1.5em;
122 | }
123 |
124 | .overlay {
125 | float: left;
126 | margin: 0em 3em 1em 0em;
127 | }
128 | .overlay .menu {
129 | position: relative;
130 | left: 0;
131 | transition: left 0.5s ease;
132 | }
133 |
134 | .main.menu.fixed {
135 | background-color: #FFFFFF;
136 | border: 1px solid #DDD;
137 | box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
138 | }
139 | .overlay.fixed .menu {
140 | left: 800px;
141 | }
142 |
143 | .text.container .left.floated.image {
144 | margin: 2em 2em 2em -4em;
145 | }
146 | .text.container .right.floated.image {
147 | margin: 2em -4em 2em 2em;
148 | }
149 |
150 | .ui.footer.segment {
151 | margin: 5em 0em 0em;
152 | padding: 5em 0em;
153 | }
154 |
155 |
156 | /* HOMEPAGE */
157 | .hidden.menu {
158 | display: none;
159 | }
160 |
161 | .masthead.segment {
162 | min-height: 700px;
163 | padding: 1em 0em;
164 | }
165 | .masthead .logo.item img {
166 | margin-right: 1em;
167 | }
168 | .masthead .ui.menu .ui.button {
169 | margin-left: 0.5em;
170 | }
171 | .masthead h1.ui.header {
172 | margin-top: 3em;
173 | margin-bottom: 0em;
174 | font-size: 4em;
175 | font-weight: normal;
176 | }
177 | .masthead h2 {
178 | font-size: 1.7em;
179 | font-weight: normal;
180 | }
181 |
182 | .ui.vertical.stripe {
183 | padding: 8em 0em;
184 | }
185 | .ui.vertical.stripe h3 {
186 | font-size: 2em;
187 | }
188 | .ui.vertical.stripe .button + h3,
189 | .ui.vertical.stripe p + h3 {
190 | margin-top: 3em;
191 | }
192 | .ui.vertical.stripe .floated.image {
193 | clear: both;
194 | }
195 | .ui.vertical.stripe p {
196 | font-size: 1.33em;
197 | }
198 | .ui.vertical.stripe .horizontal.divider {
199 | margin: 3em 0em;
200 | }
201 |
202 | .quote.stripe.segment {
203 | padding: 0em;
204 | }
205 | .quote.stripe.segment .grid .column {
206 | padding-top: 5em;
207 | padding-bottom: 5em;
208 | }
209 |
210 | .footer.segment {
211 | padding: 5em 0em;
212 | }
213 |
214 | .secondary.pointing.menu .toc.item {
215 | display: none;
216 | }
217 |
218 | @media only screen and (max-width: 700px) {
219 | .ui.fixed.menu {
220 | display: none !important;
221 | }
222 | .secondary.pointing.menu .item,
223 | .secondary.pointing.menu .menu {
224 | display: none;
225 | }
226 | .secondary.pointing.menu .toc.item {
227 | display: block;
228 | }
229 | .masthead.segment {
230 | min-height: 350px;
231 | }
232 | .masthead h1.ui.header {
233 | font-size: 2em;
234 | margin-top: 1.5em;
235 | }
236 | .masthead h2 {
237 | margin-top: 0.5em;
238 | font-size: 1.5em;
239 | }
240 | }
241 |
--------------------------------------------------------------------------------
/public/gameDemo/demo.js:
--------------------------------------------------------------------------------
1 | //--------------
2 | __phaser = {
3 |
4 | gameObj: null,
5 |
6 | //-------------------
7 | game:{
8 |
9 | //-------------------
10 | init(canvasEle, appComponent){
11 | // create game object
12 | var game = new Phaser.Game(800, 500, Phaser.AUTO, canvasEle, { preload: preload, create: create, update: update });
13 | var gameState = "preload"
14 |
15 | // assign it
16 | __phaser.gameObj = game;
17 |
18 |
19 |
20 | //----------------------- PRELOAD
21 | function preload() {
22 |
23 | // set canvas color
24 | game.stage.backgroundColor = '#95a5a6';
25 |
26 | // load images/sounds/scripts
27 | game.load.image('phaser_logo', '../../../gameDemo/phaser_logo.png')
28 |
29 | // preloader events
30 | game.load.onLoadStart.add(loadStart, this);
31 | game.load.onFileComplete.add(fileComplete, this);
32 | game.load.onLoadComplete.add(loadComplete, this);
33 | game.load.enableParallel = true;
34 | }
35 | //-----------------------
36 |
37 | //----------------------- CREATE
38 | function create() {
39 |
40 |
41 | }
42 | //-----------------------
43 |
44 |
45 | //-----------------------
46 | function loadStart() {
47 | // text
48 | loadingtext = game.add.text(game.world.centerX, game.world.centerY/2, "");
49 | loadingtext.anchor.set(0.5);
50 | loadingPercentage = game.add.text(game.world.centerX, game.world.centerY, "");
51 | loadingPercentage.anchor.set(0.5);
52 | }
53 | //-----------------------
54 |
55 | //-----------------------
56 | function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) {
57 | loadingtext.setText("Loading...");
58 | loadingPercentage.setText(progress + "%")
59 | }
60 | //-----------------------
61 |
62 | //-----------------------
63 | function preloaderUpdate(){
64 | // upadate cycle for anything in preload state
65 | }
66 | //-----------------------
67 |
68 | //-----------------------
69 | function loadComplete() {
70 | loadingtext.setText("All assets loaded");
71 | loadingPercentage.setText("100%")
72 |
73 | // add slight delay before starting game
74 | game.time.events.add(Phaser.Timer.SECOND * 1, function(){
75 | loadingtext.destroy();
76 | loadingPercentage.destroy();
77 | startGame()
78 | }, this).autoDestroy = true;
79 | }
80 | //-----------------------
81 |
82 |
83 | //-----------------------
84 | function startGame(){
85 | gameState = "gameplay"
86 |
87 | // define sprite
88 | sprite = game.add.sprite(0, 0, 'phaser_logo');
89 | sprite.width = 800;
90 | sprite.height = 600;
91 |
92 | // define fragment
93 | var customUniforms = {
94 | iChannel0: { type: 'sampler2D', value: sprite.texture, textureData: { repeat: true } }
95 | };
96 | var fragmentSrc = [
97 | "precision mediump float;",
98 | "uniform float time;",
99 | "uniform vec2 resolution;",
100 | "uniform sampler2D iChannel0;",
101 | "void main( void ) {",
102 | "vec2 uv = gl_FragCoord.xy / resolution.xy;",
103 | "uv.y *= -1.0;",
104 | "uv.y += (sin((uv.x + (time * 0.5)) * 10.0) * 0.1) + (sin((uv.x + (time * 0.2)) * 32.0) * 0.01);",
105 | "vec4 texColor = texture2D(iChannel0, uv);",
106 | "gl_FragColor = texColor;",
107 | "}"
108 | ];
109 | // apply filter to sprite
110 | filter = new Phaser.Filter(game, customUniforms, fragmentSrc);
111 | filter.setResolution(200, 150);
112 | sprite.filters = [ filter ];
113 |
114 | }
115 | //-----------------------
116 |
117 | //-----------------------
118 | function gameplayUpdate(){
119 | // update filter
120 | filter.update();
121 | }
122 | //-----------------------
123 |
124 |
125 | //----------------------- UPDATE
126 | function update() {
127 |
128 | // list of gamestates and their loops
129 | if(gameState == "preload"){ preloaderUpdate() }
130 | if(gameState == "gameplay"){ gameplayUpdate() }
131 |
132 | }
133 | //-----------------------
134 |
135 |
136 |
137 | },
138 |
139 |
140 |
141 | },
142 | //-------------------
143 |
144 |
145 | //-------------------
146 | destroyGame(callback){
147 | this.gameObj.destroy();
148 | callback();
149 | }
150 | //-------------------
151 |
152 |
153 | }
154 | //--------------
155 |
--------------------------------------------------------------------------------
/public/gameDemo/phaser_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/allenJynRoyston/phaser-angular2-demo/ca45f10e618c02dc219f04fd3ff202de233e704a/public/gameDemo/phaser_logo.png
--------------------------------------------------------------------------------
/public/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "start": "npm start"
4 | },
5 | "dependencies": {
6 | "@angular/common": "2.0.0-rc.4",
7 | "@angular/compiler": "2.0.0-rc.4",
8 | "@angular/core": "2.0.0-rc.4",
9 | "@angular/forms": "0.2.0",
10 | "@angular/http": "2.0.0-rc.4",
11 | "@angular/platform-browser": "2.0.0-rc.4",
12 | "@angular/platform-browser-dynamic": "2.0.0-rc.4",
13 | "@angular/router": "3.0.0-beta.2",
14 | "@angular/router-deprecated": "2.0.0-rc.2",
15 | "@angular/upgrade": "2.0.0-rc.4",
16 | "ang2-phaser": "^1.1.6",
17 | "angular2-in-memory-web-api": "0.0.14",
18 | "core-js": "^2.4.0",
19 | "phaser": "^2.6.1",
20 | "reflect-metadata": "^0.1.3",
21 | "rxjs": "5.0.0-beta.6",
22 | "systemjs": "0.19.27",
23 | "zone.js": "^0.6.12"
24 | },
25 | "repository": {}
26 | }
27 |
--------------------------------------------------------------------------------
/public/stylesheets/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
3 | }
4 |
5 | a {
6 | color: #00B7FF;
7 | text-decoration: none;
8 | }
9 |
10 | .space-block-10{
11 | width: 100%;
12 | height: 10px;
13 | }
14 |
15 | .space-block-25{
16 | width: 100%;
17 | height: 25px;
18 | }
19 |
20 | .space-block-50{
21 | width: 100%;
22 | height: 50px;
23 | }
24 |
25 | .space-block-100{
26 | width: 100%;
27 | height: 100px;
28 | }
29 |
30 | .full-width{
31 | width: 100%!important;
32 | }
33 |
34 | .half-width{
35 | width: 50%!important;
36 | }
37 |
38 |
39 | .cursor{
40 | cursor: pointer;
41 | }
42 |
43 | .img-responsive{
44 | width: 100%;
45 | height: auto
46 | }
47 |
48 | .outline{
49 | border: 1px dotted orange;
50 | }
51 |
52 |
53 |
54 | html.ios {
55 | overflow-x: hidden;
56 | -webkit-overflow-scrolling: touch;
57 | }
58 | html.ios,
59 | html.ios body {
60 | height: initial !important;
61 | }
62 |
63 |
64 | /* VISIBLITY CLASSES
65 | CLASSES:
66 | mobile, tablet, computer, large monitor, widescreen monitor
67 | */
68 | /* Mobile */
69 | @media only screen and (max-width: 767px) {
70 | [class*="mobile vanish"]{
71 | opacity: 0!important;
72 | height: 0px;
73 | }
74 | }
75 |
76 | @media only screen and (max-width: 767px) {
77 | [class*="mobile hidden"],
78 | [class*="tablet only"]:not(.mobile),
79 | [class*="computer only"]:not(.mobile),
80 | [class*="large monitor only"]:not(.mobile),
81 | [class*="widescreen monitor only"]:not(.mobile),
82 | [class*="or lower hidden"] {
83 | display: none !important;
84 | }
85 | }
86 |
87 |
88 | /* Tablet / iPad Portrait */
89 | @media only screen and (min-width: 768px) and (max-width: 991px) {
90 | [class*="mobile only"]:not(.tablet),
91 | [class*="tablet hidden"],
92 | [class*="computer only"]:not(.tablet),
93 | [class*="large monitor only"]:not(.tablet),
94 | [class*="widescreen monitor only"]:not(.tablet),
95 | [class*="or lower hidden"]:not(.mobile) {
96 | display: none !important;
97 | }
98 | }
99 |
100 |
101 | /* Computer / Desktop / iPad Landscape */
102 | @media only screen and (min-width: 992px) and (max-width: 1199px) {
103 | [class*="mobile only"]:not(.computer),
104 | [class*="tablet only"]:not(.computer),
105 | [class*="computer hidden"],
106 | [class*="large monitor only"]:not(.computer),
107 | [class*="widescreen monitor only"]:not(.computer),
108 | [class*="or lower hidden"]:not(.tablet):not(.mobile) {
109 | display: none !important;
110 | }
111 | }
112 |
113 |
114 | /* Large Monitor */
115 | @media only screen and (min-width: 1200px) and (max-width: 1919px) {
116 | [class*="mobile only"]:not([class*="large monitor"]),
117 | [class*="tablet only"]:not([class*="large monitor"]),
118 | [class*="computer only"]:not([class*="large monitor"]),
119 | [class*="large monitor hidden"],
120 | [class*="widescreen monitor only"]:not([class*="large monitor"]),
121 | [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {
122 | display: none !important;
123 | }
124 | }
125 |
126 |
127 | /* Widescreen Monitor */
128 | @media only screen and (min-width: 1920px) {
129 | [class*="mobile only"]:not([class*="widescreen monitor"]),
130 | [class*="tablet only"]:not([class*="widescreen monitor"]),
131 | [class*="computer only"]:not([class*="widescreen monitor"]),
132 | [class*="large monitor only"]:not([class*="widescreen monitor"]),
133 | [class*="widescreen monitor hidden"],
134 | [class*="widescreen monitor or lower hidden"] {
135 | display: none !important;
136 | }
137 | }
138 |
139 | .ui[class*="top fixed"]{
140 | position: fixed!important;
141 | top: 0px!important;
142 | left: 0px!important;
143 | }
144 |
145 | /* STICKY PAGE */
146 | .main.container {
147 | margin-top: 2em;
148 | }
149 |
150 | .main.menu {
151 | margin-top: 4em;
152 | border-radius: 0;
153 | border: none;
154 | box-shadow: none;
155 | transition:
156 | box-shadow 0.5s ease,
157 | padding 0.5s ease
158 | ;
159 | }
160 | .main.menu .item img.logo {
161 | margin-right: 1.5em;
162 | }
163 |
164 | .overlay {
165 | float: left;
166 | margin: 0em 3em 1em 0em;
167 | }
168 | .overlay .menu {
169 | position: relative;
170 | left: 0;
171 | transition: left 0.5s ease;
172 | }
173 |
174 | .main.menu.fixed {
175 | background-color: #FFFFFF;
176 | border: 1px solid #DDD;
177 | box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
178 | }
179 | .overlay.fixed .menu {
180 | left: 800px;
181 | }
182 |
183 | .text.container .left.floated.image {
184 | margin: 2em 2em 2em -4em;
185 | }
186 | .text.container .right.floated.image {
187 | margin: 2em -4em 2em 2em;
188 | }
189 |
190 | .ui.footer.segment {
191 | margin: 5em 0em 0em;
192 | padding: 5em 0em;
193 | }
194 |
195 |
196 | /* HOMEPAGE */
197 | .hidden.menu {
198 | display: none;
199 | }
200 |
201 | .masthead.segment {
202 | min-height: 700px;
203 | padding: 1em 0em;
204 | }
205 | .masthead .logo.item img {
206 | margin-right: 1em;
207 | }
208 | .masthead .ui.menu .ui.button {
209 | margin-left: 0.5em;
210 | }
211 | .masthead h1.ui.header {
212 | margin-top: 3em;
213 | margin-bottom: 0em;
214 | font-size: 4em;
215 | font-weight: normal;
216 | }
217 | .masthead h2 {
218 | font-size: 1.7em;
219 | font-weight: normal;
220 | }
221 |
222 | .ui.vertical.stripe {
223 | padding: 8em 0em;
224 | }
225 | .ui.vertical.stripe h3 {
226 | font-size: 2em;
227 | }
228 | .ui.vertical.stripe .button + h3,
229 | .ui.vertical.stripe p + h3 {
230 | margin-top: 3em;
231 | }
232 | .ui.vertical.stripe .floated.image {
233 | clear: both;
234 | }
235 | .ui.vertical.stripe p {
236 | font-size: 1.33em;
237 | }
238 | .ui.vertical.stripe .horizontal.divider {
239 | margin: 3em 0em;
240 | }
241 |
242 | .quote.stripe.segment {
243 | padding: 0em;
244 | }
245 | .quote.stripe.segment .grid .column {
246 | padding-top: 5em;
247 | padding-bottom: 5em;
248 | }
249 |
250 | .footer.segment {
251 | padding: 5em 0em;
252 | }
253 |
254 | .secondary.pointing.menu .toc.item {
255 | display: none;
256 | }
257 |
258 | @media only screen and (max-width: 700px) {
259 | .ui.fixed.menu {
260 | display: none !important;
261 | }
262 | .secondary.pointing.menu .item,
263 | .secondary.pointing.menu .menu {
264 | display: none;
265 | }
266 | .secondary.pointing.menu .toc.item {
267 | display: block;
268 | }
269 | .masthead.segment {
270 | min-height: 350px;
271 | }
272 | .masthead h1.ui.header {
273 | font-size: 2em;
274 | margin-top: 1.5em;
275 | }
276 | .masthead h2 {
277 | margin-top: 0.5em;
278 | font-size: 1.5em;
279 | }
280 | }
281 |
--------------------------------------------------------------------------------
/public/systemjs.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * System configuration for Angular 2 samples
3 | * Adjust as necessary for your application needs.
4 | */
5 | (function(global) {
6 |
7 | // map tells the System loader where to look for things
8 | var map = {
9 | 'app': 'app', // 'dist',
10 |
11 | '@angular': 'node_modules/@angular',
12 | 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
13 | 'rxjs': 'node_modules/rxjs',
14 | 'ang2-phaser': 'node_modules/ang2-phaser'
15 | };
16 |
17 | // packages tells the System loader how to load when no filename and/or no extension
18 | var packages = {
19 | 'app': { main: 'main.js', defaultExtension: 'js' },
20 | 'rxjs': { defaultExtension: 'js' },
21 | 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
22 | 'ang2-phaser': { defaultExtension: 'js' }
23 | };
24 |
25 | var ngPackageNames = [
26 | 'common',
27 | 'compiler',
28 | 'core',
29 | 'forms',
30 | 'http',
31 | 'platform-browser',
32 | 'platform-browser-dynamic',
33 | 'router',
34 | 'router-deprecated',
35 | 'upgrade',
36 | ];
37 |
38 | // Individual files (~300 requests):
39 | function packIndex(pkgName) {
40 | packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
41 | }
42 |
43 | // Bundled (~40 requests):
44 | function packUmd(pkgName) {
45 | packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
46 | }
47 |
48 | // Most environments should use UMD; some (Karma) need the individual index files
49 | var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
50 |
51 | // Add package entries for angular packages
52 | ngPackageNames.forEach(setPackageConfig);
53 |
54 | // No umd for router yet
55 | packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
56 |
57 | var config = {
58 | map: map,
59 | packages: packages
60 | };
61 |
62 | System.config(config);
63 |
64 | })(this);
65 |
--------------------------------------------------------------------------------
/public/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": true,
11 | "suppressImplicitAnyIndexErrors": true
12 | },
13 | "exclude": [
14 | "node_modules",
15 | "typings/main",
16 | "typings/main.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/routes/api.js:
--------------------------------------------------------------------------------
1 | //---------------------------------------------- default
2 | exports.endpoint = function(req, res){
3 | console.log("Endpoint")
4 | };
5 | //----------------------------------------------
6 |
--------------------------------------------------------------------------------
/routes/index.js:
--------------------------------------------------------------------------------
1 | //---------------------------------------------- default
2 | exports.home = function(req, res){
3 |
4 | res.render('index', {
5 | title: 'Angular2 - Phaser Demo',
6 | enviroment: req.device.enviroment,
7 | isMobile: req.device.isMobile,
8 | isIphone: req.device.isIphone,
9 | isIpad: req.device.isIpad,
10 | isAndroid: req.device.isAndroid,
11 | userAgent: req.device.ua
12 | });
13 |
14 | };
15 | //----------------------------------------------
16 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": true,
11 | "suppressImplicitAnyIndexErrors": true
12 | },
13 | "exclude": [
14 | "node_modules",
15 | "typings/main",
16 | "typings/main.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/views/error.jade:
--------------------------------------------------------------------------------
1 | h1= message
2 | h2= error.status
3 | pre #{error.stack}
4 |
--------------------------------------------------------------------------------
/views/index.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 |
5 | // meta data
6 | meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no")
7 | meta(name="description" content="")
8 |
9 | // for angular routing - leave as is
10 | base(href="/")
11 |
12 | // title
13 | if enviroment=="development"
14 | title #{title} (#{enviroment})
15 | if enviroment!="development"
16 | title #{title}
17 |
18 | // css
19 | link(rel='stylesheet', href='/stylesheets/style.css')
20 |
21 | // angular 2 core files
22 | script(src='node_modules/core-js/client/shim.min.js')
23 | script(src='node_modules/zone.js/dist/zone.js')
24 | script(src='node_modules/reflect-metadata/Reflect.js')
25 | script(src='node_modules/systemjs/dist/system.src.js')
26 | script(src='systemjs.config.js')
27 |
28 | // production
29 | if enviroment=="production"
30 |
31 | // development
32 | if enviroment=="development"
33 |
34 | // livereload
35 | script(src='//localhost:35729/livereload.js')
36 |
37 | body
38 |
39 | // site renders here
40 | my-app
41 | p Loading...
42 |
43 | // init and declare globals
44 | script(type='text/javascript').
45 | System.import('app').catch(function(err){ console.error(err); });
46 |
47 | script(type='text/javascript').
48 | _root = {
49 | globals: {
50 | enviroment: "#{enviroment}",
51 | isMobile: "#{isMobile}",
52 | isIphone: "#{isIphone}",
53 | isIpad: "#{isIpad}",
54 | isAndroid: "#{isAndroid}",
55 | userAgent: "#{userAgent}"
56 | }
57 | }
58 |
59 |
--------------------------------------------------------------------------------