deckbuilder graphics mode

assets/javascripts/decks.coffee

@@ -152,16 +152,19 @@ class Deck extends Spine.Controller
       @el.jscroll({W: "12px", Btn:
         {btn: false}})
     else
-      main_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(Math.ceil(main_count/4),10)) / (Math.max(Math.ceil(main_count/4),10)-1) / 2)
+      deck_width = $('.deck_part').width()
+      card_width = $('.card_usage').width()
+
+      main_margin = Math.floor((deck_width - card_width * Math.max(Math.ceil(main_count/4),10)) / (Math.max(Math.ceil(main_count/4),10)-1) / 2)
       $('.deck_part.main').css {'margin-left': -main_margin, 'margin-right': -main_margin}
       $('.deck_part.main .card_usage').css {'margin-left': main_margin, 'margin-right': main_margin}
 
-      side_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(side_count,10)) / (Math.max(side_count,10)-1) / 2)
-      $('.deck_part.side').css {'margin-left': -side_margin, 'margin-right': -side_margin}
+      side_margin = Math.floor((deck_width - card_width * Math.max(side_count,10)) / (Math.max(side_count,10)-1) / 2)
+      $('.deck_part.side').css {'margin-left': -side_margin, 'padding-right': -side_margin}
       $('.deck_part.side .card_usage').css {'margin-left': side_margin, 'margin-right': side_margin}
 
-      extra_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(extra_count,10)) / (Math.max(extra_count,10)-1) / 2)
-      $('.deck_part.extra').css {'margin-left': -extra_margin, 'margin-right': -extra_margin}
+      extra_margin = Math.floor((deck_width - card_width * Math.max(extra_count,10)) / (Math.max(extra_count,10)-1) / 2)
+      $('.deck_part.extra').css {'margin-left': -extra_margin, 'padding-right': -extra_margin}
       $('.deck_part.extra .card_usage').css {'margin-left': extra_margin, 'margin-right': extra_margin}
   location: ->
     "/decks/?name=#{@deck_name}&cards=#{@encode()}"

assets/javascripts/decks.js

@@ -245,7 +245,7 @@
     };
 
     Deck.prototype.render = function() {
-      var card_usage, category, category_count, extra_count, extra_margin, i, main_count, main_margin, side_count, side_margin, _i, _len, _ref,
+      var card_usage, card_width, category, category_count, deck_width, extra_count, extra_margin, i, main_count, main_margin, side_count, side_margin, _i, _len, _ref,
         _this = this;
       this.main = [];
       this.side = [];
@@ -406,7 +406,9 @@
           }
         });
       } else {
-        main_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(Math.ceil(main_count / 4), 10)) / (Math.max(Math.ceil(main_count / 4), 10) - 1) / 2);
+        deck_width = $('.deck_part').width();
+        card_width = $('.card_usage').width();
+        main_margin = Math.floor((deck_width - card_width * Math.max(Math.ceil(main_count / 4), 10)) / (Math.max(Math.ceil(main_count / 4), 10) - 1) / 2);
         $('.deck_part.main').css({
           'margin-left': -main_margin,
           'margin-right': -main_margin
@@ -415,19 +417,19 @@
           'margin-left': main_margin,
           'margin-right': main_margin
         });
-        side_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(side_count, 10)) / (Math.max(side_count, 10) - 1) / 2);
+        side_margin = Math.floor((deck_width - card_width * Math.max(side_count, 10)) / (Math.max(side_count, 10) - 1) / 2);
         $('.deck_part.side').css({
           'margin-left': -side_margin,
-          'margin-right': -side_margin
+          'padding-right': -side_margin
         });
         $('.deck_part.side .card_usage').css({
           'margin-left': side_margin,
           'margin-right': side_margin
         });
-        extra_margin = Math.floor(($('.deck_part').width() - $('.card_usage').width() * Math.max(extra_count, 10)) / (Math.max(extra_count, 10) - 1) / 2);
+        extra_margin = Math.floor((deck_width - card_width * Math.max(extra_count, 10)) / (Math.max(extra_count, 10) - 1) / 2);
         $('.deck_part.extra').css({
           'margin-left': -extra_margin,
-          'margin-right': -extra_margin
+          'padding-right': -extra_margin
         });
         return $('.deck_part.extra .card_usage').css({
           'margin-left': extra_margin,