Test

src/Game/views/base/Card.js

@@ -130,6 +130,7 @@ class Card extends GuiableContainer{
         this._tween.path = path;
         this._tween.time = milliseconds;
         this._tween.start();
+        return this;
     }
     // Animate Scale
     scaleTo(newscale, milliseconds=1000) {

src/Game/views/base/CardHolder.js

@@ -32,6 +32,7 @@ class CardHolder extends GuiableContainer{
         this.addToFolder('CardHolder', this, 's').onFinishChange((v) => this.change({s: v}));
         //
         this.construct(props);
+        this.show();
     }
 
     construct() {
@@ -47,7 +48,7 @@ class CardHolder extends GuiableContainer{
         this.sprite.cursor = 'pointer';
         let fn = () => {
             // This is called before it is removed from the DragEnd Callback
-            EventManager.trigger('CardPlaced', [this, this._onDrop]); 
+            EventManager.trigger('CardPlaced', [this]); 
         };
         this.sprite.on('mouseup', fn);
         this.sprite.on('touchend', fn);
@@ -56,10 +57,13 @@ class CardHolder extends GuiableContainer{
 
         this.scale.set(this.s);
 
-        EventManager.on('CardDragging', () => this.addChild(this.sprite));
-        EventManager.on('CardDraggingFinished', () => this.removeChild(this.sprite));
+        EventManager.on('CardDragging', this.show);
+        EventManager.on('CardDraggingFinished', this.hide);
     }
 
+    show = () => this.addChild(this.sprite)
+    hide = () => this.removeChild(this.sprite)
+
     scaleTo(s) {
         this.scale.set(s);
         this.s = s;

src/Game/views/buildings/Board.js

@@ -0,0 +1,86 @@
+import * as PIXI from 'pixi.js';
+import config from '../../config';
+
+import GuiableContainer from '../../../helpers/Guiable';
+import Deck from '../../assets/deck';
+import CardHolder from '../base/CardHolder';
+
+class Board extends GuiableContainer{
+    constructor(props) {
+        super(props);
+        let {
+            x,
+            y,
+            id
+        } = props;
+
+        // Properties Component 
+        //this.imageURL = image || getParam('imageURL');
+        this.position.set(x,y);
+
+        this.options = {
+            x: x || 0,
+            y: y || 0,
+        };
+
+        // GUI
+        this.addFolder('Board');
+        //this.addToFolder('Board', this, 'imageURL').onFinishChange((v) => this.loadImage(v));
+        this.addToFolder('Board', this.options, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('Board', this.options, 'y').onFinishChange((v) => this.position.y = v);
+        
+        this.construct(props);
+    }
+
+    construct(props) {
+        let {
+            id,
+            team,
+            GameLayer
+        } = props;
+        
+        let BoardScale = 0.35;
+        // Board BG
+        let bg = new PIXI.Sprite(PIXI.Texture.fromImage('/files/assets/board_wood.jpg'));
+        bg.position.set(-700,-500);
+        bg.scale.set(1.75);
+        this.addChild(bg);
+
+        this.holders = [];
+        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale).onDrop(() => this.placeCard(0)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(BoardScale).onDrop(() => this.placeCard(1)));
+        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': -230, team: 0, id: 1}).scaleTo(BoardScale).onDrop(() => this.placeCard(2)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 0, team: 1, id: 5}).scaleTo(BoardScale).onDrop(() => this.placeCard(3)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 0, team: 0, id: 2}).scaleTo(BoardScale).onDrop(() => this.placeCard(4)));
+        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 0, team: 1, id: 3}).scaleTo(BoardScale).onDrop(() => this.placeCard(5)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 230, team: 1, id: 4}).scaleTo(BoardScale).onDrop(() => this.placeCard(6)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop(() => this.placeCard(7)));
+        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop(() => this.placeCard(8)));
+
+        this.holders.map((item) => this.addChild(item));
+    }
+
+    placeCard(position) {
+        //this.holders[position]
+    }
+
+    onClick(fn) {
+        this.sprite.on('pointerdown', (e) => fn(e));
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'buildings/Board',
+            x:  this.position.x,
+            y:  this.position.y,
+            id: this.options.id,
+            team: this.options.team
+        };
+    }
+}
+
+export default Board;

src/Game/views/demo/Board.js

@@ -0,0 +1,64 @@
+import * as PIXI from 'pixi.js';
+
+import Card from '../base/Card';
+import CardHolder from '../base/CardHolder';
+
+class Board extends PIXI.Container{
+    constructor(props) {
+        super();
+
+        let {GameLayer} = props;
+
+        let BoardScale = 0.35,
+            DeckScale = 0.35;
+        // Board BG
+        let bg = new PIXI.Sprite(PIXI.Texture.fromImage('/files/assets/board_wood.jpg'));
+        bg.position.set(-700,-500);
+        bg.scale.set(1.75);
+        this.addChild(bg);
+
+        // let card = new Card({GameLayer});
+        // this.addChild(card);
+        this.addChild(new Card({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(0.27));
+        
+        let view = new PIXI.Container();
+
+        view.addChild(new CardHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': -220, 'y': 0, team: 1, id: 5}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': -220, 'y': 230, team: 1, id: 4}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': -50, 'y': 0, team: 0, id: 2}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': -50, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': 120, 'y': -230, team: 0, id: 1}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': 120, 'y': 0, team: 1, id: 3}).scaleTo(BoardScale));
+        view.addChild(new CardHolder({GameLayer, 'x': 120, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale));
+
+        view.position.set(-200,0);
+        this.addChild(view);
+
+        let deck = new PIXI.Container();
+
+        deck.addChild(new CardHolder({GameLayer, 'x': 160, 'y': -230, team: 0, id: 3}).scaleTo(DeckScale));
+        deck.addChild(new CardHolder({GameLayer, 'x': 160, 'y': 0, team: 1, id: 1}).scaleTo(DeckScale));
+        deck.addChild(new CardHolder({GameLayer, 'x': 0, 'y': -230, team: 1, id: 5}).scaleTo(DeckScale));
+        deck.addChild(new CardHolder({GameLayer, 'x': 0, 'y': 0, team: 1, id: 4}).scaleTo(DeckScale));
+        deck.addChild(new CardHolder({GameLayer, 'x': 80, 'y': 230, team: 1, id: 3}).scaleTo(DeckScale));
+        deck.position.set(380,0);
+        this.addChild(deck);
+
+        // let holder = new CardHolder({'x':-170,'y':0, 's': 0.4});
+        // this.addChild(holder);
+
+        let holder2 = new CardHolder({'x':200,'y':100, 's': 0.7});
+        //this.addChild(holder2);
+        holder2.onDrop((card) => 0);
+    }
+
+    _kill = () => {
+
+    }
+
+    getAsJSON = () => {return {component: 'demo/Board'}}
+}
+
+export default Board;

src/helpers/dragAndDrop.js

@@ -19,13 +19,11 @@ function dragAndDrop(sprite) {
     sprite.placeFn = place.bind(sprite);
 }
 
-function place(holder, dropCallback) {
+function place(holder) {
     if(this.dragging) {
         this.placedPosition = this.parent.toLocal(holder.getGlobalPosition());
         this.placedScale = new PIXI.Point(holder.scale.x, holder.scale.y);
-        if(dropCallback) {
-            dropCallback(this);
-        }
+        // holder.occupy(this);
     }
 }