diff --git a/client/index.html b/client/index.html index 1c5c2b8..4e9cb3f 100644 --- a/client/index.html +++ b/client/index.html @@ -10,6 +10,12 @@ +
+
+
+
+
+
diff --git a/client/js/client.js b/client/js/client.js index 51f69db..ccb15a7 100644 --- a/client/js/client.js +++ b/client/js/client.js @@ -255,17 +255,15 @@ let calculateCardMargin = function($selector, totalWidth, cardWidth, n){ } let BattleView = Backbone.View.extend({ - className: "container", - template: require("../templates/battle.handlebars"), /* - templatePreview: require("../templates/preview.handlebars"),*/ + el: ".gwent-battle", + template: require("../templates/battle.handlebars"), initialize: function(options){ let self = this; let user = this.user = options.user; let app = this.app = options.app; let yourSide, otherSide; - - $(this.el).prependTo('body'); + $(this.el).prependTo('gwent-battle'); this.listenTo(user, "change:showPreview", this.renderPreview); this.listenTo(user, "change:waiting", this.render); @@ -438,7 +436,7 @@ let BattleView = Backbone.View.extend({ let modal = new ReDrawModal({model: this.user}); this.$el.prepend(modal.render().el); } - if(this.user.get("openDiscard")) { + if(this.user.get("openDiscard")){ let modal = new Modal({model: this.user}); this.$el.prepend(modal.render().el); } @@ -467,7 +465,7 @@ let BattleView = Backbone.View.extend({ renderPreview: function(){ /*let preview = new Preview({key: this.user.get("showPreview")});*/ let preview = this.user.get("showPreview"); - if(!preview) { + if(!preview){ return; } this.$el.find(".card-preview").html(preview.render().el); @@ -625,19 +623,20 @@ let ReDrawModal = Modal.extend({ let WinnerModal = Modal.extend({ template: require("../templates/modal.winner.handlebars") }); + let ChooseSideModal = Modal.extend({ template: require("../templates/modal.side.handlebars"), events: { "click .btn": "onBtnClick" }, - beforeCancel: function() { + beforeCancel: function(){ return false; }, - onBtnClick: function(e) { - var id = $(e.target).closest(".btn").data().id; + onBtnClick: function(e){ + var id = $(e.target).data().id; this.model.set("chooseSide", false); - if(id === "you") { + if(id === "you"){ //this.model.set("chosenSide", this.model.get("roomSide")); this.model.chooseSide(this.model.get("roomSide")); this.remove(); @@ -742,7 +741,7 @@ let User = Backbone.Model.extend({ let modal = new WinnerModal({model: new model({winner: winner})}); $("body").prepend(modal.render().el); }) - app.receive("request:chooseWhichSideBegins", function() { + app.receive("request:chooseWhichSideBegins", function(){ self.set("chooseSide", true); }) @@ -752,6 +751,10 @@ let User = Backbone.Model.extend({ app.on("setDeck", this.setDeck, this); + app.receive("notification", function(data) { + new Notification(data).render(); + }) + app.send("request:name", this.get("name") == "unnamed" ? null : {name: this.get("name")}); }, startMatchmaking: function(){ @@ -775,7 +778,7 @@ let User = Backbone.Model.extend({ this.set("deckKey", deckKey); this.get("app").send("set:deck", {deck: deckKey}); }, - chooseSide: function(roomSide) { + chooseSide: function(roomSide){ this.get("app").send("response:chooseWhichSideBegins", { side: roomSide }) @@ -786,21 +789,25 @@ let Lobby = Backbone.View.extend({ defaults: { id: "" }, - className: "container", template: require("../templates/lobby.handlebars"), initialize: function(options){ this.user = options.user; this.app = options.app; this.listenTo(this.app.user, "change", this.render); - $(this.el).prependTo('body'); + //$(this.el).prependTo('body'); + $(".gwent-battle").html(this.el); this.render(); }, events: { "click .startMatchmaking": "startMatchmaking", /*"click .join-room": "joinRoom",*/ "blur .name-input": "changeName", - "change #deckChoice": "setDeck" + "change #deckChoice": "setDeck", + "click .note": "debugNote" + }, + debugNote: function() { + new Notification({message: "yoyo TEST"}).render(); }, render: function(){ this.$el.html(this.template(this.user.attributes)); @@ -855,4 +862,34 @@ let Preview = Backbone.View.extend({ } }); +let Notification = Backbone.View.extend({ + className: "notification", + template: require("../templates/notification.handlebars"), + initialize: function(opt){ + this.opt = opt; + $(".notifications").append(this.el); + }, + render: function(){ + this.$el.html(this.template(this.opt)); + this.show(); + return this; + }, + show: function(){ + this.$el.animate({ + "height": "60px" + }, { + duration: 600, + complete: this.hide.bind(this) + }).delay(2500); + + }, + hide: function(){ + this.$el.animate({ + "height": "0" + }, { + complete: this.remove.bind(this) + }) + } +}); + module.exports = App; diff --git a/client/scss/main.scss b/client/scss/main.scss index 2106cc0..40731e3 100644 --- a/client/scss/main.scss +++ b/client/scss/main.scss @@ -18,7 +18,7 @@ $game-height: 800px; .large-field-counter { line-height: 20px; - border: 1px solid black; + //border: 1px solid black; border-radius: 30px; height: 40px; padding: 10px; @@ -295,7 +295,26 @@ $game-height: 800px; -ms-transform-origin: 50% 50%; } +.container { + position: relative; +} +.notifications { + position: absolute; + top: 0; + z-index: 200; + width: 100%; +} +.notification { + height: 0; + margin-left: 250px; + margin-right: 250px; + + .alert { + margin-bottom: 0; + //padding: 0; + } +} @keyframes waitForOpponent{ 0% { diff --git a/client/templates/lobby.handlebars b/client/templates/lobby.handlebars index 8fb82c0..2618301 100644 --- a/client/templates/lobby.handlebars +++ b/client/templates/lobby.handlebars @@ -20,7 +20,9 @@ {{#if inMatchmakerQueue}} {{/if}} + + diff --git a/client/templates/modal.winner.handlebars b/client/templates/modal.winner.handlebars index 12e7289..50d9db3 100644 --- a/client/templates/modal.winner.handlebars +++ b/client/templates/modal.winner.handlebars @@ -3,7 +3,7 @@

{{winner}} wins the match!

-

If you want to give feedback, or if you want to contribute, please feel free to visit Github Gwent-Online.

+

If you want to give feedback, or want to contribute, please feel free to visit Github Gwent-Online.

For another match reload the page und enqueue again!

Thanks for playing the game!

diff --git a/client/templates/notification.handlebars b/client/templates/notification.handlebars new file mode 100644 index 0000000..57e69b5 --- /dev/null +++ b/client/templates/notification.handlebars @@ -0,0 +1,3 @@ +
+
{{message}}
+
\ No newline at end of file diff --git a/server/Battle.js b/server/Battle.js index c4afdcf..9a0cd16 100644 --- a/server/Battle.js +++ b/server/Battle.js @@ -121,7 +121,8 @@ var Battle = (function(){ } r.startNextRound = function(){ - var loser = this.checkRubies(); + var lastRound = this.checkRubies(); + var loser = lastRound.loser; var winner = loser.foe; if(this.checkIfIsOver()){ console.log("its over!"); @@ -134,10 +135,13 @@ var Battle = (function(){ this.p2.resetNewRound(); console.log("start new round!"); + this.sendNotification("Start new round!"); - if(winner.deck.getFaction() === Deck.FACTION.NORTHERN_REALM){ + + if(winner.deck.getFaction() === Deck.FACTION.NORTHERN_REALM && !lastRound.isTie){ winner.draw(1); console.log(winner.getName() + " draws 1 extra card! (Northern ability)"); + this.sendNotification(winner.getName() + " draws 1 extra card! (Northern ability)"); } this.update(); @@ -158,6 +162,7 @@ var Battle = (function(){ r.waitForScoiatael = function(side){ var self = this; + self.sendNotification(side.getName() + " decides whos starts first"); side.send("request:chooseWhichSideBegins", null, true); side.socket.once("response:chooseWhichSideBegins", function(data){ console.log("which side? ", data.side); @@ -289,11 +294,17 @@ var Battle = (function(){ if(scoreP1 > scoreP2){ this.p2.removeRuby(); - return this.p2; + return { + loser: this.p2, + isTie: false + } } if(scoreP2 > scoreP1){ this.p1.removeRuby(); - return this.p1; + return { + loser: this.p1, + isTie: false + } } //tie @@ -302,17 +313,28 @@ var Battle = (function(){ if(this.p1.deck.getFaction() === Deck.FACTION.NILFGAARDIAN_EMPIRE && this.p1.deck.getFaction() !== this.p2.deck.getFaction()){ this.p2.removeRuby(); console.log(this.p1.getName() + " wins the tie! (nilfgaardian ability)"); - return this.p2; + self.sendNotification(this.p1.getName() + " wins the tie! (nilfgaardian ability)"); + return { + loser: this.p2, + isTie: false + } } if(this.p2.deck.getFaction() === Deck.FACTION.NILFGAARDIAN_EMPIRE && this.p1.deck.getFaction() !== this.p2.deck.getFaction()){ this.p1.removeRuby(); console.log(this.p2.getName() + " wins the tie! (nilfgaardian ability)"); - return this.p1; + self.sendNotification(this.p2.getName() + " wins the tie! (nilfgaardian ability)"); + return { + loser: this.p1, + isTie: false + } } this.p1.removeRuby(); this.p2.removeRuby(); - return Math.random() > 0.5 ? this.p1 : this.p2; + return { + loser: Math.random() > 0.5 ? this.p1 : this.p2, + isTie: true + } } r.userLeft = function(sideName){ @@ -326,6 +348,12 @@ var Battle = (function(){ this.channel = null; } + r.sendNotification = function(msg){ + this.send("notification", { + message: msg + }) + } + return Battle; })(); diff --git a/server/Battleside.js b/server/Battleside.js index 6c76c73..3da52cc 100644 --- a/server/Battleside.js +++ b/server/Battleside.js @@ -176,6 +176,8 @@ Battleside = (function(){ var allCards = close.concat(range.concat(siege)); var rnd = (Math.random() * allCards.length) | 0 ; + if(allCards[rnd].getType === 4) return null; + return allCards[rnd]; } @@ -332,6 +334,7 @@ Battleside = (function(){ if(!field){ field = obj.targetSide.field[card.getType()]; } + field.add(card); } diff --git a/server/Room.js b/server/Room.js index 48e9d26..2ddc908 100644 --- a/server/Room.js +++ b/server/Room.js @@ -59,7 +59,7 @@ var Room = (function(){ r.initBattle = function(){ this._battle = Battle(this._id, this._users[0], this._users[1], io); this._users[0].send("init:battle", {side: "p1", foeSide: "p2"}); - this._users[1].send("init:battle", {side: "p2", foeSide: "p2"}); + this._users[1].send("init:battle", {side: "p2", foeSide: "p1"}); } r.setReady = function(user, b){