Show material imbalances.

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index da0a3a6051fb2cd903b23cbe8bf17580318e056a..0931e9ac162c92cfd516b551cd0001d556a5cdc0 100644 (file)
--- a/www/css/remoteglot.css
+++ b/www/css/remoteglot.css
@@ -94,15 +94,24 @@ p {
        width: auto;
        text-align: center;
 }
-#whiteclock {
+#whiteinfo {
        float: left;
-       width: 20%;
        text-align: left;
+       min-width: 20%;
 }
-#blackclock {
+#blackinfo {
        float: right;
-       width: 20%;
        text-align: right;
+       min-width: 20%;
+       margin-right: 5px;
+}
+#whiteimbalance img, #blackimbalance img {
+       vertical-align: text-top;
+}
+#whiteimbalance {
+       margin-left: 5px;
+}
+#blackimbalance {
        margin-right: 5px;
 }
 .running-clock {

diff --git a/www/index.html b/www/index.html
index f7792d306ec205a59f83181e1946d8fdf589ae6e..6262e1a6c2ce1dbb30b4ce51cc0d6bc03aa18776 100644 (file)
--- a/www/index.html
+++ b/www/index.html
@@ -18,8 +18,8 @@
 <div id="boardcontainer">
   <div id="board"></div>
   <div id="bottompanel">
-    <p id="whiteclock"></p>
-    <p id="blackclock"></p>
+    <p id="whiteinfo"><span id="whiteclock"></span><span id="whiteimbalance"></span></p>
+    <p id="blackinfo"><span id="blackimbalance"></span><span id="blackclock"></span></p>
     <p id="numviewers"></p>
   </div>
 </div>

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index 5d12c43709dcda3da8f56d5de9774fd40054bf5c..d34b4d6bf8767675952e892f264e11641159abcf 100644 (file)
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -1099,6 +1099,41 @@ var update_historic_analysis = function() {
        });
 }
 
+/**
+ * @param {string} fen
+ */
+var update_imbalance = function(fen) {
+       var hiddenboard = new Chess(fen);
+       var imbalance = {'k': 0, 'q': 0, 'r': 0, 'b': 0, 'n': 0, 'p': 0};
+       for (var row = 0; row < 8; ++row) {
+               for (var col = 0; col < 8; ++col) {
+                       var col_text = String.fromCharCode('a1'.charCodeAt(0) + col);
+                       var row_text = String.fromCharCode('a1'.charCodeAt(1) + row);
+                       var square = col_text + row_text;
+                       var contents = hiddenboard.get(square);
+                       if (contents !== null) {
+                               if (contents.color === 'w') {
+                                       ++imbalance[contents.type];
+                               } else {
+                                       --imbalance[contents.type];
+                               }
+                       }
+               }
+       }
+       var white_imbalance = '';
+       var black_imbalance = '';
+       for (var piece in imbalance) {
+               for (var i = 0; i < imbalance[piece]; ++i) {
+                       white_imbalance += '<img src="img/chesspieces/wikipedia/w' + piece.toUpperCase() + '.png" alt="" style="width: 15px;height: 15px;">';
+               }
+               for (var i = 0; i < -imbalance[piece]; ++i) {
+                       black_imbalance += '<img src="img/chesspieces/wikipedia/b' + piece.toUpperCase() + '.png" alt="" style="width: 15px;height: 15px;">';
+               }
+       }
+       $('#whiteimbalance').html(white_imbalance);
+       $('#blackimbalance').html(black_imbalance);
+}
+
 var update_displayed_line = function() {
        if (highlighted_move !== null) {
                highlighted_move.removeClass('highlight'); 
@@ -1107,6 +1142,7 @@ var update_displayed_line = function() {
                $("#linenav").hide();
                $("#linemsg").show();
                board.position(fen);
+               update_imbalance(fen);
                return;
        }
 
@@ -1129,6 +1165,7 @@ var update_displayed_line = function() {
 
        var hiddenboard = chess_from(current_display_line.start_fen, current_display_line.pretty_pv, current_display_move);
        board.position(hiddenboard.fen());
+       update_imbalance(hiddenboard.fen());
 }
 
 /**