From aed82c12eaa7ae3c093561e29b8b6ec4355cd781 Mon Sep 17 00:00:00 2001
From: "Steinar H. Gunderson" <sgunderson@bigfoot.com>
Date: Sun, 25 Dec 2022 15:47:47 +0100
Subject: [PATCH] Remove innerHTML from imbalance piece display.

---
 www/css/remoteglot.css |  5 +++++
 www/js/remoteglot.js   | 34 ++++++++++++++++++++++++++--------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/www/css/remoteglot.css b/www/css/remoteglot.css
index 3be6850..2b113af 100644
--- a/www/css/remoteglot.css
+++ b/www/css/remoteglot.css
@@ -208,6 +208,11 @@ a.move:hover {
 	filter: invert(1);
 }
 
+.imbalance-piece, .imbalance-inverted-piece {
+	width: 15px;
+	height: 15px;
+}
+
 @media (prefers-color-scheme: dark) {
 
 :root {
diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index 7b030ca..3ebba93 100644
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -1836,20 +1836,38 @@ let update_imbalance = function(fen) {
 			}
 		}
 	}
-	let white_imbalance = '';
-	let black_imbalance = '';
+	let white_imbalance = document.getElementById('whiteimbalance');
+	let black_imbalance = document.getElementById('blackimbalance');
+	white_imbalance.textContent = '';
+	black_imbalance.textContent = '';
 	for (let piece in imbalance) {
 		for (let i = 0; i < imbalance[piece]; ++i) {
-			white_imbalance += '<img src="' + svg_pieces['w' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-piece">';
-			white_imbalance += '<img src="' + svg_pieces['b' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-inverted-piece">';
+			let i1 = document.createElement('img');
+			i1.src = svg_pieces['w' + piece.toUpperCase()];
+			i1.setAttribute('alt', piece.toUpperCase());
+			i1.classList.add('imbalance-piece');
+			white_imbalance.appendChild(i1);
+
+			let i2 = document.createElement('img');
+			i2.src = svg_pieces['b' + piece.toUpperCase()];
+			i2.setAttribute('alt', piece.toUpperCase());
+			i2.classList.add('imbalance-inverted-piece');
+			white_imbalance.appendChild(i2);
 		}
 		for (let i = 0; i < -imbalance[piece]; ++i) {
-			black_imbalance += '<img src="' + svg_pieces['b' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-piece">';
-			black_imbalance += '<img src="' + svg_pieces['w' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-inverted-piece">';
+			let i1 = document.createElement('img');
+			i1.src = svg_pieces['b' + piece.toUpperCase()];
+			i1.setAttribute('alt', piece.toUpperCase());
+			i1.classList.add('imbalance-piece');
+			black_imbalance.appendChild(i1);
+
+			let i2 = document.createElement('img');
+			i2.src = svg_pieces['w' + piece.toUpperCase()];
+			i2.setAttribute('alt', piece.toUpperCase());
+			i2.classList.add('imbalance-inverted-piece');
+			black_imbalance.appendChild(i2);
 		}
 	}
-	document.getElementById('whiteimbalance').innerHTML = white_imbalance;
-	document.getElementById('blackimbalance').innerHTML = black_imbalance;
 }
 
 /** Mark the currently selected move in red.
-- 
2.39.2