Board Play Demo - Board + Deck Demos / Holder lockable/cloack/uncloak/appear/disappear & more object oriented drop

src/Game/services/index.js

@@ -3,11 +3,13 @@ var Gameloop = require('./Gameloop.js');
 var Events = require('./EventManager.js');
 var Input = require('./InputManager.js');
 var Network = require('./Net.js');
+var Injector = require('./Injector.js');
 
 module.exports = {
 	API, 
 	Event,
 	Gameloop,
 	Input,
-	Network
+	Network,
+	Injector
 }

src/Game/views/base/Card.js

@@ -4,6 +4,7 @@ import config from '../../config';
 import dragAndDrop from '../../../helpers/dragAndDrop';
 
 import GuiableContainer from '../../../helpers/Guiable';
+import Injector from '../../services/Injector';
 
 import Deck from '../../assets/deck';
 
@@ -87,6 +88,8 @@ class Card extends GuiableContainer{
         this.addChild(this.sprite);
         this.addChild(this.label);
         this.addChild(this.frame);
+
+        this.parentLayer = Injector.getByName('MainLayer');
         dragAndDrop(this);
 
         this.loadCard(id || 0);
@@ -125,8 +128,22 @@ class Card extends GuiableContainer{
 
     attach(holder = null) { 
         this._holder = holder;
+        setTimeout(() => {
+            this.moveTo(this.parent.toLocal(holder.getGlobalPosition()))
+        }, 10);
+    }
+    
+    unsetEvents() {
+        this.stopDND();
+        return this;
+    }
+
+    setEvents() {
+        dragAndDrop(this);
+        return this;
     }
 
+
     // Animate to Position
     moveTo(point, milliseconds=1000) {
         let path = new PIXI.tween.TweenPath();

src/Game/views/base/CardHolder.js

@@ -3,6 +3,7 @@ import * as PIXI from 'pixi.js';
 
 import GuiableContainer from '../../../helpers/Guiable';
 import EventManager from '../../services/EventManager';
+import Injector from '../../services/Injector';
 
 //const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
 //const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
@@ -32,6 +33,8 @@ class CardHolder extends GuiableContainer {
         this.addToFolder('CardHolder', this, 's').onFinishChange((v) => this.change({s: v}));
         //
         this.construct(props);
+        this.appear();
+        this.uncloak();
         this.show();
     }
 
@@ -56,13 +59,23 @@ class CardHolder extends GuiableContainer {
 
         this.scale.set(this.s);
 
+        this.parentLayer = Injector.getByName('TopLayer');
+
+
         EventManager.on('CardDragging', this.show);
         EventManager.on('CardDraggingFinished', this.hide);
     }
 
+    lockable() { this._lockable = true; return this;}
+
+    show = () => { if(this._visible)this.addChild(this.sprite) }
+    hide = () => { if(this._visible)this.removeChild(this.sprite) }
+
+    disappear = () => { this.hide(); this._visible = false; }
+    appear = () => { this._visible = true; this.show(); }
 
-    show = () => this.addChild(this.sprite)
-    hide = () => this.removeChild(this.sprite)
+    cloak = () => { this.sprite.alpha = 0.01; }
+    uncloak = () => { this.sprite.alpha = 1.0; }
 
     getCard() {
         return this._card;
@@ -80,7 +93,8 @@ class CardHolder extends GuiableContainer {
 
     occupy(card) {
         this.lock(card);
-        this._onDrop(card);
+        if(this._onDrop)
+            this._onDrop(card);
     }
 
     lock(card = null) {
@@ -89,12 +103,14 @@ class CardHolder extends GuiableContainer {
         this._card = card;
         if(card) {
             card.attach(this);
+            if(this._lockable)card.unsetEvents();
         }
     }
 
     unlock() {
         this.setEvents();
-        this._locked = false;    
+        this._locked = false;
+        this._card = null;
     }
 
     scaleTo(s) {

src/Game/views/buildings/Board.js

@@ -5,7 +5,9 @@ import GuiableContainer from '../../../helpers/Guiable';
 import Deck from '../../assets/deck';
 import CardHolder from '../base/CardHolder';
 
-class Board extends GuiableContainer{
+import Injector from '../../services/Injector';
+
+class BoardHandler extends GuiableContainer{
     constructor(props) {
         super(props);
         let {
@@ -42,21 +44,25 @@ class Board extends GuiableContainer{
         let BoardScale = 0.35;
         // Board BG
         let bg = new PIXI.Sprite(PIXI.Texture.fromImage('/files/assets/board_wood.jpg'));
+        bg.parentLayer = Injector.getByName('BackgroundLayer');
         bg.position.set(-700,-500);
         bg.scale.set(1.75);
         this.addChild(bg);
 
-        this.holders = [];
-        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale).onDrop(() => this.placeCard(0)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(BoardScale).onDrop(() => this.placeCard(1)));
-        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': -230, team: 0, id: 1}).scaleTo(BoardScale).onDrop(() => this.placeCard(2)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 0, team: 1, id: 5}).scaleTo(BoardScale).onDrop(() => this.placeCard(3)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 0, team: 0, id: 2}).scaleTo(BoardScale).onDrop(() => this.placeCard(4)));
-        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 0, team: 1, id: 3}).scaleTo(BoardScale).onDrop(() => this.placeCard(5)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 230, team: 1, id: 4}).scaleTo(BoardScale).onDrop(() => this.placeCard(6)));
-        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop(() => this.placeCard(7)));
-        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop(() => this.placeCard(8)));
 
+
+        this.holders = [];
+        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(0, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': -230, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(1, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': -230, team: 0, id: 1}).scaleTo(BoardScale).onDrop((c) => this.placeCard(2, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 0, team: 1, id: 5}).scaleTo(BoardScale).onDrop((c) => this.placeCard(3, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 0, team: 0, id: 2}).scaleTo(BoardScale).onDrop((c) => this.placeCard(4, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 0, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(5, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -220, 'y': 230, team: 1, id: 4}).scaleTo(BoardScale).onDrop((c) => this.placeCard(6, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': -50, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(7, c)));
+        this.holders.push(new CardHolder({GameLayer, 'x': 120, 'y': 230, team: 1, id: 3}).scaleTo(BoardScale).onDrop((c) => this.placeCard(8, c)));
+        this.holders.forEach((item) => item.parentLayer = Injector.getByName('TopLayer'));
+        this.holders.forEach((item) => item.lockable());
         this.holders.forEach((item) => this.addChild(item));
     }
 
@@ -64,8 +70,8 @@ class Board extends GuiableContainer{
         return this.holders[3*y+x].getCard();
     }
 
-    placeCard(position) {
-        this.holders[position].getCard();
+    placeCard(position, card) {
+       
     }
 
     onClick(fn) {
@@ -87,4 +93,4 @@ class Board extends GuiableContainer{
     }
 }
 
-export default Board;
+export default BoardHandler;

src/Game/views/buildings/Deck.js

@@ -0,0 +1,76 @@
+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';
+
+class DeckHandler extends GuiableContainer{
+    constructor(props) {
+        super(props);
+        let {
+            x,
+            y,
+            id
+        } = props;
+
+        // Properties Component 
+        //this.imageURL = image || getParam('imageURL');
+        this.position.set(x,y);
+        this.options = {
+            x: x || 0,
+            y: y || 0,
+        };
+
+        // GUI
+        this.addFolder('Deck');
+        //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.construct(props);
+    }
+
+    construct(props) {
+        let {
+            id,
+            team,
+            GameLayer
+        } = props;
+        
+        let DeckScale = 0.35;
+        this.cards = [];
+
+        this.cards.push(new CardHolder({GameLayer, 'x': 160, 'y': -230, team: 0, id: 3}).scaleTo(DeckScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 160, 'y': 0, team: 1, id: 1}).scaleTo(DeckScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 0, 'y': -230, team: 1, id: 5}).scaleTo(DeckScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 0, 'y': 0, team: 1, id: 4}).scaleTo(DeckScale));
+        this.cards.push(new CardHolder({GameLayer, 'x': 80, 'y': 230, team: 1, id: 3}).scaleTo(DeckScale));
+        this.cards.forEach((c) => c.cloak());
+        this.cards.forEach((c) => this.addChild(c));
+    }
+
+    getHolder(x) {
+        return this.cards[x];
+    }
+    
+    getCard(x) {
+        return this.cards[x].getCard();
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'buildings/Deck',
+            x:  this.position.x,
+            y:  this.position.y,
+            id: this.options.id,
+            team: this.options.team
+        };
+    }
+}
+
+export default DeckHandler;

src/Game/views/demo/Board.js

@@ -2,7 +2,9 @@ import * as PIXI from 'pixi.js';
 
 import Card from '../base/Card';
 import CardHolder from '../base/CardHolder';
-import Board from '../buildings/Board';
+import BoardHandler from '../buildings/Board';
+import DeckHandler from '../buildings/Deck';
+import Injector from '../../services/Injector';
 
 class BoardDemo extends PIXI.Container{
     constructor(props) {
@@ -10,37 +12,22 @@ class BoardDemo extends PIXI.Container{
 
         let {GameLayer} = props;
 
-        let BoardScale = 0.35,
-            DeckScale = 0.35;
-        // Board BG
-        let bg = new PIXI.Sprite(PIXI.Texture.fromImage('/files/assets/board_wood.jpg'));
-        bg.position.set(-700,-500);
-        bg.scale.set(1.75);
-        this.addChild(bg);
-
-        // let card = new Card({GameLayer});
-        // this.addChild(card);
-        this.addChild(new Card({GameLayer, 'x': -220, 'y': -230, team: 0, id: 4}).scaleTo(0.27));
+
+        let card = new Card({GameLayer, 'x': 100, 'y': -230, team: 0, id: 4}).scaleTo(0.27);
+        card.parentLayer = Injector.getByName('MainLayer');
+        this.addChild(card);
         
-        let board = new Board({GameLayer, 'x': -250, 'y': 0 });
+        let board = new BoardHandler({GameLayer, 'x': -250, 'y': 0 });
         this.addChild(board);
 
-        let deck = new PIXI.Container();
+        // let holder2 = new Card({'x':200,'y':100, 's': 0.7, id: 3});
+        // this.addChild(holder2);
 
-        deck.addChild(new CardHolder({GameLayer, 'x': 160, 'y': -230, team: 0, id: 3}).scaleTo(DeckScale));
-        deck.addChild(new CardHolder({GameLayer, 'x': 160, 'y': 0, team: 1, id: 1}).scaleTo(DeckScale));
-        deck.addChild(new CardHolder({GameLayer, 'x': 0, 'y': -230, team: 1, id: 5}).scaleTo(DeckScale));
-        deck.addChild(new CardHolder({GameLayer, 'x': 0, 'y': 0, team: 1, id: 4}).scaleTo(DeckScale));
-        deck.addChild(new CardHolder({GameLayer, 'x': 80, 'y': 230, team: 1, id: 3}).scaleTo(DeckScale));
-        deck.position.set(380,0);
+        let deck = new DeckHandler({GameLayer, 'x': 380, 'y': 0});
         this.addChild(deck);
 
-        // let holder = new CardHolder({'x':-170,'y':0, 's': 0.4});
-        // this.addChild(holder);
-
-        let holder2 = new CardHolder({'x':200,'y':100, 's': 0.7});
-        //this.addChild(holder2);
-        holder2.onDrop((card) => 0);
+        this.board = board;
+        this.deck = deck;
     }
 
     _kill = () => {

src/Game/views/demo/BoardPlay.js

@@ -0,0 +1,36 @@
+import * as PIXI from 'pixi.js';
+
+import Card from '../base/Card';
+import Injector from '../../services/Injector';
+import BoardStage from './Board';
+
+class BoardPlayDemo extends PIXI.Container{
+    constructor(props) {
+        super();
+
+        let {GameLayer} = props;
+
+
+        let stage = new BoardStage(props);
+        this.addChild(stage);
+
+        
+        for(var i=0;i<5;i++) {
+            let rn = parseInt((Math.random()*1000) % 6);
+            let card = new Card({GameLayer, id:rn});
+            let t = i;
+            stage.deck.getHolder(t).occupy(card);
+            // setTimeout(() => ) , 100);
+
+            this.addChild(card);
+        }
+
+    }
+
+    _kill = () => {
+    }
+
+    getAsJSON = () => {return {component: 'demo/BoardPlay'}}
+}
+
+export default BoardPlayDemo;

src/Game/views/demo/CardCollectionDemo.js

@@ -20,7 +20,6 @@ class CardCollectionDemo extends PIXI.Container{
 	}
 
 	_kill() {
-        
     }
 
 	getAsJSON = () => {return {component: 'demo/CardCollectionDemo'}}

src/helpers/dragAndDrop.js

@@ -36,8 +36,6 @@ function dragAndDrop(sprite) {
 
 function place(holder) {
     if(this.dragging) {
-        this.placedPosition = this.parent.toLocal(holder.getGlobalPosition());
-        this.placedScale = new PIXI.Point(holder.scale.x, holder.scale.y);
         holder.occupy(this);
     }
 }
@@ -49,13 +47,13 @@ function onDragStart(event)
     // we want to track the movement of this particular touch
     this.data = event.data;
     this.dragging = true;
-    
-    let holder = this.getHolder();
-    if(holder)
-        holder.unlock();
 
     this.draggingOffset = this.data.getLocalPosition(this);
 
+    if(this._holder) {
+        this._holder.unlock();
+    }
+
     this.draggingInitial = new PIXI.Point(this.position.x, this.position.y);
 
     EventManager.emit('CardDragging');