1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-10-31 10:36:53 +00:00

better card arrangement

This commit is contained in:
exane 2015-06-20 13:08:11 +02:00
parent 6e51b5f9b7
commit eb647efa20
2 changed files with 36 additions and 7 deletions

View File

@ -156,10 +156,13 @@ var SideView = Backbone.View.extend({
var cards = this.field.close._cards;
var score = this.field.close._score;
var html = this.templateCards(cards);
$field.find(".field-close").html(html)
$field.find(".large-field-counter").html(score)
calculateCardMargin($field.find(".card"), 433, 70, cards.length);
},
renderRangeField: function(){
if(!this.field.ranged) return;
@ -172,6 +175,7 @@ var SideView = Backbone.View.extend({
$field.find(".field-range").html(html)
$field.find(".large-field-counter").html(score)
calculateCardMargin($field.find(".card"), 433, 70, cards.length);
},
renderSiegeField: function(){
if(!this.field.siege) return;
@ -184,6 +188,7 @@ var SideView = Backbone.View.extend({
$field.find(".field-siege").html(html)
$field.find(".large-field-counter").html(score)
calculateCardMargin($field.find(".card"), 433, 70, cards.length);
},
renderWeatherField: function(){
if(!this.field.weather) return;
@ -206,6 +211,18 @@ var SideView = Backbone.View.extend({
}
});
var calculateCardMargin = function($selector, totalWidth, cardWidth, n){
var w = totalWidth, c = cardWidth;
var res;
if(n < 7)
res = 0;
else {
res = -((w - c) / (n - 1) - c) + 1
}
$selector.css("margin-left", -res);
}
var BattleView = Backbone.View.extend({
className: "container",
template: Handlebars.compile($("#battle-template").html()),
@ -344,6 +361,7 @@ var BattleView = Backbone.View.extend({
this.otherSide.render();
this.yourSide.render();
calculateCardMargin(this.$el.find(".field-hand .card"), 538, 70, this.handCards.length);
if(this.user.get("openDiscard")){
var modal = new Modal({model: this.user});

View File

@ -19,8 +19,16 @@ $game-height: 800px;
.field {
width: 100%;
height: 100px;
border: 1px solid black;
border: 1px solid black;/*
overflow: hidden;
&:hover {
overflow: visible;
}*/
.card:first-child {
margin-left: 0 !important;
}
&.active {
box-shadow: 0px 0px 15px #ffbb0b;
@ -34,7 +42,10 @@ $game-height: 800px;
.field-hand {
margin-top: 20px;
.card {
margin-left: -20px;
margin-left: -31px;
&:first-child {
margin-left: 0 !important;
}
&:hover {
position: relative;
z-index: 10;
@ -48,10 +59,10 @@ $game-height: 800px;
}
.field-single {
border: 1px solid black;
height: 150px;
width: 85px;
margin: 5px;
border: 1px solid black;/*
width: 85px;*/
/*margin: 5px;*/
height: 98px;
}
.left-side {