diff --git a/assets/content-load.gif b/assets/content-load.gif new file mode 100644 index 0000000..97a1117 Binary files /dev/null and b/assets/content-load.gif differ diff --git a/client/index.html b/client/index.html index 4e9cb3f..2ab54fa 100644 --- a/client/index.html +++ b/client/index.html @@ -13,7 +13,7 @@
-
+
diff --git a/client/js/client.js b/client/js/client.js index e192cab..1f69c95 100644 --- a/client/js/client.js +++ b/client/js/client.js @@ -26,7 +26,7 @@ Handlebars.registerHelper("formatMessage", function(msg){ let out = ""; var lines = msg.split(/\n/g); - lines.forEach(function(line) { + lines.forEach(function(line){ out += line + "
"; }) @@ -49,6 +49,14 @@ let App = Backbone.Router.extend({ }, connect: function(){ this.socket = socket(Config.Server.hostname + ":" + Config.Server.port); + var self = this; + console.log(this.socket.connected); + this.socket.on("connect", function(socket){ + self.user.set("serverOffline", false); + }) + this.socket.on("disconnect", function(socket){ + self.user.set("serverOffline", true); + }) }, receive: function(event, cb){ this.socket.on(event, cb); @@ -681,8 +689,9 @@ let ChooseSideModal = Modal.extend({ let User = Backbone.Model.extend({ defaults: { - name: "", - deckKey: "northern" + name: localStorage["userName"] || null, + deck: localStorage["userDeck"] || null, + serverOffline: true }, initialize: function(){ let self = this; @@ -788,11 +797,12 @@ let User = Backbone.Model.extend({ app.on("setDeck", this.setDeck, this); - app.receive("notification", function(data) { + app.receive("notification", function(data){ new Notification(data).render(); }) - app.send("request:name", this.get("name") == "unnamed" ? null : {name: this.get("name")}); + app.send("request:name", this.get("name") === null ? null : {name: this.get("name")}); + app.send("set:deck", this.get("deck") === null ? null : {deck: this.get("deck")}); }, startMatchmaking: function(){ this.set("inMatchmakerQueue", true); @@ -809,10 +819,12 @@ let User = Backbone.Model.extend({ }, setName: function(name){ this.get("app").send("request:name", {name: name}); + localStorage["userName"] = name; }, setDeck: function(deckKey){ //console.log("deck: ", deckKey); this.set("deckKey", deckKey); + localStorage["userDeck"] = deckKey; this.get("app").send("set:deck", {deck: deckKey}); }, chooseSide: function(roomSide){ @@ -832,7 +844,6 @@ let Lobby = Backbone.View.extend({ this.user = options.user; this.app = options.app; this.listenTo(this.app.user, "change", this.render); - //$(this.el).prependTo('body'); $(".gwent-battle").html(this.el); this.render(); }, @@ -843,12 +854,12 @@ let Lobby = Backbone.View.extend({ "change #deckChoice": "setDeck", "click .note": "debugNote" }, - debugNote: function() { + debugNote: function(){ new Notification({message: "yoyo TEST\nhallo\n\ntest"}).render(); }, render: function(){ this.$el.html(this.template(this.user.attributes)); - /*this.$el.find("#deckChoice option[value='" + this.app.user.get("setDeck") + "']").attr("selected", "selected")*/ + this.$el.find("#deckChoice").val(this.user.get("deck")).attr("selected", true); return this; }, startMatchmaking: function(){ @@ -923,7 +934,7 @@ let Notification = Backbone.View.extend({ let $alert = this.$el.find(".alert"); $alert.stop().slideUp().queue(this.remove.bind(this)); }, - onClick: function() { + onClick: function(){ this.hide(); } }); diff --git a/client/scss/main.scss b/client/scss/main.scss index 835dfae..16515e4 100644 --- a/client/scss/main.scss +++ b/client/scss/main.scss @@ -321,6 +321,20 @@ $game-height: 800px; } } +.startMatchmaking { + height: 50px; + line-height: 35px; + width: 200px; + text-align: left; +} +.image-gif-loader { + background: url("../../assets/content-load.gif"); + display: block; + height: 32px; + width: 32px; + margin-left: 10px; + +} @keyframes waitForOpponent{ 0% { diff --git a/client/templates/lobby.handlebars b/client/templates/lobby.handlebars index 2618301..ff3a1f0 100644 --- a/client/templates/lobby.handlebars +++ b/client/templates/lobby.handlebars @@ -1,11 +1,18 @@
-
Gwent
+
Gwent + {{#if serverOffline}} + Server Status: Offline + {{else}} + Server Status: Online + {{/if}} +
+
- - +
-
diff --git a/server/Battleside.js b/server/Battleside.js index aff52a6..b22ee36 100644 --- a/server/Battleside.js +++ b/server/Battleside.js @@ -34,7 +34,7 @@ Battleside = (function(){ this._name = user.getName(); this.battle = battle; this.hand = Hand(); - this.deck = Deck(DeckData[deck], this); + this.deck = Deck(deck, this); this._discard = []; this.runEvent = this.battle.runEvent.bind(this.battle); diff --git a/server/Deck.js b/server/Deck.js index 5f1398b..5c36f95 100644 --- a/server/Deck.js +++ b/server/Deck.js @@ -1,6 +1,7 @@ var Card = require("./Card"); /*var CardManager = require("./CardManager");*/ var DeckData = require("../assets/data/deck"); +var _ = require("underscore"); var Deck = (function(){ var Deck = function(deck, side){ @@ -14,11 +15,10 @@ var Deck = (function(){ this.side = side; this._deck = []; - if(typeof deck !== "object") throw new Error("Deck is not an object!"); + //if(typeof deck !== "object") throw new Error("Deck is not an object!"); this._originalDeck = []; - this._faction = deck.faction; - this.setDeck(deck.data); + this.setDeck(deck); }; var r = Deck.prototype; /** @@ -40,18 +40,23 @@ var Deck = (function(){ MONSTERS: "monster" } - r.setDeck = function(deckData){ - if(!Array.isArray(deckData)) { - deckData = DeckData["northern"]; + r.setDeck = function(deckKey){ + var deck = DeckData[deckKey] ? DeckData[deckKey] : DeckData["northern"]; + + if(deckKey === "random"){ + var decks = _.allKeys(DeckData); + deck = DeckData[decks[(Math.random() * decks.length) | 0]]; } - this._originalDeck = deckData.slice(); - this._deck = deckData.slice(); + + this._originalDeck = deck.data.slice(); + this._deck = deck.data.slice(); + this._faction = deck.faction; this._loadCards(); this.shuffle(); } - r.getFaction = function() { + r.getFaction = function(){ return this._faction; } diff --git a/server/User.js b/server/User.js index 28251a6..babaab0 100644 --- a/server/User.js +++ b/server/User.js @@ -45,8 +45,7 @@ var User = (function(){ } r.generateName = function(){ - var name = "Player" + (((Math.random() * 8999) + 1000) | 0); - //if(lobby.hasUser(name)) return generateName(); + var name = "Guest" + (((Math.random() * 8999) + 1000) | 0); this._name = name; return name; } @@ -70,7 +69,7 @@ var User = (function(){ } r.getDeck = function() { - return this._deck || "northern"; + return this._deck; } r.addRoom = function(room) {