change notification layout

client/js/client.js

@@ -22,6 +22,16 @@ Handlebars.registerHelper("health", function(lives){
   }
   return out;
 });
+Handlebars.registerHelper("formatMessage", function(msg){
+  let out = "";
+  var lines = msg.split(/\n/g);
+
+  lines.forEach(function(line) {
+    out += line + "<br>";
+  })
+
+  return out;
+});
 
 let App = Backbone.Router.extend({
   routes: {
@@ -807,7 +817,7 @@ let Lobby = Backbone.View.extend({
     "click .note": "debugNote"
   },
   debugNote: function() {
-    new Notification({message: "yoyo TEST"}).render();
+    new Notification({message: "yoyo TEST\nhallo\n\ntest"}).render();
   },
   render: function(){
     this.$el.html(this.template(this.user.attributes));
@@ -878,23 +888,16 @@ let Notification = Backbone.View.extend({
     return this;
   },
   show: function(){
-    this.$el.animate({
-      "height": "60px"
-    }, {
-      duration: 600,
-      complete: this.hide.bind(this)
-    }).delay(2000);
+    let $alert = this.$el.find(".alert");
+    $alert.slideDown(600).delay(2000).queue(this.hide.bind(this));
 
   },
   hide: function(){
-    this.$el.animate({
-      "height": "0"
-    }, {
-      complete: this.remove.bind(this)
-    })
+    let $alert = this.$el.find(".alert");
+    $alert.stop().slideUp().queue(this.remove.bind(this));
   },
-  onClick: function(e) {
-    this.remove();
+  onClick: function() {
+    this.hide();
   }
 });
 

client/scss/main.scss

@@ -316,10 +316,12 @@ $game-height: 800px;
 
   .alert {
     margin-bottom: 0;
+    display: none;
     //padding: 0;
   }
 }
 
+
 @keyframes waitForOpponent{
   0% {
     opacity:1;

client/templates/notification.handlebars

@@ -1,3 +1,3 @@
 <div class="col-xs-12">
-  <div class="alert alert-success">{{message}}</div>
+  <div class="alert alert-success">{{#formatMessage message}}{{/formatMessage}}</div>
 </div>

server/Battle.js

@@ -62,6 +62,25 @@ var Battle = (function(){
     this.p2.draw(10);
 
 
+    /*this.p1.placeCard("ves");
+    this.p2.placeCard("ves");
+    this.p1.placeCard("yarpen_zigrin");
+    this.p2.placeCard("yarpen_zigrin");
+
+    this.p1.hand.add(this.p1.createCard("scorch"));
+    this.p2.hand.add(this.p2.createCard("scorch"));
+    this.p1.hand.add(this.p1.createCard("villentretenmerth"));
+    this.p2.hand.add(this.p2.createCard("villentretenmerth"));
+
+    this.p1.hand.add(this.p1.createCard("impenetrable_fog"));
+    this.p2.hand.add(this.p2.createCard("impenetrable_fog"));
+    this.p1.hand.add(this.p1.createCard("biting_frost"));
+    this.p2.hand.add(this.p2.createCard("biting_frost"));
+    this.p1.hand.add(this.p1.createCard("torrential_rain"));
+    this.p2.hand.add(this.p2.createCard("torrential_rain"));
+    this.p1.hand.add(this.p1.createCard("clear_weather"));
+    this.p2.hand.add(this.p2.createCard("clear_weather"));
+*/
 
     this.update();
 

server/Battleside.js

@@ -594,10 +594,10 @@ Battleside = (function(){
 
     this.battle.sendNotification(this.getName() + " played " + card.getName());
 
-    var txt = "Scorch destroyed:\n";
+    var txt = "Scorch destroyed:";
     for (var i = 0; i < removeCards.length; i++) {
       var c = removeCards[i];
-      txt += c.getName() + "\n";
+      txt += "\n" + c.getName();
     }
 
     this.battle.sendNotification(txt);