- Changed the display of deck, hand, discard, dead pile count and added display of threats.

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

@@ -11,6 +11,65 @@ body {
     font-size: 12px;
 }
 
+.deckSize {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 220%;
+    font-weight: bolder;
+    width: 42px;
+    height: 42px;
+    background-image: url('images/deck-42.png');
+}
+
+.handSize {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 220%;
+    font-weight: bolder;
+    width: 42px;
+    height: 42px;
+    background-image: url('images/hand-42.png');
+}
+
+.threatsSize {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 220%;
+    font-weight: bolder;
+    width: 42px;
+    height: 42px;
+    background-image: url('images/threats-42.png');
+}
+
+.discardSize {
+    display: none;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 220%;
+    font-weight: bolder;
+    width: 42px;
+    height: 42px;
+    background-image: url('images/discard-42.png');
+}
+
+.deadPileSize {
+    display: none;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 220%;
+    font-weight: bolder;
+    width: 42px;
+    height: 42px;
+    background-image: url('images/deadPile-42.png');
+}
+
+.showStats {
+    display: table-cell;
+}
+
 .borderOverlay {
     border: solid #000000;
 }
@@ -31,7 +90,6 @@ body {
 
 .cardStrength {
     text-align: center;
-    vertical-align: middle;
     background-color: #7a6a53;
     opacity: 1;
     font-weight: bolder;
@@ -40,7 +98,6 @@ body {
 
 .cardVitality {
     text-align: center;
-    vertical-align: middle;
     background-color: #8a1f0d;
     opacity: 1;
     font-weight: bolder;
@@ -49,7 +106,6 @@ body {
 
 .cardSiteNumber {
     text-align: center;
-    vertical-align: middle;
     background-color: #877a4e;
     opacity: 1;
     font-weight: bolder;
@@ -71,12 +127,12 @@ body {
 }
 
 .fpArchery {
-    display: inline-block;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
     background-image: url('images/fpArchery.png');
     background-repeat: no-repeat;
     color: #007777;
-    text-align: center;
-    vertical-align: middle;
     font-size: 200%;
     font-weight: bolder;
     width: 30px;
@@ -84,12 +140,12 @@ body {
 }
 
 .shadowArchery {
-    display: inline-block;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
     background-image: url('images/shadowArchery.png');
     background-repeat: no-repeat;
     color: #007777;
-    text-align: center;
-    vertical-align: middle;
     font-size: 200%;
     font-weight: bolder;
     width: 30px;
@@ -97,12 +153,12 @@ body {
 }
 
 .move {
-    display: inline-block;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
     background-image: url('images/move.png');
     background-repeat: no-repeat;
     color: #007777;
-    text-align: center;
-    vertical-align: middle;
     font-size: 200%;
     font-weight: bolder;
     width: 30px;
@@ -111,10 +167,8 @@ body {
 
 .player {
     color: #ffffff;
-}
-
-.player {
-    color: #ffffff;
+    position: relative;
+    z-index: 50;
 }
 
 .player.current {
@@ -123,20 +177,23 @@ body {
 }
 
 .playerStats {
-    font-size: 70%;
+    color: #ffffff;
 }
 
 .playerStats .clickable {
-    color: #7f7fff;
-    text-decoration: underline;
+    color: #9f9fff;
     cursor: pointer;
 }
 
 .phase {
+    display: inline-table;
+    padding: 2px;
     color: #ffffff;
 }
 
 .phase.current {
+    display: inline-table;
+    padding: 2px;
     background-color: #ffffff;
     color: #000000;
 }

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

@@ -2,6 +2,7 @@
 <b>13 Nov. 2011</b>
 - "Uruk Stormer" now allows to take control of a site, if any other Uruk-hai kills a companion or ally.
 - "Citadel of Minas Tirith" no longer allows you to heal companion if non-Gondor companion lost a skirmish.
+- Changed the display of deck, hand, discard, dead pile count and added display of threats.
 
 <b>11 Nov. 2011</b>
 - "Eowyn, Daughter of Eomund" now allows to play possession from hand, rather than discard with her ability.

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

@@ -739,11 +739,21 @@ var GameAnimations = Class.extend({
                         var dead = playerZone.getAttribute("DEAD");
                         var deck = playerZone.getAttribute("DECK");
 
-                        $("#hand" + that.game.getPlayerIndex(playerId)).text("Hand: " + hand);
-                        $("#discard" + that.game.getPlayerIndex(playerId)).text("Discard: " + discard);
-                        $("#deadPile" + that.game.getPlayerIndex(playerId)).text("Dead pile: " + dead);
-                        $("#deck" + that.game.getPlayerIndex(playerId)).text("Deck: " + deck);
+                        $("#deck" + that.game.getPlayerIndex(playerId)).text(deck);
+                        $("#hand" + that.game.getPlayerIndex(playerId)).text(hand);
+                        $("#discard" + that.game.getPlayerIndex(playerId)).text(discard);
+                        $("#deadPile" + that.game.getPlayerIndex(playerId)).text(dead);
                     }
+
+                    var playerThreats = element.getElementsByTagName("threats")
+                    for (var i = 0; i < playerThreats.length; i++) {
+                        var playerThreat = playerThreats[i];
+
+                        var playerId = playerThreat.getAttribute("name");
+                        var value = playerThreat.getAttribute("value");
+                        $("#threats" + that.game.getPlayerIndex(playerId)).text(value);
+                    }
+
                     if (that.game.fpStrengthDiv != null) {
                         that.game.fpStrengthDiv.text(element.getAttribute("fellowshipStrength"));
                         var fpOverwhelmed = element.getAttribute("fpOverwhelmed");

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

@@ -215,22 +215,46 @@ var GempLotrGameUI = Class.extend({
 
         for (var i = 0; i < this.allPlayerIds.length; i++) {
             this.gameStateElem.append("<div class='player'>" + this.allPlayerIds[i] + "<div id='clock" + i + "' class='clock'></div>"
-                    + "<div class='playerStats'><div id='deck" + i + "' style='display: inline;'></div> <div id='hand" + i + "' style='display: inline;'></div> <div id='discard" + i + "' style='display: inline;'></div> <div id='deadPile" + i + "' style='display: inline;'></div></div></div>");
+                    + "<div class='playerStats'><div id='deck" + i + "' class='deckSize'></div><div id='hand" + i + "' class='handSize'></div><div id='threats" + i + "' class='threatsSize'></div><div id='showStats" + i + "' class='showStats'></div><div id='discard" + i + "' class='discardSize'></div><div id='deadPile" + i + "' class='deadPileSize'></div></div></div>");
+
         }
 
-        this.gameStateElem.append("<br>");
-
         this.gameStateElem.append("<div class='twilightPool'>0</div>");
-        this.gameStateElem.append("<div class='phase' id='FELLOWSHIP'>Fellowship</div>");
-        this.gameStateElem.append("<div class='phase' id='SHADOW'>Shadow</div>");
-        this.gameStateElem.append("<div class='phase' id='MANEUVER'>Maneuver</div>");
-        this.gameStateElem.append("<div class='phase' id='ARCHERY'>Archery</div>");
-        this.gameStateElem.append("<div class='phase' id='ASSIGNMENT'>Assignment</div>");
-        this.gameStateElem.append("<div class='phase' id='SKIRMISH'>Skirmish</div>");
-        this.gameStateElem.append("<div class='phase' id='REGROUP'>Regroup</div>");
+        this.gameStateElem.append("<div class='phase' id='FELLOWSHIP'>Fel</div>");
+        this.gameStateElem.append("<div class='phase' id='SHADOW'>Sh</div>");
+        this.gameStateElem.append("<div class='phase' id='MANEUVER'>Man</div>");
+        this.gameStateElem.append("<div class='phase' id='ARCHERY'>Arc</div>");
+        this.gameStateElem.append("<div class='phase' id='ASSIGNMENT'>As</div>");
+        this.gameStateElem.append("<div class='phase' id='SKIRMISH'>Sk</div>");
+        this.gameStateElem.append("<div class='phase' id='REGROUP'>Re</div>");
 
         $("#main").append(this.gameStateElem);
 
+        for (var i = 0; i < this.allPlayerIds.length; i++) {
+            var showBut = $("<div>+</div>").button().click(
+                    (
+                            function(playerIndex) {
+                                return function() {
+                                    $(".player").each(
+                                            function(index) {
+                                                if (index == playerIndex) {
+                                                    if ($(this).hasClass("opened")) {
+                                                        $(this).removeClass("opened").css({width: 150 - that.padding});
+                                                        $("#discard" + playerIndex).css({display: "none"});
+                                                        $("#deadPile" + playerIndex).css({display: "none"});
+                                                    } else {
+                                                        $(this).addClass("opened").css({width: 150 - that.padding + 80});
+                                                        $("#discard" + playerIndex).css({display: "table-cell"});
+                                                        $("#deadPile" + playerIndex).css({display: "table-cell"});
+                                                    }
+                                                }
+                                            });
+                                };
+                            })(i));
+
+            $("#showStats" + i).append(showBut);
+        }
+
         if (!this.spectatorMode)
             $("#discard" + this.getPlayerIndex(this.bottomPlayerId)).addClass("clickable").click(
                     (function(index) {