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

better card arrangement

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/js/client.js
View File

@ -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()),
@ -301,7 +318,7 @@ var BattleView = Backbone.View.extend({
}) })
this.user.set("waitForDecoy", false); this.user.set("waitForDecoy", false);
} }
if(this.user.get("setAgile")) { if(this.user.get("setAgile")){
var $field = $(e.target).closest(".field.active").find(".field-close, .field-range"); var $field = $(e.target).closest(".field.active").find(".field-close, .field-range");
console.log($field); console.log($field);
@ -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});

23
client/scss/main.scss
View File

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