Mid

src/Game/services/UserService.js

@@ -5,6 +5,13 @@ class UserService {
 
 	constructor() {
 		this.__enablePeristence = true;
+		let data = JSON.parse(localStorage.getItem('user') || {});
+		let { 
+			username,
+			token
+		} = data;
+		this.username = username;
+		this.token = token;
 	}
 
 	login(username, password) {
@@ -65,8 +72,8 @@ class UserService {
 	}
 
 	_checkDataIntegrity(data) {
-		let tkn = data.token.length;
-		let username = data.username.length;
+		let tkn = data.token && data.token.length;
+		let username = data.username && data.username.length;
 		return tkn && username;
 	}
 }

src/Game/views/demo/Login.js

@@ -12,9 +12,9 @@ class Login extends PIXI.Container{
         super();
         let {GameLayer, Gui} = props;
 
-        let email = new TextInput({GameLayer, width: 200});
+        let email = new TextInput({GameLayer, width: 250});
         this.addChild(email);
-        let password = new TextInput({GameLayer, width: 200});
+        let password = new TextInput({GameLayer, width: 250});
         this.addChild(password);
 
         let emailText = new Text({GameLayer, width: 200});
@@ -38,10 +38,13 @@ class Login extends PIXI.Container{
         password.position.set 	(0,0);
         loginBtn.position.set	(0,	100);
 
+        email.setText(UserService.username || '');
+
         // Events
         this.email = email;
         this.password = password;
         loginBtn.onClick((e) => this.login(e));
+        this.onLogin(() => alert("Logged in succesfully ! ! !"));
     }
 
     login() {
@@ -51,7 +54,8 @@ class Login extends PIXI.Container{
     	// UserService Singleton to be called
     	UserService.login(e,p)
     	.then((data) => {
-            console.log(data.body());
+            console.log(data);
+            this._onLogin();
     		return true;
     	})
     	.catch((err) => {
@@ -59,6 +63,14 @@ class Login extends PIXI.Container{
     	});
     }
 
+    _onLogin() {
+        this._onLoginFn();
+    }
+
+    onLogin(fn) {
+        this._onLoginFn = fn;
+    }
+
     _kill = () => {
 
     }

src/Game/views/demo/Menu.js

@@ -0,0 +1,53 @@
+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 Menu extends PIXI.Container{
+    constructor(props) {
+        super();
+        let {GameLayer, Gui} = props;
+
+        let Play = new Text({GameLayer, width: 250});
+        this.addChild(Play);
+        
+        let Market = new Text({GameLayer, width: 250});
+        this.addChild(Market);
+
+        let Collection = new Text({GameLayer, width: 250});
+        this.addChild(Collection);
+
+        let Logout = new Text({GameLayer, width: 200});
+        this.addChild(Logout);
+
+        // Set Properties
+        Play.setText("Play Game");
+        Market.setText("Market");
+        Collection.setText("Collection");
+        Logout.setText("Logout");
+
+        // Position It
+        Play.position.set	   (0, -150);
+        Market.position.set	   (0, -100)
+        Collection.position.set(0,-50);
+        Logout.position.set    (0,0);
+
+        Logout.onClick((e) => UserService.logout());
+        
+        Play.onClick(() => null);
+        Market.onClick(() => null);
+        Collection.onClick(() => null);
+    }
+
+    _kill = () => {
+
+    }
+
+    getAsJSON = () => {return {component: 'demo/Menu'}}
+}
+
+export default Menu;

src/Game/views/misc/Text.js

@@ -27,6 +27,11 @@ class Text extends GuiableContainer {
 		this.construct();
 	}
 
+	onClick(fn) {
+		this.textNode.interactive = true;
+		this.textNode.click = fn;
+	}
+
 	construct() {
 		this.textNode = new PIXI.Text(this.text,TextStyles[this.style]);
 		this.textNode.anchor.set(0.5,0.5);