View port fixed!

src/Game/app.js

@@ -25,14 +25,25 @@ class App {
 		window.onresize = this.resize;
 		this.app.view.style.display = 'none';
 		document.body.appendChild(this.app.view);
-		this.resize();
 
-		this._router = new Router(this.app.stage);
+		this.viewStage = new PIXI.Container();
+		// var graphics = new PIXI.Graphics();
+		// graphics.beginFill(0xFFFF00,0.2);
+		// // set the line style to have a width of 5 and set the color to red
+		// graphics.lineStyle(5, 0xFF0000);
+		// // draw a rectangle
+		// graphics.drawRect(0, 0, 1280, 720);
+		// this.app.stage.addChild(graphics);
+
+		this.app.stage.addChild(this.viewStage);
+
+		this._router = new Router(this.viewStage);
 		
 		this._gui = new DATGUI.default.GUI();
 		DATGUI.default.GUI.toggleHide();
 		// this._router.addRoute('Login', new Menu(this.app, 'LoginMenuConfig.js'));
 		// this._router.addRoute('Test', new Menu(this.app, 'TestMenuConfig.js'));
+		this.resize();
 	}
 
 	destroy() {
@@ -59,22 +70,31 @@ class App {
 	}
 	/////////
 	resize = () => {
+		let stageDimensions = [1280, 720];
 		let ratio = 16/9;
-    	let w,h;
+    	var w,h,s,vw,vh,pw,ph;
+	    
 	    if (window.innerWidth / window.innerHeight >= ratio) {
-	        w = window.innerHeight * ratio;
+	        w = parseInt(window.innerHeight * ratio, 10);
 	        h = window.innerHeight;
+	        s = window.innerHeight / stageDimensions[1];
+	        vh = parseInt(h, 10);
+	        vw = parseInt(vh * ratio, 10);
+	        ph = parseInt(vh / 2, 10);
+	        pw = parseInt((window.innerWidth)/2, 10);
 	    } else {
 	        w = window.innerWidth;
-	        h = window.innerWidth / ratio;
+	        h = parseInt(window.innerWidth / ratio, 10);
+	        s = window.innerWidth / stageDimensions[0];
+	        vw = parseInt(w, 10);
+	        vh = parseInt(vw / ratio, 10);
+	        pw = parseInt(vw / 2, 10);
+	        ph = parseInt((window.innerHeight)/2, 10);
 	    }
-	    
-	    this.app.renderer.view.style.width = window.innerWidth + 'px';
-	    this.app.renderer.view.style.height = window.innerHeight + 'px';
-	    this.app.renderer.resize(window.innerWidth, window.innerHeight);
-	    
-	    this.app.stage.pivot.set(w/2,h/2);
-	    this.app.stage.position.set(w/2,h/2);
+	   	this.viewStage.position.set(640, 360);
+	    this.app.stage.position.set(pw - vw/2, ph - vh/2);
+	    this.app.stage.scale.set(s);
+	    this.app.renderer.resize(window.innerWidth-1, window.innerHeight-1);
 	}
 
 	step(dt) {

src/Game/views/base/Card.js

@@ -23,30 +23,41 @@ class Card extends GuiableContainer{
         super(props);
         let {
             x,
-            y
+            y,
+            id
         } = props;
 
         // Properties Component 
         //this.imageURL = image || getParam('imageURL');
         this.position.set(x,y);
 
-        this.x = x || 0;
-        this.y = y || 0;
+        this.options = {
+            x: x || 0,
+            y: y || 0,
+            team: false,
+            id: id || 0
+        };
 
         // GUI
         this.addFolder('Card');
         //this.addToFolder('Card', this, 'imageURL').onFinishChange((v) => this.loadImage(v));
-        this.addToFolder('Card', this, 'x').onFinishChange((v) => this.position.x = v);
-        this.addToFolder('Card', this, 'y').onFinishChange((v) => this.position.y = v);
-        this.addToFolder('Card', {team: false}, 'team').onFinishChange((v) => this.setTeam(v));
-        this.addToFolder('Card', {card: 0}, 'card', 0, 1).onFinishChange((v) => this.loadCard(v));
+        this.addToFolder('Card', this.options, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('Card', this.options, 'y').onFinishChange((v) => this.position.y = v);
+        this.addToFolder('Card', this.options, 'team').onFinishChange((v) => this.setTeam(v));
+        this.addToFolder('Card', this.options, 'id', 0, 1).onFinishChange((v) => this.loadCard(v));
         //
 
         this.construct(props);
     }
 
     construct(props) {
+        let {
+            id
+        } = props;
+
         let [w,h] = [494,683];
+        // Every card has a transparent region around so the hitArea is Reduced!!!
+        let [hw,hh] = [430,617];  
 
         this.sprite = new PIXI.Sprite();
         this.sprite.anchor.set(0.5,0.5);
@@ -67,7 +78,7 @@ class Card extends GuiableContainer{
         this.label.position.set(0,210);
 
         this.interactive = true;
-        this.hitArea = new PIXI.Rectangle(-w/2,-h/2,w,h);
+        this.hitArea = new PIXI.Rectangle(-hw/2,-hh/2,hw,hh);
         this.cursor = 'pointer';
 
         this.scale.set(0.5);
@@ -77,18 +88,18 @@ class Card extends GuiableContainer{
         this.addChild(this.frame);
         dragAndDrop(this);
 
-        this.loadCard(0);
+        this.loadCard(id || 0);
     }
 
     setTeam(team) {
         switch(team) {
-            case 0: case 'R': case 'r': case false:
-                this.frame.texture = RedImage;
-                break;
-            case 1: case 'B': case 'b': case true:
-                this.frame.texture = BlueImage;
-                break;
-            default:break;
+        case 0: case 'R': case 'r': case false:
+            this.frame.texture = RedImage;
+            break;
+        case 1: case 'B': case 'b': case true:
+            this.frame.texture = BlueImage;
+            break;
+        default: break;
         }
     }
 
@@ -139,8 +150,10 @@ class Card extends GuiableContainer{
     getAsJSON() {
         return {
             component: 'base/Card',
-            x: this.position.x,
-            y: this.position.y
+            x:  this.position.x,
+            y:  this.position.y,
+            id: this.options.id,
+            team: this.options.team
         };
     }
 }

src/Playground/Loader.js

@@ -2,23 +2,18 @@ import * as PIXI from 'pixi.js';
 import { getParam } from '../helpers/url.js';
 
 class Loader extends PIXI.Container{
-
     constructor(GameLayer) {
         super();
 
         this.GameLayer = GameLayer;
-
         var comp = getParam('component');
         this.component = comp || '';
 
-
-        let app = GameLayer.app;
+        // let app = GameLayer.app;
         GameLayer.toggleGui();
         GameLayer.start();
         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').listen();
         this.controller.onFinishChange((value) => this.loadComponent({component: value}));

src/helpers/dragAndDrop.js

@@ -38,7 +38,7 @@ function onDragStart(event)
     var newPosition = this.data.getLocalPosition(this);
     this.draggingOffset = newPosition;
 
-    this.draggingInitial   = this.data.getLocalPosition(this.parent);
+    this.draggingInitial   = this.data.getLocalPosition(this);
     this.draggingInitial.x -= this.draggingOffset.x;
     this.draggingInitial.y -= this.draggingOffset.y;