lobby changes

client/index.html

@@ -13,7 +13,7 @@
 <div class="container">
   <div class="row">
     <div class="notifications"></div>
-      <div class="gwent-battle"></div>
+    <div class="gwent-battle"></div>
   </div>
 </div>
 <script src="build/app.js"></script>

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 + "<br>";
   })
 
@@ -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: "",
+    name: localStorage["userName"] || null,
-    deckKey: "northern"
+    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();
   }
 });

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% {

client/templates/lobby.handlebars

@@ -1,11 +1,18 @@
 <div class="col-xs-12">
   <div class="panel panel-default">
-    <div class="panel-heading">Gwent</div>
+    <div class="panel-heading">Gwent
+      {{#if serverOffline}}
+        <span class="pull-right">Server Status: <span class="label label-danger">Offline</span></span>
+      {{else}}
+        <span class="pull-right">Server Status: <span class="label label-success">Online</span></span>
+      {{/if}}
+    </div>
     <div class="panel-body">
       <div class="row">
         <div class="col-xs-12">
           <input type="text" class="name-input" value="{{name}}">
           <select id="deckChoice">
+            <option value="random">Deck: Random</option>
             <option value="northern">Deck: Northern Realms</option>
             <option value="scoiatael">Deck: Scoia'tael</option>
             <option value="monster">Deck: Monster</option>
@@ -13,16 +20,17 @@
           </select>
         </div>
       </div>
+      <br>
       <div class="row">
         <div class="col-xs-12">
           <button type="button" class="btn btn-primary startMatchmaking"{{#if inMatchmakerQueue}} disabled{{/if}}>
-          Search Opponent
+            Search Opponent
-          {{#if inMatchmakerQueue}}<img src="../site/public/assets/img/content-load.gif" width=20 style="margin: 5px;"> {{/if}}
+            {{#if inMatchmakerQueue}}
+              <i class="image-gif-loader pull-right"></i>
+            {{/if}}
           </button>
-          <!--<button type="button" class="btn btn-primary join-room">Join Room</button>-->
+          <!--<button type="button" class="btn btn-success note">debug note</button>-->
-          <button type="button" class="btn btn-success note">debug note</button>
         </div>
-
       </div>
     </div>
   </div>

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);

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);
-    this.setDeck(deck.data);
   };
   var r = Deck.prototype;
   /**
@@ -40,18 +40,23 @@ var Deck = (function(){
     MONSTERS: "monster"
   }
 
-  r.setDeck = function(deckData){
+  r.setDeck = function(deckKey){
-    if(!Array.isArray(deckData)) {
+    var deck = DeckData[deckKey] ? DeckData[deckKey] : DeckData["northern"];
-      deckData = 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;
   }
 

server/User.js

@@ -45,8 +45,7 @@ var User = (function(){
   }
 
   r.generateName = function(){
-    var name = "Player" + (((Math.random() * 8999) + 1000) | 0);
+    var name = "Guest" + (((Math.random() * 8999) + 1000) | 0);
-    //if(lobby.hasUser(name)) return generateName();
     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) {