Remove innerHTML from imbalance piece display.

[remoteglot] / www / js / remoteglot.js

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index ee7495f1b138329f857fe0db1e9e8d2a58461176..3ebba936fc7f1480dc99f954d85ea55360e19454 100644 (file)
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -897,8 +897,11 @@ let update_refutation_lines = function() {
                        continue;
                }
 
-               let move = "<a class=\"move\" href=\"javascript:show_line(" + display_lines.length + ", " + 0 + ");\">" + line['move'] + "</a>";
-               move_td.innerHTML = move;
+               let move_link = document.createElement("a");
+               move_link.classList.add("move");
+               move_link.setAttribute("href", "javascript:show_line(" + display_lines.length + ", 0)");
+               move_link.textContent = line['move'];
+               move_td.appendChild(move_link);
 
                let score_td = document.createElement("td");
                tr.appendChild(score_td);
@@ -1223,6 +1226,9 @@ let update_board = function() {
                return;
        }
 
+       if (clock_timer !== null) {
+               clearTimeout(clock_timer);
+       }
        update_clock();
 
        // The score.
@@ -1494,7 +1500,7 @@ let update_num_viewers = function(num_viewers) {
 }
 
 let update_clock = function() {
-       clearTimeout(clock_timer);
+       clock_timer = null;
 
        let data = displayed_analysis_data || current_analysis_data;
        if (!data) return;
@@ -1830,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.