made app compatible with nw.js

Author: Vegita2

.gitignore

@@ -28,6 +28,7 @@
 /.sass-cache
 /connect.lock
 /coverage
+/nwjs
 /libpeerconnection.log
 npm-debug.log
 testem.log

backend/src/server.ts

@@ -18,7 +18,7 @@ const app = express();
 app.set('port', process.env.PORT || 8080);
 app.use(cors());
 app.use('/public', express.static(path.join(__dirname, 'public'), {maxAge: 0}));
-app.use('/source', express.static(config.pathToCrosscode, {maxAge: 0}));
+app.use(express.static(config.pathToCrosscode, {maxAge: 0}));
 // app.use(compression());
 app.use(logger('dev'));
 app.use(bodyParser.json());

webapp/nwjs/package.json

@@ -0,0 +1,11 @@
+{
+	"name": "cc-map-editor",
+	"main": "index.html",
+	"version": "0.0.1",
+	"window": {
+		"title": "CrossCode Map Editor",
+		"width": 1280,
+		"height": 720,
+		"icon": "favicon.ico"
+	}
+}

webapp/package.json

@@ -1,54 +1,56 @@
 {
-  "name": "map-editor",
-  "version": "0.0.0",
-  "license": "MIT",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^4.3.5",
-    "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.2.4",
-    "@angular/compiler": "^4.2.4",
-    "@angular/core": "^4.2.4",
-    "@angular/flex-layout": "^2.0.0-beta.8",
-    "@angular/forms": "^4.2.4",
-    "@angular/http": "^4.2.4",
-    "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.2.4",
-    "@angular/platform-browser-dynamic": "^4.2.4",
-    "@angular/router": "^4.2.4",
-    "core-js": "^2.4.1",
-    "jsoneditor": "^5.9.6",
-    "phaser-ce": "^2.8.7",
-    "rxjs": "^5.4.2",
-    "zone.js": "^0.8.14"
-  },
-  "devDependencies": {
-    "@angular/cli": "1.3.1",
-    "@angular/compiler-cli": "^4.2.4",
-    "@angular/language-service": "^4.2.4",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/jsoneditor": "^5.5.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~3.1.1",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
-    "ts-node": "~3.2.0",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
-  }
+	"name": "cc-map-editor",
+	"version": "0.1.0",
+	"license": "MIT",
+	"scripts": {
+		"ng": "ng",
+		"start": "ng serve",
+		"build": "ng build && cpx nwjs/package.json dist",
+		"test": "ng test",
+		"lint": "ng lint"
+	},
+	"private": true,
+	"dependencies": {
+		"@angular/animations": "^4.3.5",
+		"@angular/cdk": "^2.0.0-beta.8",
+		"@angular/common": "^4.2.4",
+		"@angular/compiler": "^4.2.4",
+		"@angular/core": "^4.2.4",
+		"@angular/flex-layout": "^2.0.0-beta.8",
+		"@angular/forms": "^4.2.4",
+		"@angular/http": "^4.2.4",
+		"@angular/material": "^2.0.0-beta.8",
+		"@angular/platform-browser": "^4.2.4",
+		"@angular/platform-browser-dynamic": "^4.2.4",
+		"@angular/router": "^4.2.4",
+		"core-js": "^2.4.1",
+		"jsoneditor": "^5.9.6",
+		"phaser-ce": "^2.8.7",
+		"rxjs": "^5.4.2",
+		"zone.js": "^0.8.14"
+	},
+	"devDependencies": {
+		"@angular/cli": "1.3.1",
+		"@angular/compiler-cli": "^4.2.4",
+		"@angular/language-service": "^4.2.4",
+		"@types/jasmine": "~2.5.53",
+		"@types/jasminewd2": "~2.0.2",
+		"@types/jsoneditor": "^5.5.2",
+		"@types/node": "~6.0.60",
+		"@types/nw.js": "^0.13.7",
+		"codelyzer": "~3.1.1",
+		"cpx": "^1.5.0",
+		"jasmine-core": "~2.6.2",
+		"jasmine-spec-reporter": "~4.1.0",
+		"karma": "~1.7.0",
+		"karma-chrome-launcher": "~2.1.1",
+		"karma-cli": "~1.0.1",
+		"karma-coverage-istanbul-reporter": "^1.2.1",
+		"karma-jasmine": "~1.1.0",
+		"karma-jasmine-html-reporter": "^0.2.2",
+		"protractor": "~5.1.2",
+		"ts-node": "~3.2.0",
+		"tslint": "~5.3.2",
+		"typescript": "~2.3.3"
+	}
 }

webapp/src/app/app.module.ts

@@ -33,6 +33,7 @@ import {Vec2WidgetComponent} from './sidenav/entities/widgets/vec2-widget/vec2-w
 import {AddEntityMenuComponent} from './editor/add-entity-menu/add-entity-menu.component';
 import {HttpClientModule} from '@angular/common/http';
 import {JsonEditorComponent} from './shared/json-editor/json-editor.component';
