Drag n drop increasing zIndex. Collection init

src/Game/views/base/CollectionHolder.js

@@ -0,0 +1,163 @@
+import * as PIXI from 'pixi.js';
+//import { getParam } from '../../../helpers/url';
+
+import GuiableContainer from '../../../helpers/Guiable';
+import EventManager from '../../services/EventManager';
+import Injector from '../../services/Injector';
+
+//const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
+//const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
+
+import config from '../../config.js';
+
+class CollectionHolder extends GuiableContainer {
+    constructor(props) {
+        super(props);
+        let {
+            x,
+            y,
+            s,
+            count,
+            z
+        } = props;
+
+        // Properties Component 
+        this.x = x || 0;
+        this.y = y || 0;
+        this.w = config.CARD.WIDTH-config.CARD.OFFSET.X;
+        this.h = config.CARD.HEIGHT-config.CARD.OFFSET.Y;
+        this.s = s || 1;
+        this.count = count || 0;
+        this.z = z || 1;
+
+        // GUI
+        this.addFolder('CollectionHolder');
+        this.addToFolder('CollectionHolder', this, 'x').onFinishChange((v) => this.change({x: v}));
+        this.addToFolder('CollectionHolder', this, 'y').onFinishChange((v) => this.change({y: v}));
+        this.addToFolder('CollectionHolder', this, 's').onFinishChange((v) => this.change({s: v}));
+        //
+        this.construct(props);
+        this.appear();
+        this.uncloak();
+        this.show();
+    }
+
+    construct() {
+        this.sprite = new PIXI.Graphics();
+        this.sprite.beginFill(0xFFFF00,0.1);
+
+        // set the line style to have a width of 5 and set the color to red
+        this.sprite.lineStyle(3, 0xFF0000);
+        this.sprite.pivot.set(this.w/2,this.h/2);
+        this.sprite.drawRect(0, 0, this.w, this.h); // Center this shit 
+        this.sprite.interactive = true;
+        this.sprite.hitArea = new PIXI.Rectangle(0, 0, this.w, this.h);
+        this.sprite.cursor = 'pointer';
+        this._placeFn = () => {
+            // This is called before it is removed from the DragEnd Callback
+            EventManager.trigger('CardPlaced', [this]); 
+        };
+        this.setEvents();
+
+        this.position.set(this.x,this.y);
+
+        this.scale.set(this.s);
+
+        this.parentLayer = Injector.getByName('TopLayer');
+
+
+        EventManager.on('CardDragging', this.show);
+        EventManager.on('CardDraggingFinished', this.hide);
+    }
+
+    lockable() { this._lockable = true; return this;}
+
+    show = () => { if(this._visible)this.addChild(this.sprite) }
+    hide = () => { if(this._visible)this.removeChild(this.sprite) }
+
+    disappear = () => { this.hide(); this._visible = false; }
+    appear = () => { this._visible = true; this.show(); }
+
+    cloak = () => { this.sprite.alpha = 0.01; }
+    uncloak = () => { this.sprite.alpha = 1.0; }
+
+    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) {
+        card.zIndex = this.z;
+        this.z = this.z + 1;
+        this.lock(card);
+        if(this._onDrop)
+            this._onDrop(card);
+    }
+
+    lock(card) {
+        //this.unsetEvents();
+        this._locked = true;
+        this._card = card;
+        if(card) {
+            card.attach(this);
+            //if(this._lockable)card.unsetEvents();
+        }
+    }
+
+    unlock() {
+        this.setEvents();
+        this._locked = false;
+        this._card = null;
+    }
+
+    scaleTo(s) {
+        this.scale.set(s);
+        this.s = s;
+        return this;
+    }
+
+    change(props) {
+        let newdata = {
+            x: this.x,
+            y: this.y,
+            s: this.s,
+            ...props
+        };
+        this.x = newdata.x;
+        this.y = newdata.y;
+        this.s = newdata.s;
+
+        this.position.set(this.x,this.y);
+        this.scale.set(this.s);
+    }
+
+    onDrop(fn) {
+        this._onDrop = fn;
+        return this;
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'base/CollectionHolder',
+            x: this.position.x,
+            y: this.position.y,
+            w: this.sprite.width,
+            h: this.sprite.height
+        };
+    }
+}
+
+export default CollectionHolder;

src/Game/views/buildings/Board.js

@@ -3,8 +3,8 @@ import config from '../../config';
 
 import GuiableContainer from '../../../helpers/Guiable';
 import Deck from '../../assets/deck';
