I dunno (: im pushing

src/Game/views/base/Card.js

@@ -119,6 +119,14 @@ class Card extends GuiableContainer{
         this.sprite.on('pointerdown', (e) => fn(e));
     }
 
+    getHolder() {
+        return this._holder;
+    }
+
+    attach(holder = null) { 
+        this._holder = holder;
+    }
+
     // Animate to Position
     moveTo(point, milliseconds=1000) {
         let path = new PIXI.tween.TweenPath();

src/Game/views/base/CardHolder.js

@@ -9,7 +9,7 @@ import EventManager from '../../services/EventManager';
 
 import config from '../../config.js';
 
-class CardHolder extends GuiableContainer{
+class CardHolder extends GuiableContainer {
     constructor(props) {
         super(props);
         let {
@@ -46,12 +46,11 @@ class CardHolder extends GuiableContainer{
         this.sprite.interactive = true;
         this.sprite.hitArea = new PIXI.Rectangle(0, 0, this.w, this.h);
         this.sprite.cursor = 'pointer';
-        let fn = () => {
+        this._placeFn = () => {
             // This is called before it is removed from the DragEnd Callback
             EventManager.trigger('CardPlaced', [this]); 
         };
-        this.sprite.on('mouseup', fn);
-        this.sprite.on('touchend', fn);
+        this.setEvents();
 
         this.position.set(this.x,this.y);
 
@@ -61,14 +60,49 @@ class CardHolder extends GuiableContainer{
         EventManager.on('CardDraggingFinished', this.hide);
     }
 
+
     show = () => this.addChild(this.sprite)
     hide = () => this.removeChild(this.sprite)
 
+    getCard() {
+        return this._card;
+    }
+
+    setEvents() {
+        this.sprite.on('mouseup', this._placeFn);
+        this.sprite.on('touchend',this._placeFn);
+    }
+
+    unsetEvents() {
+        this.sprite.off('mouseup', this._placeFn);
+        this.sprite.off('touchend',this._placeFn);
+    }
+
+    occupy(card) {
+        this.lock(card);
+        this._onDrop(card);
+    }
+
+    lock(card = null) {
+        this.unsetEvents();
+        this._locked = true;
+        this._card = card;
+        if(card) {
+            card.attach(this);
+        }
+    }
+
+    unlock() {
+        this.setEvents();
+        this._locked = false;    
+    }
+
     scaleTo(s) {
         this.scale.set(s);
         this.s = s;
         return this;
     }
+
     change(props) {
         let newdata = {
             x: this.x,
@@ -86,6 +120,7 @@ class CardHolder extends GuiableContainer{
 
     onDrop(fn) {
         this._onDrop = fn;
+        return this;
     }
 
     _kill() {

src/Game/views/buildings/Board.js

@@ -57,11 +57,15 @@ class Board extends GuiableContainer{
         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));
+        this.holders.forEach((item) => this.addChild(item));
+    }
+
+    getCard(x,y) {
+        return this.holders[3*y+x].getCard();
     }
 
     placeCard(position) {
-        //this.holders[position]
+        this.holders[position].getCard();
     }
 
     onClick(fn) {

src/Game/views/demo/Board.js

@@ -2,8 +2,9 @@ import * as PIXI from 'pixi.js';
 
 import Card from '../base/Card';
 import CardHolder from '../base/CardHolder';
+import Board from '../buildings/Board';
 
-class Board extends PIXI.Container{
+class BoardDemo extends PIXI.Container{
     constructor(props) {
         super();
 
@@ -21,20 +22,8 @@ class Board extends PIXI.Container{
         // 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 board = new Board({GameLayer, 'x': -250, 'y': 0 });
+        this.addChild(board);
 
         let deck = new PIXI.Container();
 
@@ -61,4 +50,4 @@ class Board extends PIXI.Container{
     getAsJSON = () => {return {component: 'demo/Board'}}
 }
 
-export default Board;
+export default BoardDemo;

src/helpers/dragAndDrop.js

@@ -17,13 +17,28 @@ function dragAndDrop(sprite) {
         .on('touchmove', onDragMove);
 
     sprite.placeFn = place.bind(sprite);
+
+    sprite.stopDND = () => {
+        sprite
+        // events for drag start
+        .off('mousedown', onDragStart)
+        .off('touchstart', onDragStart)
+        // events for drag end
+        .off('mouseup', onDragEnd)
+        .off('mouseupoutside', onDragEnd)
+        .off('touchend', onDragEnd)
+        .off('touchendoutside', onDragEnd)
+        //events for drag move
+        .off('mousemove', onDragMove)
+        .off('touchmove', onDragMove);
+    }
 }
 
 function place(holder) {
     if(this.dragging) {
         this.placedPosition = this.parent.toLocal(holder.getGlobalPosition());
         this.placedScale = new PIXI.Point(holder.scale.x, holder.scale.y);
-        // holder.occupy(this);
+        holder.occupy(this);
     }
 }
 
@@ -35,6 +50,10 @@ function onDragStart(event)
     this.data = event.data;
     this.dragging = true;
     
+    let holder = this.getHolder();
+    if(holder)
+        holder.unlock();
+
     this.draggingOffset = this.data.getLocalPosition(this);
 
     this.draggingInitial = new PIXI.Point(this.position.x, this.position.y);