X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=www%2Fjs%2Fremoteglot.js;h=3ebba936fc7f1480dc99f954d85ea55360e19454;hb=aed82c12eaa7ae3c093561e29b8b6ec4355cd781;hp=7b030cab1cf491d9aa786fdad89aec19164ae702;hpb=1770f13ae85fae334e7f680e244ad531970a514e;p=remoteglot
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 += '
';
- white_imbalance += '
';
+ 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 += '
';
- black_imbalance += '
';
+ 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.