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>