Moving to desktop

src/Game/app.js

@@ -1,5 +1,6 @@
 import './app.css';
 import * as PIXI from 'pixi.js';
+import * as tweenManager from 'pixi-tween';
 
 import Router from './Router.js';
 
@@ -23,6 +24,7 @@ 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);
 		
@@ -56,10 +58,22 @@ class App {
 	}
 	/////////
 	resize = () => {
-    	const w = window.innerWidth;
-	    const h = window.innerHeight;
-	    this.app.renderer.view.style.width = w + 'px';
-	    this.app.renderer.view.style.height = h + 'px';
+		let ratio = 16/9;
+    	let w,h;
+	    if (window.innerWidth / window.innerHeight >= ratio) {
+	        w = window.innerHeight * ratio;
+	        h = window.innerHeight;
+	    } else {
+	        w = window.innerWidth;
+	        h = window.innerWidth / ratio;
+	    }
+	    
+	    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);
 	}
 
 	step(dt) {
@@ -78,6 +92,7 @@ class App {
 		var progress = timestamp - this._time;
 		this._time = timestamp;
 		this.step(progress);
+		PIXI.tweenManager.update();
 		if(this._running) window.requestAnimationFrame(this.animate);
 	}
 
@@ -89,6 +104,8 @@ class App {
 		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;
+		console.log("Starting Request Animation Frame");
+		window.requestAnimationFrame(this.animate);
 	}
 
 	add = (a) => {

src/Game/views/base/Card.js

@@ -2,11 +2,12 @@ import * as PIXI from 'pixi.js';
 //import Text from './Text.js';
 import { getParam } from '../../../helpers/url';
 
-import draggable from '../../../helpers/draggable';
 import dragAndDrop from '../../../helpers/dragAndDrop';
 
 import GuiableContainer from '../../../helpers/Guiable';
 
+
+
 const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
 const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
 
@@ -34,6 +35,7 @@ class Card extends GuiableContainer{
         //
 
         this.construct(props);
+        window.MM = this;
     }
 
     construct(props) {
@@ -52,6 +54,12 @@ class Card extends GuiableContainer{
         dragAndDrop(this);
 
         this.loadImage(this.imageURL);
+
+
+        this._tween = PIXI.tweenManager.createTween(this);
+        this._tween.time = 1000;
+        this._tween.easing = PIXI.tween.Easing.outQuart();
+        this._tween.loop = false;
     }
 
     loadImage(img) {
@@ -67,6 +75,26 @@ class Card extends GuiableContainer{
         this.sprite.on('pointerdown', (e) => fn(e));
     }
 
+    // Animate to Position
+    moveTo(point, milliseconds=1000) {
+        let path = new PIXI.tween.TweenPath();
+        path.moveTo(this.position.x, this.position.y).lineTo(point.x, point.y);
+        this._tween.path = path;
+        this._tween.time = milliseconds;
+        this._tween.start();
+    }
+    // Animate Scale
+    scaleTo(newscale, milliseconds=1000) {
+        this._tween.from({
+            scale: { x: this.scale.x, y: this.scale.y }
+        });
+        this._tween.to({
+            scale: { x: newscale, y: newscale }
+        });
+        this._tween.time = milliseconds;
+        this._tween.start();
+    }
+
     _kill() {
         super._kill();
     }

src/Game/views/base/CardHolder.js

@@ -33,7 +33,7 @@ class CardHolder extends GuiableContainer{
         this.construct(props);
     }
 
-    construct(props) {
+    construct() {
         this.sprite = new PIXI.Graphics();
         this.sprite.beginFill(0xFFFF00,0.1);
 
@@ -44,7 +44,10 @@ class CardHolder extends GuiableContainer{
         this.sprite.interactive = true;
         this.sprite.hitArea = new PIXI.Rectangle(0, 0, this.w, this.h);
         this.sprite.cursor = 'pointer';
-        this.sprite.on('mouseup', () => EventManager.trigger('CardPlaced', [this.position]));
+        this.sprite.on('mouseup', () => {
+            // This is called before it is removed from the DragEnd Callback
+            EventManager.trigger('CardPlaced', [this.position, this._onDrop]); 
+        });
 
         this.position.set(this.x,this.y);
 
@@ -71,7 +74,7 @@ class CardHolder extends GuiableContainer{
     }
 
     onDrop(fn) {
-        // TODO
+        this._onDrop = fn;
     }
 
     _kill() {

src/Game/views/demo/CardToHolder.js

@@ -4,12 +4,15 @@ import Card from '../base/Card';
 import CardHolder from '../base/CardHolder';
 
 class CardToHolder extends PIXI.Container{
-    constructor() {
+    constructor(props) {
         super();
 
-        let card = new Card({});
+        let {GameLayer} = props;
+
+        let card = new Card({GameLayer});
         this.addChild(card);
-        let card2 = new Card({'x': -200});
+        
+        let card2 = new Card({GameLayer, 'x': -200});
         this.addChild(card2);
 
         let holder = new CardHolder({'x':-170,'y':0,'w':203,'h':323});
@@ -17,6 +20,11 @@ class CardToHolder extends PIXI.Container{
 
         let holder2 = new CardHolder({'x':200,'y':100,'w':203,'h':323});
         this.addChild(holder2);
+        holder2.onDrop((card) => 0);
+    }
+
+    _kill = () => {
+
     }
 
     getAsJSON = () => {return {component: 'demo/CardToHolder'}}

src/Playground/Loader.js

@@ -14,6 +14,7 @@ class Loader extends PIXI.Container{
 
         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);

src/helpers/dragAndDrop.js

@@ -14,12 +14,15 @@ function dragAndDrop(sprite) {
         // events for drag move
         .on('mousemove', onDragMove)
         .on('touchmove', onDragMove);
+}
 
-    EventManager.on('CardPlaced', (position) => {
-        if(sprite.dragging) {
-            sprite.placedPosition = position;
+function place(position, dropCallback) {
+    if(this.dragging) {
+        this.placedPosition = position;
+        if(dropCallback) {
+            dropCallback(this);
         }
-    });
+    }
 }
 
 function onDragStart(event)
@@ -38,6 +41,10 @@ function onDragStart(event)
     this.draggingInitial.y -= this.draggingOffset.y;
 
     EventManager.emit('CardDragging');
+
+    this.placeFn = place.bind(this);
+    // Add CardPlace Callback 
+    EventManager.on('CardPlaced', this.placeFn);
 }
 
 function onDragEnd()
@@ -46,17 +53,15 @@ function onDragEnd()
     this.dragging = false;
     // set the interaction data to null
     this.data = null;
-    if(this.placedPosition){
-        this.position.x = this.placedPosition.x;
-        this.position.y = this.placedPosition.y;
+    if(this.placedPosition) {
+        this.moveTo(this.placedPosition);
     } else {
-        this.position.x = this.draggingInitial.x;
-        this.position.y = this.draggingInitial.y;
+        this.moveTo(this.draggingInitial);
     }
-
-
-
     EventManager.emit('CardDraggingFinished');
+    
+    // Remove Card Placed Callbacks
+    EventManager.off('CardPlaced', this.placeFn);
 }
 
 function onDragMove()
@@ -66,6 +71,7 @@ function onDragMove()
         var newPosition = this.data.getLocalPosition(this.parent);
         this.position.x = newPosition.x - this.draggingOffset.x;
         this.position.y = newPosition.y - this.draggingOffset.y;
+
     }
 }
 export default dragAndDrop;