Added some stuff

src/Game/index.js

@@ -1,4 +1,4 @@
-import App from './app.js'
+import App from './app.js';
 
 
 

src/Game/services/Injector.js

@@ -0,0 +1,41 @@
+class Injector {
+    constructor(){
+        this.components = {};
+    }
+
+    getByName(name) {
+        return this.components[name];
+    }
+    
+    load(json) {
+        let  {
+            component,
+            children,
+            name,
+            ...rem
+        } = json;
+
+        if (this.components[name]) {
+            this.getByName(name);
+        }
+
+        try {
+            let ctor = require('../views/'+component).default;
+            let comp = new ctor(rem);
+            if (children) {
+                for (let i=0;i < children.length;i += 1) {
+                    comp.addChild(this.load(children[i]));
+                }
+            }
+            this.components[name] = comp;
+            return comp;
+        } catch (e) {
+            window.console.log('Injector[*]: Error loading JSON.');
+            return;
+        }
+    }
+}
+
+
+export default new Injector();
+

src/Game/views/Menu.js

@@ -1,22 +1,72 @@
 import * as PIXI from 'pixi.js';
+import GuiableContainer from '../../helpers/Guiable';
+import { getParam } from '../../helpers/url';
+import drag from '../../helpers/draggable';
+
+import Injector from '../services/Injector';
+
 
 const BUTTON_HEIGHT = 120;
