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:
parent
6e51b5f9b7
commit
eb647efa20
@ -156,10 +156,13 @@ var SideView = Backbone.View.extend({
|
|||||||
var cards = this.field.close._cards;
|
var cards = this.field.close._cards;
|
||||||
var score = this.field.close._score;
|
var score = this.field.close._score;
|
||||||
|
|
||||||
|
|
||||||
var html = this.templateCards(cards);
|
var html = this.templateCards(cards);
|
||||||
|
|
||||||
$field.find(".field-close").html(html)
|
$field.find(".field-close").html(html)
|
||||||
$field.find(".large-field-counter").html(score)
|
$field.find(".large-field-counter").html(score)
|
||||||
|
|
||||||
|
calculateCardMargin($field.find(".card"), 433, 70, cards.length);
|
||||||
},
|
},
|
||||||
renderRangeField: function(){
|
renderRangeField: function(){
|
||||||
if(!this.field.ranged) return;
|
if(!this.field.ranged) return;
|
||||||
@ -172,6 +175,7 @@ var SideView = Backbone.View.extend({
|
|||||||
|
|
||||||
$field.find(".field-range").html(html)
|
$field.find(".field-range").html(html)
|
||||||
$field.find(".large-field-counter").html(score)
|
$field.find(".large-field-counter").html(score)
|
||||||
|
calculateCardMargin($field.find(".card"), 433, 70, cards.length);
|
||||||
},
|
},
|
||||||
renderSiegeField: function(){
|
renderSiegeField: function(){
|
||||||
if(!this.field.siege) return;
|
if(!this.field.siege) return;
|
||||||
@ -184,6 +188,7 @@ var SideView = Backbone.View.extend({
|
|||||||
|
|
||||||
$field.find(".field-siege").html(html)
|
$field.find(".field-siege").html(html)
|
||||||
$field.find(".large-field-counter").html(score)
|
$field.find(".large-field-counter").html(score)
|
||||||
|
calculateCardMargin($field.find(".card"), 433, 70, cards.length);
|
||||||
},
|
},
|
||||||
renderWeatherField: function(){
|
renderWeatherField: function(){
|
||||||
if(!this.field.weather) return;
|
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({
|
var BattleView = Backbone.View.extend({
|
||||||
className: "container",
|
className: "container",
|
||||||
template: Handlebars.compile($("#battle-template").html()),
|
template: Handlebars.compile($("#battle-template").html()),
|
||||||
@ -344,6 +361,7 @@ var BattleView = Backbone.View.extend({
|
|||||||
this.otherSide.render();
|
this.otherSide.render();
|
||||||
this.yourSide.render();
|
this.yourSide.render();
|
||||||
|
|
||||||
|
calculateCardMargin(this.$el.find(".field-hand .card"), 538, 70, this.handCards.length);
|
||||||
|
|
||||||
if(this.user.get("openDiscard")){
|
if(this.user.get("openDiscard")){
|
||||||
var modal = new Modal({model: this.user});
|
var modal = new Modal({model: this.user});
|
||||||
|
@ -19,8 +19,16 @@ $game-height: 800px;
|
|||||||
.field {
|
.field {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border: 1px solid black;
|
border: 1px solid black;/*
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
overflow: visible;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
.card:first-child {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
&.active {
|
&.active {
|
||||||
box-shadow: 0px 0px 15px #ffbb0b;
|
box-shadow: 0px 0px 15px #ffbb0b;
|
||||||
|
|
||||||
@ -34,7 +42,10 @@ $game-height: 800px;
|
|||||||
.field-hand {
|
.field-hand {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
.card {
|
.card {
|
||||||
margin-left: -20px;
|
margin-left: -31px;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
@ -48,10 +59,10 @@ $game-height: 800px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
.field-single {
|
.field-single {
|
||||||
border: 1px solid black;
|
border: 1px solid black;/*
|
||||||
height: 150px;
|
width: 85px;*/
|
||||||
width: 85px;
|
/*margin: 5px;*/
|
||||||
margin: 5px;
|
height: 98px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-side {
|
.left-side {
|
||||||
|
Loading…
Reference in New Issue
Block a user