From 2de34251b53539e67e1e02a3d00f86c0b11ebba6 Mon Sep 17 00:00:00 2001 From: exane Date: Thu, 2 Jul 2015 18:17:33 +0200 Subject: [PATCH] some responsive stuff --- .gitignore | 3 +-- Config.example..js | 16 ++++++++++++++++ client/index.html | 2 ++ client/js/client.js | 26 +++++++++++++++++++++----- client/scss/main.scss | 29 ++++++++++++++++++++++------- client/templates/info.handlebars | 4 ++-- public/Config.js | 2 +- server/Battleside.js | 1 + 8 files changed, 66 insertions(+), 17 deletions(-) create mode 100644 Config.example..js diff --git a/.gitignore b/.gitignore index 0e8700e..e6989f6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ node_modules .idea -public/build -public/index.html +public/ test/spec assets/cards/* client/scss/_cards.scss diff --git a/Config.example..js b/Config.example..js new file mode 100644 index 0000000..2cba948 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/client/index.html b/client/index.html index 2ab54fa..44c554d 100644 --- a/client/index.html +++ b/client/index.html @@ -4,6 +4,8 @@ Gwent + + diff --git a/client/js/client.js b/client/js/client.js index 14c8e5c..ecc42ca 100644 --- a/client/js/client.js +++ b/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); } }); @@ -881,7 +897,7 @@ let Lobby = Backbone.View.extend({ let name = $(e.target).val(); this.app.trigger("setName", name); }, - renderStatus: function(n) { + renderStatus: function(n){ this.$el.find(".nr-player-online").html(n); } }); diff --git a/client/scss/main.scss b/client/scss/main.scss index 16515e4..2242e9f 100644 --- a/client/scss/main.scss +++ b/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%; - top: 505px; - border: 1px solid black; - border-radius: 10px; - padding: 0px 200px; + cursor: default; + width: 100%; + text-align: center; + //left: calc(50% - 400px) ; + 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; diff --git a/client/templates/info.handlebars b/client/templates/info.handlebars index b08724a..a565756 100644 --- a/client/templates/info.handlebars +++ b/client/templates/info.handlebars @@ -1,6 +1,6 @@
{{data.name}}
-
{{>card leader}}
-
+
{{>card leader}}
+
Points:
{{data.score}}
diff --git a/public/Config.js b/public/Config.js index 4811e41..2cba948 100644 --- a/public/Config.js +++ b/public/Config.js @@ -2,7 +2,7 @@ window.Config = {}; Config.Server = { - "hostname": "localhost", + "hostname": "192.168.123.1", "port": 16918, secure: false } diff --git a/server/Battleside.js b/server/Battleside.js index aacabc1..79f1bd4 100644 --- a/server/Battleside.js +++ b/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); }