From b460cf6cd7723f02515f59b2f51c1e1e541d2f4f Mon Sep 17 00:00:00 2001
From: exane <raco0n@gmx.de>
Date: Thu, 25 Jun 2015 17:51:21 +0200
Subject: [PATCH] performance tweaks

---
 client/js/client.js                | 63 ++++++++++++++++++-----------
 client/templates/battle.handlebars | 65 +++---------------------------
 client/templates/info.handlebars   | 49 ++++++++++++----------
 server/Battle.js                   | 19 +++++++++
 server/Battleside.js               |  4 +-
 5 files changed, 95 insertions(+), 105 deletions(-)

diff --git a/client/js/client.js b/client/js/client.js
index ceab1fa..83126c2 100644
--- a/client/js/client.js
+++ b/client/js/client.js
@@ -1,23 +1,38 @@
 var socket = require("socket.io-client");
 var Backbone = require("backbone");
 require("./backbone.modal-min");
-var Handlebars = require("handlebars");
+var Handlebars = require('handlebars/runtime').default;
 var $ = require("jquery");
 
 window.$ = $;
 
+Handlebars.registerPartial("card", require("../templates/cards.handlebars"));
+Handlebars.registerHelper("health", function(lives){
+  var out = "";
+
+  for(var i = 0; i < 2; i++) {
+    out += "<i";
+    if(i < lives){
+      out += " class='ruby'";
+    }
+    out += "></i>";
+  }
+  return out;
+});
+
 var App = Backbone.Router.extend({
   routes: {
-    "lobby": "lobbyRoute",
+    /*"lobby": "lobbyRoute",
     "battle": "battleRoute",
-    "*path": "defaultRoute"
+    "*path": "defaultRoute"*/
   },
   initialize: function(){
     var self = this;
     this.connect();
     this.user = new User({app: this});
 
-    Backbone.history.start();
+    /*Backbone.history.start();*/
+    this.lobbyRoute();
   },
   connect: function(){
     this.socket = socket(Config.Server.hostname + ":" + Config.Server.port);
@@ -77,6 +92,7 @@ var SideView = Backbone.View.extend({
   el: ".container",
   template: require("../templates/cards.handlebars"),
   templateCards: require("../templates/fieldCards.handlebars"),
+  templateInfo: require("../templates/info.handlebars"),
   initialize: function(options){
     var self = this;
     this.side = options.side;
@@ -100,14 +116,14 @@ var SideView = Backbone.View.extend({
   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));
-    if(l._key){
-      this.$info.find(".field-leader").html(this.template(l))
-    }
+    var html = this.templateInfo({
+      data: d,
+      leader: l,
+      passBtn: this.side === ".player"
+    })
+
+    this.$info = this.$el.find(".game-info" + this.side).html(html);
+
 
     if(this.app.user.get("waiting") && this.side === ".player"){
       this.$info.addClass("removeBackground");
@@ -115,9 +131,6 @@ var SideView = Backbone.View.extend({
     if(!this.app.user.get("waiting") && this.side === ".foe"){
       this.$info.addClass("removeBackground");
     }
-
-    this.$info.find(".passing").html(d.passing ? "Passed" : "");
-
   },
   renderCloseField: function(){
     if(!this.field.close) return;
@@ -136,7 +149,7 @@ var SideView = Backbone.View.extend({
       this.$fields.find(".field-horn-close").html(this.template(horn));
     }
 
-    calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    calculateCardMargin($field.find(".card"), 424, 70, cards.length);
   },
   renderRangeField: function(){
     if(!this.field.ranged) return;
@@ -154,7 +167,7 @@ var SideView = Backbone.View.extend({
       this.$fields.find(".field-horn-range").html(this.template(horn));
     }
 
-    calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    calculateCardMargin($field.find(".card"), 424, 70, cards.length);
   },
   renderSiegeField: function(){
     if(!this.field.siege) return;
@@ -172,7 +185,7 @@ var SideView = Backbone.View.extend({
       this.$fields.find(".field-horn-siege").html(this.template(horn));
     }
 
-    calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    calculateCardMargin($field.find(".card"), 424, 70, cards.length);
   },
   renderWeatherField: function(){
     if(!this.field.weather) return;
@@ -181,7 +194,8 @@ var SideView = Backbone.View.extend({
     $weatherField.html(this.templateCards(cards));
 
     return this;
-  },
+  }
+  /*,
   lives: function(lives){
     var out = "";
     for(var i = 0; i < 2; i++) {
@@ -192,7 +206,7 @@ var SideView = Backbone.View.extend({
       out += "></i>";
     }
     return out;
-  }
+  }*/
 });
 
 var calculateCardMargin = function($selector, totalWidth, cardWidth, n){
@@ -241,8 +255,8 @@ var BattleView = Backbone.View.extend({
 
     this.render();
 
-    yourSide = this.yourSide = new SideView({side: ".player", app: this.app, battleView: this});
-    otherSide = this.otherSide = new SideView({side: ".foe", app: this.app, battleView: this});
+    this.yourSide = new SideView({side: ".player", app: this.app, battleView: this});
+    this.otherSide = new SideView({side: ".foe", app: this.app, battleView: this});
 
   },
   events: {
@@ -376,7 +390,7 @@ var BattleView = Backbone.View.extend({
 
 
     if(this.handCards){
-      calculateCardMargin(this.$el.find(".field-hand .card"), 538, 70, this.handCards.length);
+      calculateCardMargin(this.$el.find(".field-hand .card"), 633, 70, this.handCards.length);
     }
 
     if(this.user.get("isReDrawing")){
@@ -576,7 +590,8 @@ var User = Backbone.Model.extend({
       self.set("roomSide", data.side);
       /*
             self.set("channel:battle", app.socket.subscribe(self.get("room")));*/
-      app.navigate("battle", {trigger: true});
+      //app.navigate("battle", {trigger: true});
+      app.battleRoute();
     })
 
     /*app.receive("response:createRoom", function(roomID){
diff --git a/client/templates/battle.handlebars b/client/templates/battle.handlebars
index 9708466..0cfd118 100644
--- a/client/templates/battle.handlebars
+++ b/client/templates/battle.handlebars
@@ -1,57 +1,13 @@
 <div class="col-xs-3 left-side">
   <div class="col-xs-12 game-info game-info-foe foe">
-    <div class="col-xs-12 info-name"></div>
-    <div class="col-xs-6 field-single field-leader"></div>
-    <div class="col-xs-6">
-      <div class="row">
-        <div class="col-xs-6">Points:</div>
-        <div class="col-xs-6 score">0</div>
-      </div>
-      <div class="row">
-        <div class="col-xs-6">Hand:</div>
-        <div class="col-xs-6 hand-card">0</div>
-      </div>
-      <div class="row">
-        <div class="col-xs-12 gwent-lives">
-          <i class="ruby"></i>
-          <i class="ruby"></i>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-xs-12 passing">Passed</div>
-      </div>
-    </div>
   </div>
   <div class="col-xs-12 field field-weather">
     field
   </div>
   <div class="col-xs-12 game-info game-info-player player">
-    <div class="col-xs-12 info-name">{{name}}</div>
-    <div class="col-xs-6 field-single field-leader"></div>
-    <div class="col-xs-6">
-      <div class="row">
-        <div class="col-xs-6">Points:</div>
-        <div class="col-xs-6 score">{{score}}</div>
-      </div>
-      <div class="row">
-        <div class="col-xs-6">Hand:</div>
-        <div class="col-xs-6 hand-card">{{hand}}</div>
-      </div>
-      <div class="row">
-        <div class="col-xs-12 gwent-lives">
-
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-xs-12 passing">Passed</div>
-      </div>
-    </div>
-    <div class="col-xs-12">
-      <button class="button-pass">Pass</button>
-    </div>
   </div>
 </div>
-<div class="col-xs-6">
+<div class="col-xs-7">
   <div class="row">
     <div class="col-xs-12 battleside battleside-foe foe">
       <div class="col-xs-2 field-horn field-horn-siege">
@@ -97,32 +53,23 @@
   </div>
   <div class="row">
     <div class="col-xs-12 field field-hand">
-      {{#each cards}}
-      <div class="card" data-key="{{_key}}" data-id="{{_id}}">
-        <img src='../assets/cards/{{_data.img}}.png'>
-      </div>
+      {{#each cards as |val key|}}
+      {{>card val}}
       {{/each}}
     </div>
   </div>
 </div>
-<div class="col-xs-3">
+<div class="col-xs-2">
   <div class="col-xs-12 card-preview">
-    <!--<img src="{{preview}}">-->
   </div>
   <div class="col-xs-12 right-side right-side-foe foe">
-    <div class="col-xs-5 field-discard field-single">
+    <div class="col-xs-8 field-discard field-single">
       discard deck
     </div>
-    <div class="col-xs-5 field-single field-deck pull-right">
-      main deck
-    </div>
   </div>
   <div class="col-xs-12 right-side right-side-player player">
-    <div class="col-xs-5 field-discard field-single">
+    <div class="col-xs-8 field-discard field-single">
       discard deck
     </div>
-    <div class="col-xs-5 field-single field-deck pull-right">
-      main deck
-    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/client/templates/info.handlebars b/client/templates/info.handlebars
index b5f06fd..b08724a 100644
--- a/client/templates/info.handlebars
+++ b/client/templates/info.handlebars
@@ -1,23 +1,30 @@
-<div class="col-xs-12 game-info game-info-foe foe">
-  <div class="col-xs-12 info-name">{{name}}</div>
-  <div class="col-xs-6 field-single field-leader"></div>
-  <div class="col-xs-6">
-    <div class="row">
-      <div class="col-xs-6">Points:</div>
-      <div class="col-xs-6 score">{{score}}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-6">Hand:</div>
-      <div class="col-xs-6 hand-card">{{hand}}</div>
-    </div>
-    <div class="row">
-      <div class="col-xs-12 gwent-lives">
-        {{#health}}
-        {{/health}}
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-xs-12 passing">Passed</div>
+<div class="col-xs-12 info-name">{{data.name}}</div>
+<div class="col-xs-6 field-single field-leader">{{>card leader}}</div>
+<div class="col-xs-6">
+  <div class="row">
+    <div class="col-xs-6">Points:</div>
+    <div class="col-xs-6 score">{{data.score}}</div>
+  </div>
+  <div class="row">
+    <div class="col-xs-6">Hand:</div>
+    <div class="col-xs-6 hand-card">{{data.hand}}</div>
+  </div>
+  <div class="row">
+    <div class="col-xs-6">Deck:</div>
+    <div class="col-xs-6 hand-card">{{data.deck}}</div>
+  </div>
+  <div class="row">
+    <div class="col-xs-12 gwent-lives">
+      {{#health data.lives}}
+      {{/health}}
     </div>
   </div>
-</div>
\ No newline at end of file
+  <div class="row">
+    <div class="col-xs-12 passing">{{#if data.passing}}Passed{{/if}}</div>
+  </div>
+</div>
+{{#if passBtn}}
+<div class="col-xs-12">
+  <button class="button-pass">Pass</button>
+</div>
+{{/if}}
\ No newline at end of file
diff --git a/server/Battle.js b/server/Battle.js
index 570d193..bad196f 100644
--- a/server/Battle.js
+++ b/server/Battle.js
@@ -53,6 +53,25 @@ var Battle = (function(){
     this.p2.foe = this.p1;
     this.p1.setUpWeatherFieldWith(this.p2);
 
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+    this.p1.hand.add(Card("poor_fucking_infantry"));
+    this.p2.hand.add(Card("poor_fucking_infantry"));
+
 
     this.start();
   }
diff --git a/server/Battleside.js b/server/Battleside.js
index 6426288..98c78fe 100644
--- a/server/Battleside.js
+++ b/server/Battleside.js
@@ -78,7 +78,7 @@ Battleside = (function(){
     })
     this.receive("set:passing", function(){
       self.setPassing(true);
-      //self.update();
+      self.update();
       self.runEvent("NextTurn", null, [self.foe]);
     })
     this.receive("medic:chooseCardFromDiscard", function(data){
@@ -226,6 +226,7 @@ Battleside = (function(){
       lives: this._rubies,
       score: this.calcScore(),
       hand: this.hand.length(),
+      deck: this.deck.length(),
       discard: this.getDiscard(true),
       passing: this._passing
     }
@@ -452,6 +453,7 @@ Battleside = (function(){
           self.hand.add(replaceCard);
           self.hand.remove(card);
 
+          self.update();
           self.runEvent("NextTurn", null, [self.foe]);
         })
       }