mirror of
https://github.com/exane/not-gwent-online
synced 2024-11-23 19:36:53 +00:00
stuff
This commit is contained in:
parent
363770686d
commit
abc92be140
@ -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">
|
||||||
|
@ -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",
|
||||||
@ -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: {
|
||||||
|
@ -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) {
|
||||||
|
@ -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;
|
||||||
|
@ -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"});
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user