src/Game/views/base/Card.js

@@ -151,7 +151,7 @@ class Card extends GuiableContainer{
     attach(holder = null) { 
         this._holder = holder;
         setTimeout(() => {
-            this.moveTo(this.parent.toLocal(holder.getGlobalPosition()))
+            this.moveTo(this.parent.toLocal(holder.getGlobalPosition()));
         }, 10);
     }
     

src/Game/views/base/CollectionHolder.js

@@ -17,7 +17,7 @@ class CollectionHolder extends CardHolder {
         let {
             counter,
             zInit,
-            cardNumber,
+            id,
             GameLayer,
             deckNumber
         } = props;
@@ -25,7 +25,7 @@ class CollectionHolder extends CardHolder {
         // Properties Component 
         this.counter = counter || 0;
         this.z = zInit || 10;
-        this.cardNumber = cardNumber;
+        this.id = id;
         this.GameLayer = GameLayer;
         this.deckNumber = deckNumber || 0;
         // this.count = 0;
@@ -88,7 +88,7 @@ class CollectionHolder extends CardHolder {
     }
 
     createCardGrey(){
-        let card = new Card({GameLayer: this.GameLayer, id:this.cardNumber});
+        let card = new Card({GameLayer: this.GameLayer, id: this.id});
         card.zIndex = this.z - 5;
         card.attach(this);
         card.unsetEvents();

src/Game/views/buildings/Collection.js

@@ -1,9 +1,16 @@
-// import * as PIXI from 'pixi.js';
+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';
+
+import CollectionHolder from '../base/CollectionHolder';
+
+import Button from '../misc/Button.js';
+
+//import Card from '../base/Card.js';
+
+const DefaultImageUrl = '/files/assets/ui/papyrus.jpg';
+const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
+
 
 class CollectionHandler extends GuiableContainer{
     constructor(props) {
@@ -22,10 +29,12 @@ class CollectionHandler extends GuiableContainer{
         };
 
         // GUI
-        this.addFolder('Deck');
+        this.addFolder('Collection');
         //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.addToFolder('Collection', this.options, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('Collection', this.options, 'y').onFinishChange((v) => this.position.y = v);
+
+        this.addUI(props);
         
         this.construct(props);
     }
@@ -35,16 +44,35 @@ class CollectionHandler extends GuiableContainer{
             GameLayer
         } = props;
         
+        this.GameLayer = GameLayer;
         let CollectionScale = 0.35;
         this.cards = [];
+        
+        //to be deleted
+        let [w,h] = [800,600];
+
+        this.sprite = new PIXI.Sprite(DefaultImage);
+        this.sprite.anchor.set(0,0);
+        this.sprite.width = w;
+        this.sprite.height= h;
+        
+        this.addChild(this.sprite);
+        // let card = new Card({'x':100, 'y':120});
+        // card.zIndex = 4;
+        // this.addChild(card);
+        //
+        this.addUI(props);
+        this.position.set(-500,-320);
 
-        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.push(new CollectionHolder({GameLayer, 'x': 0, 'y': 0, team: 0, id: 3}).scaleTo(CollectionScale));
+        this.cards.push(new CollectionHolder({GameLayer, 'x': 0, 'y': 0, team: 1, id: 1}).scaleTo(CollectionScale));
+        this.cards.push(new CollectionHolder({GameLayer, 'x': 0, 'y': -230, team: 1, id: 5}).scaleTo(CollectionScale));
+        this.cards.push(new CollectionHolder({GameLayer, 'x': 0, 'y': 0, team: 1, id: 4}).scaleTo(CollectionScale));
+        this.cards.push(new CollectionHolder({GameLayer, 'x': 80, 'y': 230, team: 1, id: 3}).scaleTo(CollectionScale));
+        this.cards.forEach((c) => c.show());
         this.cards.forEach((c) => this.addChild(c));
+
+
     }
 
     getHolder(x) {
@@ -59,6 +87,19 @@ class CollectionHandler extends GuiableContainer{
         super._kill();
     }
 
+    addUI(){
+        let leftButton = new Button({GameLayer: this.GameLayer, Text: {text: 'Alerta'}, 'x': 130, 'y': 540});
+        leftButton.scale.set(0.3);
+        this.addChild(leftButton.onClick(() =>{
+            window.alert('kostas');
+        }));
+        let rightButton = new Button({GameLayer: this.GameLayer, Text: {text: 'Alerta'}, 'x': 130, 'y': 540});
+        rightButton.scale.set(0.3);
+        this.addChild(rightButton.onClick(() =>{
+            window.alert('kostas');
+        }));
+    }
+
     getAsJSON() {
         return {
             component: 'buildings/Collection',

src/Game/views/buildings/DeckCollection.js

@@ -4,13 +4,11 @@
 import GuiableContainer from '../../../helpers/Guiable';
 // import Deck from '../../assets/deck';
 import CardHolder from '../base/CardHolder';
-
-import Card from '../base/Card';
-
+//import Card from '../base/Card';
 import EventManager from '../../services/EventManager';
 
 
-class DeckHandler extends GuiableContainer{
+class DeckCollectionHandler extends GuiableContainer{
     constructor(props) {
         super(props);
         let {
@@ -58,34 +56,6 @@ class DeckHandler extends GuiableContainer{
         this.cards.forEach((c) => this.addChild(c));
     }
 
-    draw() {
-        for(var i=0;i<5;i++) {
-            if(!this.getHolder(i).isEmpty())continue;
-            let rn = parseInt((Math.random()*1000) % 6, 10);
-            let card = new Card({GameLayer: this.GameLayer, id:rn});
-            let t = i;
-            this.getHolder(t).occupy(card);
-            // setTimeout(() => ) , 100);
-            this.addChild(card);
-        }
-    }
-
-    lock() {
-        this.cards.forEach((c,i) => {
-            if(!c.isEmpty()){
-                c.getCard().lock();
-            }
-        });
-    }
-    
-    unlock() {
-        this.cards.forEach((c,i) => {
-            if(!c.isEmpty()){
-                c.getCard().unlock();
-            }
-        });
-    }
-
     getHolder(x) {
         return this.cards[x];
     }
@@ -125,4 +95,4 @@ class DeckHandler extends GuiableContainer{
     }
 }
 
-export default DeckHandler;
+export default DeckCollectionHandler;

src/Game/views/demo/CardCollectionDemo.js

@@ -3,17 +3,20 @@ import 'pixi-layers';
 
 import Injector from '../../services/Injector';
 
-import CardCollection from '../base/CardCollection';
+//import CardCollection from '../base/CardCollection';
+//import DeckCollection from '../buildings/DeckCollection';
+import Collection from '../buildings/Collection';
 import CollectionDeck from '../base/CollectionDeck';
 
+
 class CardCollectionDemo extends PIXI.Container{
 	constructor(props){
 		super();
 
 
-		let cardCollection = new CardCollection({});
-		cardCollection.parentLayer = Injector.getByName("MainLayer");
-		this.addChild(cardCollection);
+		let collection = new Collection({'x':0, 'y':0});
+		collection.parentLayer = Injector.getByName('MainLayer');
+		this.addChild(collection);
 
 		let collectionDeck = new CollectionDeck({'x': 500, 'y':0 });
 		this.addChild(collectionDeck);