Fixed Drag and drop + holder size/scale and drop on scale

package-lock.json

@@ -4,6 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@types/pixi.js": {
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/@types/pixi.js/-/pixi.js-4.7.3.tgz",
+      "integrity": "sha512-bs2d1K3QSnqLvQC8vvUcKXjowBv6qWNLX/3OgWAZmE5/trVeLDM9NUx5i23X7+hbmoPRNv6G1Cq8+mvTMObzIw=="
+    },
     "@uirouter/core": {
       "version": "5.0.11",
       "resolved": "https://registry.npmjs.org/@uirouter/core/-/core-5.0.11.tgz",
@@ -6864,6 +6869,14 @@
       "resolved": "https://registry.npmjs.org/pixi-gl-core/-/pixi-gl-core-1.1.4.tgz",
       "integrity": "sha1-i0tcQzsx5Bm8N53FZc4bg1qRs3I="
     },
+    "pixi-layers": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/pixi-layers/-/pixi-layers-0.1.9.tgz",
+      "integrity": "sha512-icz8ITseH3PC37tZ6DhFedaikRO/rOCOSK7OWNXRgLVfIoT3Z1tQLtvsNIQuwcbhs2sBiUnQ6w0qPvE6GGfa3A==",
+      "requires": {
+        "@types/pixi.js": "4.7.3"
+      }
+    },
     "pixi-tween": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/pixi-tween/-/pixi-tween-0.2.0.tgz",

src/Game/config.js

@@ -0,0 +1,12 @@
+let config = {
+	CARD: {
+		WIDTH: 494,
+		HEIGHT: 683,
+		OFFSET: {
+			X: 64,
+			Y: 67
+		}
+	}
+}
+
+export default config;

src/Game/services/Injector.js

@@ -7,6 +7,9 @@ class Injector {
         return this.components[name];
     }
     
