Save / Load :P

src/Game/app.js

@@ -5,6 +5,7 @@ import Router from './Router.js'
 import Menu from './views/Menu';
 
 let DATGUI = require('dat.gui');
+// Polyfill removeFolder
 DATGUI.default.GUI.prototype.removeFolder = function(name) {
   var folder = this.__folders[name];
   if (!folder) {
@@ -15,7 +16,7 @@ DATGUI.default.GUI.prototype.removeFolder = function(name) {
   delete this.__folders[name];
   this.onResize();
 }
-
+////
 class App {
 	constructor(){
 		this.animateables = [];
@@ -25,7 +26,9 @@ class App {
 		document.body.appendChild(this.app.view);
 
 		this._router = new Router(this.app.stage);
+		
 		this._gui = new DATGUI.default.GUI();
+		DATGUI.default.GUI.toggleHide();
 		// this._router.addRoute('Login', new Menu(this.app, 'LoginMenuConfig.js'));
 		// this._router.addRoute('Test', new Menu(this.app, 'TestMenuConfig.js'));
 	}
@@ -49,6 +52,9 @@ class App {
 		return this._gui;
 	}
 
+	toggleGui() {
+		DATGUI.default.GUI.toggleHide();
+	}
 	/////////
 	resize = () => {
     	const w = window.innerWidth;

src/Game/misc/State.js

@@ -1,15 +1,15 @@
 class State {
 
-	constructor(){
+    constructor(){
 
-	}
+    }
 
-	setState(data) {
-		this.state = {
-			...this.state, 
-			...data
-		};
-		if(this.onStateUpdate)this.onStateUpdate();
-	}
+    setState(data) {
+        this.state = {
+            ...this.state, 
+            ...data
+        };
+        if(this.onStateUpdate)this.onStateUpdate();
+    }
 }
 export default State;

src/Game/misc/Text.js

@@ -1,32 +1,69 @@
 import * as PIXI from 'pixi.js'
-class Text extends PIXI.Container{
+import GuiableContainer from '../../helpers/Guiable'
+
+class Text extends GuiableContainer{
 	constructor(props) {
-		super();
+		super(props);
 		let {
 			text,
-			GameLayer,
-			Gui
+			style
 		} = props;
 
 		this.text = text || '';
-		if(Gui) {
-			this.Gui = Gui;
-			this.folder = Gui.addFolder("Text");
-			this.controller = this.folder.add(this, 'text').onFinishChange((v) => this.setText(v));
-		}
+		this.style = style || '';
+
+		this.addFolder("Text");
+		this.addToFolder('Text', this, 'text').onFinishChange((v) => this.setText(v));
+
+		this.addToFolder('Text', this, 'style', TextStylesNames).onFinishChange((v) => this.setStyle(v));
 
-		this.textNode = new PIXI.Text(text,{fontFamily : 'Arial', fontSize: 28, fill : 0x000000, align : 'center'});
+		this.construct();
+	}
+
+	construct() {
+		this.textNode = new PIXI.Text(this.text,TextStyles[this.style]);
 		this.textNode.anchor.set(0.5,0.5);
 		this.addChild(this.textNode);
 	}
 
-	_kill() {
-		this.controller.remove();
-		this.Gui.removeFolder('Text');
-		this.destroy();
+	getAsJSON = () => {
+		return {
+			component: 'Text',
+			text: this.text,
+			style: this.style
+		}
 	}
 
-	setText = (args) => this.textNode.setText(args);
+	setText = (args) => {
+		this.text = args;
+		this.textNode.text = args;
+	}
+	setStyle = (args) => {
+		this.style = args;
+		this.textNode.style = TextStyles[args];
+	}
+
+	static get styles() { return 1; }
 }
 
-export default Text;
+let TextStylesNames = {
+	Normal: 'Normal',
+	Light:  'Light',
+	Heavy:  'Heavy',
+	Comic:  'Comic',
+	Info:   'Info'
+};
+
+let TextStyles = {
+	Normal: new PIXI.TextStyle({fontFamily : 'Arial', fontSize: 21, fill : 0x000000, align : 'center'}),
+	Light:  new PIXI.TextStyle({fontFamily : 'Arial', fontSize: 22, fill : 0x000000, align : 'center'}),
+	Heavy:  new PIXI.TextStyle({fontFamily : 'Tahoma', fontSize: 25, fill : 0x022005, align : 'center'}),
+	Comic:  new PIXI.TextStyle({fontFamily : 'Arial', fontSize: 28, fill : 0x000000, align : 'Left'}),
+	Info: 	new PIXI.TextStyle({fontFamily : 'Arial', fontSize: 28, fill : 0x000000, align : 'center'})
+};
+
+
+export {
+	TextStyles
+};
+export default Text;

src/Playground/Loader.js

@@ -13,23 +13,51 @@ class Loader extends PIXI.Container{
 
 
         let app = GameLayer.app;
+        GameLayer.toggleGui();
         this.gui = GameLayer.gui();
         this.router = GameLayer.router();
         this.position.set(app.screen.width/2, app.screen.height/2);
 
 
-        this.controller = this.gui.add(this, 'component');
-        this.controller.onFinishChange((value) => this.loadComponent(value));
+        this.controller = this.gui.add(this, 'component').listen();
+        this.controller.onFinishChange((value) => this.loadComponent({component: value}));
+
+        this.gui.add(this, 'save');
+        this.gui.add(this, 'load');
 
         if(this.component)
-            this.loadComponent(this.component);
+            this.loadComponent({component: this.component});
     }
 
     destroy() {
     	this.controller.remove();
+        this.GameLayer.toggleGui();
+    }
+
+    load = () => {
+        var loadJSON = prompt("Enter load info...", "");
+        
+        let jsonData = null;
+        try { 
+            jsonData = JSON.parse(loadJSON);
+        } catch (e) {
+            alert("Error parsing input data!");
+        }
+
+        this.loadComponent(jsonData);
+    }
+
+    save = () => {
+        let data = JSON.stringify(this.instance.getAsJSON());
+        alert(data);
     }
 
-    loadComponent = (component) => {
+    loadComponent = (params) => {
+        let {
+            component, 
+            ...props
+        } = params;
+        this.component = component;
     	if (this.instance) {
     		this.removeChild(this.instance);
     		this.instance._kill();
@@ -37,7 +65,7 @@ class Loader extends PIXI.Container{
     	try {
     		if (component.length < 3) return;
     		let ctor = require('../Game/misc/' + component).default;
-    		this.instance = new ctor({GameLayer: this.GameLayer, Router: this.router, Gui: this.gui});
+    		this.instance = new ctor({GameLayer: this.GameLayer, Router: this.router, Gui: this.gui, ...props});
     		this.addChild(this.instance);
     	} catch(e) {
     		throw e;

src/helpers/Guiable.js

@@ -0,0 +1,45 @@
+import * as PIXI from 'pixi.js';
+
+class GuiableContainer extends PIXI.Container { 
+    constructor(props) {
+        super();
+        let {
+            GameLayer,
+            Gui
+        } = props;
+
+        this.Gui = Gui;
+        if(Gui) {
+            this.Gui = Gui;
+            this.controllers = [];
+            this.folders = {};
+        }
+    }
+
+    addFolder = (name) => {
+        if (!this.Gui) return;
+        this.folders[name] = this.Gui.addFolder(name);
+    }
+
+    addToFolder = (name, ...props) => {
+        if (!this.Gui) return;
+        return this.folders[name].add(...props);
+    }
+
+    addGui = (...props) => {
+        if (!this.Gui) return;
+        let cont = this.Gui.add(...props);
+        this.controllers.push(cont);
+        return cont;
+    }
+
+    _kill() {
+        if (!this.Gui) return;
+        this.controllers.forEach((a) => a.remove());
+        for(var k in this.folders) {
+            this.Gui.removeFolder(k);
+        }
+    }
+}
+
+export default GuiableContainer;