+import {HttpClientService} from './shared/http-client.service';
 
 @NgModule({
 	declarations: [
@@ -87,6 +88,7 @@ import {JsonEditorComponent} from './shared/json-editor/json-editor.component';
 	],
 	providers: [
 		MapLoaderService,
+		HttpClientService,
 		GlobalEventsService,
 		WidgetRegistryService,
 	],

webapp/src/app/phaser/phaser.component.ts

@@ -2,16 +2,14 @@ import {AfterViewInit, Component, ElementRef, HostListener, OnDestroy, OnInit} f
 import * as Phaser from 'phaser-ce';
 import {MapLoaderService} from '../shared/map-loader.service';
 import {Subscription} from 'rxjs/Subscription';
-import {CrossCodeMap} from '../shared/interfaces/cross-code-map';
 import {MapPan} from '../shared/phaser/map-pan';
 import {CCMap} from '../shared/phaser/tilemap/cc-map';
 import {TileDrawer} from '../shared/phaser/tilemap/tile-drawer';
 import {EntityManager} from '../shared/phaser/entities/entity-manager';
 import {GlobalEventsService} from '../shared/global-events.service';
 import {EditorView} from '../shared/interfaces/editor-view';
 import {Globals} from '../shared/globals';
-import {PropSheet, ScalableProp} from '../shared/interfaces/props';
-import {HttpClient} from '@angular/common/http';
+import {HttpClientService} from '../shared/http-client.service';
 
 @Component({
 	selector: 'app-phaser',
@@ -33,11 +31,11 @@ export class PhaserComponent implements OnInit, OnDestroy {
 	constructor(private element: ElementRef,
 	            private mapLoader: MapLoaderService,
 	            private globalEvents: GlobalEventsService,
-	            private http: HttpClient) {
+	            private http: HttpClientService) {
 	}
 
 	ngOnInit() {
-		this.http.get(Globals.URL + 'api/allFiles').subscribe(res => {
+		this.http.getAllFiles().subscribe(res => {
 			this.game = new Phaser.Game(screen.width * window.devicePixelRatio, screen.height * window.devicePixelRatio, Phaser.CANVAS, 'content', {
 				create: () => this.create(),
 				update: () => this.update(),
@@ -101,13 +99,13 @@ export class PhaserComponent implements OnInit, OnDestroy {
 
 	preload(res) {
 		// res.data.forEach(json => {
-		// 	this.game.load.json(json, Globals.URL + 'source/' + json);
+		// 	this.game.load.json(json, Globals.URL + json);
 		// });
 		res.images.forEach(img => {
-			this.game.load.image(img, Globals.URL + 'source/' + img);
+			this.game.load.image(img, Globals.URL + img);
 		});
 
-		this.game.load.json('definitions.json', Globals.URL + 'public/definitions.json');
+		this.game.load.json('definitions.json', 'assets/definitions.json');
 		this.game.load.crossOrigin = 'anonymous';
 
 		this.game.load.onLoadComplete.addOnce(() => {

webapp/src/app/shared/globals.ts

@@ -1,4 +1,5 @@
 export class Globals {
+	static isNwjs = false;
 	static game: Phaser.Game;
 	static TILE_SIZE = 16;
 	static URL = 'http://localhost:8080/';

webapp/src/app/shared/http-client.service.ts

@@ -0,0 +1,78 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs/Observable';
+import {Globals} from './globals';
+
+declare let nw: any;
+declare let chrome: any;
+
+@Injectable()
+export class HttpClientService {
+	
+	private fs;
+	private path;
+	private config;
+	
+	constructor(private http: HttpClient) {
+		if (Globals.isNwjs) {
+			this.fs = requireNode('fs');
+			this.path = requireNode('path');
+			try {
+				this.config = JSON.parse(this.fs.readFileSync(this.path.join(nw.App.dataPath, 'config.json')));
+				Globals.URL = 'file:///' + this.config.pathToCrosscode;
+			} catch (e) {
+				this.selectCcFolder();
+			}
+		}
+	}
+	
+	getAllFiles(): Observable<Object> {
+		if (!Globals.isNwjs) {
+			return this.http.get(Globals.URL + 'api/allFiles');
+		}
+		return new Observable(obs => {
+			try {
+				const o = {
+					images: this.listAllFiles(this.config.pathToCrosscode + 'media/', [], 'png'),
+					data: this.listAllFiles(this.config.pathToCrosscode + 'data/', [], 'json')
+				};
+				
+				obs.next(o);
+				obs.complete();
+			} catch (e) {
+				console.error(e);
+				this.selectCcFolder();
+			}
+		});
+	}
+	
+	private selectCcFolder() {
+		const fs = this.fs;
+		const path = this.path;
+		const dirInput = document.getElementById('inputDirectory');
+		
+		dirInput.addEventListener('change', function (evt) {
+			const ccPath: string = (<any>this).value + '\\';
+			fs.writeFileSync(path.join(nw.App.dataPath, 'config.json'), JSON.stringify({pathToCrosscode: ccPath}, null, 2));
+			console.log(nw.App.dataPath);
+			chrome.runtime.reload();
+		}, false);
+		
+		dirInput.click();
+	}
+	
+	private listAllFiles(dir: string, filelist, ending: string): string[] {
+		const files = this.fs.readdirSync(dir);
+		const that = this;
+		filelist = filelist || [];
+		files.forEach(function (file) {
+			if (that.fs.statSync(dir + file).isDirectory()) {
+				filelist = that.listAllFiles(dir + file + '/', filelist, ending);
+			} else if (!ending || file.toLowerCase().endsWith(ending.toLowerCase())) {
+				filelist.push((dir + file).split(that.config.pathToCrosscode)[1]);
+			}
+		});
+		return filelist;
+		
+	}
+}

webapp/src/app/shared/json-editor/json-editor.component.ts

@@ -13,7 +13,7 @@ export class JsonEditorComponent implements AfterViewInit {
 
 	private editor: JSONEditor;
 	private options: JSONEditorOptions;
-	private data;
+	data;
 	private key: string;
 	json = JSON;
 

webapp/src/app/shared/phaser/helper.ts

@@ -96,7 +96,7 @@ export class Helper {
 		}
 
 		// load json
-		game.load.json(key, Globals.URL + 'source/' + key + '.json');
+		game.load.json(key, Globals.URL + key + '.json');
 		game.load.onLoadComplete.addOnce(() => {
 			return callback(game.cache.getJSON(key));
 		});