From 6c225cee4de02b0e4238fef2068d23a7e3ca39ba Mon Sep 17 00:00:00 2001
From: "marcins78@gmail.com"
 <marcins78@gmail.com@eb7970ca-0f6f-de4b-2938-835b230b9d1f>
Date: Wed, 26 Oct 2011 23:34:27 +0000
Subject: [PATCH] - Fixed display of lots of tokens on a card. They will be
 displayed in columns now, where each colum has at most 10 tokens.

---
 .../src/main/webapp/includes/changeLog.html   |  2 ++
 .../src/main/webapp/js/jCardGroup.js          | 23 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/includes/changeLog.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/includes/changeLog.html
index 7e0b12bd8..b438d690b 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/includes/changeLog.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/includes/changeLog.html
@@ -2,6 +2,8 @@
 <b>26 Oct. 2011</b>
 - Added card overlay to active characters showing their current strength.
 - Archery totals and move count/limit added to UI.
+- Fixed display of lots of tokens on a card. They will be displayed in columns now, where each colum has at most
+10 tokens.
 
 <b>25 Oct. 2011</b>
 - "Vengeance" now correctly counts cards attached to oposing character.
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCardGroup.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCardGroup.js
index cb0ed39bc..4f8322d1b 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCardGroup.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCardGroup.js
@@ -43,25 +43,36 @@ var CardGroup = Class.extend({
 
         var tokenOverlay = $(".tokenOverlay", cardElem);
 
-        var tokenSize = Math.floor(maxDimension / 12) * 2;
+        var tokenSize = Math.floor(maxDimension / 13) * 2;
 
         var tokens = cardElem.data("card").tokens;
         if (tokens != null) {
-            var tokenTypesCount = 0;
+            var tokenInColumnMax = 10;
+            var tokenColumns = 0;
 
             for (var token in tokens)
-                if (tokens.hasOwnProperty(token) && tokens[token] > 0)
-                    tokenTypesCount++;
+                if (tokens.hasOwnProperty(token) && tokens[token] > 0) {
+                    tokenColumns += (1 + Math.floor((tokens[token] - 1) / tokenInColumnMax));
+                }
 
             var tokenIndex = 1;
             for (var token in tokens)
                 if (tokens.hasOwnProperty(token) && tokens[token] > 0) {
-                    var tokenX = (tokenIndex * (width / (tokenTypesCount + 1))) - (tokenSize / 2);
                     var tokenCount = tokens[token];
 
+                    var tokenX = (tokenIndex * (width / (tokenColumns + 1))) - (tokenSize / 2);
+                    var tokenInColumnIndex = 0;
                     for (var i = 0; i < tokenCount; i++) {
-                        var tokenElem = $("<img class='token' src='images/tokens/" + token.toLowerCase() + ".png' width='" + tokenSize + "' height='" + tokenSize + "'></img>").css({position: "absolute", left: tokenX + "px", top: (1 * tokenSize / 2) * (1 + i) + "px"});
+                        var tokenY = Math.floor((maxDimension / 13) * (1 + tokenInColumnIndex));
+
+                        var tokenElem = $("<img class='token' src='images/tokens/" + token.toLowerCase() + ".png' width='" + tokenSize + "' height='" + tokenSize + "'></img>").css({position: "absolute", left: tokenX + "px", top: tokenY + "px"});
                         tokenOverlay.append(tokenElem);
+                        tokenInColumnIndex++;
+                        if (tokenInColumnIndex == tokenInColumnMax) {
+                            tokenInColumnIndex = 0;
+                            tokenIndex++;
+                            tokenX = (tokenIndex * (width / (tokenColumns + 1))) - (tokenSize / 2)
+                        }
                     }
                     tokenIndex ++;
                 }