-class Menu extends PIXI.Container{
-    constructor(app, config){
-        super();
-        this.stage = app.stage;
-        this.buttons = require('./menuConfigs/'+config).default || [];
+class Menu extends GuiableContainer{
+    constructor(props){
+        super(props);
+
+        this.children = [];
+        this.config = getParam('config') || '';
+
+        this.addFolder('Menu');
+        this.addToFolder('Menu', this, 'config').onFinishChange((v) => this.setConfig(v));
+
+        if (this.config.length > 3) {
+            this.setConfig(this.config);
+        }
+
+        this.setupHandlers();
+    }
+
+    setConfig(c) {
+        if(!c)return;
+        this.config = c;
+        this.loadConfig(c);
+    }
+
+    loadConfig(config) {
+        this._config = require('./configs/' + config).default || [];
+        let {
+            components
+        } = this._config;
+
+        for(let i=0; i < components.length; i+= 1) {
+            this.children.push(Injector.load(components[i]));
+        }
+
+        this.children.forEach((c) => this.addChild(c));
+
+    }
+
+    addToMenu(elem) {
+        this.elems.push(elem);
         this.calculatePositions();
-        this.buttons.forEach((e) => this.addChild(e));
-        this.test = 'dsa';
-        this.position.set(app.screen.width/2, app.screen.height/2);
     }
+
     calculatePositions() {
-        let length = this.buttons.length;
+        let length = this.elems.length;
         let top = length * BUTTON_HEIGHT/2;
-        this.buttons.forEach((b,i) => {
-            b.position.set(0,-top + i*BUTTON_HEIGHT + BUTTON_HEIGHT/2);
+        this.elems.forEach((e,i) => {
+            e.position.set(0,-top + i*BUTTON_HEIGHT + BUTTON_HEIGHT/2);
+        });
+    }
+
+
+    setupHandlers() {
+        let thebtn = Injector.getByName('TheBtn');
+        //setInterval(() => thebtn.position.x = Math.sin(window.performance.now())*200, 10);
+        thebtn.onClick(() => {
+            //alert('HAHAHAH');
         });
+        let thetxt = Injector.getByName('TheTxt');
+        thetxt.setText('HAHAHAHHAHAHAHAH');
+        drag(thebtn.sprite);
     }
 }
 

src/Game/views/configs/MainMenu.js

@@ -0,0 +1,14 @@
+
+
+let components = [];
+
+components.push({'image':'/files/assets/ui/woodenbutton.png','component':'misc/Button', Text: {'component':'misc/Text', 'text':'asdasd','style':'Heavy'}, 'name': 'r1', 'text':'asdasd','style':'Heavy','x':86,'y':59});
+components.push({'image':'/files/assets/ui/woodenbutton.png','component':'misc/Button', Text: {'component':'misc/Text', 'text':'asdasd','style':'Heavy'}, 'name': 'r2', 'text':'asdasd','style':'Heavy','x':0,'y':0});
+components.push({ name: 'TheTxt', 'component':'misc/Text', 'text':'asdasd','style':'Heavy', x: 0, y: 250});
+components.push({ name: 'TheBtn', 'component':'misc/Button','Text':{'component':'misc/Text','text':'dassda','style':'Heavy'},'image':'/files/assets/ui/woodenbutton.png','x':-378,'y':0});
+
+let MainMenu = {
+    components
+};
+
+export default MainMenu;

src/Game/views/menuConfigs/LoginMenuConfig.js

@@ -1,19 +0,0 @@
-import Button from '../../misc/Button.js'
-import TextInput from '../../misc/TextInput.js'
-import Text from '../../misc/Text.js'
-import App from '../../app.js'
-
-
-const buttons = [];
-buttons.push(new Text("Welcome to Mafalda!"));
-buttons.push(new TextInput("Username"));
-buttons.push(new TextInput("Password"));
-let button = new Button("Join world");
-button.onClick(() => {
-	console.log(App);
-	App.router().go("Test");
-});
-
-buttons.push(button);
-
-export default buttons;

src/Game/views/menuConfigs/TestMenuConfig.js

@@ -1,14 +0,0 @@
-import Button from '../../misc/Button.js'
-import TextInput from '../../misc/TextInput.js'
-import Text from '../../misc/Text.js'
-
-const buttons = [];
-buttons.push(new TextInput("Test input"));
-buttons.push(new Text("Welcome to Test Menu!"));
-let button = new Button("Test world");
-buttons.push(new TextInput("Test test "));
-button.onClick(() => alert("Test World! <3"));
-
-buttons.push(button);
-
-export default buttons;

src/Game/misc/Button.js → src/Game/views/misc/Button.js

@@ -1,9 +1,8 @@
 import * as PIXI from 'pixi.js';
-
 import Text from './Text.js';
-import { getParam } from '../../helpers/url';
+import { getParam } from '../../../helpers/url';
 
-import GuiableContainer from '../../helpers/Guiable';
+import GuiableContainer from '../../../helpers/Guiable';
 
 const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
 const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
@@ -12,16 +11,26 @@ class Button extends GuiableContainer{
     constructor(props) {
         super(props);
         let {
-            image
+            image,
+            x,
+            y
         } = props;
 
+        // Properties Component 
         this.imageURL = image || getParam('imageURL') || DefaultImageUrl;
-  
+        this.position.set(x,y);
+
+        this.x = x || 0;
+        this.y = y || 0;
+
+        // GUI
         this.addFolder('Button');
         this.addToFolder('Button', this, 'imageURL').onFinishChange((v) => this.loadImage(v));
-        this.addToFolder('Button', this.position, 'x').onFinishChange((v) => this.position.x = v).listen();
-        this.addToFolder('Button', this.position, 'y').onFinishChange((v) => this.position.y = v).listen();
-        
+        this.addToFolder('Button', this, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('Button', this, 'y').onFinishChange((v) => this.position.y = v);
+        // 
+
+
         this.construct(props);
     }
 
@@ -32,8 +41,7 @@ class Button extends GuiableContainer{
         this.sprite.buttonMode = true;
 
         //draggable(this.sprite);
-
-        this.textNode = new Text(props);
+        this.textNode = new Text({...(props.Text|| {}), Gui: props.Gui});
         this.sprite.addChild(this.textNode);
         this.addChild(this.sprite);
 
@@ -50,7 +58,7 @@ class Button extends GuiableContainer{
     }
 
     onClick(fn) {
-        this.on('pointerdown', (e) => fn(e));
+        this.sprite.on('pointerdown', (e) => fn(e));
     }
 
 
@@ -59,14 +67,14 @@ class Button extends GuiableContainer{
         super._kill();
     }
 
-    getAsJSON = () => {
+    getAsJSON() {
         return {
+            component: 'misc/Button',
+            Text: this.textNode.getAsJSON(),
             image: this.imageURL,
-            ...this.textNode.getAsJSON(),
             x: this.position.x,
-            y: this.position.y,
-            component: 'Button'
-        }
+            y: this.position.y
+        };
     }
 }
 

src/Game/misc/Dialogue.js → src/Game/views/misc/Dialogue.js

@@ -1,5 +1,5 @@
 import * as PIXI from 'pixi.js';
-import { getParam } from '../../helpers/url';
+import { getParam } from '../../../helpers/url';
 
 
 const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';

src/Game/misc/Text.js → src/Game/views/misc/Text.js

@@ -1,20 +1,27 @@
 import * as PIXI from 'pixi.js'
-import GuiableContainer from '../../helpers/Guiable'
+import GuiableContainer from '../../../helpers/Guiable'
 
 class Text extends GuiableContainer {
 	constructor(props) {
 		super(props);
 		let {
 			text,
-			style
+			style,
+			x,
+			y
 		} = props;
 
 		this.text = text || '';
 		this.style = style || '';
+		this.x = x || 0;
+		this.y = y || 0;
+
 
 		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.addToFolder('Text', this, 'x').onFinishChange((v) => this.position.x = v);
+		this.addToFolder('Text', this, 'y').onFinishChange((v) => this.position.y = v);
 
 
 		this.construct();
@@ -37,9 +44,9 @@ class Text extends GuiableContainer {
 
 	getAsJSON = () => {
 		return {
-			component: 'Text',
+			component: 'misc/Text',
 			text: this.text,
-			style: this.style
+			style: this.style,
 		}
 	}
 }

src/Game/misc/TextInput.js → src/Game/views/misc/TextInput.js

@@ -1,6 +1,5 @@
-import * as PIXI from 'pixi.js';
 import * as PixiTextInput from './PixiTextInput.js';
-import GuiableContainer from '../../helpers/Guiable';
+import GuiableContainer from '../../../helpers/Guiable';
 
 import { TextStylesNames, TextStyles } from './Text';
 
@@ -43,6 +42,15 @@ class TextInput extends GuiableContainer{
     getValue() {
         return this.inputNode.text;
     }
+
+    getAsJSON = () => {
+        return {
+            style: this.style,
+            text: this.text,
+            width: this.width,
+            component: 'misc/TextInput'
+        }
+    }
 }
 
 export default TextInput;

src/Playground/Loader.js

@@ -64,7 +64,7 @@ class Loader extends PIXI.Container{
     	}
     	try {
     		if (component.length < 3) return;
-    		let ctor = require('../Game/misc/' + component).default;
+    		let ctor = require('../Game/views/' + component).default;
     		this.instance = new ctor({GameLayer: this.GameLayer, Router: this.router, Gui: this.gui, ...props});
     		this.addChild(this.instance);
     	} catch(e) {

src/helpers/Guiable.js

@@ -1,5 +1,10 @@
 import * as PIXI from 'pixi.js';
 
+let Empty = {
+    onFinishChange: () => this,
+    listen: () => this
+
+}
 class GuiableContainer extends PIXI.Container { 
     constructor(props) {
         super();
@@ -16,24 +21,24 @@ class GuiableContainer extends PIXI.Container {
     }
 
     addFolder = (name) => {
-        if (!this.Gui) return;
+        if (!this.Gui) return Empty;
         this.folders[name] = this.Gui.addFolder(name);
     }
 
     addToFolder = (name, ...props) => {
-        if (!this.Gui) return;
+        if (!this.Gui) return Empty;
         return this.folders[name].add(...props);
     }
 
     addGui = (...props) => {
-        if (!this.Gui) return;
+        if (!this.Gui) return Empty;
         let cont = this.Gui.add(...props);
         this.controllers.push(cont);
         return cont;
     }
 
     _kill() {
-        if (!this.Gui) return;
+        if (!this.Gui) return Empty;
         this.controllers.forEach((a) => a.remove());
         for(var k in this.folders) {
             this.Gui.removeFolder(k);