mirror of
https://github.com/exane/not-gwent-online
synced 2024-11-20 11:26:54 +00:00
stuff
This commit is contained in:
exane
parent
363770686d
commit
abc92be140
@ -8,6 +8,31 @@
|
||||
<link rel="stylesheet" href="../build/main.css">
|
||||
</head>
|
||||
<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">
|
||||
<div class="col-xs-3 left-side">
|
||||
<div class="col-xs-12 game-info game-info-foe foe">
|
||||
@ -37,6 +62,30 @@
|
||||
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">
|
||||
<!--<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 class="col-xs-6">
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -3,14 +3,16 @@ var Battleside = require("./Battleside");
|
||||
var io = global.io;
|
||||
|
||||
var Battle = (function(){
|
||||
var Battle = function(id){
|
||||
var Battle = function(id, p1, p2){
|
||||
if(!(this instanceof Battle)){
|
||||
return (new Battle(id));
|
||||
return (new Battle(id, p1, p2));
|
||||
}
|
||||
/**
|
||||
* constructor here
|
||||
*/
|
||||
this._id = id;
|
||||
this._user1 = p1;
|
||||
this._user2 = p2;
|
||||
};
|
||||
var r = Battle.prototype;
|
||||
/**
|
||||
@ -21,23 +23,30 @@ var Battle = (function(){
|
||||
|
||||
r.p1 = null;
|
||||
r.p2 = null;
|
||||
r._user1 = null;
|
||||
r._user2 = null;
|
||||
r.turn = 0;
|
||||
|
||||
r._id = null;
|
||||
|
||||
|
||||
r.init = function(){
|
||||
this.p1 = Battleside("Player 1", 0, this);
|
||||
this.p2 = Battleside("Player 2", 1, this);
|
||||
this.p1 = Battleside(this._user1.getName(), 0, this);
|
||||
this.p2 = Battleside(this._user2.getName(), 1, this);
|
||||
this.p1.foe = this.p2;
|
||||
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();
|
||||
}
|
||||
|
||||
r.start = function() {
|
||||
this.p1.draw(10);
|
||||
this.p2.draw(10);
|
||||
|
||||
//this.p2.wait();
|
||||
}
|
||||
|
||||
r.send = function(event, data) {
|
||||
|
||||
@ -33,6 +33,8 @@ var Battleside = (function(){
|
||||
r._range = null;
|
||||
r._siege = null;
|
||||
r._field = null;
|
||||
r._lives = 2;
|
||||
r._score = 0;
|
||||
|
||||
r.foe = null;
|
||||
r.hand = null;
|
||||
@ -51,6 +53,19 @@ var Battleside = (function(){
|
||||
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) {
|
||||
msg = msg || {};
|
||||
msg._roomSide = this.n;
|
||||
|
||||
@ -56,9 +56,7 @@ var Room = (function(){
|
||||
r.initBattle = function(){
|
||||
var self = this;
|
||||
var side = 0;
|
||||
this._battle = Battle(this._id);/*
|
||||
this.setReady(this._room[0], false);
|
||||
this.setReady(this._room[1], false);*/
|
||||
this._battle = Battle(this._id, this._room[0], this._room[1]);
|
||||
this._room[0].send("init:battle", {side: "p1"});
|
||||
this._room[1].send("init:battle", {side: "p2"});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user