From bc53c53fedfe3c5514e4a5c01bde99133e7584af Mon Sep 17 00:00:00 2001
From: "Steinar H. Gunderson" <sgunderson@bigfoot.com>
Date: Sat, 16 May 2015 15:46:14 +0200
Subject: [PATCH] Show material imbalances.

---
 www/css/remoteglot.css | 17 +++++++++++++----
 www/index.html         |  4 ++--
 www/js/remoteglot.js   | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index da0a3a6..0931e9a 100644
--- 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 f7792d3..6262e1a 100644
--- 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 5d12c43..d34b4d6 100644
--- 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());
 }
 
 /**
-- 
2.39.2