1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19:36:53 +00:00
This commit is contained in:
exane 2015-06-14 00:33:20 +02:00
parent 363770686d
commit abc92be140
5 changed files with 188 additions and 11 deletions

View File

@ -8,6 +8,31 @@
<link rel="stylesheet" href="../build/main.css"> <link rel="stylesheet" href="../build/main.css">
</head> </head>
<body> <body>
<script id="info-template" type="text/x-handlebars-template">
<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>
</div>
</div>
</script>
<script id="battle-template" type="text/x-handlebars-template"> <script id="battle-template" type="text/x-handlebars-template">
<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">
@ -37,6 +62,30 @@
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">
<!--<i class="ruby"></i>-->
{{#health lives}}{{/health}}
</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> </div>
<div class="col-xs-6"> <div class="col-xs-6">

View File

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

View File

@ -3,14 +3,16 @@ var Battleside = require("./Battleside");
var io = global.io; var io = global.io;
var Battle = (function(){ var Battle = (function(){
var Battle = function(id){ var Battle = function(id, p1, p2){
if(!(this instanceof Battle)){ if(!(this instanceof Battle)){
return (new Battle(id)); return (new Battle(id, p1, p2));
} }
/** /**
* constructor here * constructor here
*/ */
this._id = id; this._id = id;
this._user1 = p1;
this._user2 = p2;
}; };
var r = Battle.prototype; var r = Battle.prototype;
/** /**
@ -21,23 +23,30 @@ var Battle = (function(){
r.p1 = null; r.p1 = null;
r.p2 = null; r.p2 = null;
r._user1 = null;
r._user2 = null;
r.turn = 0; r.turn = 0;
r._id = null; r._id = null;
r.init = function(){ r.init = function(){
this.p1 = Battleside("Player 1", 0, this); this.p1 = Battleside(this._user1.getName(), 0, this);
this.p2 = Battleside("Player 2", 1, this); this.p2 = Battleside(this._user2.getName(), 1, this);
this.p1.foe = this.p2; this.p1.foe = this.p2;
this.p2.foe = this.p1; this.p2.foe = this.p1;
this.p1.send("update:info", {info: this.p1.getInfo()});
this.p2.send("update:info", {info: this.p2.getInfo()});
this.start(); this.start();
} }
r.start = function() { r.start = function() {
this.p1.draw(10); this.p1.draw(10);
this.p2.draw(10); this.p2.draw(10);
//this.p2.wait();
} }
r.send = function(event, data) { r.send = function(event, data) {

View File

@ -33,6 +33,8 @@ var Battleside = (function(){
r._range = null; r._range = null;
r._siege = null; r._siege = null;
r._field = null; r._field = null;
r._lives = 2;
r._score = 0;
r.foe = null; r.foe = null;
r.hand = null; r.hand = null;
@ -51,6 +53,19 @@ var Battleside = (function(){
this.send("update:hand", {cards: JSON.stringify(this.hand.getCards())}); this.send("update:hand", {cards: JSON.stringify(this.hand.getCards())});
} }
r.getInfo = function() {
return {
name: this.getName(),
lives: this._lives,
score: this._score,
hand: this.hand.length()
}
}
r.getName = function() {
return this._name;
}
r.send = function(event, msg) { r.send = function(event, msg) {
msg = msg || {}; msg = msg || {};
msg._roomSide = this.n; msg._roomSide = this.n;

View File

@ -56,9 +56,7 @@ var Room = (function(){
r.initBattle = function(){ r.initBattle = function(){
var self = this; var self = this;
var side = 0; var side = 0;
this._battle = Battle(this._id);/* this._battle = Battle(this._id, this._room[0], this._room[1]);
this.setReady(this._room[0], false);
this.setReady(this._room[1], false);*/
this._room[0].send("init:battle", {side: "p1"}); this._room[0].send("init:battle", {side: "p1"});
this._room[1].send("init:battle", {side: "p2"}); this._room[1].send("init:battle", {side: "p2"});
} }