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
parent
e8c9b8bc85
commit
b460cf6cd7
@ -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){
|
||||
|
||||
@ -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>
|
||||
@ -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 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}}
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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]);
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user