1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19:36:53 +00:00

performance tweaks

This commit is contained in:
exane 2015-06-25 17:51:21 +02:00
parent e8c9b8bc85
commit b460cf6cd7
5 changed files with 95 additions and 105 deletions

View File

@ -1,23 +1,38 @@
var socket = require("socket.io-client"); var socket = require("socket.io-client");
var Backbone = require("backbone"); var Backbone = require("backbone");
require("./backbone.modal-min"); require("./backbone.modal-min");
var Handlebars = require("handlebars"); var Handlebars = require('handlebars/runtime').default;
var $ = require("jquery"); var $ = require("jquery");
window.$ = $; 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({ var App = Backbone.Router.extend({
routes: { routes: {
"lobby": "lobbyRoute", /*"lobby": "lobbyRoute",
"battle": "battleRoute", "battle": "battleRoute",
"*path": "defaultRoute" "*path": "defaultRoute"*/
}, },
initialize: function(){ initialize: function(){
var self = this; var self = this;
this.connect(); this.connect();
this.user = new User({app: this}); this.user = new User({app: this});
Backbone.history.start(); /*Backbone.history.start();*/
this.lobbyRoute();
}, },
connect: function(){ connect: function(){
this.socket = socket(Config.Server.hostname + ":" + Config.Server.port); this.socket = socket(Config.Server.hostname + ":" + Config.Server.port);
@ -77,6 +92,7 @@ var SideView = Backbone.View.extend({
el: ".container", el: ".container",
template: require("../templates/cards.handlebars"), template: require("../templates/cards.handlebars"),
templateCards: require("../templates/fieldCards.handlebars"), templateCards: require("../templates/fieldCards.handlebars"),
templateInfo: require("../templates/info.handlebars"),
initialize: function(options){ initialize: function(options){
var self = this; var self = this;
this.side = options.side; this.side = options.side;
@ -100,14 +116,14 @@ var SideView = Backbone.View.extend({
renderInfo: function(){ renderInfo: function(){
var d = this.infoData; var d = this.infoData;
var l = this.leader; var l = this.leader;
this.$info = this.$el.find(".game-info" + this.side); var html = this.templateInfo({
this.$info.find(".info-name").html(d.name); data: d,
this.$info.find(".score").html(d.score); leader: l,
this.$info.find(".hand-card").html(d.hand); passBtn: this.side === ".player"
this.$info.find(".gwent-lives").html(this.lives(d.lives)); })
if(l._key){
this.$info.find(".field-leader").html(this.template(l)) this.$info = this.$el.find(".game-info" + this.side).html(html);
}
if(this.app.user.get("waiting") && this.side === ".player"){ if(this.app.user.get("waiting") && this.side === ".player"){
this.$info.addClass("removeBackground"); this.$info.addClass("removeBackground");
@ -115,9 +131,6 @@ var SideView = Backbone.View.extend({
if(!this.app.user.get("waiting") && this.side === ".foe"){ if(!this.app.user.get("waiting") && this.side === ".foe"){
this.$info.addClass("removeBackground"); this.$info.addClass("removeBackground");
} }
this.$info.find(".passing").html(d.passing ? "Passed" : "");
}, },
renderCloseField: function(){ renderCloseField: function(){
if(!this.field.close) return; if(!this.field.close) return;
@ -136,7 +149,7 @@ var SideView = Backbone.View.extend({
this.$fields.find(".field-horn-close").html(this.template(horn)); 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(){ renderRangeField: function(){
if(!this.field.ranged) return; if(!this.field.ranged) return;
@ -154,7 +167,7 @@ var SideView = Backbone.View.extend({
this.$fields.find(".field-horn-range").html(this.template(horn)); 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(){ renderSiegeField: function(){
if(!this.field.siege) return; if(!this.field.siege) return;
@ -172,7 +185,7 @@ var SideView = Backbone.View.extend({
this.$fields.find(".field-horn-siege").html(this.template(horn)); 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(){ renderWeatherField: function(){
if(!this.field.weather) return; if(!this.field.weather) return;
@ -181,7 +194,8 @@ var SideView = Backbone.View.extend({
$weatherField.html(this.templateCards(cards)); $weatherField.html(this.templateCards(cards));
return this; return this;
}, }
/*,
lives: function(lives){ lives: function(lives){
var out = ""; var out = "";
for(var i = 0; i < 2; i++) { for(var i = 0; i < 2; i++) {
@ -192,7 +206,7 @@ var SideView = Backbone.View.extend({
out += "></i>"; out += "></i>";
} }
return out; return out;
} }*/
}); });
var calculateCardMargin = function($selector, totalWidth, cardWidth, n){ var calculateCardMargin = function($selector, totalWidth, cardWidth, n){
@ -241,8 +255,8 @@ var BattleView = Backbone.View.extend({
this.render(); this.render();
yourSide = this.yourSide = new SideView({side: ".player", app: this.app, battleView: this}); this.yourSide = new SideView({side: ".player", app: this.app, battleView: this});
otherSide = this.otherSide = new SideView({side: ".foe", app: this.app, battleView: this}); this.otherSide = new SideView({side: ".foe", app: this.app, battleView: this});
}, },
events: { events: {
@ -376,7 +390,7 @@ var BattleView = Backbone.View.extend({
if(this.handCards){ 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")){ if(this.user.get("isReDrawing")){
@ -576,7 +590,8 @@ var User = Backbone.Model.extend({
self.set("roomSide", data.side); self.set("roomSide", data.side);
/* /*
self.set("channel:battle", app.socket.subscribe(self.get("room")));*/ 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){ /*app.receive("response:createRoom", function(roomID){

View File

@ -1,57 +1,13 @@
<div class="col-xs-3 left-side"> <div class="col-xs-3 left-side">
<div class="col-xs-12 game-info game-info-foe foe"> <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>
<div class="col-xs-12 field field-weather"> <div class="col-xs-12 field field-weather">
field field
</div> </div>
<div class="col-xs-12 game-info game-info-player player"> <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> </div>
<div class="row"> <div class="col-xs-7">
<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="row"> <div class="row">
<div class="col-xs-12 battleside battleside-foe foe"> <div class="col-xs-12 battleside battleside-foe foe">
<div class="col-xs-2 field-horn field-horn-siege"> <div class="col-xs-2 field-horn field-horn-siege">
@ -97,32 +53,23 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 field field-hand"> <div class="col-xs-12 field field-hand">
{{#each cards}} {{#each cards as |val key|}}
<div class="card" data-key="{{_key}}" data-id="{{_id}}"> {{>card val}}
<img src='../assets/cards/{{_data.img}}.png'>
</div>
{{/each}} {{/each}}
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-3"> <div class="col-xs-2">
<div class="col-xs-12 card-preview"> <div class="col-xs-12 card-preview">
<!--<img src="{{preview}}">-->
</div> </div>
<div class="col-xs-12 right-side right-side-foe foe"> <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 discard deck
</div> </div>
<div class="col-xs-5 field-single field-deck pull-right">
main deck
</div>
</div> </div>
<div class="col-xs-12 right-side right-side-player player"> <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 discard deck
</div> </div>
<div class="col-xs-5 field-single field-deck pull-right">
main deck
</div>
</div> </div>
</div> </div>

View File

@ -1,23 +1,30 @@
<div class="col-xs-12 game-info game-info-foe foe"> <div class="col-xs-12 info-name">{{data.name}}</div>
<div class="col-xs-12 info-name">{{name}}</div> <div class="col-xs-6 field-single field-leader">{{>card leader}}</div>
<div class="col-xs-6 field-single field-leader"></div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="row"> <div class="row">
<div class="col-xs-6">Points:</div> <div class="col-xs-6">Points:</div>
<div class="col-xs-6 score">{{score}}</div> <div class="col-xs-6 score">{{data.score}}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-6">Hand:</div> <div class="col-xs-6">Hand:</div>
<div class="col-xs-6 hand-card">{{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>
<div class="row"> <div class="row">
<div class="col-xs-12 gwent-lives"> <div class="col-xs-12 gwent-lives">
{{#health}} {{#health data.lives}}
{{/health}} {{/health}}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 passing">Passed</div> <div class="col-xs-12 passing">{{#if data.passing}}Passed{{/if}}</div>
</div> </div>
</div> </div>
{{#if passBtn}}
<div class="col-xs-12">
<button class="button-pass">Pass</button>
</div> </div>
{{/if}}

View File

@ -53,6 +53,25 @@ var Battle = (function(){
this.p2.foe = this.p1; this.p2.foe = this.p1;
this.p1.setUpWeatherFieldWith(this.p2); 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(); this.start();
} }

View File

@ -78,7 +78,7 @@ Battleside = (function(){
}) })
this.receive("set:passing", function(){ this.receive("set:passing", function(){
self.setPassing(true); self.setPassing(true);
//self.update(); self.update();
self.runEvent("NextTurn", null, [self.foe]); self.runEvent("NextTurn", null, [self.foe]);
}) })
this.receive("medic:chooseCardFromDiscard", function(data){ this.receive("medic:chooseCardFromDiscard", function(data){
@ -226,6 +226,7 @@ Battleside = (function(){
lives: this._rubies, lives: this._rubies,
score: this.calcScore(), score: this.calcScore(),
hand: this.hand.length(), hand: this.hand.length(),
deck: this.deck.length(),
discard: this.getDiscard(true), discard: this.getDiscard(true),
passing: this._passing passing: this._passing
} }
@ -452,6 +453,7 @@ Battleside = (function(){
self.hand.add(replaceCard); self.hand.add(replaceCard);
self.hand.remove(card); self.hand.remove(card);
self.update();
self.runEvent("NextTurn", null, [self.foe]); self.runEvent("NextTurn", null, [self.foe]);
}) })
} }