Card Collection changes

src/Game/views/base/CollectionHolder.js

@@ -1,7 +1,8 @@
 import * as PIXI from 'pixi.js';
 //import { getParam } from '../../../helpers/url';
 
-import GuiableContainer from '../../../helpers/Guiable';
+import CardHolder from './CardHolder';
+import Card from './Card';
 import EventManager from '../../services/EventManager';
 import Injector from '../../services/Injector';
 
@@ -10,79 +11,33 @@ import Injector from '../../services/Injector';
 
 import config from '../../config.js';
 
-class CollectionHolder extends GuiableContainer {
+class CollectionHolder extends CardHolder {
     constructor(props) {
         super(props);
         let {
-            x,
-            y,
-            s,
-            count,
-            z
+            counter,
+            zInit,
+            cardNumber,
+            GameLayer,
+            deckNumber
         } = 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.counter = counter || 0;
+        this.z = zInit || 10;
+        this.cardNumber = cardNumber;
+        this.GameLayer = GameLayer;
+        this.deckNumber = deckNumber || 0;
+        // this.count = 0;
+
         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;
+        
+        this.unsetEvents();
+        this.refresh();
     }
 
     setEvents() {
@@ -95,69 +50,54 @@ class CollectionHolder extends GuiableContainer {
         this.sprite.off('touchend',this._placeFn);
     }
 
-    occupy(card) {
+    createCard() {
+        let card = new Card({GameLayer: this.GameLayer, id:this.cardNumber});
         card.zIndex = this.z;
-        this.z = this.z + 1;
-        this.lock(card);
-        if(this._onDrop)
-            this._onDrop(card);
+        card.attach(this);
+        this.cards.push(card);
+        this.z -= 1;
     }
 
-    lock(card) {
-        //this.unsetEvents();
-        this._locked = true;
-        this._card = card;
-        if(card) {
-            card.attach(this);
-            //if(this._lockable)card.unsetEvents();
+    remove(){
+        //when you place card in deck
+        this.cards.pop();
+        this.z += 1;
+        if (this.counter - this.deckCards >0){
+            this.createCard();
         }
     }
 
-    unlock() {
-        this.setEvents();
-        this._locked = false;
-        this._card = null;
+    deckRemoval(){
+        //when you remove card from deck and it is added to collectionm, if you have only one copy in collection, add another copy
+        if (this.counter - this.deckCards <2){
+            this.createCard();
+        }
     }
 
-    scaleTo(s) {
-        this.scale.set(s);
-        this.s = s;
-        return this;
-    }
+    lock() {
 
-    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;
+    unlock() {
+
     }
 
-    _kill() {
-        super._kill();
+    createCardGrey(){
+        let card = new Card({GameLayer: this.GameLayer, id:this.cardNumber});
+        card.zIndex = this.z - 5;
+        card.attach(this);
+        card.unsetEvents();
     }
 
-    getAsJSON() {
-        return {
-            component: 'base/CollectionHolder',
-            x: this.position.x,
-            y: this.position.y,
-            w: this.sprite.width,
-            h: this.sprite.height
-        };
+    refresh(){
+        this.createCardGrey();
+        this.cards = [];
+        this.z = this.zInit || 10;
+        for (let i =0; i<2 && i<this.counter - this.deckCards; ){
+            this.createCard(); 
+        }
     }
+
 }
 
-export default CollectionHolder;
+export default CollectionHolder;

src/Game/views/buildings/Board.js

@@ -3,7 +3,7 @@ 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';
 
@@ -52,16 +52,16 @@ 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 CollectionHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(0, 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)));
@@ -69,7 +69,7 @@ class BoardHandler extends GuiableContainer{
         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.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));