From 187d6b21c288f2db9d3f35335cecf83beb2e7256 Mon Sep 17 00:00:00 2001
From: exane <raco0n@gmx.de>
Date: Sun, 28 Jun 2015 16:10:09 +0200
Subject: [PATCH] add "waiting for opponent" feedback

---
 client/js/client.js                |  3 +-
 client/scss/main.scss              | 94 ++++++++++++++++++++++++++++++
 client/templates/battle.handlebars |  9 ++-
 3 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/client/js/client.js b/client/js/client.js
index 16f9fcb..9588ca1 100644
--- a/client/js/client.js
+++ b/client/js/client.js
@@ -420,7 +420,8 @@ let BattleView = Backbone.View.extend({
         close: self.user.get("setAgile") || self.user.get("setHorn"),
         range: self.user.get("setAgile") || self.user.get("setHorn"),
         siege: self.user.get("setHorn")
-      }
+      },
+      isWaiting: self.user.get("waiting")
     }));
     if(!(this.otherSide && this.yourSide)) return;
     this.otherSide.render();
diff --git a/client/scss/main.scss b/client/scss/main.scss
index 3e9c7ff..89bd8b5 100644
--- a/client/scss/main.scss
+++ b/client/scss/main.scss
@@ -252,3 +252,97 @@ $game-height: 800px;
     top: 30%;
   }
 }
+
+.waiting-for-opponent {
+  position: absolute;
+  //left: 43%;
+  left: 30%;
+  top: 505px;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 0px 200px;
+  z-index: 300;
+  color: #ff8927;
+  //text-shadow: 0px 0px 1px #000;
+  background: #444ba1;
+}
+
+.waiting-for-opponent{
+   animation: waitForOpponent linear 2s;
+   animation-iteration-count: infinite;
+   transform-origin: 50% 50%;
+   -webkit-animation: waitForOpponent linear 2s;
+   -webkit-animation-iteration-count: infinite;
+   -webkit-transform-origin: 50% 50%;
+   -moz-animation: waitForOpponent linear 2s;
+   -moz-animation-iteration-count: infinite;
+   -moz-transform-origin: 50% 50%;
+   -o-animation: waitForOpponent linear 2s;
+   -o-animation-iteration-count: infinite;
+   -o-transform-origin: 50% 50%;
+   -ms-animation: waitForOpponent linear 2s;
+   -ms-animation-iteration-count: infinite;
+   -ms-transform-origin: 50% 50%;
+ }
+
+
+
+@keyframes waitForOpponent{
+  0% {
+    opacity:1;
+  }
+  50% {
+    opacity:0.8;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-moz-keyframes waitForOpponent{
+  0% {
+    opacity:1;
+  }
+  50% {
+    opacity:0.8;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-webkit-keyframes waitForOpponent {
+  0% {
+    opacity:1;
+  }
+  50% {
+    opacity:0.8;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-o-keyframes waitForOpponent {
+  0% {
+    opacity:1;
+  }
+  50% {
+    opacity:0.8;
+  }
+  100% {
+    opacity:1;
+  }
+}
+
+@-ms-keyframes waitForOpponent {
+  0% {
+    opacity:1;
+  }
+  50% {
+    opacity:0.8;
+  }
+  100% {
+    opacity:1;
+  }
+}
\ No newline at end of file
diff --git a/client/templates/battle.handlebars b/client/templates/battle.handlebars
index fa80580..5b92686 100644
--- a/client/templates/battle.handlebars
+++ b/client/templates/battle.handlebars
@@ -1,3 +1,10 @@
+{{#if isWaiting}}
+  <div class="col-xs-12">
+    <div class="waiting-for-opponent">
+      ~~ Waiting for opponent ~~
+    </div>
+  </div>
+{{/if}}
 <div class="col-xs-3 left-side">
   <div class="col-xs-12 game-info game-info-foe foe">
   </div>
@@ -54,7 +61,7 @@
   <div class="row">
     <div class="col-xs-12 field field-hand">
       {{#each cards as |val key|}}
-      {{>card val}}
+        {{>card val}}
       {{/each}}
     </div>
   </div>