1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-12-23 21:03:14 +00:00

some responsive stuff

This commit is contained in:
exane 2015-07-02 18:17:33 +02:00
parent 89b1396c50
commit 2de34251b5
8 changed files with 66 additions and 17 deletions

3
.gitignore vendored
View File

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

16
Config.example..js Normal file
View File

@ -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"
}

View File

@ -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">

View File

@ -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);
}
});

View File

@ -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;

View File

@ -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-6">
<div class="col-xs-12 col-lg-6 field-single field-leader">{{>card leader}}</div>
<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>

View File

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

View File

@ -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);
}