merge

src/Game/game/machine/GameMachine.js

@@ -1,6 +1,8 @@
 // var Card = require('./Card.js');
+
 const SHA256 = require('crypto-js/sha256');
-// TO-DO
+
+// TODO test
 
 // Need to create an initialization move or something to get verified!
 // Players can have their names placed on state.players on init, showing turns and colors
@@ -11,7 +13,17 @@ class GameMachine {
             board: new Board(),
             players: [],
             hash: '0123456789',
-            stack: []
+            stacks: {
+                moves: [],
+                hashes: []
+            }
+        };
+    }
+
+    getStack() {
+        return {
+            moves: this.state.stacks.moves.map((move) => move.export()),
+            hashes: this.state.stacks.hashes
         };
     }
 
@@ -50,7 +62,7 @@ class GameMachine {
     }
 
     hasFinished() {
-        return this.state.stack.length >= 10;
+        return this.state.stacks.hashes.length >= 10;
     }
 
     getWinner() {
@@ -65,24 +77,26 @@ class GameMachine {
     }
 
     isMyTurn(player) {
-        let moves = this.state.stack.length;
+        let moves = this.state.stacks.hashes.length;
         return this.getPlayerNumber(player) === moves % 2 && moves < 10;
     }
 
     needFinalization() {
-        return this.state.stack.length === 9;
+        return this.state.stacks.hashes.length === 9;
     }
 
     runMove(move) {
         const spray = SHA256(JSON.stringify(move)).toString();
-        if (this.state.stack.includes(spray)) {
+        if (this.state.stacks.hashes.includes(spray)) {
             console.log('This move has been processed already');
             return;
         }
         try {
             move.verify(this.state);
             move.performMove(this.state.board);
-            this.state.stack.push(spray);
+            this.state.stacks.moves.push(move);
+            this.state.stacks.hashes.push(spray);
+            console.log(this.state.stacks);
         } catch (e) {
             throw e;
         }

src/Game/game/machine/GameMoves.js

@@ -5,6 +5,7 @@ class GameMove {
     }
     verify() {}
     performMove() {}
+    export() {}
 }
 GameMove.TYPES = {
     PLACE: 1,
@@ -20,6 +21,17 @@ class PlaceMove extends GameMove {
         this.card = card;
         this.player = player;
     }
+
+    export() {
+        return {
+            type    : GameMove.TYPES.PLACE,
+            id      : this.card.id,
+            player  : this.player,
+            position: this.position
+        };
+        // Add signature!
+    }
+
     verify(state) {
         if (!state.board.isEmpty(this.position)) {
             throw Error('Not a valid move, there is already a card there!');
@@ -49,6 +61,14 @@ class RevealMove extends GameMove {
         this.player = player;
     }
 
+    export() {
+        return {
+            type    : GameMove.TYPES.REVEAL,
+            id      : this.card.id,
+            player  : this.player
+        };
+    }
+
     verify(state) {
         if (state.stack.length != 9) {
             throw Error('Not a valid move, Need to play all cards to reveal!');

src/Game/services/GameService.js

@@ -28,16 +28,33 @@ class GameService {
         SocketService.on('result', (data) => this.end(data));
     }
 
+    isMyTurn() {
+        return this.GameMachine.isMyTurn(UserService.getToken());
+    }
+
     getMyTeam() {
         return this.state.setup.id.indexOf(UserService.getToken());
     }
 
+    setLastTime(time) {
+        this.state.timestamp = time;
+    }
+
+    getLastTime() { return this.state.timestamp; }
+    elapsedTime() { 
+        const now = new Date().getTime();
+        return now - this.state.timestamp;
+    }
+
     move(data) {
         // Game Machine perform internal Move
-        let {cardid, position, player} = data;
+        let {cardid, position, player, timestamp} = data;
+
+        this.setLastTime(timestamp); // Only here for round time!
 
         const card = new Game.Card(cardid);
         const move = new Game.GameMoves.PlaceMove(card, position, player);
+        
         try{
             this.GameMachine.runMove(move);
             let ind = this.state.cards.indexOf(cardid);

src/Game/views/base/CollectionHolder.js

@@ -35,7 +35,7 @@ class CollectionHolder extends CardHolder {
         this.appear();
         this.uncloak();
         this.show();
-        
+
         this.unsetEvents();
         this.refresh();
 

src/Game/views/base/ProgressBar.js

@@ -0,0 +1,161 @@
+import * as PIXI from 'pixi.js';
+import config from '../../config';
+
+import dragAndDrop from '../../../helpers/dragAndDrop';
+
+import GuiableContainer from '../../../helpers/Guiable';
+import Injector from '../../services/Injector';
+
+import Deck from '../../assets/deck';
+
+import Text from '../misc/Text';
+
+import Machine from '../../game';
+
+const ProgressFrameURL = '/files/assets/cards/frame_blue.png';
+const ProgressFrame = PIXI.Texture.fromImage(ProgressFrameURL);
+
+class ProgressBar extends GuiableContainer{
+    constructor(props) {
+        super(props);
+        let {
+            x,
+            y,
+            v
+        } = props;
+
+        // Properties Component 
+        //this.imageURL = image || getParam('imageURL');
+        this.position.set(x,y);
+
+        this.options = {
+            x: x || 0,
+            y: y || 0,
+            v: v || 0,
+            t: 0
+        };
+
+        // GUI
+        this.addFolder('ProgressBar');
+        this.addToFolder('ProgressBar', this.options, 'v').onFinishChange((v) => this.setValue(v));
+        this.addToFolder('ProgressBar', this.options, 'x').onFinishChange((v) => this.position.x = v);
+        this.addToFolder('ProgressBar', this.options, 'y').onFinishChange((v) => this.position.y = v);
+        this.addToFolder('ProgressBar', this.options, 't').onFinishChange((v) => this.setTimeout(v));
+        //
+
+        this.construct(props);
+    }
+
+    construct(props) {
+        let {
+            v
+        } = props;
+
+        let [w,h] = [200, 30];
+        // Every card has a transparent region around so the hitArea is Reduced!!!
+        let [hw,hh] = [config.CARD.WIDTH-config.CARD.OFFSET.X,config.CARD.HEIGHT-config.CARD.OFFSET.Y];  
+
+        this.sprite = new PIXI.Graphics();
+        this.sprite.beginFill(0x6284D9  ,1);
+
+        // set the line style to have a width of 5 and set the color to red
+        this.sprite.pivot.set(this.w/2,this.h/2);
+        this.sprite.drawRect(0, 0, w, h); // Center this shit 
+        this.sprite.position.set(-w/2, -h/2);
+
+        this.sprite.scale.set(v, 1);
+
+        this.addChild(this.sprite);
+
+        this.frame = new PIXI.Sprite(ProgressFrame);
+        this.frame.anchor.set(0.5,0.5);
+        this.frame.width = w+40;
+        this.frame.height= h+5;
+
+        this.addChild(this.frame);
+    }
+
+    setValue(v) {
+        this.sprite.scale.set(v, 1);
+    }
+
+    _intervalCallback(dt, fn) {
+        this.setValue(1 - (this._ctime/this._total));
+        this._ctime += dt;
+        console.log('Interval +');
+        if(this._ctime > this._total) {
+            console.log('Interval stop');
+            clearInterval(this._interval);
+            if(fn) fn();
+        }
+    }
+
+    setTimeout(v, fn) {
+        if(this._interval) clearInterval(this._interval);
+        this._total = v;
+        this._ctime = 0;
+        this._interval = setInterval(this._intervalCallback.bind(this), 50, 50, fn);
+        console.log('Interval set');
+    }
+
+
+    setTexture(texture) {
+        this.sprite.texture = texture;
+    }
+
+
+    // Animate to Position
+    moveTo(point, milliseconds=1000) {
+        if(typeof point === "undefined") {
+            return; // Some times this happens...
+        }
+        let path = new PIXI.tween.TweenPath();
+        path.moveTo(this.position.x, this.position.y).lineTo(point.x, point.y);
+
+        this._tween = PIXI.tweenManager.createTween(this);
+        this._tween.easing = PIXI.tween.Easing.outQuart();
+        this._tween.loop = false;
+        this._tween.path = path;
+        this._tween.time = milliseconds;
+        this._tween.start();
+        return this;
+    }
+    // Animate Scale
+    scaleTo(newscale, milliseconds=1000) {
+        this._stween = PIXI.tweenManager.createTween(this);
+        this._stween.easing = PIXI.tween.Easing.outQuart();
+        this._stween.loop = false;
+        this._stween.from({
+            scale: { x: this.scale.x, y: this.scale.y }
+        });
+        this._stween.to({
+            scale: { x: newscale, y: newscale }
+        });
+        this._stween.time = milliseconds;
+        this._stween.start();
+        return this;
+    }
+
+    destroy() {
+        if(this._tween)
+            this._tween.stop();
+        if(this._stween)
+            this._stween.stop();
+        super.destroy();
+    }
+
+    _kill() {
+        super._kill();
+    }
+
+    getAsJSON() {
+        return {
+            component: 'base/ProgressBar',
+            x:  this.position.x,
+            y:  this.position.y,
+            v:  this.options.v
+        };
+    }
+}
+
+export default ProgressBar;

src/Game/views/buildings/Board.js

@@ -8,6 +8,7 @@ import CardHolder from '../base/CardHolder';
 import Injector from '../../services/Injector';
 import UserService from '../../services/UserService';
 
+import ProgressBar from '../base/ProgressBar';
 import Text from '../misc/Text';
 import Card from '../base/Card';
 
@@ -50,6 +51,9 @@ class BoardHandler extends GuiableContainer{
         bg.scale.set(1.75);
         this.addChild(bg);
 
+        this.timer = new ProgressBar({GameLayer, x: 0, y: -240,v: 0});
+        this.addChild(this.timer);
+
         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)));
@@ -69,7 +73,11 @@ class BoardHandler extends GuiableContainer{
         this.addChild(this.score);
         
         // this.disable();
+    }
 
+    updateTimer(time, fn) {
+        const countTime = 3 * 10000;
+        this.timer.setTimeout(countTime, fn);
     }
 
     sync = (GameMachine) => {

src/Game/views/demo/Board.js

@@ -6,6 +6,8 @@ import GameService from '../../services/GameService';
 import UserService from '../../services/UserService';
 import SocketService from '../../services/SocketService';
 
+
+
 class BoardDemo extends PIXI.Container{
     constructor(props) {
         super();
@@ -39,11 +41,17 @@ class BoardDemo extends PIXI.Container{
         GameService.onUpdate = () => {
             console.log("GameService onUpdate : from './demo/Board.js'");
             this.board.sync(GameService.GameMachine);
+            this.board.updateTimer(GameService.getLastTime(), this.outoftime.bind(this));
+            console.log("!!!Stack: ");
+            console.log(GameService.GameMachine.getStack());
         }
 
         GameService.onEnd = () => {
             console.log("Game Finished!");
             let winner = GameService.GameMachine.getWinner();
+            
+            SocketService.emit('gameOver', GameService.GameMachine.getStack());
+
             if (winner == -1) {
                 console.log("Tie");
             } else if (winner == UserService.getToken()) {
@@ -54,6 +62,13 @@ class BoardDemo extends PIXI.Container{
         }
     }
     
+    outoftime() {
+        this.board.disable();
+        
+        SocketService.emit('outoftime', GameService.GameMachine.getStack());
+        alert("Out of time");
+    }
+
     update() {}
 
     _kill = () => {}