Implements Navigator and Pipeline Login -> NEW* Building/Menu -> Logout

src/Game/services/UserService.js

@@ -3,72 +3,90 @@ import Net from './Net.js';
 
 class UserService {
 
-	constructor() {
-		this.__enablePeristence = true;
-	}
+    constructor() {
+        this.__enablePeristence = true;
+        this.__load();
+    }
 
-	login(username, password) {
-		let data = {
-			username,
-			password
-		};
-		return Net.post('users/login', data)
-				  .then((res) => res.json())
-				  .then((response) => {
-				  	return this._setUser(response);
-				  });
-	}
+    login(username, password) {
+        let data = {
+            username,
+            password
+        };
+        return Net.post('users/login', data)
+            .then((res) => res.json())
+            .then((response) => {
+                return this._setUser(response);
+            });
+    }
 
-	logout() {
-		// To request Token removal
-		this._unsetUser();
-	}
+    logout() {
+        // To request Token removal
+        this._unsetUser();
+    }
 
-	getUsername() {
-		return this.username;
-	}
+    getUsername() {
+        return this.username;
+    }
 
-	getToken() {
-		return this.token;
-	}
+    getToken() {
+        return this.token;
+    }
 
-	_unsetUser() {
-		// clear this singleton
-		this.username = null;
-		this.token = null;
-		this.__persistence();
-	}
-	
-	_setUser(data) {
-		if(!this._checkDataIntegrity(data)) {
-			throw data;
-		}
+    _unsetUser() {
+        // clear this singleton
+        this.username = null;
+        this.token = null;
+        this.__persistence();
+    }
+    
+    _setUser(data) {
+        if(!this._checkDataIntegrity(data)) {
+            throw data;
+        }
 
-		let {
-			username,
-			token
-		} = data;
+        let {
+            username,
+            token
+        } = data;
 
-		this.username = username;
-		this.token = token;
+        this.username = username;
+        this.token = token;
 
-		this.__persistence();
-		return data;
-	}
+        this.__persistence();
+        return data;
+    }
 
-	__persistence() {
-		if(!this.__enablePeristence)return;
-		localStorage.setItem('user', JSON.stringify({
-			username: this.username,
-			token   : this.token
-		}));
-	}
+    __persistence() {
+        if(!this.__enablePeristence)return;
+        localStorage.setItem('user', JSON.stringify({
+            username: this.username,
+            token   : this.token
+        }));
+    }
+    
+    __load() {
+        if(!this.__enablePeristence)return;
+        let user = localStorage.getItem('user');
+        try { 
+            let json = JSON.parse(user);
+            this.username = json.username;
+            this.token = json.token;
+        } catch (e) {
+            this._unsetUser();
+            console.log(e);
+        }
+    }
 
-	_checkDataIntegrity(data) {
-		let tkn = data.token.length;
-		let username = data.username.length;
-		return tkn && username;
-	}
+    isLogged() {
+        return this.username && this.username.length && this.token && this.token.length;
+    }
+
+    _checkDataIntegrity(data) {
+        let tkn = data.token && data.token.length;
+        let username = data.username && data.username.length;
+        return tkn && username;
+    }
 }
 
 export default new UserService();

src/Game/views/buildings/Menu.js

@@ -0,0 +1,83 @@
+import * as PIXI from 'pixi.js';
+import dragAndDrop from '../../../helpers/dragAndDrop';
+import GuiableContainer from '../../../helpers/Guiable';
+import Injector from '../../services/Injector';
+
+import UserService from '../../services/UserService';
+
+import Text from '../misc/Text';
+import Button from '../misc/Button';
+const BlueURL = '/files/assets/cards/frame_blue.png';
+const BlueImage = PIXI.Texture.fromImage(BlueURL);
+
+class Menu extends GuiableContainer{
+    constructor(props) {
+        super(props);
+        let {
+            x,
+            y
+        } = props;
+
+        // Properties Component 
+        //this.imageURL = image || getParam('imageURL');
+        this.position.set(x,y);
+
+        this.options = {
+            x: x || 0,
+            y: y || 0
+        };
+
+
+        // GUI
+        this.addFolder('Menu');
+        this.addToFolder('Menu', this.options, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('Menu', this.options, 'y').onFinishChange((v) => this.position.y = v);
+        //
+        this.construct(props);
+    }
+
+    construct(props) {
+        this.parentLayer = Injector.getByName('MainLayer');
+
+        this.textSprite = new Text({text: "123", y: -345});
+        this.textSprite.setText(UserService.getUsername() + ':' + UserService.getToken());
+            
+        let play = new Button({  y:-100 , Text: {text: "Play"}});
+        play.onClick((e) => alert(e));
+        let collection = new Button({  y:50 , Text: {text: "Collection"}});
+        collection.onClick((e) => alert(e));
+        let logout = new Button({  y:200 , Text: {text: "Logout"}});
+        logout.onClick((e) => {
+            let nav = Injector.getByName('Navigator');
+            UserService.logout();
+            nav.go('Login');
+        });
+
+
+
+        this.addChild(play);
+        this.addChild(collection);
+        this.addChild(logout);
+        this.addChild(this.textSprite);
+    }
+
+    update = () => {
+        this.textSprite.setText(UserService.getUsername() + ':' + UserService.getToken());
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'base/Menu',
+            x:  this.position.x,
+            y:  this.position.y,
+            id: this.options.id,
+            team: this.options.team
+        };
+    }
+}
+
+export default Menu;

src/Game/views/demo/Login.js

@@ -51,14 +51,29 @@ class Login extends PIXI.Container{
     	// UserService Singleton to be called
     	UserService.login(e,p)
     	.then((data) => {
-            console.log(data.body());
+            console.log(data);
+            if(this._onLogin)
+            	this._onLogin();
     		return true;
     	})
     	.catch((err) => {
-    		throw err;
+    		console.log(err);
+    		alert(JSON.stringify(err));
+    		//throw err;
     	});
     }
 
+    onLogin = (fn) => {
+    	this._onLogin = fn;
+    }
+
+    update = () => {
+    	if(UserService.isLogged()) {
+    		if( this._onLogin )
+    			this._onLogin();
+    	}
+    }
+
     _kill = () => {
 
     }

src/Game/views/demo/Navigation.js

@@ -0,0 +1,47 @@
+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';
+
+import Login from './Login';
+import Menu from '../buildings/Menu';
+
+
+class Navigation extends PIXI.Container{
+    constructor(props) {
+        super();
+        let {GameLayer, Gui} = props;
+
+        Injector.saveAs('Navigator',this);
+        this.routes = {
+            Login:   new Login({}),
+            Menu:    new Menu({})
+        }
+
+        this.addChild(this.routes.Login);
+
+        this.routes.Login.onLogin(() => this.go('Menu'));
+        this.current = this.routes.Login;
+        this.current.update();
+    }
+
+    go = (link) => {
+        if(!this.routes[link])return;
+        this.removeChild(this.current);
+        this.addChild(this.routes[link]);
+        this.current = this.routes[link];
+        this.current.update();
+    }
+
+    _kill = () => {
+
+    }
+
+    getAsJSON = () => {return {component: 'demo/Navigation'}}
+}
+
+export default Navigation;

src/Playground/Loader.js

@@ -23,6 +23,14 @@ class Loader extends PIXI.Container{
         this.gui.add(this, 'loadJSON');
 
         this.load();
+
+        document.onkeydown = (e) => {
+          var tabKey = 9;
+          if(e.keyCode == tabKey) {
+            e.preventDefault();
+            return false;
+          }
+        };
     }
 
     destroy() {