├── .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 | --------------------------------------------------------------------------------