├── .gitignore
├── README.md
├── angular.json
├── e2e
├── protractor.conf.js
├── src
│ ├── app.e2e-spec.ts
│ └── app.po.ts
└── tsconfig.e2e.json
├── ionic.config.json
├── package.json
├── src
├── app
│ ├── app-routing.module.ts
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── home
│ │ ├── home.module.ts
│ │ ├── home.page.html
│ │ ├── home.page.scss
│ │ ├── home.page.spec.ts
│ │ └── home.page.ts
│ └── services
│ │ └── not-boring-hello-scene.service.ts
├── assets
│ ├── dude.png
│ ├── icon
│ │ └── favicon.png
│ └── shapes.svg
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── global.scss
├── index.html
├── karma.conf.js
├── main.ts
├── phaser.d.ts
├── polyfills.ts
├── test.ts
├── theme
│ └── variables.scss
├── tsconfig.app.json
└── tsconfig.spec.json
├── tsconfig.json
└── tslint.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # Specifies intentionally untracked files to ignore when using Git
2 | # http://git-scm.com/docs/gitignore
3 |
4 | *~
5 | *.sw[mnpcod]
6 | *.log
7 | *.tmp
8 | *.tmp.*
9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 |
15 | .idea/
16 | .ionic/
17 | .sourcemaps/
18 | .sass-cache/
19 | .tmp/
20 | .versions/
21 | coverage/
22 | www/
23 | node_modules/
24 | tmp/
25 | temp/
26 | platforms/
27 | plugins/
28 | plugins/android.json
29 | plugins/ios.json
30 | $RECYCLE.BIN/
31 |
32 | .DS_Store
33 | Thumbs.db
34 | UserInterfaceState.xcuserstate
35 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Ionic 4 and phaser 3 template. This is not a boring Hello World template. You get a dude to play with when you do:
2 |
3 | npm install && ionic serve
4 |
5 | CAREFUL! Don't let him stare at you. He can microwave your brain. Keep moving. Use Arrow keys or touch/click on the screen.
6 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
3 | "version": 1,
4 | "defaultProject": "app",
5 | "newProjectRoot": "projects",
6 | "projects": {
7 | "app": {
8 | "root": "",
9 | "sourceRoot": "src",
10 | "projectType": "application",
11 | "prefix": "app",
12 | "schematics": {},
13 | "architect": {
14 | "build": {
15 | "builder": "@angular-devkit/build-angular:browser",
16 | "options": {
17 | "outputPath": "www",
18 | "index": "src/index.html",
19 | "main": "src/main.ts",
20 | "polyfills": "src/polyfills.ts",
21 | "tsConfig": "src/tsconfig.app.json",
22 | "assets": [
23 | {
24 | "glob": "**/*",
25 | "input": "src/assets",
26 | "output": "assets"
27 | }
28 | ],
29 | "styles": [
30 | {
31 | "input": "src/theme/variables.scss"
32 | },
33 | {
34 | "input": "src/global.scss"
35 | }
36 | ],
37 | "scripts": []
38 | },
39 | "configurations": {
40 | "production": {
41 | "fileReplacements": [
42 | {
43 | "replace": "src/environments/environment.ts",
44 | "with": "src/environments/environment.prod.ts"
45 | }
46 | ],
47 | "optimization": true,
48 | "outputHashing": "all",
49 | "sourceMap": false,
50 | "extractCss": true,
51 | "namedChunks": false,
52 | "aot": true,
53 | "extractLicenses": true,
54 | "vendorChunk": false,
55 | "buildOptimizer": true,
56 | "budgets": [
57 | {
58 | "type": "initial",
59 | "maximumWarning": "2mb",
60 | "maximumError": "5mb"
61 | }
62 | ]
63 | },
64 | "ci": {
65 | "progress": false
66 | }
67 | }
68 | },
69 | "serve": {
70 | "builder": "@angular-devkit/build-angular:dev-server",
71 | "options": {
72 | "browserTarget": "app:build"
73 | },
74 | "configurations": {
75 | "production": {
76 | "browserTarget": "app:build:production"
77 | },
78 | "ci": {
79 | "progress": false
80 | }
81 | }
82 | },
83 | "extract-i18n": {
84 | "builder": "@angular-devkit/build-angular:extract-i18n",
85 | "options": {
86 | "browserTarget": "app:build"
87 | }
88 | },
89 | "test": {
90 | "builder": "@angular-devkit/build-angular:karma",
91 | "options": {
92 | "main": "src/test.ts",
93 | "polyfills": "src/polyfills.ts",
94 | "tsConfig": "src/tsconfig.spec.json",
95 | "karmaConfig": "src/karma.conf.js",
96 | "styles": [],
97 | "scripts": [],
98 | "assets": [
99 | {
100 | "glob": "favicon.ico",
101 | "input": "src/",
102 | "output": "/"
103 | },
104 | {
105 | "glob": "**/*",
106 | "input": "src/assets",
107 | "output": "/assets"
108 | }
109 | ]
110 | },
111 | "configurations": {
112 | "ci": {
113 | "progress": false,
114 | "watch": false
115 | }
116 | }
117 | },
118 | "lint": {
119 | "builder": "@angular-devkit/build-angular:tslint",
120 | "options": {
121 | "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
122 | "exclude": ["**/node_modules/**"]
123 | }
124 | },
125 | "ionic-cordova-build": {
126 | "builder": "@ionic/angular-toolkit:cordova-build",
127 | "options": {
128 | "browserTarget": "app:build"
129 | },
130 | "configurations": {
131 | "production": {
132 | "browserTarget": "app:build:production"
133 | }
134 | }
135 | },
136 | "ionic-cordova-serve": {
137 | "builder": "@ionic/angular-toolkit:cordova-serve",
138 | "options": {
139 | "cordovaBuildTarget": "app:ionic-cordova-build",
140 | "devServerTarget": "app:serve"
141 | },
142 | "configurations": {
143 | "production": {
144 | "cordovaBuildTarget": "app:ionic-cordova-build:production",
145 | "devServerTarget": "app:serve:production"
146 | }
147 | }
148 | }
149 | }
150 | },
151 | "app-e2e": {
152 | "root": "e2e/",
153 | "projectType": "application",
154 | "architect": {
155 | "e2e": {
156 | "builder": "@angular-devkit/build-angular:protractor",
157 | "options": {
158 | "protractorConfig": "e2e/protractor.conf.js",
159 | "devServerTarget": "app:serve"
160 | },
161 | "configurations": {
162 | "ci": {
163 | "devServerTarget": "app:serve:ci"
164 | }
165 | }
166 | },
167 | "lint": {
168 | "builder": "@angular-devkit/build-angular:tslint",
169 | "options": {
170 | "tsConfig": "e2e/tsconfig.e2e.json",
171 | "exclude": ["**/node_modules/**"]
172 | }
173 | }
174 | }
175 | }
176 | },
177 | "cli": {
178 | "defaultCollection": "@ionic/angular-toolkit"
179 | },
180 | "schematics": {
181 | "@ionic/angular-toolkit:component": {
182 | "styleext": "scss"
183 | },
184 | "@ionic/angular-toolkit:page": {
185 | "styleext": "scss"
186 | }
187 | }
188 | }
189 |
--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('new App', () => {
4 | let page: AppPage;
5 |
6 | beforeEach(() => {
7 | page = new AppPage();
8 | });
9 |
10 | it('should be blank', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toContain('The world is your oyster.');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.deepCss('app-root ion-content')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/e2e",
5 | "baseUrl": "./",
6 | "module": "commonjs",
7 | "target": "es5"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "IonicPhaser",
3 | "integrations": {},
4 | "type": "angular"
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Ionic Phaser",
3 | "version": "0.0.1",
4 | "author": "Venkata Sagi",
5 | "homepage": "",
6 | "scripts": {
7 | "ng": "ng",
8 | "start": "ng serve",
9 | "build": "ng build",
10 | "test": "ng test",
11 | "lint": "ng lint",
12 | "e2e": "ng e2e",
13 | "get-phaser-typings": "curl -o src/phaser.d.ts https://raw.githubusercontent.com/photonstorm/phaser3-docs/master/typescript/phaser.d.ts",
14 | "postinstall": "npm run get-phaser-typings"
15 | },
16 | "private": true,
17 | "dependencies": {
18 | "@angular/common": "~7.0.0",
19 | "@angular/core": "~7.0.0",
20 | "@angular/forms": "~7.0.0",
21 | "@angular/http": "~7.0.0",
22 | "@angular/platform-browser": "~7.0.0",
23 | "@angular/platform-browser-dynamic": "~7.0.0",
24 | "@angular/router": "~7.0.0",
25 | "@ionic-native/core": "5.0.0-beta.21",
26 | "@ionic-native/splash-screen": "5.0.0-beta.21",
27 | "@ionic-native/status-bar": "5.0.0-beta.21",
28 | "@ionic/angular": "4.0.0-beta.17",
29 | "core-js": "^2.5.4",
30 | "phaser": "^3.11.0",
31 | "phaser-component-library": "^2.0.0",
32 | "rxjs": "~6.3.3",
33 | "zone.js": "~0.8.26"
34 | },
35 | "devDependencies": {
36 | "@angular-devkit/architect": "~0.10.0",
37 | "@angular-devkit/build-angular": "~0.10.0",
38 | "@angular-devkit/core": "~7.0.0",
39 | "@angular-devkit/schematics": "~7.0.0",
40 | "@angular/cli": "~7.0.0",
41 | "@angular/compiler": "~7.0.0",
42 | "@angular/compiler-cli": "~7.0.0",
43 | "@angular/language-service": "~7.0.0",
44 | "@ionic/angular-toolkit": "~1.2.0",
45 | "@types/node": "~10.12.0",
46 | "@types/jasmine": "~2.8.8",
47 | "@types/jasminewd2": "~2.0.3",
48 | "codelyzer": "~4.5.0",
49 | "jasmine-core": "~2.99.1",
50 | "jasmine-spec-reporter": "~4.2.1",
51 | "karma": "~3.0.0",
52 | "karma-chrome-launcher": "~2.2.0",
53 | "karma-coverage-istanbul-reporter": "~2.0.1",
54 | "karma-jasmine": "~1.1.2",
55 | "karma-jasmine-html-reporter": "^0.2.2",
56 | "protractor": "~5.4.0",
57 | "ts-node": "~7.0.0",
58 | "tslint": "~5.11.0",
59 | "typescript": "~3.1.6"
60 | },
61 | "description": "An Ionic 4 + Phaser 3 template"
62 | }
63 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | const routes: Routes = [
5 | { path: '', redirectTo: 'home', pathMatch: 'full' },
6 | { path: 'home', loadChildren: './home/home.module#HomePageModule' },
7 | ];
8 |
9 | @NgModule({
10 | imports: [RouterModule.forRoot(routes)],
11 | exports: [RouterModule]
12 | })
13 | export class AppRoutingModule { }
14 |
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { TestBed, async } from '@angular/core/testing';
3 |
4 | import { Platform } from '@ionic/angular';
5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
7 |
8 | import { AppComponent } from './app.component';
9 |
10 | describe('AppComponent', () => {
11 |
12 | let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
13 |
14 | beforeEach(async(() => {
15 | statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
16 | splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
17 | platformReadySpy = Promise.resolve();
18 | platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
19 |
20 | TestBed.configureTestingModule({
21 | declarations: [AppComponent],
22 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
23 | providers: [
24 | { provide: StatusBar, useValue: statusBarSpy },
25 | { provide: SplashScreen, useValue: splashScreenSpy },
26 | { provide: Platform, useValue: platformSpy },
27 | ],
28 | }).compileComponents();
29 | }));
30 |
31 | it('should create the app', () => {
32 | const fixture = TestBed.createComponent(AppComponent);
33 | const app = fixture.debugElement.componentInstance;
34 | expect(app).toBeTruthy();
35 | });
36 |
37 | it('should initialize the app', async () => {
38 | TestBed.createComponent(AppComponent);
39 | expect(platformSpy.ready).toHaveBeenCalled();
40 | await platformReadySpy;
41 | expect(statusBarSpy.styleDefault).toHaveBeenCalled();
42 | expect(splashScreenSpy.hide).toHaveBeenCalled();
43 | });
44 |
45 | // TODO: add more tests!
46 |
47 | });
48 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { Platform } from '@ionic/angular';
4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
5 | import { StatusBar } from '@ionic-native/status-bar/ngx';
6 |
7 | @Component({
8 | selector: 'app-root',
9 | templateUrl: 'app.component.html'
10 | })
11 | export class AppComponent {
12 | constructor(
13 | private platform: Platform,
14 | private splashScreen: SplashScreen,
15 | private statusBar: StatusBar
16 | ) {
17 | this.initializeApp();
18 | }
19 |
20 | initializeApp() {
21 | this.platform.ready().then(() => {
22 | this.statusBar.styleDefault();
23 | this.splashScreen.hide();
24 | });
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { RouteReuseStrategy } from '@angular/router';
4 |
5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
7 | import { StatusBar } from '@ionic-native/status-bar/ngx';
8 |
9 | import { AppComponent } from './app.component';
10 | import { AppRoutingModule } from './app-routing.module';
11 |
12 | @NgModule({
13 | declarations: [AppComponent],
14 | entryComponents: [],
15 | imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
16 | providers: [
17 | StatusBar,
18 | SplashScreen,
19 | { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
20 | ],
21 | bootstrap: [AppComponent]
22 | })
23 | export class AppModule {}
24 |
--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { IonicModule } from '@ionic/angular';
4 | import { FormsModule } from '@angular/forms';
5 | import { RouterModule } from '@angular/router';
6 | import { PhaserModule } from 'phaser-component-library';
7 | import { HomePage } from './home.page';
8 |
9 | @NgModule({
10 | imports: [
11 | CommonModule,
12 | FormsModule,
13 | IonicModule,
14 | PhaserModule,
15 | RouterModule.forChild([
16 | {
17 | path: '',
18 | component: HomePage
19 | }
20 | ])
21 | ],
22 | declarations: [HomePage]
23 | })
24 | export class HomePageModule {}
25 |
--------------------------------------------------------------------------------
/src/app/home/home.page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Phaser + Ionic 4!
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
3 |
4 | import { HomePage } from './home.page';
5 |
6 | describe('HomePage', () => {
7 | let component: HomePage;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async(() => {
11 | TestBed.configureTestingModule({
12 | declarations: [ HomePage ],
13 | schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 | })
15 | .compileComponents();
16 | }));
17 |
18 | beforeEach(() => {
19 | fixture = TestBed.createComponent(HomePage);
20 | component = fixture.componentInstance;
21 | fixture.detectChanges();
22 | });
23 |
24 | it('should create', () => {
25 | expect(component).toBeTruthy();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewChild, AfterContentInit, HostListener } from '@angular/core';
2 | import { environment } from 'src/environments/environment';
3 | import { NotBoringHelloSceneService } from './../services/not-boring-hello-scene.service';
4 |
5 | @Component({
6 | selector: 'app-home',
7 | templateUrl: 'home.page.html',
8 | styleUrls: ['home.page.scss'],
9 | providers: [NotBoringHelloSceneService]
10 | })
11 | export class HomePage {
12 |
13 | public gameConfig: GameConfig = {
14 | title: environment.title,
15 | version: environment.version,
16 | type: Phaser.AUTO,
17 | width: window.innerWidth,
18 | height: window.innerHeight - 45,
19 | physics: {
20 | default: 'arcade',
21 | arcade: {
22 | gravity: { y: 300 },
23 | debug: false
24 | }
25 | },
26 | };
27 |
28 | constructor(private notBoringHelloScreenService: NotBoringHelloSceneService) {
29 | }
30 |
31 | public onGameReady(game: Phaser.Game): void {
32 | game.scene.add('Scene', this.notBoringHelloScreenService, true);
33 | }
34 |
35 | }
36 |
--------------------------------------------------------------------------------
/src/app/services/not-boring-hello-scene.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 |
3 | @Injectable({
4 | providedIn: 'root'
5 | })
6 | export class NotBoringHelloSceneService extends Phaser.Scene {
7 |
8 | dude;
9 | keys;
10 | sceneWidthHalf: number;
11 |
12 | public constructor() {
13 | super({ key: 'Scene' });
14 | }
15 |
16 | public preload() {
17 | this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
18 | this.sceneWidthHalf = window.innerWidth / 2;
19 | }
20 |
21 | public create(): void {
22 | this.dude = this.physics.add.sprite(this.sceneWidthHalf, 0, 'dude');
23 |
24 | this.dude.setBounce(0.2);
25 | this.dude.setCollideWorldBounds(true);
26 |
27 | this.anims.create({
28 | key: 'left',
29 | frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
30 | frameRate: 10,
31 | repeat: -1
32 | });
33 |
34 | this.anims.create({
35 | key: 'turn',
36 | frames: [{ key: 'dude', frame: 4 }],
37 | frameRate: 20
38 | });
39 |
40 | this.anims.create({
41 | key: 'right',
42 | frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
43 | frameRate: 10,
44 | repeat: -1
45 | });
46 |
47 | this.keys = this.input.keyboard.createCursorKeys();
48 | }
49 |
50 | public update() {
51 | if (this.keys.left.isDown || this.isLeftTouch()) {
52 | this.dude.setVelocityX(-160);
53 | this.dude.anims.play('left', true);
54 | } else if (this.keys.right.isDown || this.isRightTouch()) {
55 | this.dude.setVelocityX(160);
56 | this.dude.anims.play('right', true);
57 | } else {
58 | this.dude.setVelocityX(0);
59 | this.dude.anims.play('turn');
60 | }
61 |
62 | }
63 |
64 | private isLeftTouch() {
65 | return this.input.activePointer.isDown && this.input.activePointer.downX < this.sceneWidthHalf;
66 | }
67 |
68 | private isRightTouch() {
69 | return this.input.activePointer.isDown && this.input.activePointer.downX >= this.sceneWidthHalf;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/assets/dude.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/write2sv/ionic4-phaser3-template/e5b8ea11cf29cb8a9509789741620dd32cb42397/src/assets/dude.png
--------------------------------------------------------------------------------
/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/write2sv/ionic4-phaser3-template/e5b8ea11cf29cb8a9509789741620dd32cb42397/src/assets/icon/favicon.png
--------------------------------------------------------------------------------
/src/assets/shapes.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | title: 'IonicPhase',
8 | version: 'NEO'
9 | };
10 |
11 | /*
12 | * For easier debugging in development mode, you can import the following file
13 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
14 | *
15 | * This import should be commented out in production mode because it will have a negative impact
16 | * on performance if an error is thrown.
17 | */
18 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
19 |
--------------------------------------------------------------------------------
/src/global.scss:
--------------------------------------------------------------------------------
1 | // http://ionicframework.com/docs/theming/
2 | @import '~@ionic/angular/css/core.css';
3 | @import '~@ionic/angular/css/normalize.css';
4 | @import '~@ionic/angular/css/structure.css';
5 | @import '~@ionic/angular/css/typography.css';
6 |
7 | @import '~@ionic/angular/css/padding.css';
8 | @import '~@ionic/angular/css/float-elements.css';
9 | @import '~@ionic/angular/css/text-alignment.css';
10 | @import '~@ionic/angular/css/text-transformation.css';
11 | @import '~@ionic/angular/css/flex-utils.css';
12 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Ionic & Phaser
6 |
7 |
8 |
9 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | dir: require('path').join(__dirname, '../coverage'),
20 | reports: ['html', 'lcovonly'],
21 | fixWebpackSourcePaths: true
22 | },
23 | reporters: ['progress', 'kjhtml'],
24 | port: 9876,
25 | colors: true,
26 | logLevel: config.LOG_INFO,
27 | autoWatch: true,
28 | browsers: ['Chrome'],
29 | singleRun: false
30 | });
31 | };
32 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.log(err));
13 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /**
38 | * If the application will be indexed by Google Search, the following is required.
39 | * Googlebot uses a renderer based on Chrome 41.
40 | * https://developers.google.com/search/docs/guides/rendering
41 | **/
42 | // import 'core-js/es6/array';
43 |
44 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
45 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
46 |
47 | /** IE10 and IE11 requires the following for the Reflect API. */
48 | // import 'core-js/es6/reflect';
49 |
50 | /**
51 | * Web Animations `@angular/platform-browser/animations`
52 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
53 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
54 | **/
55 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
56 |
57 | /**
58 | * By default, zone.js will patch all possible macroTask and DomEvents
59 | * user can disable parts of macroTask/DomEvents patch by setting following flags
60 | */
61 |
62 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
63 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
64 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
65 |
66 | /*
67 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
68 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
69 | */
70 | // (window as any).__Zone_enable_cross_context_check = true;
71 |
72 | /***************************************************************************************************
73 | * Zone JS is required by default for Angular itself.
74 | */
75 | import 'zone.js/dist/zone'; // Included with Angular CLI.
76 |
77 |
78 | /***************************************************************************************************
79 | * APPLICATION IMPORTS
80 | */
81 | // Phaser 3 dist build attaches API to the global window object.
82 | import 'phaser/dist/phaser';
83 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/theming/
3 |
4 | /** Ionic CSS Variables **/
5 | :root {
6 | /** primary **/
7 | --ion-color-primary: #3880ff;
8 | --ion-color-primary-rgb: 56, 128, 255;
9 | --ion-color-primary-contrast: #ffffff;
10 | --ion-color-primary-contrast-rgb: 255, 255, 255;
11 | --ion-color-primary-shade: #3171e0;
12 | --ion-color-primary-tint: #4c8dff;
13 |
14 | /** secondary **/
15 | --ion-color-secondary: #0cd1e8;
16 | --ion-color-secondary-rgb: 12, 209, 232;
17 | --ion-color-secondary-contrast: #ffffff;
18 | --ion-color-secondary-contrast-rgb: 255, 255, 255;
19 | --ion-color-secondary-shade: #0bb8cc;
20 | --ion-color-secondary-tint: #24d6ea;
21 |
22 | /** tertiary **/
23 | --ion-color-tertiary: #7044ff;
24 | --ion-color-tertiary-rgb: 112, 68, 255;
25 | --ion-color-tertiary-contrast: #ffffff;
26 | --ion-color-tertiary-contrast-rgb: 255, 255, 255;
27 | --ion-color-tertiary-shade: #633ce0;
28 | --ion-color-tertiary-tint: #7e57ff;
29 |
30 | /** success **/
31 | --ion-color-success: #10dc60;
32 | --ion-color-success-rgb: 16, 220, 96;
33 | --ion-color-success-contrast: #ffffff;
34 | --ion-color-success-contrast-rgb: 255, 255, 255;
35 | --ion-color-success-shade: #0ec254;
36 | --ion-color-success-tint: #28e070;
37 |
38 | /** warning **/
39 | --ion-color-warning: #ffce00;
40 | --ion-color-warning-rgb: 255, 206, 0;
41 | --ion-color-warning-contrast: #ffffff;
42 | --ion-color-warning-contrast-rgb: 255, 255, 255;
43 | --ion-color-warning-shade: #e0b500;
44 | --ion-color-warning-tint: #ffd31a;
45 |
46 | /** danger **/
47 | --ion-color-danger: #f04141;
48 | --ion-color-danger-rgb: 245, 61, 61;
49 | --ion-color-danger-contrast: #ffffff;
50 | --ion-color-danger-contrast-rgb: 255, 255, 255;
51 | --ion-color-danger-shade: #d33939;
52 | --ion-color-danger-tint: #f25454;
53 |
54 | /** dark **/
55 | --ion-color-dark: #222428;
56 | --ion-color-dark-rgb: 34, 34, 34;
57 | --ion-color-dark-contrast: #ffffff;
58 | --ion-color-dark-contrast-rgb: 255, 255, 255;
59 | --ion-color-dark-shade: #1e2023;
60 | --ion-color-dark-tint: #383a3e;
61 |
62 | /** medium **/
63 | --ion-color-medium: #989aa2;
64 | --ion-color-medium-rgb: 152, 154, 162;
65 | --ion-color-medium-contrast: #ffffff;
66 | --ion-color-medium-contrast-rgb: 255, 255, 255;
67 | --ion-color-medium-shade: #86888f;
68 | --ion-color-medium-tint: #a2a4ab;
69 |
70 | /** light **/
71 | --ion-color-light: #f4f5f8;
72 | --ion-color-light-rgb: 244, 244, 244;
73 | --ion-color-light-contrast: #000000;
74 | --ion-color-light-contrast-rgb: 0, 0, 0;
75 | --ion-color-light-shade: #d7d8da;
76 | --ion-color-light-tint: #f5f6f9;
77 | }
78 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": []
6 | },
7 | "exclude": [
8 | "test.ts",
9 | "**/*.spec.ts"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "module": "es2015",
9 | "moduleResolution": "node",
10 | "emitDecoratorMetadata": true,
11 | "experimentalDecorators": true,
12 | "target": "es5",
13 | "typeRoots": [
14 | "node_modules/@types"
15 | ],
16 | "lib": [
17 | "es2018",
18 | "dom",
19 | "scripthost"
20 | ]
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-spacing": true,
20 | "indent": [
21 | true,
22 | "spaces"
23 | ],
24 | "interface-over-type-literal": true,
25 | "label-position": true,
26 | "max-line-length": [
27 | true,
28 | 140
29 | ],
30 | "member-access": false,
31 | "member-ordering": [
32 | true,
33 | {
34 | "order": [
35 | "static-field",
36 | "instance-field",
37 | "static-method",
38 | "instance-method"
39 | ]
40 | }
41 | ],
42 | "no-arg": true,
43 | "no-bitwise": true,
44 | "no-console": [
45 | true,
46 | "debug",
47 | "info",
48 | "time",
49 | "timeEnd",
50 | "trace"
51 | ],
52 | "no-construct": true,
53 | "no-debugger": true,
54 | "no-duplicate-super": true,
55 | "no-empty": false,
56 | "no-empty-interface": true,
57 | "no-eval": true,
58 | "no-inferrable-types": [
59 | true,
60 | "ignore-params"
61 | ],
62 | "no-misused-new": true,
63 | "no-non-null-assertion": true,
64 | "no-shadowed-variable": true,
65 | "no-string-literal": false,
66 | "no-string-throw": true,
67 | "no-switch-case-fall-through": true,
68 | "no-trailing-whitespace": true,
69 | "no-unnecessary-initializer": true,
70 | "no-unused-expression": true,
71 | "no-use-before-declare": true,
72 | "no-var-keyword": true,
73 | "object-literal-sort-keys": false,
74 | "one-line": [
75 | true,
76 | "check-open-brace",
77 | "check-catch",
78 | "check-else",
79 | "check-whitespace"
80 | ],
81 | "prefer-const": true,
82 | "quotemark": [
83 | true,
84 | "single"
85 | ],
86 | "radix": true,
87 | "semicolon": [
88 | true,
89 | "always"
90 | ],
91 | "triple-equals": [
92 | true,
93 | "allow-null-check"
94 | ],
95 | "typedef-whitespace": [
96 | true,
97 | {
98 | "call-signature": "nospace",
99 | "index-signature": "nospace",
100 | "parameter": "nospace",
101 | "property-declaration": "nospace",
102 | "variable-declaration": "nospace"
103 | }
104 | ],
105 | "unified-signatures": true,
106 | "variable-name": false,
107 | "whitespace": [
108 | true,
109 | "check-branch",
110 | "check-decl",
111 | "check-operator",
112 | "check-separator",
113 | "check-type"
114 | ],
115 | "directive-selector": [
116 | true,
117 | "attribute",
118 | "app",
119 | "camelCase"
120 | ],
121 | "component-selector": [
122 | true,
123 | "element",
124 | "app",
125 | "page",
126 | "kebab-case"
127 | ],
128 | "no-output-on-prefix": true,
129 | "use-input-property-decorator": true,
130 | "use-output-property-decorator": true,
131 | "use-host-property-decorator": true,
132 | "no-input-rename": true,
133 | "no-output-rename": true,
134 | "use-life-cycle-interface": true,
135 | "use-pipe-transform-interface": true,
136 | "directive-class-suffix": true
137 | }
138 | }
139 |
--------------------------------------------------------------------------------