Moving

package.json

@@ -26,5 +26,15 @@
   "devDependencies": {
     "eslint": "^4.19.0",
     "eslint-plugin-react": "^7.7.0"
+  },
+  "proxy": {
+    // Matches any request starting with /api
+    "/api": {
+      "target": "<url_1>",
+      "ws": true,
+      "pathRewrite": {
+        "^/api": "/"
+      }
+    }
   }
 }

src/Game/Router.js

@@ -28,5 +28,4 @@ class Router {
 		this.currentRouteLink = link;
 	}
 }
-
 export default Router;

src/Game/app.js

@@ -72,9 +72,25 @@ class App {
 		DATGUI.default.GUI.toggleHide();
 		// this._router.addRoute('Login', new Menu(this.app, 'LoginMenuConfig.js'));
 		// this._router.addRoute('Test', new Menu(this.app, 'TestMenuConfig.js'));
+		Injector.saveAs('Router', this._router);
+
+		this.initializeRoutes();
+
 		this.resize();
 	}
 
+
+	initializeRoutes() {
+		let Router = this._router;
+		Router.addRoute('Login', {});
+
+		Router.addRoute('Menu', {});
+		Router.addRoute('Game', {});
+		Router.addRoute('Market', {});
+		Router.addRoute('Collection', {});
+		Router.addRoute('Booster', {});
+	}
+
 	destroy() {
 		this.app.view.style.display = 'none';
 		this.animateables = [];

src/Game/services/Net.js

@@ -1,3 +1,5 @@
+import UserService from './UserService';
+
 function checkIt(resp) {
     if ( Math.parseInt(resp.status / 100, 10) === 2) {
 	    return resp;
@@ -21,19 +23,21 @@ class Net {
 
 	get(url) {
 		url = this.baseURL + url;
-		return fetch(url, {method: 'GET'}).then(checkIt).catch(catchIt);
+		return window.fetch(url, {method: 'GET'}).then(checkIt).catch(catchIt);
 	}
 
 	post(url, body) {
-		url = this.baseURL + url;
-		return fetch(url, {
-			method: 'GET',
+		let urb = this.baseURL + url;
+		return window.fetch({
+			url: urb,
+			method: 'POST',
 			headers: {
-				'Content-Type':'application/json' 
+				'Content-Type':'application/json',
+				'Token' : UserService.getToken || ''
 			},
-			body: 
-		})
+			body: JSON.stringify(body)
+		});
 	}
 }
 
-module.exports = new Net();
+export default new Net('http://localhost:3000/api');

src/Game/services/UserService.js

@@ -1,4 +1,4 @@
-var Net = require('./net.js');
+import Net from './Net.js';
 
 
 class UserService {
@@ -8,12 +8,52 @@ class UserService {
 	}
 
 	login(username, password) {
+		let data = {
+			username,
+			password
+		};
+		return Net.post('login', data)
+				  .then((response) => {
+				  	return this._setUser(response);
+				  });
+	}
 
+	logout() {
+		// To request Token removal
+		this._unsetUser();
+	}
 
+	getUsername() {
+		return this.username;
+	}
+
+	getToken() {
+		return this.token;
+	}
 
+	_unsetUser() {
+		// clear this singleton
 	}
+	
+	_setUser(data) {
+		if(!this._checkDataIntegrity(data)) {
+			throw data;
+		}
+
+		let {
+			username,
+			token
+		} = data;
 
+		this.username = username;
+		this.token = token;
 
+		return data;
+	}
+
+	_checkDataIntegrity(data) {
+		return true;
+	}
 }
 
-export default UserService;
+export default new UserService();

src/Game/views/demo/Login.js

@@ -0,0 +1,73 @@
+import * as PIXI from 'pixi.js';
+import Injector from '../../services/Injector';
+
+import UserService from '../../services/UserService';
+
+import TextInput from '../misc/TextInput';
+import Text from '../misc/Text';
+import Button from '../misc/Button';
+
+class Login extends PIXI.Container{
+    constructor(props) {
+        super();
+        let {GameLayer, Gui} = props;
+        
+
+
+        let email = new TextInput({GameLayer, width: 200});
+        this.addChild(email);
+        let password = new TextInput({GameLayer, width: 200});
+        this.addChild(password);
+        
+        let emailText = new Text({GameLayer, width: 200});
+        this.addChild(emailText);
+        let passwordText = new Text({GameLayer, width: 200});
+        this.addChild(passwordText);
+
+        let loginBtn = new Button({GameLayer, width: 100});
+        this.addChild(loginBtn);
+        
+        // Set Properties
+        emailText.setText("Username/Email");
+        passwordText.setText("Password");
+        loginBtn.setText("Login");
+        loginBtn.scaleTo(0.75);
+
+        // Position It
+        emailText.position.set	(0, -150);
+        email.position.set		(0, -100)
+        passwordText.position.set(0,-50);
+        password.position.set 	(0,0);
+        loginBtn.position.set	(0,	100);
+
+        // Events
+        this.email = email;
+        this.password = password;
+        loginBtn.onClick((e) => this.login(e));
+
+
+    }
+
+    login() {
+		let e = this.email.getValue();
+    	let p = this.password.getValue();
+
+    	// UserService Singleton to be called
+    	UserService.login()
+    	.then((data) => {
+    		alert(data);
+    		return true;
+    	})
+    	.catch((err) => {
+    		throw err;
+    	});
+    }
+
+    _kill = () => {
+
+    }
+
+    getAsJSON = () => {return {component: 'demo/Login'}}
+}
+
+export default Login;

src/Game/views/misc/Button.js

@@ -46,6 +46,13 @@ class Button extends GuiableContainer{
         this.addChild(this.sprite);
 
         this.loadImage(this.imageURL);        
+
+        this.setText = this.textNode.setText; // Pass setText;
+    }
+
+    scaleTo(x) {
+        this.scale.set(x);
+        return this;
     }
 
     loadImage(img) {
@@ -59,6 +66,7 @@ class Button extends GuiableContainer{
 
     onClick(fn) {
         this.sprite.on('pointerdown', (e) => fn(e));
+        this.sprite.on('mouseup', (e) => fn(e));
         return this;
     }
 

src/Game/views/misc/Text.js

@@ -60,7 +60,7 @@ let TextStylesNames = {
 };
 
 let TextStyles = {
-	Normal: new PIXI.TextStyle({fontFamily : 'Arial', fontSize: 61, fill : 0xffffff, align : 'center'}),
+	Normal: new PIXI.TextStyle({fontFamily : 'Arial', fontSize: 28, fill : 0xffffff, 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'}),

src/Game/views/misc/TextInput.js

@@ -14,10 +14,10 @@ class TextInput extends GuiableContainer{
 
         this.style = style || 'heavy';
         this.text = text || '';
-        this.width = width || 120;
+        this.w = width || 120;
 
         this.addFolder('TextInput');
-        this.addToFolder('TextInput', this, 'text').onFinishChange((v) => this.setText(v)).listen();
+        this.addToFolder('TextInput', this, 'text').onFinishChange((v) => this.setText(v));
         this.addToFolder('TextInput', this, 'style', TextStylesNames).onFinishChange((v) => this.setStyle(v));
 
         this.construct(props); 
@@ -25,7 +25,7 @@ class TextInput extends GuiableContainer{
 
     construct() {
         this.inputNode = new PixiTextInput(this.text,TextStyles[this.style]);
-        this.inputNode.width = this.width || 320;
+        this.inputNode.width = this.w || 320;
         this.inputNode.pivot.set(this.inputNode.width/2, this.inputNode.height/2);
         this.addChild(this.inputNode);
     }