Fix click-to-drag and click-to-suggest post-jQuery.

[remoteglot] / www / js / remoteglot.js

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index f4581cf72644032c0b4a6515e1320c7926648222..0aa071aa35a6d88fe6527199eaa3d444a6595a3a 100644 (file)
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -839,6 +839,8 @@ let update_refutation_lines = function() {
        tbl.replaceChildren();
 
        if (display_lines.length < 2) {
+               // Update the move highlight, as we've rewritten all the HTML.
+               update_move_highlight();
                return;
        }
 
@@ -1226,6 +1228,9 @@ let update_board = function() {
                return;
        }
 
+       if (clock_timer !== null) {
+               clearTimeout(clock_timer);
+       }
        update_clock();
 
        // The score.
@@ -1497,7 +1502,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;
@@ -1833,20 +1838,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.
@@ -1999,7 +2022,11 @@ let explore_hash = function(fen) {
        fetch(backend_hash_url + "?fen=" + fen, { signal })
                .then((response) => response.json())
                .then((data) => { show_explore_hash_results(data, fen); })
-               .catch((err) => {});
+               .catch((err) => {
+                       // Truncate the lines, since we already cleared the display.
+                       display_lines = [ display_lines[0], display_lines[1] ];
+                       update_move_highlight();
+               });
 }
 
 /** Process the JSON response from a hash probe request.
@@ -2036,12 +2063,12 @@ let onDragStart = function(source, piece, position, orientation) {
 }
 
 let mousedownSquare = function(e) {
-       if (!e.target || !e.target.matches('.square-55d63')) {
+       if (!e.target || !e.target.closest('.square-55d63')) {
                return;
        }
 
        reverse_dragging_from = null;
-       let square = e.target.getAttribute('data-square');
+       let square = e.target.closest('.square-55d63').getAttribute('data-square');
 
        let pseudogame = new Chess(display_fen);
        if (pseudogame.game_over() === true) {
@@ -2066,13 +2093,13 @@ let mousedownSquare = function(e) {
 }
 
 let mouseupSquare = function(e) {
-       if (!e.target || !e.target.matches('.square-55d63')) {
+       if (!e.target || !e.target.closest('.square-55d63')) {
                return;
        }
        if (reverse_dragging_from === null) {
                return;
        }
-       let source = e.target.getAttribute('data-square');
+       let source = e.target.closest('.square-55d63').getAttribute('data-square');
        let target = reverse_dragging_from;
        reverse_dragging_from = null;
        if (onDrop(source, target) !== 'snapback') {
@@ -2201,7 +2228,7 @@ let onSnapEnd = function(source, target) {
                }
                let line = display_lines[i];
                if (line.pv[line.start_display_move_num] === move.san) {
-                       show_line(i, line.start_display_move_num);
+                       show_line(i, 0);
                        return;
                }
        }