add notifications (kinda)

2025-11-25 01:42:59 +00:00 · 2015-06-29 19:57:51 +02:00
parent a89f3414ff
commit 70432e3530
9 changed files with 124 additions and 26 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -10,6 +10,12 @@
  <script src="Config.js"></script>
 </head>
 <body>
+<div class="container">
+  <div class="row">
+    <div class="notifications"></div>
+      <div class="gwent-battle"></div>
+  </div>
+</div>
 <script src="build/app.js"></script>
 </body>
 </html>
--- 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;
--- 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% {
--- a/client/templates/lobby.handlebars
+++ b/client/templates/lobby.handlebars
@@ -20,7 +20,9 @@
          {{#if inMatchmakerQueue}}<img src="../site/public/assets/img/content-load.gif" width=20 style="margin: 5px;"> {{/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>
        </div>
+
      </div>
    </div>
  </div>
--- a/client/templates/modal.winner.handlebars
+++ b/client/templates/modal.winner.handlebars
@@ -3,7 +3,7 @@
 </div>
 <div class="bbm-modal__section">
  <h1>{{winner}} wins the match!</h1>
-  <p>If you want to give feedback, or if you want to contribute, please feel free to visit <a href="https://github.com/exane/gwent-online">Github Gwent-Online</a>.</p>
+  <p>If you want to give feedback, or want to contribute, please feel free to visit <a href="https://github.com/exane/gwent-online" target="_blank">Github Gwent-Online</a>.</p>
  <p>For another match reload the page und enqueue again!</p>
  <p><b>Thanks for playing the game!</b></p>
 </div>
--- a/client/templates/notification.handlebars
+++ b/client/templates/notification.handlebars
@@ -0,0 +1,3 @@
+<div class="col-xs-12">
+  <div class="alert alert-success">{{message}}</div>
+</div>