Button testing

src/Game/views/buildings/Collection.js

@@ -1,10 +1,17 @@
-// 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 Button from '../misc/Button.js';
+//to be deleted
+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) {
         super(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.forEach((c) => c.show());
         this.cards.forEach((c) => this.addChild(c));
+
+
     }
 
     getHolder(x) {
@@ -59,6 +87,19 @@ class CollectionHandler extends GuiableContainer{
         super._kill();
     }
 
+    addUI(props){
+        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,19 @@ import 'pixi-layers';
 
 import Injector from '../../services/Injector';
 
-import CardCollection from '../base/CardCollection';
+//import CardCollection from '../base/CardCollection';
+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);