-import CardHolder from '../base/CardHolder';
-
+//import CardHolder from '../base/CardHolder';
+import CollectionHolder from '../base/CollectionHolder';
 import Injector from '../../services/Injector';
 
 class BoardHandler extends GuiableContainer{
@@ -52,15 +52,24 @@ class BoardHandler extends GuiableContainer{
 
 
         this.holders = [];
-        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(0, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(1, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': -230, team: 0, id: 1}).scaleTo(BoardScale).onDrop((c) => this.placeCard(2, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 0, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(3, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 0, team: 0, id: 2}).scaleTo(BoardScale).onDrop((c) => this.placeCard(4, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 0, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(5, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 230, team: 1, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(6, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(7, c)));
-        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(8, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(0, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(1, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': -230, team: 0, id: 1}).scaleTo(BoardScale).onDrop((c) => this.placeCard(2, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 0, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(3, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 0, team: 0, id: 2}).scaleTo(BoardScale).onDrop((c) => this.placeCard(4, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 0, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(5, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 230, team: 1, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(6, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(7, c)));
+        // this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(8, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(0, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(1, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': 120, 'y': -230, team: 0, id: 1}).scaleTo(BoardScale).onDrop((c) => this.placeCard(2, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': -220, 'y': 0, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(3, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': -50, 'y': 0, team: 0, id: 2}).scaleTo(BoardScale).onDrop((c) => this.placeCard(4, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': 120, 'y': 0, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(5, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': -220, 'y': 230, team: 1, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(6, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': -50, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(7, c)));
+        this.holders.push(new CollectionHolder({GameLayer, 'x': 120, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(8, c)));
         this.holders.forEach((item) => item.parentLayer = Injector.getByName('TopLayer'));
         this.holders.forEach((item) => item.lockable());
         this.holders.forEach((item) => this.addChild(item));

src/Game/views/buildings/Collection.js

@@ -0,0 +1,76 @@
+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 CollectionHandler 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('Deck');
+        //this.addToFolder('Deck', this, 'imageURL').onFinishChange((v) => this.loadImage(v));
+        this.addToFolder('Deck', this.options, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('Deck', this.options, 'y').onFinishChange((v) => this.position.y = v);
+        
+        this.construct(props);
+    }
+
+    construct(props) {
+        let {
+            id,
+            team,
+            GameLayer
+        } = props;
+        
+        let CollectionScale = 0.35;
+        this.cards = [];
+
+        this.cards.push(new CardHolder({GameLayer, 'x': 160, 'y': -230, team: 0, id: 3}).scaleTo(CollectionScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 160, 'y': 0, team: 1, id: 1}).scaleTo(CollectionScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 0, 'y': -230, team: 1, id: 5}).scaleTo(CollectionScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 0, 'y': 0, team: 1, id: 4}).scaleTo(CollectionScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 80, 'y': 230, team: 1, id: 3}).scaleTo(CollectionScale));
+        this.cards.forEach((c) => c.cloak());
+        this.cards.forEach((c) => this.addChild(c));
+    }
+
+    getHolder(x) {
+        return this.cards[x];
+    }
+    
+    getCard(x) {
+        return this.cards[x].getCard();
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'buildings/Collection',
+            x:  this.position.x,
+            y:  this.position.y,
+            id: this.options.id,
+            team: this.options.team
+        };
+    }
+}
+
+export default CollectionHandler;

src/Game/views/demo/Collection.js

@@ -0,0 +1,40 @@
+import * as PIXI from 'pixi.js';
+
+import Card from '../base/Card';
+import CardHolder from '../base/CardHolder';
+import CollectionHandler from '../buildings/Collection';
+import DeckHandler from '../buildings/Deck';
+import Injector from '../../services/Injector';
+
+class CollectionDemo extends PIXI.Container{
+    constructor(props) {
+        super();
+
+        let {GameLayer} = props;
+
+
+        let card = new Card({GameLayer, 'x': 100, 'y': -230, team: 0, id: 4}).scaleTo(0.27);
+        card.parentLayer = Injector.getByName('MainLayer');
+        this.addChild(card);
+        
+        let collection = new CollectionHandler({GameLayer, 'x': -250, 'y': 0 });
+        this.addChild(collection);
+
+        // let holder2 = new Card({'x':200,'y':100, 's': 0.7, id: 3});
+        // this.addChild(holder2);
+
+        let deck = new DeckHandler({GameLayer, 'x': 380, 'y': 0});
+        this.addChild(deck);
+
+        this.collection = collection;
+        this.deck = deck;
+    }
+
+    _kill = () => {
+
+    }
+
+    getAsJSON = () => {return {component: 'demo/Collection'}}
+}
+
+export default CollectionDemo;

src/Game/views/demo/CollectionPlay.js

@@ -0,0 +1,36 @@
+import * as PIXI from 'pixi.js';
+
+import Card from '../base/Card';
+import Injector from '../../services/Injector';
+import BoardStage from './Board';
+
+class BoardPlayDemo extends PIXI.Container{
+    constructor(props) {
+        super();
+
+        let {GameLayer} = props;
+
+
+        let stage = new BoardStage(props);
+        this.addChild(stage);
+
+        
+        for(var i=0;i<5;i++) {
+            let rn = parseInt((Math.random()*1000) % 6);
+            let card = new Card({GameLayer, id:rn});
+            let t = i;
+            stage.deck.getHolder(t).occupy(card);
+            // setTimeout(() => ) , 100);
+
+            this.addChild(card);
+        }
+
+    }
+
+    _kill = () => {
+    }
+
+    getAsJSON = () => {return {component: 'demo/BoardPlay'}}
+}
+
+export default BoardPlayDemo;

src/helpers/dragAndDrop.js

@@ -42,6 +42,11 @@ function place(holder) {
 
 function onDragStart(event)
 {
+    // zIndex reference and increase in order to appear "above-all" when dragged
+    this.zReference = this.zIndex;
+    this.zIndex = 100;
+
+
     // store a reference to the data
     // the reason for this is because of multitouch
     // we want to track the movement of this particular touch
@@ -63,6 +68,10 @@ function onDragStart(event)
 
 function onDragEnd()
 {
+    // This may fit inside better?
+    this.zIndex = this.zReference;
+    //!!
+
     EventManager.emit('CardDraggingFinished');
     // Remove Card Placed Callbacks
     setTimeout(() => {