Collection deck init

src/Game/views/base/CardCollection.js

@@ -1,5 +1,6 @@
 import * as PIXI from 'pixi.js';
 import GuiableContainer from '../../../helpers/Guiable';
+import Card from '../base/Card';
 
 const DefaultImageUrl = '/files/assets/ui/papyrus.jpg';
 const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
@@ -37,12 +38,19 @@ class CardCollection extends GuiableContainer{
         this.sprite.width = w;
         this.sprite.height= h;
 
-        //Should be removed
-        this.sprite.cursor = 'pointer';  
-        //
-
         this.addChild(this.sprite);
 
+        let card = new Card({'x':2*w/3, 'y':-h/2});
+        this.sprite.addChild(card);
+        let card2 = new Card({'x':w/3, 'y':-h/2});
+        this.sprite.addChild(card2);
+        let card3 = new Card({'x':0, 'y':-h/2});
+        this.sprite.addChild(card3);
+        let card4 = new Card({'x':-2*w/3, 'y':-h/2});
+        this.sprite.addChild(card4);
+        let card5 = new Card({'x':-w/3, 'y':-h/2});
+        this.sprite.addChild(card5);
+
 
 
     }

src/Game/views/base/CollectionDeck.js

@@ -0,0 +1,83 @@
+import * as PIXI from 'pixi.js';
+import GuiableContainer from '../../../helpers/Guiable';
+import CardHolder from '../base/CardHolder';
+import Card from '../base/Card';
+
+const DefaultImageUrl = '/files/assets/ui/papyrus.jpg';
+const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
+
+class CollectionDeck extends GuiableContainer{
+    constructor(props){
+        super(props);
+        let {
+            image,
+            x,
+            y
+        } = props;
+
+        // Properties Component 
+        this.imageURL = image || DefaultImageUrl;
+        this.position.set(x,y);
+
+        this.x = x || 0;
+        this.y = y || 0;
+
+        // GUI
+        this.addFolder('CollectionDeck');
+        this.addToFolder('CollectionDeck', this, 'imageURL').onFinishChange((v) => this.loadImage(v));
+        this.addToFolder('CollectionDeck', this, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('CollectionDeck', this, 'y').onFinishChange((v) => this.position.y = v);
+        //
+
+        this.construct(props);
+    }
+
+    construct(props){
+        let [w,h] = [200,600];
+
+        this.sprite = new PIXI.Sprite(DefaultImage);
+        this.sprite.anchor.set(0.5,0.5);
+        this.sprite.width = w;
+        this.sprite.height= h;
+
+        this.addChild(this.sprite);
+
+        let cardHolder = new CardHolder({'x':0,'y':0,'w':60,'h':96});
+        this.addChild(cardHolder);
+        let cardHolder2 = new CardHolder({'x':0,'y':100,'w':60,'h':96});
+        this.addChild(cardHolder2);
+        let cardHolder3 = new CardHolder({'x':0,'y':0,'w':60,'h':96});
+        this.addChild(cardHolder3);
+        let cardHolder4 = new CardHolder({'x':0,'y':0,'w':60,'h':96});
+        this.addChild(cardHolder4);
+        let cardHolder5 = new CardHolder({'x':0,'y':0,'w':60,'h':96});
+        this.addChild(cardHolder5);
+
+
+
+    }
+
+    loadImage(img) {
+        this.imageURL = img;
+        this.setTexture(PIXI.Texture.fromImage(img));
+    }
+
+    setTexture(texture) {
+        this.sprite.texture = texture;
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'base/CollectionDeck',
+            image: this.imageURL,
+            x: this.position.x,
+            y: this.position.y
+        };
+    }
+}
+
+export default CollectionDeck;

src/Game/views/demo/CardCollectionDemo.js

@@ -0,0 +1,19 @@
+import * as PIXI from 'pixi.js';
+
+import CardCollection from '../base/CardCollection';
+import CollectionDeck from '../base/CollectionDeck';
+
+class CardCollectionDemo extends PIXI.Container{
+	constructor(){
+		super();
+
+		let cardCollection = new CardCollection({});
+		this.addChild(cardCollection);
+		let collectionDeck = new CollectionDeck({'x': 600, 'y':0 });
+		this.addChild(collectionDeck);
+	}
+
+	getAsJSON = () => {return {component: 'demo/CardCollectionDemo'}}
+}
+
+export default CardCollectionDemo;