Proper layers in CardCollection with z-index

src/Game/app.js

@@ -37,6 +37,12 @@ class App {
 		let top = new PIXI.display.Layer();
 		let ui = new PIXI.display.Layer();
 
+		bg.group.enableSort = true;
+		shadows.group.enableSort = true;
+		main.group.enableSort = true;
+		top.group.enableSort = true;
+		ui.group.enableSort = true;
+
 		Injector.saveAs('BackgroundLayer', bg);
 		Injector.saveAs('ShadowsLayer', shadows);
 		Injector.saveAs('MainLayer', main);

src/Game/views/base/CardCollection.js

@@ -42,10 +42,13 @@ class CardCollection extends GuiableContainer{
 
 
         let card = new Card({'x':100, 'y':120});
+        card.zIndex = 4;
         this.addChild(card);
         let card2 = new Card({'x':350, 'y':120});
+        card2.zIndex = 1;
         this.addChild(card2);
         let card3 = new Card({'x':600, 'y':120});
+        card3.zIndex = 2;
         this.addChild(card3);
         let card4 = new Card({'x':-w/2, 'y':-h/2}).scaleTo(0.4);
         this.addChild(card4);

src/Game/views/base/CollectionDeck.js

@@ -51,7 +51,7 @@ class CollectionDeck extends GuiableContainer{
 
 
         let cardHolder1 = new CardHolder({GameLayer,'x':0,'y':-240,'s':0.30});
-        cardHolder1.parentLayer = Injector.getByName("TopLayer");
+        cardHolder1.parentLayer = Injector.getByName("MainLayer");
         this.addChild(cardHolder1);
         // let cardHolder2 = new CardHolder({GameLayer,'x':0,'y':-120,'s':0.30});
         // cardHolder2.parentLayer = Injector.getByName("TopLayer");