some responsive stuff

.gitignore

@@ -1,7 +1,6 @@
 node_modules
 .idea
-public/build
+public/
-public/index.html
 test/spec
 assets/cards/*
 client/scss/_cards.scss

Config.example..js

@@ -0,0 +1,16 @@
+
+window.Config = {};
+
+Config.Server = {
+  "hostname": "192.168.123.1",
+  "port": 16918,
+  secure: false
+}
+
+Config.Gwent = {
+  notification_duration: 4000
+}
+
+Config.Site = {
+  base: "/gwent-online/site/public"
+}

client/index.html

@@ -4,6 +4,8 @@
   <meta charset="utf-8">
   <title>Gwent</title>
   <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no" />
+  <meta name="HandheldFriendly" content="true" />
   <link rel="stylesheet" href="build/bootstrap.css">
   <link rel="stylesheet" href="build/cards.css">
   <link rel="stylesheet" href="build/main.css">

client/js/client.js

@@ -180,7 +180,8 @@ let SideView = Backbone.View.extend({
       $field.addClass("field-frost");
     }
 
-    calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    //calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    this.battleView.calculateMargin(this.$el.find(".field-close"));
   },
   renderRangeField: function(){
     if(!this.field.ranged) return;
@@ -208,7 +209,8 @@ let SideView = Backbone.View.extend({
       $field.addClass("field-fog");
     }
 
-    calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    //calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    this.battleView.calculateMargin(this.$el.find(".field-range"));
   },
   renderSiegeField: function(){
     if(!this.field.siege) return;
@@ -236,7 +238,8 @@ let SideView = Backbone.View.extend({
       $field.addClass("field-rain");
     }
 
-    calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    //calculateCardMargin($field.find(".card"), 351, 70, cards.length);
+    this.battleView.calculateMargin(this.$el.find(".field-siege"));
   },
   renderWeatherField: function(){
     if(!this.field.weather) return;
@@ -295,6 +298,7 @@ let BattleView = Backbone.View.extend({
     this.$hand = this.$el.find(".field-hand");
     this.$preview = this.$el.find(".card-preview");
 
+    //$(window).on("resize", this.calculateMargin.bind(this, this.$hand));
 
     let interval = setInterval(function(){
       if(!user.get("room")) return;
@@ -445,7 +449,7 @@ let BattleView = Backbone.View.extend({
 
 
     if(this.handCards){
-      calculateCardMargin(this.$el.find(".field-hand .card"), 538, 70, this.handCards.length);
+      this.calculateMargin(this.$el.find(".field-hand"));
     }
 
     if(this.user.get("isReDrawing")){
@@ -589,6 +593,18 @@ let BattleView = Backbone.View.extend({
         side.render();
       }
     })*/
+  },
+  calculateMargin: function($container/*, totalWidth, cardWidth, n*/){
+    var n = $container.children().size();
+    let w = $container.width(), c = $container.find(".card").outerWidth() + 3;
+    let res;
+    if(n < 6)
+      res = 0;
+    else {
+      res = -((w - c) / (n - 1) - c) + 1
+    }
+
+    $container.find(".card").css("margin-left", -res);
   }
 });
 

client/scss/main.scss

@@ -4,6 +4,9 @@
 
 $height: 600px;
 $game-height: 800px;
+.container {
+  min-width: 960px;
+}
 
 .board {
   height: $game-height;
@@ -180,16 +183,18 @@ $game-height: 800px;
   div {
     position: fixed;
     //left:0;
-    z-index: 110;
+    z-index: 310;
     //height: 100px !important;
     i {
       display: block;
+      margin-left: -15px;
     }
     .preview-description {
       width: 238px;
       min-height: 200px;
       background: rgba(16, 16, 16, 0.57);
       color: #ffffff;
+      margin-left: -15px;
 
       p {
         padding: 10px;
@@ -265,13 +270,22 @@ $game-height: 800px;
 }
 
 .waiting-for-opponent {
-  position: absolute;
+  position: fixed;
   //left: 43%;
-  left: 30%;
+  cursor: default;
-  top: 505px;
+  width: 100%;
-  border: 1px solid black;
+  text-align: center;
-  border-radius: 10px;
+  //left: calc(50% - 400px) ;
-  padding: 0px 200px;
+  left: 0;
+  //top: calc(50% - 60px);
+  top: calc(100% - 60px);
+  //border: 1px solid black;
+  //border-radius: 10px;
+  /*
+  padding: 0px 200px;*/
+  font-size: 25px;
+  line-height: 20px;
+  padding: 20px;
   z-index: 300;
   color: #ff8927;
   //text-shadow: 0px 0px 1px #000;
@@ -327,6 +341,7 @@ $game-height: 800px;
   width: 200px;
   text-align: left;
 }
+
 .image-gif-loader {
   background: url("../../assets/content-load.gif");
   display: block;

client/templates/info.handlebars

@@ -1,6 +1,6 @@
 <div class="col-xs-12 info-name">{{data.name}}</div>
-<div class="col-xs-6 field-single field-leader">{{>card leader}}</div>
+<div class="col-xs-12 col-lg-6 field-single field-leader">{{>card leader}}</div>
-<div class="col-xs-6">
+<div class="col-xs-12 col-lg-6">
   <div class="row">
     <div class="col-xs-6">Points:</div>
     <div class="col-xs-6 score">{{data.score}}</div>

public/Config.js

@@ -2,7 +2,7 @@
 window.Config = {};
 
 Config.Server = {
-  "hostname": "localhost",
+  "hostname": "192.168.123.1",
   "port": 16918,
   secure: false
 }

server/Battleside.js

@@ -856,6 +856,7 @@ Battleside = (function(){
       if(!left){
         self.send("redraw:close", null, true);
         //console.log("redraw finished");
+        self.wait();
         deferred.resolve("done");
         //self.socket.off("redraw:reDrawCard", h1);
       }