Adding "chess-clock"s.

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

@@ -88,6 +88,11 @@
         #settingsBox label {
             font-size: 70%;
         }
+
+        .clock {
+            float: right;
+            font-size: 70%;
+        }
     </style>
     <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
     <link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">

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

@@ -1,8 +1,6 @@
 var GempLotrGameUI = Class.extend({
     padding: 5,
 
-    getCardModifiersFunction: null,
-
     selfPlayerId: null,
     currentPlayerId: null,
     allPlayerIds: null,
@@ -111,8 +109,9 @@ var GempLotrGameUI = Class.extend({
         this.gameStateElem.css({"border-radius": "7px"});
 
         this.gameStateElem.append("<b>Players:</b><br>");
-        for (var i = 0; i < this.allPlayerIds.length; i++)
+        for (var i = 0; i < this.allPlayerIds.length; i++) {
-            this.gameStateElem.append("<div class='player'>" + this.allPlayerIds[i] + "</div>");
+            this.gameStateElem.append("<div class='player'>" + this.allPlayerIds[i] + "<div id='clock" + i + "' class='clock'></div></div>");
+        }
 
         this.gameStateElem.append("<br>");
 
@@ -437,6 +436,25 @@ var GempLotrGameUI = Class.extend({
             this.shadowStrengthDiv.text(skirmish[0].getAttribute("shadowStrength"));
         }
 
+        var clocks = element.getElementsByTagName("clocks")[0].getElementsByTagName("clock");
+        for (var i = 0; i < clocks.length; i++) {
+            var clock = clocks[i];
+            var participantId = clock.getAttribute("participantId");
+            var index = -1;
+            for (var plId = 0; plId < this.allPlayerIds.length; plId++)
+                if (this.allPlayerIds[plId] == participantId)
+                    index = plId;
+
+            var value = parseInt(clock.childNodes[0].nodeValue);
+
+            var sign = (value < 0) ? "-" : "";
+            value = Math.abs(value);
+            var minutes = Math.floor(value / 60);
+            var seconds = value % 60;
+
+            $("#clock" + index).text(sign + minutes + ":" + seconds);
+        }
+
         if (gameEvents.length > 0)
             this.layoutUI(true);