add card redraw at battle begin

client/js/client.js

@@ -226,6 +226,8 @@ var BattleView = Backbone.View.extend({
     this.listenTo(user, "change:openDiscard", this.render);
     this.listenTo(user, "change:setAgile", this.render);
     this.listenTo(user, "change:setHorn", this.render);
+    this.listenTo(user, "change:isReDrawing", this.render);
+    /*this.listenTo(user, "change:handCards", this.render);*/
 
     this.$hand = this.$el.find(".field-hand");
     this.$preview = this.$el.find(".card-preview");
@@ -378,6 +380,12 @@ var BattleView = Backbone.View.extend({
       calculateCardMargin(this.$el.find(".field-hand .card"), 538, 70, this.handCards.length);
     }
 
+    if(this.user.get("isReDrawing")) {
+      this.user.set("handCards", this.handCards);
+      var modal = new ReDrawModal({model: this.user});
+      this.$el.prepend(modal.render().el);
+    }
+
     if(this.user.get("openDiscard")){
       var modal = new Modal({model: this.user});
       this.$el.prepend(modal.render().el);
@@ -488,6 +496,28 @@ var MedicModal = Modal.extend({
   }
 });
 
+var ReDrawModal = Modal.extend({
+  template: require("../templates/modal.redraw.handlebars"),
+  initialize: function(){
+    this.listenTo(this.model, "change:isReDrawing", this.cancel);
+  },
+  events: {
+    "click .card": "onCardClick"
+  },
+  onCardClick: function(e){
+    console.log($(e.target).closest(".card"));
+    var id = $(e.target).closest(".card").data().id;
+    this.model.get("app").send("redraw:reDrawCard", {
+      cardID: id
+    })
+  },
+  cancel: function(){
+    if(!this.model.get("isReDrawing")) return;
+    this.model.get("app").send("redraw:close_client");
+    this.model.set("isReDrawing", false);
+  }
+});
+
 var User = Backbone.Model.extend({
   defaults: {
     name: "",
@@ -554,6 +584,14 @@ var User = Backbone.Model.extend({
       self.set("setHorn", data.cardID);
     })
 
+    app.receive("redraw:cards", function() {
+      self.set("isReDrawing", true);
+    })
+
+    app.receive("redraw:close", function() {
+      self.set("isReDrawing", false);
+    })
+
     app.on("createRoom", this.createRoom, this);
     app.on("joinRoom", this.joinRoom, this);
     app.on("setName", this.setName, this);

client/scss/_backbone.modal.sass

@@ -12,7 +12,7 @@
   *
     box-sizing: border-box
 
-  overflow: auto
+  //overflow: auto
 
 .bbm-modal
   border-radius: 3px

client/scss/_backbone.modal.theme.sass

@@ -49,6 +49,7 @@
 .bbm-modal__section
   padding: 0 30px
   margin-top: 0px
+  display: inline-block
   font:
     size: 16px
   line-height: 26px

client/templates/fieldCards.handlebars

@@ -1,7 +1,6 @@
 {{#each this}}
   <div class="card{{#if _disabled}} disabled{{/if}}" data-key="{{_key}}" data-id="{{_id}}">
     {{#if diff}}<span class="card-attr-power {{#if diffPos}}card-attr-positive{{/if}}">{{diff}}</span>{{/if}}
-    <!--{{#if boost}}<span>+{{boost}}</span>{{/if}}-->
     <img src="../assets/cards/{{_data.img}}.png">
   </div>
 {{/each}}

client/templates/modal.redraw.handlebars

@@ -0,0 +1,13 @@
+<div class="bbm-modal__topbar">
+  <h3 class="bbm-modal__title">Choose up to 2 cards you wish to redraw!</h3>
+</div>
+<div class="bbm-modal__section">
+  {{#each handCards}}
+  <div class="card" data-key="{{_key}}" data-id="{{_id}}">
+    <img src="../assets/cards/{{_data.img}}.png">
+  </div>
+  {{/each}}
+</div>
+<div class="bbm-modal__bottombar">
+  <div class="bbm-button bbm-close">close</div>
+</div>

package.json

@@ -4,14 +4,15 @@
   "description": "A standalone multiplayer version of Gwent (The Witcher 3)",
   "main": "gulpfile.js",
   "dependencies": {
-    "socketcluster": "2.2.x",
     "connect": "3.0.1",
     "express": "4.12.3",
-    "shortid": "^2.2.2",
-    "serve-static": "1.8.0",
+    "jquery-deferred": "^0.3.0",
     "minimist": "1.1.0",
-    "underscore": "^1.8.3",
-    "socketcluster-client": "2.2.x"
+    "serve-static": "1.8.0",
+    "shortid": "^2.2.2",
+    "socketcluster": "2.2.x",
+    "socketcluster-client": "2.2.x",
+    "underscore": "^1.8.3"
   },
   "devDependencies": {
     "babelify": "^6.1.2",
@@ -22,7 +23,6 @@
     "gulp-sass": "^2.0.1",
     "handlebars": "^3.0.3",
     "jquery": "^2.1.4",
-    "promise": "^7.0.1",
     "vinyl-source-stream": "^1.1.0"
   },
   "scripts": {

server/Battle.js

@@ -1,6 +1,7 @@
 var Battleside = require("./Battleside");
 var Card = require("./Card");
 var shortid = require("shortid");
+var Promise = require("jquery-deferred");
 
 
 var Battle = (function(){
@@ -61,72 +62,23 @@ var Battle = (function(){
     this.p2.setLeadercard();
     this.p1.draw(10);
     this.p2.draw(10);
-    /*this.p1.hand.add(Card("commanders_horn"));
-    this.p2.hand.add(Card("commanders_horn"));*/
-    /*
-        this.p1.hand.add(Card("ciaran_aep_easnillien"));
-        this.p2.hand.add(Card("ciaran_aep_easnillien"));*/
-    /*
-        */
-    /*this.p1.hand.add(Card("decoy"));
-        this.p2.hand.add(Card("decoy"));*/
-    /*
-        this.p1.hand.add(Card("milva"));
-        this.p2.hand.add(Card("milva"));
-        this.p1.hand.add(Card("havekar_healer"));
-        this.p2.hand.add(Card("havekar_healer"));
-        this.p1.hand.add(Card("toruviel"));
-        this.p2.hand.add(Card("toruviel"));
-        this.p1.hand.add(Card("vrihedd_brigade_recruit"));
-        this.p2.hand.add(Card("vrihedd_brigade_recruit"));
-        this.p1.hand.add(Card("impenetrable_fog"));
-        this.p2.hand.add(Card("impenetrable_fog"));*/
-    /*
-    this.p1.hand.add(Card("commanders_horn"));
-    this.p1.hand.add(Card("commanders_horn"));
-    this.p2.hand.add(Card("commanders_horn"));*/
-    /*
-    this.p1.hand.add(Card("biting_frost"));
-    this.p2.hand.add(Card("biting_frost"));
-    this.p1.hand.add(Card("torrential_rain"));
-    this.p2.hand.add(Card("torrential_rain"));
-    this.p1.hand.add(Card("clear_weather"));
-    this.p2.hand.add(Card("clear_weather"));*/
-    /*
-        this.p1.hand.add(Card("kaedweni_siege_expert"));
-        this.p2.hand.add(Card("kaedweni_siege_expert"));
-        this.p1.hand.add(Card("ballista"));
-        this.p2.hand.add(Card("ballista"));
-        this.p1.hand.add(Card("ballista"));
-        this.p2.hand.add(Card("ballista"));
-        this.p1.hand.add(Card("ballista"));
-        this.p2.hand.add(Card("ballista"));
-        this.p1.hand.add(Card("ballista"));
-        this.p2.hand.add(Card("ballista"));
-        this.p1.hand.add(Card("ballista"));
-        this.p2.hand.add(Card("ballista"));*/
-
-    /*
-    this.p1.hand.add(Card("dun_banner_medic"));
-    this.p2.hand.add(Card("dun_banner_medic"));
-    this.p1.hand.add(Card("isengrim_faoiltiarnah"));
-    this.p2.hand.add(Card("isengrim_faoiltiarnah"));*/
-
-    /*this.p1.addToDiscard([Card("kaedweni_siege_expert")]);
-    this.p2.addToDiscard([Card("kaedweni_siege_expert")]);*/
-    /*
-        this.p1.hand.add(Card("decoy"));
-        this.p1.hand.add(Card("impenetrable_fog"));
-        this.p2.hand.add(Card("decoy"));
-        this.p2.hand.add(Card("impenetrable_fog"));*/
 
     this.update();
 
 
-    /*PubSub.subscribe("nextTurn", this.switchTurn.bind(this));*/
+    Promise.when(this.p1.reDraw(2), this.p2.reDraw(2))
+    .then(function() {
+      this.on("NextTurn", this.switchTurn);
+      this.switchTurn(Math.random() > .5 ? this.p1 : this.p2);
+    }.bind(this));
+
+
+
+
+    /*
     this.on("NextTurn", this.switchTurn);
 
-    this.switchTurn(Math.random() > .5 ? this.p1 : this.p2);
+    this.switchTurn(Math.random() > .5 ? this.p1 : this.p2);*/
   }
 
   r.switchTurn = function(side, __flag){
@@ -173,6 +125,7 @@ var Battle = (function(){
   }
 
   r.update = function(){
+    console.log("update called");
     this._update(this.p1);
     this._update(this.p2);
   }

server/Battleside.js

@@ -4,6 +4,7 @@ var Hand = require("./Hand");
 var Card = require("./Card");
 var Field = require("./Field");
 var _ = require("underscore");
+var Promise = require("jquery-deferred");
 
 
 var Battleside;
@@ -212,7 +213,7 @@ Battleside = (function(){
 
     console.log("update:hand fired");
 
-    this.update();
+    /*this.update();*/
   }
 
   r.calcScore = function(){
@@ -615,6 +616,40 @@ Battleside = (function(){
     return arr;
   }
 
+  r.reDraw = function(n){
+    var hand = this.hand.getCards();
+    var self = this;
+    var left = n;
+    var deferred = Promise.Deferred();
+
+    this.send("redraw:cards", null, true);
+
+    this.receive("redraw:reDrawCard", function(data){
+      var id = data.cardID;
+      if(!left) return;
+      left--;
+      var card = self.hand.remove(id)[0];
+      console.log("hand -> deck: ", card.getName());
+      self.deck.add(card);
+      self.deck.shuffle();
+      self.draw(1);
+      self.update();
+      if(!left) {
+        self.send("redraw:close", null, true);
+        console.log("redraw finished");
+        deferred.resolve("done");
+      }
+    })
+
+    this.receive("redraw:close_client", function() {
+      console.log("redraw finished!");
+      deferred.resolve("done");
+    })
+
+    return deferred;
+
+  }
+
   return Battleside;
 })();
 

server/Deck.js

@@ -50,7 +50,6 @@ var Deck = (function(){
     return card;
   }
 
-
   r._loadCards = function(){
     this._deck = this.getDeck().map(function(cardkey){
       return Card(cardkey);
@@ -100,6 +99,10 @@ var Deck = (function(){
     }
   }
 
+  r.add = function(card) {
+    this._deck.push(card);
+  }
+
   return Deck;
 })();