Playground coming... with dat.gui

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+};

package.json

@@ -5,8 +5,9 @@
   "dependencies": {
     "@uirouter/react": "^0.5.4",
     "bootstrap": "^4.0.0-beta.3",
-    "pixi.js": "^4.6.2",
+    "dat.gui": "^0.7.1",
     "material-ui": "^0.20.0",
+    "pixi.js": "^4.6.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "1.0.17",
@@ -17,5 +18,9 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "eslint": "^4.19.0",
+    "eslint-plugin-react": "^7.7.0"
   }
 }

src/Game/Router.js

@@ -11,6 +11,13 @@ class Router {
 		this.routes[link] = actors;
 	}
 
+	clear = () => {
+		this.stage.removeChild(this.currentRoute);
+		if(this.currentRoute !== null)
+			this.currentRoute.destroy();
+		this.currentRoute = null;
+	}
+
 	go = (link) => {
 		const newRoute = this.routes[link];
 		if (this.currentRoute !== null)

src/Game/app.js

@@ -1,9 +1,10 @@
-import './app.css'
-import * as PIXI from 'pixi.js'
+import './app.css';
+import * as PIXI from 'pixi.js';
 
 import Router from './Router.js'
 import Menu from './views/Menu';
 
+let DATGUI = require('dat.gui');
 
 class App {
 	constructor(){
@@ -13,23 +14,27 @@ class App {
 		this.app.view.style.display = 'none';
 		document.body.appendChild(this.app.view);
 
-
 		this._router = new Router(this.app.stage);
-		this._router.addRoute('Login', new Menu(this.app, 'LoginMenuConfig.js'));
-		this._router.addRoute('Test', new Menu(this.app, 'TestMenuConfig.js'));
+		this._gui = new DATGUI.default.GUI();
+		// this._router.addRoute('Login', new Menu(this.app, 'LoginMenuConfig.js'));
+		// this._router.addRoute('Test', new Menu(this.app, 'TestMenuConfig.js'));
 	}
 	destroy() {
 		this.app.view.style.display = 'none';
 		this.animateables = [];
+		this._router.clear();
 	}
 	init() {
 		this.app.view.style.display = 'block';
-		this._router.go("Login");
+		//this._router.go("Login");
 	}
 
 	router() {
 		return this._router;	
 	}
+	gui() {
+		return this._gui;
+	}
 
 	/////////
 	resize = () => {
@@ -38,6 +43,7 @@ class App {
 	    this.app.renderer.view.style.width = w + 'px';
 	    this.app.renderer.view.style.height = h + 'px';
 	}
+
 	step(dt) {
 		for (let i=0; i < this.animateables.length; i+=1) {
 			try{
@@ -49,15 +55,28 @@ class App {
 			}
 		}
 	}
+
+	animate = (timestamp) => {
+		var progress = timestamp - this._time;
+		this._time = timestamp;
+		this.step(progress);
+		if(this._running) window.requestAnimationFrame(this.animate);
+	}
+
+	stop() {
+		this._running = false;
+	}
+
+	start() {
+		var timeStampInMs = window.performance && window.performance.now && window.performance.timing && window.performance.timing.navigationStart ? window.performance.now() + window.performance.timing.navigationStart : Date.now();
+		this._time = timeStampInMs;
+		this._running = true;
+	}
+
 	add = (a) => {
 		this.animateables.push(a);
 	}
 }
 
 const info = (e) => console.log(e);
-
-let singleton = null;
-function getSingleton () {
-	return singleton = (singleton === null ? new App() : singleton); 
-}
-export default getSingleton();
+export default new App();

src/Game/misc/Button.js

@@ -1,23 +1,38 @@
 import * as PIXI from 'pixi.js'
 class Button extends PIXI.Sprite{
-	constructor(text) {
-		super(PIXI.Texture.fromImage('/files/assets/ui/woodenbutton.png'));
-		this.text = text;
-		
-		this.anchor.set(0.5,0.5);
+    constructor(props) {
+        super(PIXI.Texture.fromImage('/files/assets/ui/woodenbutton.png'));
+        
+        let {
+            text,
+            Gui
+        } = props;
 
-		this.interactive = true;
-		this.buttonMode = true;
 
-		this.textNode = new PIXI.Text(text,{fontFamily : 'Arial', fontSize: 24, fill : 0xFFFFFF, align : 'center'});
-		this.textNode.anchor.set(0.5, 0.5);
-		
-		this.addChild(this.textNode);
-	}
+        this.text = text || '';
 
-	onClick(fn) {
-		this.on('pointerdown', (e) => fn(e));
-	}
+        if(Gui) {
+            this.Gui =  Gui;
+            this.controller = Gui.add(this, 'text').onFinishChange((v) => this.textNode.setText(v));
+        }
+        
+        this.anchor.set(0.5,0.5);
+        this.interactive = true;
+        this.buttonMode = true;
+        this.textNode = new PIXI.Text(text,{fontFamily : 'Arial', fontSize: 24, fill : 0xFFFFFF, align : 'center'});
+        this.textNode.anchor.set(0.5, 0.5);
+        this.addChild(this.textNode);
+    }
+
+
+    _kill() {
+        this.Gui.remove(this.controller);
+        this.destroy();
+    }
+
+    onClick(fn) {
+        this.on('pointerdown', (e) => fn(e));
+    }
 }
 
 export default Button;

src/Game/misc/Text.js

@@ -1,12 +1,29 @@
 import * as PIXI from 'pixi.js'
 class Text extends PIXI.Container{
-	constructor(text) {
+	constructor(props) {
 		super();
+		let {
+			text,
+			GameLayer,
+			Gui
+		} = props;
+
+		this.text = text || '';
+		if(Gui) {
+			this.Gui = Gui;
+			this.controller = Gui.add(this, 'text').onFinishChange((v) => this.setText(v));
+		}
+
 		this.textNode = new PIXI.Text(text,{fontFamily : 'Arial', fontSize: 28, fill : 0x000000, align : 'center'});
 		this.textNode.anchor.set(0.5,0.5);
 		this.addChild(this.textNode);
 	}
 
+	_kill() {
+		this.Gui.remove(this.controller);
+		this.destroy();
+	}
+
 	setText = (args) => this.textNode.setText(args);
 }
 

src/Game/misc/TextInput.js

@@ -1,18 +1,18 @@
-import * as PIXI from 'pixi.js'
-import * as PixiTextInput from './PixiTextInput.js'
+import * as PIXI from 'pixi.js';
+import * as PixiTextInput from './PixiTextInput.js';
 
 class TextInput extends PIXI.Container{
-	constructor(text, width) {
-		super();
-		this.inputNode = new PixiTextInput(text,{fontFamily : 'Arial', fontSize: 28, fill : 0x000000, align : 'center'});
-		this.inputNode.width = width || 320;
-		this.inputNode.pivot.set(this.inputNode.width/2, this.inputNode.height/2);
-		this.addChild(this.inputNode);
-	}
+    constructor(text, width) {
+        super();
+        this.inputNode = new PixiTextInput(text,{fontFamily : 'Arial', fontSize: 28, fill : 0x000000, align : 'center'});
+        this.inputNode.width = width || 320;
+        this.inputNode.pivot.set(this.inputNode.width/2, this.inputNode.height/2);
+        this.addChild(this.inputNode);
+    }
 
-	value() {
-		return this.value;
-	}
+    value() {
+        return this.value;
+    }
 }
 
 export default TextInput;

src/Game/services/InputManager.js

@@ -58,8 +58,8 @@ class InputManager {
 		this.keys['mouseY'] = 0;
 
 		window.addEventListener('mousemove', e => {
-			this.keys['mouseX'] = (e.pageX - offsetX) / window.innerWidth;
-        	this.keys['mouseY'] = (e.pageY - offsetY) / window.innerHeight;
+			this.keys['mouseX'] = (e.pageX ) / window.innerWidth;
+        	this.keys['mouseY'] = (e.pageY ) / window.innerHeight;
     	});
 
     	window.addEventListener('mousedown', e => {

src/Game/views/Menu.js

@@ -8,7 +8,7 @@ class Menu extends PIXI.Container{
 		this.buttons = require('./menuConfigs/'+config).default || [];
 		this.calculatePositions();
 		this.buttons.forEach((e,i) => this.addChild(e));
-
+		this.test = "dsa";
 		this.position.set(app.screen.width/2, app.screen.height/2);
 	}
 	calculatePositions() {

src/Playground/Loader.js

@@ -0,0 +1,42 @@
+import * as PIXI from 'pixi.js';
+
+class Loader extends PIXI.Container{
+
+    constructor(GameLayer) {
+        super();
+
+        this.GameLayer = GameLayer;
+
+        this.component = '';
+
+        let app = GameLayer.app;
+        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));
+    }
+
+    destroy() {
+    	this.controller.remove();
+    }
+
+    loadComponent = (component) => {
+    	if(this.instance) {
+    		this.removeChild(this.instance);
+    		this.instance._kill();
+    	}
+    	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.addChild(this.instance);
+    	} catch(e) {
+    		throw e;
+    	}
+    }
+}
+
+export default Loader;

src/Playground/index.js

@@ -0,0 +1,11 @@
+import * as PIXI from 'pixi.js';
+
+class Playground extends PIXI.Container{
+
+    constructor(app) {
+        super();
+        
+    }
+}
+
+export default new Playground();

src/components/Home.jsx

@@ -17,6 +17,9 @@ class Home extends Component {
 		    </header>,
 		    <p className="App-intro" key={2}>
 		      <Button color="primary" onClick={() => this.goTo('game')}>Play</Button>
+		    </p>,
+		    <p className="App-intro" key={3}>
+		      <Button color="danger" onClick={() => this.goTo('playground')}>Play</Button>
 		    </p>]
 	    );
   	}

src/components/Playground.jsx

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import './Game.css';
+
+import GameLayer from '../Game/index.js';
+
+import Loader from '../Playground/Loader.js';
+
+class Playground extends Component {
+	constructor(props) {
+		super(props);
+		
+		const router = GameLayer.router();
+       	const app = GameLayer.app;
+       	const gui = GameLayer.gui();
+
+       	const route = new Loader(GameLayer);
+
+       	router.addRoute('Loader', route);
+       	router.go('Loader');
+	}
+
+	componentDidMount() {
+       GameLayer.init();
+       
+	}
+	componentWillUnmount() {
+       GameLayer.destroy();
+	}
+
+	goTo = (stateName) => {
+		this.props.resolves.$transition$.router.stateService.go(stateName);
+	}
+
+	render() {
+	    return (
+			<div className="game-canvas-container" ref="gameCanvas" style={{overflow: 'hidden'}}>              
+			</div>
+	    );
+	}
+}
+
+export default Playground;

src/states.js

@@ -1,5 +1,6 @@
 import Game from './components/Game';
 import Home from './components/Home';
+import Playground from './components/Playground';
 
 export default [
 {
@@ -11,5 +12,10 @@ export default [
   name : 'game',
   url  : '/game',
   component: Game
+},
+{
+  name : 'playground',
+  url  : '/playground',
+  component: Playground
 }
 ];