From a20aebd92091402689d33d2dddf6019137c4a510 Mon Sep 17 00:00:00 2001 From: "Steinar H. Gunderson" Date: Thu, 29 Dec 2022 00:45:38 +0100 Subject: [PATCH] Do not rely on innerHTML for print_pv(). --- www/js/remoteglot.js | 82 ++++++++++++++++++++++++++++---------------- 1 file changed, 53 insertions(+), 29 deletions(-) diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js index a402d00..5c769f4 100644 --- a/www/js/remoteglot.js +++ b/www/js/remoteglot.js @@ -732,59 +732,74 @@ let print_pv = function(line_num, splicepos, opt_limit, opt_showlast) { } } - let ret = ''; + let ret = document.createDocumentFragment(); let i = 0; let in_tb = false; + let link = document.createElement('a'); + link.className = 'move'; if (opt_limit && opt_showlast && pv.length > opt_limit) { // Truncate the PV at the beginning (instead of at the end). // We assume here that toplay is 'W'. We also assume that if // opt_showlast is set, then it is the history, and thus, // the UI should be to expand the history. - ret = '(…) '; + ret.appendChild(document.createTextNode('(')); + link.href = 'javascript:collapse_history(false)'; + link.textContent = '…'; + ret.appendChild(link); + ret.appendChild(document.createTextNode(') ')); i = pv.length - opt_limit; if (i % 2 == 1) { ++i; } move_num += i / 2; } else if (toplay == 'B' && pv.length > 0) { + ret.appendChild(document.createTextNode(move_num + '. … ')); let move = ""; if (splicepos === 0) { - move += "(TB: "; + ret.appendChild(document.createTextNode('(TB: ')); in_tb = true; } - move += "" + pv[0] + ""; - ret = move_num + '. … ' + move; + link.setAttribute('id', 'automove' + line_num + '-0'); + link.href = 'javascript:show_line(' + line_num + ', ' + 0 + ');'; + link.textContent = pv[0]; + ret.appendChild(link); toplay = 'W'; ++i; ++move_num; } for ( ; i < pv.length; ++i) { - let move = "" + pv[i] + ""; + link = document.createElement('a'); + link.className = 'move'; + link.setAttribute('id', 'automove' + line_num + '-' + i); + link.textContent = pv[i]; + link.href = 'javascript:show_line(' + line_num + ', ' + i + ');'; if (splicepos === i) { - ret += " (TB: "; + ret.appendChild(document.createTextNode('(TB: ')); in_tb = true; } if (toplay == 'W') { if (i > opt_limit && !opt_showlast) { if (in_tb) { - ret += ")"; + ret.appendChild(document.createTextNode(')')); } - return ret + ' (…)'; + ret.appendChild(document.createTextNode(' (…)')); + return ret; } if (ret != '') { - ret += ' '; + ret.appendChild(document.createTextNode(' ')); } - ret += move_num + '. ' + move; + ret.appendChild(document.createTextNode(move_num + '. ')); ++move_num; toplay = 'B'; } else { - ret += ' ' + move; + ret.appendChild(document.createTextNode(' ')); toplay = 'W'; } + ret.appendChild(link); } if (in_tb) { - ret += ")"; + ret.appendChild(document.createTextNode(')')); } return ret; } @@ -802,14 +817,20 @@ let update_board_highlight = function() { } let update_history = function() { + let history = document.getElementById('history'); if (display_lines[0] === null || display_lines[0].pv.length == 0) { - document.getElementById("history").innerHTML = "No history"; + history.textContent = 'No history'; } else if (truncate_display_history) { - document.getElementById("history").innerHTML = print_pv(0, null, 8, true); + history.replaceChildren(print_pv(0, null, 8, true)); } else { - document.getElementById("history").innerHTML = - '(collapse) ' + - print_pv(0, null); + history.textContent = '('; + let link = document.createElement('a'); + link.className = 'move'; + link.href = 'javascript:collapse_history(true)'; + link.textContent = 'collapse'; + history.appendChild(link); + history.appendChild(document.createTextNode(') ')); + history.append(print_pv(0, null)); } } @@ -876,10 +897,13 @@ let update_refutation_lines = function() { if (line['pv'].length == 0) { // Not found, so just make a one-move PV. - let move = "" + line['move'] + ""; - move_td.innerHTML = move; - let score_td = document.createElement("td"); + let link = document.createElement('a'); + link.className = 'move'; + link.href = 'javascript:show_line(' + display_lines.length + ', ' + 0 + ')'; + link.textContent = line['move']; + move_td.replaceChildren(link); + let score_td = document.createElement("td"); score_td.classList.add("score"); score_td.textContent = "—"; tr.appendChild(score_td); @@ -892,7 +916,7 @@ let update_refutation_lines = function() { let pv_td = document.createElement("td"); tr.appendChild(pv_td); pv_td.classList.add("pv"); - pv_td.innerHTML = add_pv(base_fen, base_line.concat([ line['move'] ]), move_num, toplay, scores, start_display_move_num); + pv_td.append(add_pv(base_fen, base_line.concat([ line['move'] ]), move_num, toplay, scores, start_display_move_num)); tbl.append(tr); continue; @@ -921,7 +945,7 @@ let update_refutation_lines = function() { let pv_td = document.createElement("td"); tr.appendChild(pv_td); pv_td.classList.add("pv"); - pv_td.innerHTML = add_pv(base_fen, base_line.concat(line['pv']), move_num, toplay, scores, start_display_move_num, 10); + pv_td.append(add_pv(base_fen, base_line.concat(line['pv']), move_num, toplay, scores, start_display_move_num, 10)); tbl.append(tr); } @@ -1215,7 +1239,7 @@ let update_board = function() { document.getElementById("score").textContent = "No analysis for this move"; document.getElementById("pvtitle").textContent = "PV:"; document.getElementById("pv").replaceChildren(); - document.getElementById("searchstats").innerHTML = " "; + document.getElementById("searchstats").textContent = " "; document.getElementById("refutationlines").replaceChildren(); document.getElementById("whiteclock").replaceChildren(); document.getElementById("blackclock").replaceChildren(); @@ -1254,7 +1278,7 @@ let update_board = function() { // The search stats. if (data['searchstats']) { - document.getElementById("searchstats").innerHTML = data['searchstats']; + document.getElementById("searchstats").textContent = data['searchstats']; } else if (data['tablebase'] == 1) { document.getElementById("searchstats").textContent = "Tablebase result"; } else if (data['nodes'] && data['nps'] && data['depth']) { @@ -1283,7 +1307,7 @@ let update_board = function() { document.getElementById("pvtitle").textContent = "PV:"; let scores = [{ first_move: -1, score: data['score'] }]; - document.getElementById("pv").innerHTML = add_pv(data['position']['fen'], data['pv'], data['position']['move_num'], data['position']['toplay'], scores, 0); + document.getElementById("pv").replaceChildren(add_pv(data['position']['fen'], data['pv'], data['position']['move_num'], data['position']['toplay'], scores, 0)); // Update the PV arrow. clear_arrows(); @@ -1889,7 +1913,7 @@ let update_move_highlight = function() { document.getElementById("pvtitle").textContent = "Exploring:"; current_display_line.start_display_move_num = 0; display_lines.push(current_display_line); - document.getElementById("pv").innerHTML = print_pv(display_lines.length - 1, null); // FIXME + document.getElementById("pv").append(print_pv(display_lines.length - 1, null)); // FIXME display_line_num = display_lines.length - 1; // Clear out the PV, so it's not selected by anything later. @@ -1949,12 +1973,12 @@ let update_displayed_line = function() { document.getElementById("linemsg").style.display = 'none'; if (current_display_move <= 0) { - document.getElementById("prevmove").innerHTML = "Previous"; + document.getElementById("prevmove").textContent = "Previous"; } else { document.getElementById("prevmove").innerHTML = "Previous"; } if (current_display_move == current_display_line.pv.length - 1) { - document.getElementById("nextmove").innerHTML = "Next"; + document.getElementById("nextmove").textContent = "Next"; } else { document.getElementById("nextmove").innerHTML = "Next"; } -- 2.39.2