stuff

public/js/client.js

@@ -4,6 +4,8 @@ var Handlebars = require("handlebars");
 var $ = require("jquery");
 //var Lobby = require("./client-lobby");
 
+window.$ = $;
+
 Handlebars.registerHelper("health", function(lives, options){
   var out = "";
 
@@ -91,6 +93,79 @@ 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",
+  initialize: function(options){
+    var self = this;
+    this.side = options.side;
+    this.app = options.app;
+    this.battleView = options.battleView;
+    this.infoData = this.infoData || {};
+
+    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(){
+    var d = this.infoData;
+    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;
+  },
+  lives: function(lives){
+    var out = "";
+    for(var i = 0; i < 2; i++) {
+      out += "<i";
+      if(i < lives){
+        out += " class='ruby'";
+      }
+      out += "></i>";
+    }
+    return out;
+  }
+});
+
 var BattleView = Backbone.View.extend({
   className: "container",
   template: Handlebars.compile($("#battle-template").html()),
@@ -98,6 +173,8 @@ var BattleView = Backbone.View.extend({
     var self = this;
     var user = this.user = options.user;
     var app = this.app = options.app;
+    var yourSide, otherSide;
+
     $(this.el).prependTo('body');
 
     this.listenTo(user, "change:showPreview", this.render);
@@ -105,7 +182,7 @@ var BattleView = Backbone.View.extend({
     this.$hand = this.$el.find(".field-hand");
     this.$preview = this.$el.find(".card-preview");
 
-    this.app.receive("update:hand", function(data){
+    app.receive("update:hand", function(data){
       console.log("update:hand", user.get("roomSide"), data._roomSide);
       if(user.get("roomSide") == data._roomSide){
         self.handCards = JSON.parse(data.cards);
@@ -113,12 +190,34 @@ var BattleView = Backbone.View.extend({
       }
     });
 
+    app.receive("update:info", function(data){
+      var _side = data._roomSide;
+      var infoData = data.info;
+
+
+      var side = yourSide;
+      if(user.get("roomSide") != _side){
+        side = otherSide;
+      }
+      console.log(side);
+      side.infoData = infoData;
+      side.render();
+      //app.trigger("update:info", {side: side, infoData: infoData});
+    })
+
     var interval = setInterval(function(){
       if(!user.get("room")) return;
       this.app.send("request:gameLoaded", {_roomID: user.get("room")});
       clearInterval(interval);
     }.bind(this), 100);
+
     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});
+
+    /*yourSide = this.yourSide = new SideView({side: ".player", app: app, battleView: this});
+    otherSide = this.otherSide = new SideView({side: ".foe", app: app, battleView: this});*/
   },
   events: {
     "mouseover .card": "onMouseover",
@@ -128,7 +227,7 @@ var BattleView = Backbone.View.extend({
     var target = $(e.target).closest(".card");
     this.user.set("showPreview", target.find("img").attr("src"));
   },
-  onMouseleave: function(e) {
+  onMouseleave: function(e){
     this.user.set("showPreview", null);
   },
   render: function(){
@@ -137,10 +236,17 @@ var BattleView = Backbone.View.extend({
       cards: self.handCards,
       preview: self.user.get("showPreview")
     }));
+    if(!(this.otherSide && this.yourSide)) return;
+    this.otherSide.render();
+    this.yourSide.render();
+    /* this.$el()
+    if(!(this.yourSide && this.otherSide))
+      return this;
+    this.yourSide.render();
+    this.otherSide.render();*/
     return this;
   }
-})
-;
+});
 
 var User = Backbone.Model.extend({
   defaults: {