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 @@
{{#each cards}} -
+
{{/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('
'), + templateCards: Handlebars.compile('{{#each this}}' + + '
' + + '' + + '
' + + '{{/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