+    saveAs(name, comp) {
+        this.components[name] = comp;
+    }
     load(json) {
         let  {
             component,

src/Game/views/base/Card.js

@@ -1,5 +1,5 @@
 import * as PIXI from 'pixi.js';
-//import Text from './Text.js';
+import config from '../../config';
 
 import dragAndDrop from '../../../helpers/dragAndDrop';
 
@@ -56,9 +56,9 @@ class Card extends GuiableContainer{
             team
         } = props;
 
-        let [w,h] = [494,683];
+        let [w,h] = [config.CARD.WIDTH,config.CARD.HEIGHT];
         // Every card has a transparent region around so the hitArea is Reduced!!!
-        let [hw,hh] = [430,617];  
+        let [hw,hh] = [config.CARD.WIDTH-config.CARD.OFFSET.X,config.CARD.HEIGHT-config.CARD.OFFSET.Y];  
 
         this.sprite = new PIXI.Sprite();
         this.sprite.anchor.set(0.5,0.5);
@@ -123,6 +123,9 @@ class Card extends GuiableContainer{
     moveTo(point, milliseconds=1000) {
         let path = new PIXI.tween.TweenPath();
         path.moveTo(this.position.x, this.position.y).lineTo(point.x, point.y);
+        console.log(this.position.x);
+        console.log(this.position.y);
+
         this._tween = PIXI.tweenManager.createTween(this);
         this._tween.easing = PIXI.tween.Easing.outQuart();
         this._tween.loop = false;

src/Game/views/base/CardHolder.js

@@ -7,28 +7,29 @@ import EventManager from '../../services/EventManager';
 //const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
 //const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
 
+import config from '../../config.js';
+
 class CardHolder extends GuiableContainer{
     constructor(props) {
         super(props);
         let {
             x,
             y,
-            w,
-            h
+            s
         } = props;
 
         // Properties Component 
         this.x = x || 0;
         this.y = y || 0;
-        this.w = w || 10;
-        this.h = h || 10;
+        this.w = config.CARD.WIDTH-config.CARD.OFFSET.X;
+        this.h = config.CARD.HEIGHT-config.CARD.OFFSET.Y;
+        this.s = s || 1;
 
         // GUI
         this.addFolder('CardHolder');
         this.addToFolder('CardHolder', this, 'x').onFinishChange((v) => this.change({x: v}));
         this.addToFolder('CardHolder', this, 'y').onFinishChange((v) => this.change({y: v}));
-        this.addToFolder('CardHolder', this, 'w').onFinishChange((v) => this.change({w: v}));
-        this.addToFolder('CardHolder', this, 'h').onFinishChange((v) => this.change({h: v}));
+        this.addToFolder('CardHolder', this, 's').onFinishChange((v) => this.change({s: v}));
         //
         this.construct(props);
     }
@@ -46,31 +47,35 @@ class CardHolder extends GuiableContainer{
         this.sprite.cursor = 'pointer';
         this.sprite.on('mouseup', () => {
             // This is called before it is removed from the DragEnd Callback
-            EventManager.trigger('CardPlaced', [this.position, this._onDrop]); 
+            EventManager.trigger('CardPlaced', [this, this._onDrop]); 
         });
 
         this.position.set(this.x,this.y);
 
+        this.scale.set(this.s);
+
         EventManager.on('CardDragging', () => this.addChild(this.sprite));
         EventManager.on('CardDraggingFinished', () => this.removeChild(this.sprite));
     }
 
+    scaleTo(s) {
+        this.scale.set(s);
+        this.s = s;
+        return this;
+    }
     change(props) {
         let newdata = {
             x: this.x,
             y: this.y,
-            w: this.w,
-            h: this.h,
+            s: this.s,
             ...props
         };
         this.x = newdata.x;
         this.y = newdata.y;
-        this.w = newdata.w;
-        this.h = newdata.h;
+        this.s = newdata.s;
 
         this.position.set(this.x,this.y);
-        this.sprite.width = this.w;
-        this.sprite.height = this.h;
+        this.scale.set(this.s);
     }
 
     onDrop(fn) {

src/Game/views/demo/CardToHolder.js

@@ -27,22 +27,20 @@ class CardToHolder extends PIXI.Container{
         view.position.set(-200,0);
         this.addChild(view);
 
-
         let deck = new PIXI.Container();
 
-        deck.addChild(new Card({GameLayer, 'x': -180, 'y': -230, team: 0, id: 3}).scaleTo(0.27));
-        deck.addChild(new Card({GameLayer, 'x': -180, 'y': -50, team: 1, id: 1}).scaleTo(0.27));
-        deck.addChild(new Card({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(0.27));
-        deck.addChild(new Card({GameLayer, 'x': -50, 'y': -50, team: 1, id: 4}).scaleTo(0.27));
-        deck.addChild(new Card({GameLayer, 'x': -120, 'y': 130, team: 1, id: 3}).scaleTo(0.27));
+        deck.addChild(new CardHolder({GameLayer, 'x': -180, 'y': -230, team: 0, id: 3}).scaleTo(0.27));
+        deck.addChild(new CardHolder({GameLayer, 'x': -180, 'y': -50, team: 1, id: 1}).scaleTo(0.27));
+        deck.addChild(new CardHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(0.27));
+        deck.addChild(new CardHolder({GameLayer, 'x': -50, 'y': -50, team: 1, id: 4}).scaleTo(0.27));
+        deck.addChild(new CardHolder({GameLayer, 'x': -120, 'y': 130, team: 1, id: 3}).scaleTo(0.27));
         deck.position.set(610,110);
         this.addChild(deck);
 
+        // let holder = new CardHolder({'x':-170,'y':0, 's': 0.4});
+        // this.addChild(holder);
 
-        let holder = new CardHolder({'x':-170,'y':0,'w':203,'h':323});
-        this.addChild(holder);
-
-        let holder2 = new CardHolder({'x':200,'y':100,'w':203,'h':323});
+        let holder2 = new CardHolder({'x':200,'y':100, 's': 0.7});
         this.addChild(holder2);
         holder2.onDrop((card) => 0);
     }

src/helpers/dragAndDrop.js

@@ -1,3 +1,4 @@
+import * as PIXI from 'pixi.js';
 import EventManager from '../Game/services/EventManager';
 
 function dragAndDrop(sprite) {
@@ -18,9 +19,10 @@ function dragAndDrop(sprite) {
     sprite.placeFn = place.bind(sprite);
 }
 
-function place(position, dropCallback) {
+function place(holder, dropCallback) {
     if(this.dragging) {
-        this.placedPosition = position;
+        this.placedPosition = this.parent.toLocal(holder.getGlobalPosition());
+        this.placedScale = new PIXI.Point(holder.scale.x, holder.scale.y);
         if(dropCallback) {
             dropCallback(this);
         }
@@ -35,12 +37,9 @@ function onDragStart(event)
     this.data = event.data;
     this.dragging = true;
     
-    var newPosition = this.data.getLocalPosition(this);
-    this.draggingOffset = newPosition;
+    this.draggingOffset = this.data.getLocalPosition(this);
 
-    this.draggingInitial   = this.data.getLocalPosition(this);
-    this.draggingInitial.x -= this.draggingOffset.x;
-    this.draggingInitial.y -= this.draggingOffset.y;
+    this.draggingInitial = new PIXI.Point(this.position.x, this.position.y);
 
     EventManager.emit('CardDragging');
     // Add CardPlace Callback 
@@ -55,9 +54,11 @@ function onDragEnd()
     this.data = null;
     if(this.placedPosition) {
         this.moveTo(this.placedPosition);
+        this.scaleTo(this.placedScale.x);
     } else {
         this.moveTo(this.draggingInitial);
     }
+
     EventManager.emit('CardDraggingFinished');
     // Remove Card Placed Callbacks
     EventManager.off('CardPlaced', this.placeFn);
@@ -68,8 +69,9 @@ function onDragMove()
     if (this.dragging)
     {
         var newPosition = this.data.getLocalPosition(this.parent);
-        this.position.x = newPosition.x - this.draggingOffset.x;
-        this.position.y = newPosition.y - this.draggingOffset.y;
+        var offset = this.draggingOffset;
+        this.position.x = newPosition.x - offset.x * this.scale.x;
+        this.position.y = newPosition.y - offset.y * this.scale.y;
     }
 }
 export default dragAndDrop;