Adding foil look to cards.

gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild.html

@@ -15,6 +15,10 @@
             border: 2px solid #000000;
         }
 
+        .foilOverlay {
+            opacity: 0.2;
+        }
+
         .selectableCard > .borderOverlay {
             border: 2px solid #00ff00;
             cursor: pointer;

gemp-lotr/gemp-lotr-web/src/main/webapp/game.html

@@ -15,6 +15,10 @@
             border: solid #000000;
         }
 
+        .foilOverlay {
+            opacity: 0.2;
+        }
+
         .selectableCard > .borderOverlay {
             border-color: #00af00;
             cursor: pointer;

gemp-lotr/gemp-lotr-web/src/main/webapp/includes/changeLog.html

@@ -1,4 +1,4 @@
-<pre>
+<pre style="font-size:80%">
 22 Sept. 2011
 - Changed the main page after logging in to give access to additional documents.
 - Changed the play event animation so that player might actually recognize the card.

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

@@ -64,7 +64,7 @@ var ChatBoxUI = Class.extend({
         if (msgClass == undefined)
             msgClass = "chatMessage";
         this.chatMessagesDiv.append("<div class='" + msgClass + "'>" + message + "</div>");
-        if ($("div", this.chatMessagesDiv).length > 50) {
+        if ($("div", this.chatMessagesDiv).length > 100) {
             $("div", this.chatMessagesDiv).first().remove();
         }
         this.chatMessagesDiv.prop({ scrollTop: this.chatMessagesDiv.prop("scrollHeight") });

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

@@ -296,7 +296,7 @@ var GempLotrDeckBuildingUI = Class.extend({
 
     addCardToContainer: function(blueprintId, zone, container) {
         var card = new Card(blueprintId, zone, "deck", "player");
-        var cardDiv = createCardDiv(card.imageUrl, null);
+        var cardDiv = createCardDiv(card.imageUrl, null, card.isFoil());
         cardDiv.data("card", card);
         container.append(cardDiv);
         this.layoutUI();
@@ -428,7 +428,7 @@ var GempLotrDeckBuildingUI = Class.extend({
                 var blueprintId = cardElem.getAttribute("blueprintId");
                 var count = cardElem.getAttribute("count");
                 var card = new Card(blueprintId, "collection", "collection" + i, "player");
-                var cardDiv = createCardDiv(card.imageUrl, null);
+                var cardDiv = createCardDiv(card.imageUrl, null, card.isFoil());
                 cardDiv.data("card", card);
                 cardDiv.addClass("cardInCollection");
                 if (this.normalCollectionDiv.is(":visible"))

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

@@ -721,7 +721,7 @@ var GempLotrGameUI = Class.extend({
         else
             card = new Card(blueprintId, zone, cardId, participantId);
 
-        var cardDiv = this.createCardDiv(card);
+        var cardDiv = this.createCardDiv(card, null, card.isFoil());
         if (zone == "DISCARD")
             this.discardPileDialogs[participantId].append(cardDiv);
         else if (zone == "DEAD")
@@ -995,8 +995,8 @@ var GempLotrGameUI = Class.extend({
         this.smallDialog.dialog("open");
     },
 
-    createCardDiv: function(card, text) {
-        var cardDiv = createCardDiv(card.imageUrl, text);
+    createCardDiv: function(card, text, foil) {
+        var cardDiv = createCardDiv(card.imageUrl, text, foil);
         cardDiv.data("card", card);
 
         var that = this;

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

@@ -43,6 +43,8 @@ var CardGroup = Class.extend({
         tokenOverlay.css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height})
                 .html("");
 
+        $(".foilOverlay", cardElem).css({position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height});
+
         var maxDimension = Math.max(width, height);
         var borderWidth = Math.floor(maxDimension / 30);
 

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

@@ -3,6 +3,7 @@ var cardScale = 357 / 497;
 
 var Card = Class.extend({
     blueprintId: null,
+    foil: null,
     horizontal: null,
     imageUrl: null,
     zone: null,
@@ -12,7 +13,14 @@ var Card = Class.extend({
     attachedCards: null,
 
     init: function(blueprintId, zone, cardId, owner, siteNumber) {
+        var len = blueprintId.length;
+        this.foil = blueprintId.substring(len - 1, len) == "*";
+
+        if (this.foil)
+            blueprintId = blueprintId.substring(0, len - 1);
+
         this.blueprintId = blueprintId;
+
         this.zone = zone;
         this.cardId = cardId;
         this.owner = owner;
@@ -37,6 +45,10 @@ var Card = Class.extend({
         }
     },
 
+    isFoil: function() {
+        return this.foil;
+    },
+
     isHorizontal: function(blueprintId) {
         var separator = blueprintId.indexOf("_");
         var setNo = parseInt(blueprintId.substr(0, separator));
@@ -80,8 +92,13 @@ var Card = Class.extend({
     }
 });
 
-function createCardDiv(image, text) {
+function createCardDiv(image, text, foil) {
     var cardDiv = $("<div class='card'><img src='" + image + "' width='100%' height='100%'>" + ((text != null) ? text : "") + "</div>");
+    if (foil) {
+        var foilDiv = $("<div class='foilOverlay'><img src='/gemp-lotr/images/holo.jpg' width='100%' height='100%'></div>");
+        cardDiv.append(foilDiv);
+    }
+
     var overlayDiv = $("<div class='tokenOverlay'></div>");
     cardDiv.append(overlayDiv);
     var borderDiv = $("<div class='borderOverlay'><img class='actionArea' src='/gemp-lotr/images/pixel.png' width='100%' height='100%'></div>");