Layers!!!

src/Game/app.js

@@ -3,6 +3,7 @@ import * as PIXI from 'pixi.js';
 import * as tweenManager from 'pixi-tween';
 import 'pixi-layers';
 
+import Injector from './services/Injector';
 import Router from './Router.js';
 
 let DATGUI = require('dat.gui');
@@ -27,7 +28,27 @@ class App {
 		this.app.view.style.display = 'none';
 		document.body.appendChild(this.app.view);
 
-		//this.app.stage = new PIXI.display.Stage();
+		this.app.stage = new PIXI.display.Stage();
+
+
+		let bg = new PIXI.display.Layer();
+		let shadows = new PIXI.display.Layer();
+		let main = new PIXI.display.Layer();
+		let top = new PIXI.display.Layer();
+		let ui = new PIXI.display.Layer();
+
+		Injector.saveAs('BackgroundLayer', bg);
+		Injector.saveAs('ShadowsLayer', shadows);
+		Injector.saveAs('MainLayer', main);
+		Injector.saveAs('TopLayer', top);
+		Injector.saveAs('UILayer', ui);
+
+		this.app.stage.addChild(bg);
+		this.app.stage.addChild(shadows);
+		this.app.stage.addChild(main);
+		this.app.stage.addChild(top);
+		this.app.stage.addChild(ui);
+
 		this.viewStage = new PIXI.Container();
 		// var graphics = new PIXI.Graphics();
 		// graphics.beginFill(0xFFFF00,0.2);

src/Game/views/base/CardCollection.js

@@ -34,25 +34,25 @@ class CardCollection extends GuiableContainer{
         let [w,h] = [800,600];
 
         this.sprite = new PIXI.Sprite(DefaultImage);
-        this.sprite.anchor.set(0.5,0.5);
+        this.sprite.anchor.set(0,0);
         this.sprite.width = w;
         this.sprite.height= h;
-
+        
         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);
-
 
+        let card = new Card({'x':100, 'y':120});
+        this.addChild(card);
+        let card2 = new Card({'x':350, 'y':120});
+        this.addChild(card2);
+        let card3 = new Card({'x':600, 'y':120});
+        this.addChild(card3);
+        let card4 = new Card({'x':-w/2, 'y':-h/2}).scaleTo(0.4);
+        this.addChild(card4);
+        let card5 = new Card({'x':-w/3, 'y':-h/2});
+        this.addChild(card5);
 
+        this.position.set(-500,-320);
     }
 
     loadImage(img) {

src/Game/views/base/CollectionDeck.js

@@ -1,7 +1,7 @@
 import * as PIXI from 'pixi.js';
 import GuiableContainer from '../../../helpers/Guiable';
 import CardHolder from '../base/CardHolder';
-//import Card from '../base/Card';
+import Injector from '../../services/Injector';
 
 const DefaultImageUrl = '/files/assets/ui/papyrus.jpg';
 const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
@@ -33,28 +33,39 @@ class CollectionDeck extends GuiableContainer{
     }
 
     construct(props){
+        let { GameLayer } = 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.sprite.parentLayer = Injector.getByName("BackgroundLayer");
+
         this.addChild(this.sprite);
 
-        let cardHolder1 = new CardHolder({'x':0,'y':-200,'w':60,'h':96});
+
+
+        let cardHolder1 = new CardHolder({GameLayer,'x':0,'y':-240,'s':0.30});
+        cardHolder1.parentLayer = Injector.getByName("TopLayer");
         this.addChild(cardHolder1);
-        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});
+        // let cardHolder2 = new CardHolder({GameLayer,'x':0,'y':-120,'s':0.30});
+        // cardHolder2.parentLayer = Injector.getByName("TopLayer");
+        // this.addChild(cardHolder2);
+        let cardHolder3 = new CardHolder({GameLayer,'x':0,'y':0,'s':0.30});
+        cardHolder3.parentLayer = Injector.getByName("TopLayer");
         this.addChild(cardHolder3);
-        let cardHolder4 = new CardHolder({'x':0,'y':100,'w':60,'h':96});
-        this.addChild(cardHolder4);
-        let cardHolder5 = new CardHolder({'x':0,'y':200,'w':60,'h':96});
+        // let cardHolder4 = new CardHolder({GameLayer,'x':0,'y':120,'s':0.30});
+        // cardHolder4.parentLayer = Injector.getByName("TopLayer");
+        // this.addChild(cardHolder4);
+        let cardHolder5 = new CardHolder({GameLayer,'x':0,'y':240,'s':0.30});
+        cardHolder5.parentLayer = Injector.getByName("TopLayer");
         this.addChild(cardHolder5);
 
-
-
     }
 
     loadImage(img) {

src/Game/views/demo/CardCollectionDemo.js

@@ -1,6 +1,8 @@
 import * as PIXI from 'pixi.js';
 import 'pixi-layers';
 
+import Injector from '../../services/Injector';
+
 import CardCollection from '../base/CardCollection';
 import CollectionDeck from '../base/CollectionDeck';
 
@@ -12,25 +14,13 @@ class CardCollectionDemo extends PIXI.Container{
 			GameLayer
 		} = props;
 
-		var layer = new PIXI.display.Layer();
-		var layer2 = new PIXI.display.Layer();
+
 		let cardCollection = new CardCollection({});
-		//cardCollection.parentLayer = layer;
-		layer.addChild(cardCollection);
-		cardCollection.zIndex = 1;
-		// this.addChild(cardCollection);
-		let collectionDeck = new CollectionDeck({'x': 600, 'y':0 });
-		//collectionDeck.parentLayer = layer;
-		layer2.addChild(collectionDeck);
-		collectionDeck.zIndex = 2;
-		// this.addChild(collectionDeck);
-		GameLayer.app.stage.addChild(layer2);
-		GameLayer.app.stage.addChild(layer);
-		
-		this.addChild(layer);
-		this.addChild(layer2);
-		// this.setChildIndex(collectionDeck, 0);
-		// this.setChildIndex(cardCollection,1);
+		cardCollection.parentLayer = Injector.getByName("MainLayer");
+		this.addChild(cardCollection);
+
+		let collectionDeck = new CollectionDeck({'x': 500, 'y':0 });
+		this.addChild(collectionDeck);
 	}
 
 	_kill() {