Minimized number of layout ui operations in game.

gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameAnimations.js

@@ -218,7 +218,7 @@ var GameAnimations = Class.extend({
         if (animate) {
             $("#main").queue(
                     function(next) {
-                        that.game.layoutUI(false);
+                        that.game.layoutGroupWithCard(cardId);
                         next();
                     });
         }
@@ -599,10 +599,10 @@ var GameAnimations = Class.extend({
     },
 
     addTokens: function(element, animate) {
+        var cardId = element.getAttribute("cardId");
         var that = this;
         $("#main").queue(
                 function(next) {
-                    var cardId = element.getAttribute("cardId");
                     var zone = element.getAttribute("zone");
                     var token = element.getAttribute("token");
                     var count = parseInt(element.getAttribute("count"));
@@ -619,7 +619,7 @@ var GameAnimations = Class.extend({
         if (animate) {
             $("#main").queue(
                     function(next) {
-                        that.game.layoutUI(false);
+                        layoutTokens($(".card:cardId(" + cardId + ")"));
                         next();
                     });
         }
@@ -646,7 +646,7 @@ var GameAnimations = Class.extend({
         if (animate) {
             $("#main").queue(
                     function(next) {
-                        that.game.layoutUI(false);
+                        layoutTokens($(".card:cardId(" + cardId + ")"));
                         next();
                     });
         }
@@ -672,7 +672,7 @@ var GameAnimations = Class.extend({
         if (animate) {
             $("#main").queue(
                     function(next) {
-                        that.game.layoutUI(false);
+                        that.game.advPathGroup.layoutCards();
                         next();
                     });
         }
@@ -680,13 +680,6 @@ var GameAnimations = Class.extend({
 
     gameStats: function(element, animate) {
         var that = this;
-        if (animate) {
-            $("#main").queue(
-                    function(next) {
-                        that.game.layoutUI(false);
-                        next();
-                    });
-        }
         $("#main").queue(
                 function(next) {
                     $(".cardStrength").css({display: "none"});

gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js

@@ -114,6 +114,61 @@ var GempLotrGameUI = Class.extend({
         this.addBottomLeftTabPane();
     },
 
+    layoutGroupWithCard: function(cardId) {
+        var cardData = $(".card:cardId(" + cardId + ")").data("card");
+        if (this.advPathGroup.cardBelongs(cardData)) {
+            this.advPathGroup.layoutCards();
+            return;
+        }
+        if (this.charactersPlayer.cardBelongs(cardData)) {
+            this.charactersPlayer.layoutCards();
+            return;
+        }
+        if (this.charactersOpponent.cardBelongs(cardData)) {
+            this.charactersOpponent.layoutCards();
+            return;
+        }
+        if (this.supportPlayer.cardBelongs(cardData)) {
+            this.supportPlayer.layoutCards();
+            return;
+        }
+        if (this.supportOpponent.cardBelongs(cardData)) {
+            this.supportOpponent.layoutCards();
+            return;
+        }
+        if (this.hand != null)
+            if (this.hand.cardBelongs(cardData)) {
+                this.hand.layoutCards();
+                return;
+            }
+        if (this.shadow.cardBelongs(cardData)) {
+            this.shadow.layoutCards();
+            return;
+        }
+
+        if (this.skirmishFellowshipGroup.cardBelongs(cardData)) {
+            this.skirmishFellowshipGroup.layoutCards();
+            return;
+        }
+        if (this.skirmishShadowGroup.cardBelongs(cardData)) {
+            this.skirmishShadowGroup.layoutCards();
+            return;
+        }
+
+        for (var characterId in this.shadowAssignGroups) {
+            if (this.shadowAssignGroups.hasOwnProperty(characterId)) {
+                if (this.shadowAssignGroups[characterId].cardBelongs(cardData)) {
+                    this.shadowAssignGroups[characterId].layoutCards();
+                    return;
+                }
+                if (this.freePeopleAssignGroups[characterId].cardBelongs(cardData)) {
+                    this.freePeopleAssignGroups[characterId].layoutCards();
+                    return;
+                }
+            }
+        }
+    },
+
     initializeGameUI: function() {
         this.advPathGroup = new AdvPathCardGroup($("#main"));
 

gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCardGroup.js

@@ -22,6 +22,10 @@ var CardGroup = Class.extend({
         }
     },
 
+    cardBelongs: function(cardData) {
+        return this.belongTestFunc(cardData);
+    },
+
     setBounds: function(x, y, width, height) {
         this.x = x + 3;
         this.y = y + 3;
@@ -39,44 +43,7 @@ var CardGroup = Class.extend({
     layoutCard: function(cardElem, x, y, width, height, index) {
         layoutCardElem(cardElem, x, y, width, height, index);
 
-        var maxDimension = Math.max(width, height);
+        layoutTokens(cardElem);
-
-        var tokenOverlay = $(".tokenOverlay", cardElem);
-
-        var tokenSize = Math.floor(maxDimension / 13) * 2;
-
-        var tokens = cardElem.data("card").tokens;
-        if (tokens != null) {
-            var tokenInColumnMax = 10;
-            var tokenColumns = 0;
-
-            for (var token in tokens)
-                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 tokenCount = tokens[token];
-
-                    var tokenX = (tokenIndex * (width / (tokenColumns + 1))) - (tokenSize / 2);
-                    var tokenInColumnIndex = 0;
-                    for (var i = 0; i < tokenCount; i++) {
-                        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 ++;
-                }
-        }
     }
 });
 
@@ -299,8 +266,6 @@ function layoutCardElem(cardElem, x, y, width, height, index) {
 
     var tokenOverlay = $(".tokenOverlay", cardElem);
     tokenOverlay.css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height});
-    // Remove all existing tokens
-    $(".token", tokenOverlay).remove();
 
     $(".foilOverlay", cardElem).css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height});
 
@@ -314,3 +279,49 @@ function layoutCardElem(cardElem, x, y, width, height, index) {
         for (var i = 0; i < sizeListeners.length; i++)
             sizeListeners[i].sizeChanged(cardElem, width, height);
 }
+
+function layoutTokens(cardElem) {
+    var width = cardElem.width();
+    var height = cardElem.height();
+    var maxDimension = Math.max(width, height);
+
+    var tokenOverlay = $(".tokenOverlay", cardElem);
+
+    var tokenSize = Math.floor(maxDimension / 13) * 2;
+
+    // Remove all existing tokens
+    $(".token", tokenOverlay).remove();
+
+    var tokens = cardElem.data("card").tokens;
+    if (tokens != null) {
+        var tokenInColumnMax = 10;
+        var tokenColumns = 0;
+
+        for (var token in tokens)
+            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 tokenCount = tokens[token];
+
+                var tokenX = (tokenIndex * (width / (tokenColumns + 1))) - (tokenSize / 2);
+                var tokenInColumnIndex = 0;
+                for (var i = 0; i < tokenCount; i++) {
+                    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 ++;
+            }
+    }
+}