more stuff

assets/data/abilities.js

@@ -23,7 +23,7 @@ module.exports = {
 
       var cards = this.getDeck().find("name", name);
       cards.forEach(function(_card) {
-        self.getDeck().removeFromDeck(_card.getId());
+        self.getDeck().removeFromDeck(_card.getID());
         this._placeCard(_card);
       })
     }

package.json

@@ -23,6 +23,7 @@
     "handlebars": "^3.0.3",
     "jquery": "^2.1.4",
     "promise": "^7.0.1",
+    "pubsub-js": "^1.5.2",
     "shortid": "^2.2.2",
     "vinyl-source-stream": "^1.1.0"
   },

public/index.html

@@ -123,7 +123,7 @@
     <div class="row">
       <div class="col-xs-12 field field-hand">
         {{#each cards}}
-        <div class="card" data-key="{{_key}}">
+        <div class="card" data-key="{{_key}}" data-id="{{_id}}">
           <img src='../assets/cards/{{_data.img}}.png'>
         </div>
         {{/each}}

public/js/client.js

@@ -93,65 +93,87 @@ var App = Backbone.Router.extend({
   }
 });
 
-/*var Partial = Backbone.View.extend({
-  initialize: function(options){
-    this.template = Handlebars.compile($(options.templateID).html());
-    this.infoData = this.infoData || {};
-    this.app = options.app;
-    var self = this;
-
-this.listenTo(this.infoData, "change", this.render);
-    this.app.on("update:info", function(d) {
-      self.infoData = d;
-      self.render();
-    });
-    this.render();
-  },
-  render: function(){
-    var self = this;
-    var d = this.infoData;
-    this.$el.html(this.template({
-      name: d.name,
-      score: d.score,
-      hand: d.hand,
-      lives: d.lives
-    }));
-    return this;
-  }
-});*/
-
 var SideView = Backbone.View.extend({
   el: ".container",
+  template: Handlebars.compile('<div class="card" data-key="{{_key}}"><img src="../assets/cards/{{_data.img}}.png"></div>'),
+  templateCards: Handlebars.compile('{{#each this}}' +
+  '<div class="card" data-key="{{_key}}">' +
+  '<img src="../assets/cards/{{_data.img}}.png">' +
+  '</div>' +
+  '{{/each}}'),
   initialize: function(options){
     var self = this;
     this.side = options.side;
     this.app = options.app;
     this.battleView = options.battleView;
     this.infoData = this.infoData || {};
+    this.leader = this.leader || {};
+    this.field = this.field || {};
 
-    this.$info = this.$el.find(".game-info" + this.side);
-    this.$fields = this.$el.find(".battleside" + this.side);
-    /*this.$info = new Partial({
-      templateID: "#info-template",
-      el: ".game-info"+this.side,
-      app: this.app
-    });*/
-
-    /*this.app.on("update:info", function(d){
-      self.infoData = d.infoData;
-      console.log(d);
-      self.render();
-    });*/
 
   },
   render: function(){
+
+    this.renderInfo();
+    this.renderCloseField();
+    this.renderRangeField();
+    this.renderSiegeField();
+
+    return this;
+  },
+  renderInfo: function(){
     var d = this.infoData;
+    var l = this.leader;
     this.$info = this.$el.find(".game-info" + this.side);
     this.$info.find(".info-name").html(d.name);
     this.$info.find(".score").html(d.score);
     this.$info.find(".hand-card").html(d.hand);
     this.$info.find(".gwent-lives").html(this.lives(d.lives));
-    return this;
+    this.$info.find(".field-leader").html(this.template(l))
+
+    if(this.app.user.get("waiting") && this.side === ".player"){
+      this.$info.addClass("removeBackground");
+    }
+    if(!this.app.user.get("waiting") && this.side === ".foe"){
+      this.$info.addClass("removeBackground");
+    }
+
+  },
+  renderCloseField: function(){
+    if(!this.field.close) return;
+    this.$fields = this.$el.find(".battleside" + this.side);
+    var $field = this.$fields.find(".field-close").parent();
+    var cards = this.field.close._cards;
+    var score = this.field.close._score;
+
+    var html = this.templateCards(cards);
+
+    $field.find(".field-close").html(html)
+    $field.find(".large-field-counter").html(score)
+  },
+  renderRangeField: function(){
+    if(!this.field.ranged) return;
+    this.$fields = this.$el.find(".battleside" + this.side);
+    var $field = this.$fields.find(".field-range").parent();
+    var cards = this.field.ranged._cards;
+    var score = this.field.ranged._score;
+
+    var html = this.templateCards(cards);
+
+    $field.find(".field-range").html(html)
+    $field.find(".large-field-counter").html(score)
+  },
+  renderSiegeField: function(){
+    if(!this.field.siege) return;
+    this.$fields = this.$el.find(".battleside" + this.side);
+    var $field = this.$fields.find(".field-siege").parent();
+    var cards = this.field.siege._cards;
+    var score = this.field.siege._score;
+
+    var html = this.templateCards(cards);
+
+    $field.find(".field-siege").html(html)
+    $field.find(".large-field-counter").html(score)
   },
   lives: function(lives){
     var out = "";
@@ -178,6 +200,7 @@ var BattleView = Backbone.View.extend({
     $(this.el).prependTo('body');
 
     this.listenTo(user, "change:showPreview", this.render);
+    this.listenTo(user, "change:waiting", this.render);
 
     this.$hand = this.$el.find(".field-hand");
     this.$preview = this.$el.find(".card-preview");
@@ -193,6 +216,7 @@ var BattleView = Backbone.View.extend({
     app.receive("update:info", function(data){
       var _side = data._roomSide;
       var infoData = data.info;
+      var leader = data.leader;
 
 
       var side = yourSide;
@@ -201,8 +225,25 @@ var BattleView = Backbone.View.extend({
       }
       console.log(side);
       side.infoData = infoData;
+      side.leader = leader;
+      side.render();
+    });
+
+    app.receive("update:fields", function(data){
+      var close, ranged, siege;
+      var _side = data._roomSide;
+
+      var side = yourSide;
+      if(user.get("roomSide") != _side){
+        side = otherSide;
+      }
+
+
+      side.field.close = data.close;
+      side.field.ranged = data.ranged;
+      side.field.siege = data.siege;
+
       side.render();
-      //app.trigger("update:info", {side: side, infoData: infoData});
     })
 
     var interval = setInterval(function(){
@@ -221,7 +262,17 @@ var BattleView = Backbone.View.extend({
   },
   events: {
     "mouseover .card": "onMouseover",
-    "mouseleave .card": "onMouseleave"
+    "mouseleave .card": "onMouseleave",
+    "click .field-hand": "onClick"
+  },
+  onClick: function(e){
+    if(!!this.user.get("waiting")) return;
+    var $card = $(e.target).closest(".card");
+    var id = $card.data("id");
+    console.log("clicked id ", id);
+    this.app.send("play:cardFromHand", {
+      id: id
+    });
   },
   onMouseover: function(e){
     var target = $(e.target).closest(".card");
@@ -277,6 +328,12 @@ var User = Backbone.Model.extend({
       console.log("room id", self.get("room"));
     })
 
+    app.receive("set:waiting", function(data){
+      var waiting = data.waiting;
+      console.log("is waiting: ", waiting);
+      self.set("waiting", waiting);
+    })
+
 
     app.on("createRoom", this.createRoom, this);
     app.on("joinRoom", this.joinRoom, this);

public/scss/main.scss

@@ -53,6 +53,11 @@ $game-height: 800px;
   height: $game-height/2 - 100px;
   width: 100%;
   border: 1px solid black;
+  background: rgba(252, 219, 125, 0.51);
+}
+
+.removeBackground {
+  background: 0;
 }
 
 .mid-line {

server/Battle.js

@@ -1,4 +1,5 @@
 var Battleside = require("./Battleside");
+var PubSub = require("pubsub-js");
 
 var io = global.io;
 
@@ -31,24 +32,49 @@ var Battle = (function(){
 
 
   r.init = function(){
-    this.p1 = Battleside(this._user1.getName(), 0, this);
+    this.p1 = Battleside(this._user1.getName(), 0, this, this._user1);
-    this.p2 = Battleside(this._user2.getName(), 1, this);
+    this.p2 = Battleside(this._user2.getName(), 1, this, this._user2);
     this.p1.foe = this.p2;
     this.p2.foe = this.p1;
 
-    this.p1.send("update:info", {info: this.p1.getInfo()});
-    this.p2.send("update:info", {info: this.p2.getInfo()});
-
     this.start();
   }
 
   r.start = function(){
+    this.p1.setLeadercard();
+    this.p2.setLeadercard();
     this.p1.draw(10);
     this.p2.draw(10);
 
-    //this.p2.wait();
+    PubSub.subscribe("nextTurn", this.switchTurn.bind(this));
+
+    this.switchTurn();
   }
 
+  r.switchTurn = function(){
+    /*this.playerManager.renderInfos();
+    if(this.playerManager.bothPassed() && !this._roundCheck) {
+      //start new round
+      this._roundCheck = true;
+      this.checkRound();
+      return;
+    }
+    if(this.playerManager.bothPassed()) {
+      return;
+    }
+    var entity = this.playerManager.getNextPlayer();
+
+    this.playerManager.renderInfos();*/
+    var side = this.turn++ % 2 ? this.p1 : this.p2;
+
+
+    PubSub.publish("onEachTurn");
+    PubSub.publish("turn/" + side.getID());
+    console.log("current Turn: ", side.getName());
+
+  }
+
+
   r.send = function(event, data){
     io.to(this._id).emit(event, data);
   }

server/Battleside.js

@@ -1,24 +1,36 @@
-
 var io = global.io;
 var DeckData = require("../assets/data/deck");
 var Deck = require("./Deck");
 var Hand = require("./Hand");
+var Card = require("./Card");
+var Field = require("./Field");
+var PubSub = require("pubsub-js");
 
 
 var Battleside = (function(){
-  var Battleside = function(name, n, battle){
+  var Battleside = function(name, n, battle, user){
     if(!(this instanceof Battleside)){
-      return (new Battleside(name, n, battle));
+      return (new Battleside(name, n, battle, user));
     }
     /**
      * constructor here
      */
 
+    this._isWaiting = true;
+    this.socket = user.socket;
+    this.field = {};
+    this.field[Card.TYPE.LEADER] = Field(Card.TYPE.LEADER);
+    this.field[Card.TYPE.CLOSE_COMBAT] = Field(Card.TYPE.CLOSE_COMBAT);
+    this.field[Card.TYPE.RANGED] = Field(Card.TYPE.RANGED);
+    this.field[Card.TYPE.SIEGE] = Field(Card.TYPE.SIEGE);
     this.n = n ? "p2" : "p1";
     this._name = name;
     this.battle = battle;
     this.hand = Hand();
     this.deck = Deck(DeckData["test"]);
+
+
+    PubSub.subscribe("turn/" + this.getID(), this.onTurnStart.bind(this));
   };
   var r = Battleside.prototype;
   /**
@@ -28,19 +40,46 @@ var Battleside = (function(){
    */
   r._name = null;
   r._discard = null;
-  r._leader = null;
+  /*r.leaderField = null;
-  r._close = null;
+  r.closeField = null;
   r._range = null;
   r._siege = null;
-  r._field = null;
+  r._field = null;*/
   r._lives = 2;
   r._score = 0;
+  r._isWaiting = null;
+
+  r.field = null;
+
+  r.socket = null;
+  r.n = null;
 
   r.foe = null;
   r.hand = null;
   r.battle = null;
   r.deck = null;
 
+  r.wait = function(){
+    this._isWaiting = true;
+    this.send("set:waiting", {waiting: this._isWaiting}, true);
+  }
+
+  r.turn = function() {
+    this._isWaiting = false;
+    this.send("set:waiting", {waiting: this._isWaiting}, true);
+  }
+
+  r.setLeadercard = function(){
+    var leaderCard = this.deck.find("type", Card.TYPE.LEADER);
+    this.deck.removeFromDeck(leaderCard[0]);
+    /*
+        this.getYourside().setField("leader", leaderCard[0]);*/
+    this.field[Card.TYPE.LEADER].add(leaderCard[0]);
+  }
+
+  r.getID = function() {
+    return this.n;
+  }
 
   r.draw = function(times){
     while(times--) {
@@ -50,14 +89,23 @@ var Battleside = (function(){
 
     console.log("update:hand fired");
 
-    this.send("update:hand", {cards: JSON.stringify(this.hand.getCards())});
+    this.update();
+  }
+
+  r.calcScore = function() {
+    var score = 0;
+    for(var key in this.field) {
+      score += +this.field[key].getScore();
+    }
+    return this._score = score;
   }
 
   r.getInfo = function(){
+    console.log(this.getName(), this._isWaiting);
     return {
       name: this.getName(),
       lives: this._lives,
-      score: this._score,
+      score: this.calcScore(),
       hand: this.hand.length()
     }
   }
@@ -66,12 +114,60 @@ var Battleside = (function(){
     return this._name;
   }
 
-  r.send = function(event, msg) {
+  r.send = function(event, msg, isPrivate){
     msg = msg || {};
+    isPrivate = typeof isPrivate === "undefined" ? false : isPrivate;
     msg._roomSide = this.n;
+
+    if(isPrivate) {
+      return this.socket.emit(event, msg);
+    }
     this.battle.send(event, msg);
   }
 
+  r.receive = function(event, cb) {
+    this.socket.on(event, cb);
+  }
+
+  r.update = function(){
+    this.send("update:info", {
+      info: this.getInfo(),
+      leader: this.field[Card.TYPE.LEADER].get()[0]
+    })
+    this.send("update:hand", {
+      cards: JSON.stringify(this.hand.getCards())
+    });
+    this.send("update:fields", {
+      close: this.field[Card.TYPE.CLOSE_COMBAT],
+      ranged: this.field[Card.TYPE.RANGED],
+      siege: this.field[Card.TYPE.SIEGE]
+    })
+  }
+
+  r.onTurnStart = function() {
+    this.foe.wait();
+    this.turn();
+    var self = this;
+
+    this.receive("play:cardFromHand", function(data) {
+      var cardID = data.id;
+      var card = self.hand.getCard(cardID);
+      self.hand.remove(cardID);
+
+      self.playCard(card);
+    })
+  };
+
+  r.playCard = function(card) {
+    if(card === -1) return;
+    var field = this.field[card.getType()];
+
+    field.add(card);
+
+    this.update();
+
+    PubSub.publish("nextTurn");
+  }
 
 
   return Battleside;

server/Card.js

@@ -73,7 +73,7 @@ var Card = (function(){
     return this._key;
   }
 
-  r.getId = function(){
+  r.getID = function(){
     return this._id;
   }
 

server/Deck.js

@@ -65,30 +65,35 @@ var Deck = (function(){
   }
 
   r.pop = function(){
-    var id = this._deck.pop();/*
+    var id = this._deck.pop();
+    /*
         var card = CardManager().getCardById(id);*/
     return id;
   }
 
-  /*r.find = function(key, val){
+  r.find = function(key, val){
     var res = [];
-    this.getDeck().forEach(function(id){
+    this.getDeck().forEach(function(card){
-      var card = CardManager().getCardById(id);
       if(card.getProperty(key) == val){
         res.push(card);
       }
+
     });
     return res;
-  }*/
+  }
 
-  r.removeFromDeck = function(id){
+  r.removeFromDeck = function(card){
     var n = this.length();
 
     for(var i = 0; i < n; i++) {
-      var cardID = this.getDeck()[i];
+      /*var cardID = this.getDeck()[i];
       if(id == cardID){
         this.getDeck().splice(i, 1);
         return id;
+      }*/
+      var c = this.getDeck()[i];
+      if(c.getID() === card.getID()){
+        return this.getDeck().splice(i, 1);
       }
     }
     return -1;

server/Field.js

@@ -0,0 +1,47 @@
+var Field = (function(){
+  var Field = function(){
+    if(!(this instanceof Field)){
+      return (new Field());
+    }
+    /**
+     * constructor here
+     */
+
+    this._cards = [];
+  };
+  var r = Field.prototype;
+  /**
+   * methods && properties here
+   * r.property = null;
+   * r.getProperty = function() {...}
+   */
+
+  r._cards = null;
+  r._score = 0;
+
+  r.add = function(card) {
+    this._cards.push(card);
+    this.updateScore();
+  }
+
+  r.get = function() {
+    return this._cards;
+  }
+
+  r.getScore = function() {
+    return this._score;
+  }
+
+  r.updateScore = function() {
+    this._score = 0;
+    for(var i=0; i<this._cards.length; i++) {
+      var card = this._cards[i];
+      this._score += card.getPower();
+    }
+  }
+
+
+  return Field;
+})();
+
+module.exports = Field;

server/Hand.js

@@ -30,11 +30,19 @@ var Hand = (function(){
     return this._hand;
   }
 
+  r.getCard = function(id) {
+    for(var i=0; i< this.length(); i++) {
+      var card = this.getCards()[i];
+      if(card.getID() === id) return card;
+    }
+    return -1;
+  }
+
   r.remove = function(id){
     var n = this.length();
 
     for(var i = 0; i < n; i++) {
-      if(this._hand[i].getId() != id) continue;
+      if(this._hand[i].getID() != id) continue;
       return this._hand.splice(i, 1);
     }
     return -1;