X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=www%2Fjs%2Fremoteglot.js;h=ae522e26113c9869d61ef81d47bce9d4f046c4d7;hb=0b8e23ee197dcc239a1ea0d818b541cba36b98b6;hp=5314a5681dbbbfbf7c589cd253b1179388988777;hpb=ddeb2eaf98778f23b624212fa100db79a8be8560;p=remoteglot diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js index 5314a56..ae522e2 100644 --- a/www/js/remoteglot.js +++ b/www/js/remoteglot.js @@ -504,12 +504,11 @@ function position_arrow(arrow) { return; } - let board_width = parseInt(document.querySelector(".board-b72b1").style.width, 10); - let zoom_factor = board_width / 400.0; - let line_width = arrow.line_width * zoom_factor; - let arrow_size = arrow.arrow_size * zoom_factor; + // We always draw as if the board is 400x400, the viewBox will adjust that for us + let line_width = arrow.line_width; + let arrow_size = arrow.arrow_size; - let square_width = board_width / 8; + let square_width = 400 / 8; let from_y, to_y, from_x, to_x; if (board.orientation() === 'black') { from_y = (arrow.from_row + 0.5)*square_width; @@ -526,10 +525,9 @@ function position_arrow(arrow) { let SVG_NS = "http://www.w3.org/2000/svg"; let XHTML_NS = "http://www.w3.org/1999/xhtml"; let svg = document.createElementNS(SVG_NS, "svg"); - svg.setAttribute("width", board_width); - svg.setAttribute("height", board_width); - svg.setAttribute("style", "position: absolute"); - svg.setAttribute("position", "absolute"); + svg.setAttribute("width", "100%"); + svg.setAttribute("height", "100%"); + svg.setAttribute("viewBox", "0 0 400 400"); svg.setAttribute("version", "1.1"); svg.setAttribute("class", "c1"); svg.setAttribute("xmlns", XHTML_NS); @@ -570,8 +568,9 @@ function position_arrow(arrow) { head.setAttribute("fill", arrow.fg_color); svg.appendChild(head); - svg.style.top = '2px'; /* Border for .board-b72b1. */ - svg.style.left = '2px'; + svg.style.position = 'absolute'; + svg.style.top = '0px'; /* Border for .board-b72b1. */ + svg.style.left = '0px'; svg.style.pointerEvents = 'none'; document.getElementById('board').appendChild(svg); arrow.svg = svg; @@ -734,6 +733,7 @@ function print_pv(line_num, splicepos, opt_limit, opt_showlast) { let ret = document.createDocumentFragment(); let in_tb = false; + let i = 0; 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 @@ -754,14 +754,10 @@ function print_pv(line_num, splicepos, opt_limit, opt_showlast) { } else if (toplay == 'B' && pv.length > 0) { ret.appendChild(document.createTextNode(move_num + '. … ')); } - for (let i = 0; i < pv.length; ++i) { - let 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 + ');'; + for (; i < pv.length; ++i) { + let prefix = ''; if (splicepos === i) { - ret.appendChild(document.createTextNode('(TB: ')); + prefix = '(TB: '; in_tb = true; } @@ -771,18 +767,25 @@ function print_pv(line_num, splicepos, opt_limit, opt_showlast) { } else if (toplay == 'W') { if (i > opt_limit && !opt_showlast) { if (in_tb) { - ret.appendChild(document.createTextNode(')')); + prefix += ')'; } - ret.appendChild(document.createTextNode(' (…)')); + ret.appendChild(document.createTextNode(prefix + ' (…)')); return ret; } - ret.appendChild(document.createTextNode(' ' + move_num + '. ')); + prefix += ' ' + move_num + '. '; ++move_num; toplay = 'B'; } else { - ret.appendChild(document.createTextNode(' ')); + prefix += ' '; toplay = 'W'; } + ret.appendChild(document.createTextNode(prefix)); + + let 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 + ');'; ret.appendChild(link); } if (in_tb) { @@ -1226,7 +1229,7 @@ function update_board() { document.getElementById("score").textContent = "No analysis for this move"; document.getElementById("pvtitle").textContent = "PV:"; document.getElementById("pv").replaceChildren(); - document.getElementById("searchstats").textContent = " "; + document.getElementById("searchstats").innerHTML = " "; document.getElementById("refutationlines").replaceChildren(); document.getElementById("whiteclock").replaceChildren(); document.getElementById("blackclock").replaceChildren(); @@ -1595,7 +1598,7 @@ function update_clock() { // This matches what DGT clocks do. let show_seconds = (white_clock_ms < 60 * 20 * 1000 || black_clock_ms < 60 * 20 * 1000); - if (color) { + if (color && remaining_ms > 0) { // See when the clock will change next, and update right after that. let next_update_ms; if (show_seconds) { @@ -1900,7 +1903,7 @@ function update_move_highlight() { document.getElementById("pvtitle").textContent = "Exploring:"; current_display_line.start_display_move_num = 0; display_lines.push(current_display_line); - document.getElementById("pv").append(print_pv(display_lines.length - 1, null)); // FIXME + document.getElementById("pv").replaceChildren(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. @@ -2076,12 +2079,12 @@ function onDragStart(source, piece, position, orientation) { } function mousedownSquare(e) { - if (!e.target || !e.target.closest('.square-55d63')) { + if (!e.target || !e.target.getAttribute('data-square')) { return; } reverse_dragging_from = null; - let square = e.target.closest('.square-55d63').getAttribute('data-square'); + let square = e.target.getAttribute('data-square'); let pseudogame = new Chess(display_fen); if (pseudogame.game_over() === true) { @@ -2106,13 +2109,13 @@ function mousedownSquare(e) { } function mouseupSquare(e) { - if (!e.target || !e.target.closest('.square-55d63')) { + if (!e.target || !e.target.getAttribute('data-square')) { return; } if (reverse_dragging_from === null) { return; } - let source = e.target.closest('.square-55d63').getAttribute('data-square'); + let source = e.target.getAttribute('data-square'); let target = reverse_dragging_from; reverse_dragging_from = null; if (onDrop(source, target) !== 'snapback') { @@ -2486,6 +2489,7 @@ function init() { update_board_highlight(); redraw_arrows(); }); + new ResizeObserver(() => update_sparkline(displayed_analysis_data || current_analysis_data)).observe(document.getElementById('scoresparkcontainer')); window.addEventListener('keyup', function(event) { if (event.which == 39) { // Left arrow. next_move();