diff --git a/assets/data/abilities.js b/assets/data/abilities.js
index 58b9ee8..a0cec65 100644
--- a/assets/data/abilities.js
+++ b/assets/data/abilities.js
@@ -23,7 +23,7 @@ module.exports = {
var cards = this.getDeck().find("name", name);
cards.forEach(function(_card) {
- self.getDeck().removeFromDeck(_card.getId());
+ self.getDeck().removeFromDeck(_card.getID());
this._placeCard(_card);
})
}
diff --git a/package.json b/package.json
index 3afc68a..1b00cf3 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"handlebars": "^3.0.3",
"jquery": "^2.1.4",
"promise": "^7.0.1",
+ "pubsub-js": "^1.5.2",
"shortid": "^2.2.2",
"vinyl-source-stream": "^1.1.0"
},
diff --git a/public/index.html b/public/index.html
index 3acf487..329c79d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -123,7 +123,7 @@
<div class="row">
<div class="col-xs-12 field field-hand">
{{#each cards}}
- <div class="card" data-key="{{_key}}">
+ <div class="card" data-key="{{_key}}" data-id="{{_id}}">
<img src='../assets/cards/{{_data.img}}.png'>
</div>
{{/each}}
diff --git a/public/js/client.js b/public/js/client.js
index 452f71d..19852de 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -93,65 +93,87 @@ 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",
+ template: Handlebars.compile('<div class="card" data-key="{{_key}}"><img src="../assets/cards/{{_data.img}}.png"></div>'),
+ templateCards: Handlebars.compile('{{#each this}}' +
+ '<div class="card" data-key="{{_key}}">' +
+ '<img src="../assets/cards/{{_data.img}}.png">' +
+ '</div>' +
+ '{{/each}}'),
initialize: function(options){
var self = this;
this.side = options.side;
this.app = options.app;
this.battleView = options.battleView;
this.infoData = this.infoData || {};
+ this.leader = this.leader || {};
+ this.field = this.field || {};
- 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(){
+
+ this.renderInfo();
+ this.renderCloseField();
+ this.renderRangeField();
+ this.renderSiegeField();
+
+ return this;
+ },
+ 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));
- return this;
+ this.$info.find(".field-leader").html(this.template(l))
+
+ if(this.app.user.get("waiting") && this.side === ".player"){
+ this.$info.addClass("removeBackground");
+ }
+ if(!this.app.user.get("waiting") && this.side === ".foe"){
+ this.$info.addClass("removeBackground");
+ }
+
+ },
+ renderCloseField: function(){
+ if(!this.field.close) return;
+ this.$fields = this.$el.find(".battleside" + this.side);
+ var $field = this.$fields.find(".field-close").parent();
+ var cards = this.field.close._cards;
+ var score = this.field.close._score;
+
+ var html = this.templateCards(cards);
+
+ $field.find(".field-close").html(html)
+ $field.find(".large-field-counter").html(score)
+ },
+ renderRangeField: function(){
+ if(!this.field.ranged) return;
+ this.$fields = this.$el.find(".battleside" + this.side);
+ var $field = this.$fields.find(".field-range").parent();
+ var cards = this.field.ranged._cards;
+ var score = this.field.ranged._score;
+
+ var html = this.templateCards(cards);
+
+ $field.find(".field-range").html(html)
+ $field.find(".large-field-counter").html(score)
+ },
+ renderSiegeField: function(){
+ if(!this.field.siege) return;
+ this.$fields = this.$el.find(".battleside" + this.side);
+ var $field = this.$fields.find(".field-siege").parent();
+ var cards = this.field.siege._cards;
+ var score = this.field.siege._score;
+
+ var html = this.templateCards(cards);
+
+ $field.find(".field-siege").html(html)
+ $field.find(".large-field-counter").html(score)
},
lives: function(lives){
var out = "";
@@ -178,6 +200,7 @@ var BattleView = Backbone.View.extend({
$(this.el).prependTo('body');
this.listenTo(user, "change:showPreview", this.render);
+ this.listenTo(user, "change:waiting", this.render);
this.$hand = this.$el.find(".field-hand");
this.$preview = this.$el.find(".card-preview");
@@ -193,6 +216,7 @@ var BattleView = Backbone.View.extend({
app.receive("update:info", function(data){
var _side = data._roomSide;
var infoData = data.info;
+ var leader = data.leader;
var side = yourSide;
@@ -201,8 +225,25 @@ var BattleView = Backbone.View.extend({
}
console.log(side);
side.infoData = infoData;
+ side.leader = leader;
+ side.render();
+ });
+
+ app.receive("update:fields", function(data){
+ var close, ranged, siege;
+ var _side = data._roomSide;
+
+ var side = yourSide;
+ if(user.get("roomSide") != _side){
+ side = otherSide;
+ }
+
+
+ side.field.close = data.close;
+ side.field.ranged = data.ranged;
+ side.field.siege = data.siege;
+
side.render();
- //app.trigger("update:info", {side: side, infoData: infoData});
})
var interval = setInterval(function(){
@@ -221,7 +262,17 @@ var BattleView = Backbone.View.extend({
},
events: {
"mouseover .card": "onMouseover",
- "mouseleave .card": "onMouseleave"
+ "mouseleave .card": "onMouseleave",
+ "click .field-hand": "onClick"
+ },
+ onClick: function(e){
+ if(!!this.user.get("waiting")) return;
+ var $card = $(e.target).closest(".card");
+ var id = $card.data("id");
+ console.log("clicked id ", id);
+ this.app.send("play:cardFromHand", {
+ id: id
+ });
},
onMouseover: function(e){
var target = $(e.target).closest(".card");
@@ -277,6 +328,12 @@ var User = Backbone.Model.extend({
console.log("room id", self.get("room"));
})
+ app.receive("set:waiting", function(data){
+ var waiting = data.waiting;
+ console.log("is waiting: ", waiting);
+ self.set("waiting", waiting);
+ })
+
app.on("createRoom", this.createRoom, this);
app.on("joinRoom", this.joinRoom, this);
diff --git a/public/scss/main.scss b/public/scss/main.scss
index 23c9084..b8df163 100644
--- a/public/scss/main.scss
+++ b/public/scss/main.scss
@@ -53,6 +53,11 @@ $game-height: 800px;
height: $game-height/2 - 100px;
width: 100%;
border: 1px solid black;
+ background: rgba(252, 219, 125, 0.51);
+}
+
+.removeBackground {
+ background: 0;
}
.mid-line {
diff --git a/server/Battle.js b/server/Battle.js
index a571eeb..d015bfa 100644
--- a/server/Battle.js
+++ b/server/Battle.js
@@ -1,4 +1,5 @@
var Battleside = require("./Battleside");
+var PubSub = require("pubsub-js");
var io = global.io;
@@ -31,25 +32,50 @@ var Battle = (function(){
r.init = function(){
- this.p1 = Battleside(this._user1.getName(), 0, this);
- this.p2 = Battleside(this._user2.getName(), 1, this);
+ this.p1 = Battleside(this._user1.getName(), 0, this, this._user1);
+ this.p2 = Battleside(this._user2.getName(), 1, this, this._user2);
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() {
+ r.start = function(){
+ this.p1.setLeadercard();
+ this.p2.setLeadercard();
this.p1.draw(10);
this.p2.draw(10);
- //this.p2.wait();
+ PubSub.subscribe("nextTurn", this.switchTurn.bind(this));
+
+ this.switchTurn();
}
- r.send = function(event, data) {
+ r.switchTurn = function(){
+ /*this.playerManager.renderInfos();
+ if(this.playerManager.bothPassed() && !this._roundCheck) {
+ //start new round
+ this._roundCheck = true;
+ this.checkRound();
+ return;
+ }
+ if(this.playerManager.bothPassed()) {
+ return;
+ }
+ var entity = this.playerManager.getNextPlayer();
+
+ this.playerManager.renderInfos();*/
+ var side = this.turn++ % 2 ? this.p1 : this.p2;
+
+
+ PubSub.publish("onEachTurn");
+ PubSub.publish("turn/" + side.getID());
+ console.log("current Turn: ", side.getName());
+
+ }
+
+
+ r.send = function(event, data){
io.to(this._id).emit(event, data);
}
diff --git a/server/Battleside.js b/server/Battleside.js
index f6721dd..0fe7c5c 100644
--- a/server/Battleside.js
+++ b/server/Battleside.js
@@ -1,24 +1,36 @@
-
var io = global.io;
var DeckData = require("../assets/data/deck");
var Deck = require("./Deck");
var Hand = require("./Hand");
+var Card = require("./Card");
+var Field = require("./Field");
+var PubSub = require("pubsub-js");
var Battleside = (function(){
- var Battleside = function(name, n, battle){
+ var Battleside = function(name, n, battle, user){
if(!(this instanceof Battleside)){
- return (new Battleside(name, n, battle));
+ return (new Battleside(name, n, battle, user));
}
/**
* constructor here
*/
+ this._isWaiting = true;
+ this.socket = user.socket;
+ this.field = {};
+ this.field[Card.TYPE.LEADER] = Field(Card.TYPE.LEADER);
+ this.field[Card.TYPE.CLOSE_COMBAT] = Field(Card.TYPE.CLOSE_COMBAT);
+ this.field[Card.TYPE.RANGED] = Field(Card.TYPE.RANGED);
+ this.field[Card.TYPE.SIEGE] = Field(Card.TYPE.SIEGE);
this.n = n ? "p2" : "p1";
this._name = name;
this.battle = battle;
this.hand = Hand();
this.deck = Deck(DeckData["test"]);
+
+
+ PubSub.subscribe("turn/" + this.getID(), this.onTurnStart.bind(this));
};
var r = Battleside.prototype;
/**
@@ -28,21 +40,48 @@ var Battleside = (function(){
*/
r._name = null;
r._discard = null;
- r._leader = null;
- r._close = null;
+ /*r.leaderField = null;
+ r.closeField = null;
r._range = null;
r._siege = null;
- r._field = null;
+ r._field = null;*/
r._lives = 2;
r._score = 0;
+ r._isWaiting = null;
+
+ r.field = null;
+
+ r.socket = null;
+ r.n = null;
r.foe = null;
r.hand = null;
r.battle = null;
r.deck = null;
+ r.wait = function(){
+ this._isWaiting = true;
+ this.send("set:waiting", {waiting: this._isWaiting}, true);
+ }
- r.draw = function(times) {
+ r.turn = function() {
+ this._isWaiting = false;
+ this.send("set:waiting", {waiting: this._isWaiting}, true);
+ }
+
+ r.setLeadercard = function(){
+ var leaderCard = this.deck.find("type", Card.TYPE.LEADER);
+ this.deck.removeFromDeck(leaderCard[0]);
+ /*
+ this.getYourside().setField("leader", leaderCard[0]);*/
+ this.field[Card.TYPE.LEADER].add(leaderCard[0]);
+ }
+
+ r.getID = function() {
+ return this.n;
+ }
+
+ r.draw = function(times){
while(times--) {
var card = this.deck.draw();
this.hand.add(card);
@@ -50,28 +89,85 @@ var Battleside = (function(){
console.log("update:hand fired");
- this.send("update:hand", {cards: JSON.stringify(this.hand.getCards())});
+ this.update();
}
- r.getInfo = function() {
+ r.calcScore = function() {
+ var score = 0;
+ for(var key in this.field) {
+ score += +this.field[key].getScore();
+ }
+ return this._score = score;
+ }
+
+ r.getInfo = function(){
+ console.log(this.getName(), this._isWaiting);
return {
name: this.getName(),
lives: this._lives,
- score: this._score,
+ score: this.calcScore(),
hand: this.hand.length()
}
}
- r.getName = function() {
+ r.getName = function(){
return this._name;
}
- r.send = function(event, msg) {
+ r.send = function(event, msg, isPrivate){
msg = msg || {};
+ isPrivate = typeof isPrivate === "undefined" ? false : isPrivate;
msg._roomSide = this.n;
+
+ if(isPrivate) {
+ return this.socket.emit(event, msg);
+ }
this.battle.send(event, msg);
}
+ r.receive = function(event, cb) {
+ this.socket.on(event, cb);
+ }
+
+ r.update = function(){
+ this.send("update:info", {
+ info: this.getInfo(),
+ leader: this.field[Card.TYPE.LEADER].get()[0]
+ })
+ this.send("update:hand", {
+ cards: JSON.stringify(this.hand.getCards())
+ });
+ this.send("update:fields", {
+ close: this.field[Card.TYPE.CLOSE_COMBAT],
+ ranged: this.field[Card.TYPE.RANGED],
+ siege: this.field[Card.TYPE.SIEGE]
+ })
+ }
+
+ r.onTurnStart = function() {
+ this.foe.wait();
+ this.turn();
+ var self = this;
+
+ this.receive("play:cardFromHand", function(data) {
+ var cardID = data.id;
+ var card = self.hand.getCard(cardID);
+ self.hand.remove(cardID);
+
+ self.playCard(card);
+ })
+ };
+
+ r.playCard = function(card) {
+ if(card === -1) return;
+ var field = this.field[card.getType()];
+
+ field.add(card);
+
+ this.update();
+
+ PubSub.publish("nextTurn");
+ }
return Battleside;
diff --git a/server/Card.js b/server/Card.js
index 4c5ebf8..e514697 100644
--- a/server/Card.js
+++ b/server/Card.js
@@ -73,7 +73,7 @@ var Card = (function(){
return this._key;
}
- r.getId = function(){
+ r.getID = function(){
return this._id;
}
diff --git a/server/Deck.js b/server/Deck.js
index f3f8aeb..e657a1e 100644
--- a/server/Deck.js
+++ b/server/Deck.js
@@ -36,7 +36,7 @@ var Deck = (function(){
return this._deck.length;
}
- r.length = function() {
+ r.length = function(){
return this.getLength();
}
@@ -50,45 +50,50 @@ var Deck = (function(){
return card;
}
-/*
- r._loadCards = function(){
- var n = this._originalDeck.length;
- for(var i = 0; i < n; i++) {
- this._deck.push(CardManager().add(this._originalDeck[i], this._owner));
- }
- }*/
+ /*
+ r._loadCards = function(){
+ var n = this._originalDeck.length;
+ for(var i = 0; i < n; i++) {
+ this._deck.push(CardManager().add(this._originalDeck[i], this._owner));
+ }
+ }*/
- r._loadCards = function() {
- this._deck = this.getDeck().map(function(cardkey) {
+ r._loadCards = function(){
+ this._deck = this.getDeck().map(function(cardkey){
return Card(cardkey);
});
}
r.pop = function(){
- var id = this._deck.pop();/*
- var card = CardManager().getCardById(id);*/
+ var id = this._deck.pop();
+ /*
+ var card = CardManager().getCardById(id);*/
return id;
}
- /*r.find = function(key, val){
+ r.find = function(key, val){
var res = [];
- this.getDeck().forEach(function(id){
- var card = CardManager().getCardById(id);
+ this.getDeck().forEach(function(card){
if(card.getProperty(key) == val){
res.push(card);
}
+
});
return res;
- }*/
+ }
- r.removeFromDeck = function(id){
+ r.removeFromDeck = function(card){
var n = this.length();
for(var i = 0; i < n; i++) {
- var cardID = this.getDeck()[i];
+ /*var cardID = this.getDeck()[i];
if(id == cardID){
this.getDeck().splice(i, 1);
return id;
+ }*/
+ var c = this.getDeck()[i];
+ if(c.getID() === card.getID()){
+ return this.getDeck().splice(i, 1);
}
}
return -1;
diff --git a/server/Field.js b/server/Field.js
new file mode 100644
index 0000000..cfb6242
--- /dev/null
+++ b/server/Field.js
@@ -0,0 +1,47 @@
+var Field = (function(){
+ var Field = function(){
+ if(!(this instanceof Field)){
+ return (new Field());
+ }
+ /**
+ * constructor here
+ */
+
+ this._cards = [];
+ };
+ var r = Field.prototype;
+ /**
+ * methods && properties here
+ * r.property = null;
+ * r.getProperty = function() {...}
+ */
+
+ r._cards = null;
+ r._score = 0;
+
+ r.add = function(card) {
+ this._cards.push(card);
+ this.updateScore();
+ }
+
+ r.get = function() {
+ return this._cards;
+ }
+
+ r.getScore = function() {
+ return this._score;
+ }
+
+ r.updateScore = function() {
+ this._score = 0;
+ for(var i=0; i<this._cards.length; i++) {
+ var card = this._cards[i];
+ this._score += card.getPower();
+ }
+ }
+
+
+ return Field;
+})();
+
+module.exports = Field;
\ No newline at end of file
diff --git a/server/Hand.js b/server/Hand.js
index a444874..218db34 100644
--- a/server/Hand.js
+++ b/server/Hand.js
@@ -30,11 +30,19 @@ var Hand = (function(){
return this._hand;
}
+ r.getCard = function(id) {
+ for(var i=0; i< this.length(); i++) {
+ var card = this.getCards()[i];
+ if(card.getID() === id) return card;
+ }
+ return -1;
+ }
+
r.remove = function(id){
var n = this.length();
for(var i = 0; i < n; i++) {
- if(this._hand[i].getId() != id) continue;
+ if(this._hand[i].getID() != id) continue;
return this._hand.splice(i, 1);
}
return -1;