+let update_board = function() {
+ document.body.style.opacity = null;
+
+ let data = displayed_analysis_data || current_analysis_data;
+ let current_data = current_analysis_data; // Convenience alias.
+
+ display_lines = [];
+
+ // Print the history. This is pretty much the only thing that's
+ // unconditionally taken from current_data (we're not interested in
+ // historic history).
+ if (current_data['position']['history']) {
+ let start = (current_data['position'] && current_data['position']['start_fen']) ? current_data['position']['start_fen'] : 'start';
+ add_pv(start, current_data['position']['history'], 1, 'W', null, 0, 8, true);
+ } else {
+ display_lines.push(null);
+ }
+ update_history();
+
+ // Games currently in progress, if any.
+ if (current_data['games']) {
+ current_games = current_data['games'];
+ possibly_switch_game_from_hash();
+ } else {
+ current_games = null;
+ }
+ update_game_list(current_games);
+
+ // The headline. Names are always fetched from current_data;
+ // the rest can depend a bit.
+ let headline;
+ if (current_data &&
+ current_data['position']['player_w'] && current_data['position']['player_b']) {
+ headline = current_data['position']['player_w'] + '–' +
+ current_data['position']['player_b'] + ', analysis';
+ } else {
+ headline = 'Analysis';
+ }
+
+ // Credits, where applicable. Note that we don't want the footer to change a lot
+ // when e.g. viewing history, so if any of these changed during the game,
+ // use the current one still.
+ if (current_data['using_lomonosov']) {
+ document.getElementById("lomonosov").style.display = null;
+ } else {
+ document.getElementById("lomonosov").style.display = 'none';
+ }
+
+ // Credits: The engine name/version.
+ if (current_data['engine'] && current_data['engine']['name'] !== null) {
+ document.getElementById("engineid").textContent = current_data['engine']['name'];
+ }
+
+ // Credits: The engine URL.
+ if (current_data['engine'] && current_data['engine']['url']) {
+ document.getElementById("engineid").setAttribute("href", current_data['engine']['url']);
+ } else {
+ document.getElementById("engineid").removeAttribute("href");
+ }
+
+ // Credits: Engine details.
+ if (current_data['engine'] && current_data['engine']['details']) {
+ document.getElementById("enginedetails").textContent = " (" + current_data['engine']['details'] + ")";
+ } else {
+ document.getElementById("enginedetails").textContent = "";
+ }
+
+ // Credits: Move source, possibly with URL.
+ if (current_data['move_source'] && current_data['move_source_url']) {
+ document.getElementById("movesource").textContent = "Moves provided by ";
+ let movesource_a = document.createElement("a");
+ movesource_a.setAttribute("href", current_data['move_source_url']);
+ let movesource_text = document.createTextNode(current_data['move_source']);
+ movesource_a.appendChild(movesource_text);
+ let movesource_period = document.createTextNode(".");
+ document.getElementById("movesource").appendChild(movesource_a);
+ document.getElementById("movesource").appendChild(movesource_period);
+ } else if (current_data['move_source']) {
+ document.getElementById("movesource").textContent = "Moves provided by " + current_data['move_source'] + ".";
+ } else {
+ document.getElementById("movesource").textContent = "";
+ }
+
+ let last_move;
+ if (displayed_analysis_data) {
+ // Displaying some non-current position, pick out the last move
+ // from the history. This will work even if the fetch failed.
+ if (current_display_move !== -1) {
+ last_move = format_halfmove_with_number(
+ current_display_line.pv[current_display_move],
+ current_display_move);
+ headline += ' after ' + last_move;
+ }
+ } else if (data['position']['last_move'] !== 'none') {
+ // Find the previous move.
+ let previous_move_num, previous_toplay;
+ if (data['position']['toplay'] == 'B') {
+ previous_move_num = data['position']['move_num'];
+ previous_toplay = 'W';
+ } else {
+ previous_move_num = data['position']['move_num'] - 1;
+ previous_toplay = 'B';
+ }
+
+ last_move = format_move_with_number(
+ data['position']['last_move'],
+ previous_move_num,
+ previous_toplay == 'W');
+ headline += ' after ' + last_move;
+ } else {
+ last_move = null;
+ }
+ document.getElementById("headline").textContent = headline;
+
+ // The <title> contains a very brief headline.
+ let title_elems = [];
+ if (data['position'] && data['position']['result']) {
+ title_elems.push(data['position']['result']);
+ } else if (data['score']) {
+ title_elems.push(format_short_score(data['score']));
+ }
+ if (last_move !== null) {
+ title_elems.push(last_move);
+ }
+
+ if (title_elems.length != 0) {
+ document.title = '(' + title_elems.join(', ') + ') analysis.sesse.net';
+ } else {
+ document.title = 'analysis.sesse.net';
+ }
+
+ // The last move (shown by highlighting the from and to squares).
+ if (data['position'] && data['position']['last_move_uci']) {
+ highlight_from = data['position']['last_move_uci'].substr(0, 2);
+ highlight_to = data['position']['last_move_uci'].substr(2, 2);
+ } else if (current_display_line_is_history && current_display_line && current_display_move >= 0) {
+ // We don't have historic analysis for this position, but we
+ // can reconstruct what the last move was by just replaying
+ // from the start.
+ let position = (data['position'] && data['position']['start_fen']) ? data['position']['start_fen'] : null;
+ let hiddenboard = chess_from(position, current_display_line.pv, current_display_move);
+ let moves = hiddenboard.history({ verbose: true });
+ last_move = moves.pop();
+ highlight_from = last_move.from;
+ highlight_to = last_move.to;
+ } else {
+ highlight_from = highlight_to = undefined;
+ }
+ update_board_highlight();
+
+ if (data['failed']) {
+ document.getElementById("score").textContent = "No analysis for this move";
+ document.getElementById("pvtitle").textContent = "PV:";
+ document.getElementById("pv").replaceChildren();
+ document.getElementById("searchstats").innerHTML = " ";
+ document.getElementById("refutationlines").replaceChildren();
+ document.getElementById("whiteclock").replaceChildren();
+ document.getElementById("blackclock").replaceChildren();
+ refutation_lines = [];
+ update_refutation_lines();
+ clear_arrows();
+ update_displayed_line();
+ update_move_highlight();
+ return;
+ }
+
+ if (clock_timer !== null) {
+ clearTimeout(clock_timer);
+ }
+ update_clock();
+
+ // The score.
+ if (current_display_line && !current_display_line_is_history) {
+ let score;
+ if (current_display_line.scores && current_display_line.scores.length > 0) {
+ for (let i = 0; i < current_display_line.scores.length; ++i) {
+ if (current_display_move < current_display_line.scores[i].first_move) {
+ break;
+ }
+ score = current_display_line.scores[i].score;
+ }
+ }
+ if (score) {
+ document.getElementById("score").textContent = format_long_score(score);
+ } else {
+ document.getElementById("score").textContent = "No score for this line";
+ }
+ } else if (data['score']) {
+ document.getElementById("score").textContent = format_long_score(data['score']);
+ }
+
+ // The search stats.
+ if (data['searchstats']) {
+ document.getElementById("searchstats").innerHTML = data['searchstats'];
+ } else if (data['tablebase'] == 1) {
+ document.getElementById("searchstats").textContent = "Tablebase result";
+ } else if (data['nodes'] && data['nps'] && data['depth']) {
+ let stats = thousands(data['nodes']) + ' nodes, ' + thousands(data['nps']) + ' nodes/sec, depth ' + data['depth'] + ' ply';
+ if (data['seldepth']) {
+ stats += ' (' + data['seldepth'] + ' selective)';
+ }
+ if (data['tbhits'] && data['tbhits'] > 0) {
+ if (data['tbhits'] == 1) {
+ stats += ', one Syzygy hit';
+ } else {
+ stats += ', ' + thousands(data['tbhits']) + ' Syzygy hits';
+ }
+ }
+
+ document.getElementById("searchstats").textContent = stats;
+ } else {
+ document.getElementById("searchstats").textContent = "";
+ }
+
+ // Update the board itself.
+ base_fen = data['position']['fen'];
+ update_displayed_line();
+
+ // Print the PV.
+ 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);
+
+ // Update the PV arrow.
+ clear_arrows();
+ if (data['pv'].length >= 1) {
+ let hiddenboard = new Chess(base_fen);
+
+ // draw a continuation arrow as long as it's the same piece
+ let last_to;
+ for (let i = 0; i < data['pv'].length; i += 2) {
+ let move = patch_move(hiddenboard.move(data['pv'][i]));
+
+ if ((i >= 2 && move.from != last_to) ||
+ interfering_arrow(move.from, move.to)) {
+ break;
+ }
+ create_arrow(move.from, move.to, '#f66', 6, 20);
+ last_to = move.to;
+ hiddenboard.move(data['pv'][i + 1]); // To keep continuity.
+ }
+
+ let alt_moves = find_nonstupid_moves(data, 30, data['position']['toplay'] === 'B');
+ for (let i = 1; i < alt_moves.length && i < 3; ++i) {
+ hiddenboard = new Chess(base_fen);
+ let move = patch_move(hiddenboard.move(alt_moves[i]));
+ if (move !== null) {
+ create_arrow(move.from, move.to, '#f66', 1, 10);
+ }
+ }
+ }
+
+ // See if all semi-reasonable moves have only one possible response.
+ if (data['pv'].length >= 2) {
+ let nonstupid_moves = find_nonstupid_moves(data, 300, data['position']['toplay'] === 'B');
+ let hiddenboard = new Chess(base_fen);
+ hiddenboard.move(data['pv'][0]);
+ let response = hiddenboard.move(data['pv'][1]);
+ for (let i = 0; i < nonstupid_moves.length; ++i) {
+ if (nonstupid_moves[i] == data['pv'][0]) {
+ // ignore the PV move for refutation lines.
+ continue;
+ }
+ if (!data['refutation_lines'] ||
+ !data['refutation_lines'][nonstupid_moves[i]] ||
+ !data['refutation_lines'][nonstupid_moves[i]]['pv'] ||
+ data['refutation_lines'][nonstupid_moves[i]]['pv'].length < 2) {
+ // Incomplete PV, abort.
+ response = undefined;
+ break;
+ }
+ let line = data['refutation_lines'][nonstupid_moves[i]];
+ hiddenboard = new Chess(base_fen);
+ hiddenboard.move(line['pv'][0]);
+ let this_response = hiddenboard.move(line['pv'][1]);
+ if (this_response === null) {
+ console.log("BUG: ", i);
+ console.log(data);
+ console.log(line['pv']);
+ }
+ if (response.from !== this_response.from || response.to !== this_response.to) {
+ // Different response depending on lines, abort.
+ response = undefined;
+ break;
+ }
+ }
+
+ if (nonstupid_moves.length > 0 && response !== undefined) {
+ create_arrow(response.from, response.to, '#66f', 6, 20);
+ }
+ }
+
+ // Update the refutation lines.
+ base_fen = data['position']['fen'];
+ move_num = parseInt(data['position']['move_num']);
+ toplay = data['position']['toplay'];
+ refutation_lines = hash_refutation_lines || data['refutation_lines'];
+ update_refutation_lines();
+
+ // Update the sparkline last, since its size depends on how everything else reflowed.
+ update_sparkline(data);
+}
+
+let update_sparkline = function(data) {
+ let scorespark = document.getElementById('scoresparkcontainer');
+ scorespark.textContent = '';
+ if (data && data['score_history']) {
+ let first_move_num = undefined;
+ for (let halfmove_num in data['score_history']) {
+ halfmove_num = parseInt(halfmove_num);
+ if (first_move_num === undefined || halfmove_num < first_move_num) {
+ first_move_num = halfmove_num;
+ }
+ }
+ if (first_move_num !== undefined) {
+ let last_move_num = data['position']['move_num'] * 2 - 3;
+ if (data['position']['toplay'] === 'B') {
+ ++last_move_num;
+ }
+
+ // Possibly truncate some moves if we don't have enough width.
+ let max_moves = Math.floor(scorespark.getBoundingClientRect().width / 5) - 3;
+ if (last_move_num - first_move_num > max_moves) {
+ first_move_num = last_move_num - max_moves;
+ }
+
+ let min_score = -1;
+ let max_score = 1;
+ let last_score = null;
+ let scores = [];
+ for (let halfmove_num = first_move_num; halfmove_num <= last_move_num; ++halfmove_num) {
+ if (data['score_history'][halfmove_num]) {
+ let score = compute_plot_score(data['score_history'][halfmove_num]);
+ last_score = score;
+ if (score < min_score) min_score = score;
+ if (score > max_score) max_score = score;
+ }
+ scores.push(last_score);
+ }
+ if (data['score']) {
+ let score = compute_plot_score(data['score']);
+ scores.push(score);
+ if (score < min_score) min_score = score;
+ if (score > max_score) max_score = score;
+ }
+
+ const h = scorespark.getBoundingClientRect().height;
+
+ let base_y = h - h * min_score / (min_score - max_score);
+ for (let i = 0; i < scores.length; ++i) {
+ let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+ //rect.setAttributeNS(null, 'stroke', "#000000");
+ rect.setAttributeNS(null, 'x', i * 5)
+ rect.setAttributeNS(null, 'width', 4);
+ let extent = scores[i] * h / (max_score - min_score);
+ if (extent > 0 && extent < 1) {
+ extent = 1;
+ } else if (extent < 0 && extent > -1) {
+ extent = -1;
+ }
+
+ let color;
+ if (scores[i] === 0) {
+ color = [0.5, 0.5, 0.5];
+ rect.setAttributeNS(null, 'y', base_y - 1);
+ rect.setAttributeNS(null, 'height', 1);
+ } else if (scores[i] > 0) {
+ color = [0.2, 0.4, 0.8];
+ rect.setAttributeNS(null, 'y', base_y - extent);
+ rect.setAttributeNS(null, 'height', extent);
+ } else {
+ color = [1.0, 0.267, 0.267];
+ rect.setAttributeNS(null, 'y', base_y);
+ rect.setAttributeNS(null, 'height', -extent);
+ }
+ let hlcolor = [color[0], color[1], color[2]];
+ if (scores[i] !== 0) {
+ hlcolor[0] = Math.min(hlcolor[0] * 1.4, 1.0);
+ hlcolor[1] = Math.min(hlcolor[1] * 1.4, 1.0);
+ hlcolor[2] = Math.min(hlcolor[2] * 1.4, 1.0);
+ }
+ rect.style.fill = 'rgb(' + color[0]*100.0 + '%, ' + color[1]*100.0 + '%, ' + color[2]*100.0 + '%)';
+
+ // score_history contains the Nth _position_, but format_tooltip
+ // wants to format the Nth _move_; thus the -1.
+ const tooltip = format_tooltip(data, i + first_move_num - 1);
+ rect.addEventListener('mouseenter', (e) => draw_hover(e, hlcolor, tooltip));
+ rect.addEventListener('mousemove', (e) => draw_hover(e, hlcolor, tooltip));
+ rect.addEventListener('mouseleave', (e) => hide_hover(e, color));
+ rect.addEventListener('click', (e) => { hide_hover(e, color); show_line(0, i + first_move_num - 1) });
+ scorespark.appendChild(rect);
+ }
+ }
+ }
+}
+
+let draw_hover = function(e, color, tooltip) {
+ e.target.style.fill = 'rgb(' + color[0]*100.0 + '%, ' + color[1]*100.0 + '%, ' + color[2]*100.0 + '%)';
+
+ let hover = document.getElementById('sparklinehover');
+ hover.textContent = tooltip;
+ hover.style.display = 'initial';
+
+ let left = Math.max(e.pageX + 10, window.pageXOffset);
+ let top = Math.max(e.pageY - hover.getBoundingClientRect().height, window.pageYOffset);
+ left = Math.min(left, window.pageXOffset + document.documentElement.clientWidth - hover.getBoundingClientRect().width);
+
+ hover.style.left = left + 'px';
+ hover.style.top = top + 'px';
+
+}
+let hide_hover = function(e, color) {
+ e.target.style.fill = 'rgb(' + color[0]*100.0 + '%, ' + color[1]*100.0 + '%, ' + color[2]*100.0 + '%)';
+ document.getElementById('sparklinehover').style.display = 'none';
+}
+
+/**
+ * @param {number} num_viewers
+ */
+let update_num_viewers = function(num_viewers) {
+ let text = "";
+ if (num_viewers === null) {
+ text = "";
+ } else if (num_viewers == 1) {
+ text = "You are the only current viewer";
+ } else {
+ text = num_viewers + " current viewers";
+ }
+ if (display_fen !== null) {
+ let counter = Math.floor(display_fen.split(" ")[4] / 2);
+ if (counter >= 20) {
+ text = text.replace("current ", "");
+ text += " | 50-move rule: " + counter;
+ }
+ }
+ document.getElementById("numviewers").textContent = text;
+}
+
+let update_clock = function() {
+ clock_timer = null;
+
+ let data = displayed_analysis_data || current_analysis_data;
+ if (!data) return;
+
+ if (data['position']) {
+ let result = data['position']['result'];
+ if (result === '1-0') {
+ document.getElementById("whiteclock").textContent = "1";
+ document.getElementById("blackclock").textContent = "0";
+ document.getElementById("whiteclock").classList.remove("running-clock");
+ document.getElementById("blackclock").classList.remove("running-clock");
+ return;
+ }
+ if (result === '1/2-1/2') {
+ document.getElementById("whiteclock").textContent = "1/2";
+ document.getElementById("blackclock").textContent = "1/2";
+ document.getElementById("whiteclock").classList.remove("running-clock");
+ document.getElementById("blackclock").classList.remove("running-clock");
+ return;
+ }
+ if (result === '0-1') {
+ document.getElementById("whiteclock").textContent = "0";
+ document.getElementById("blackclock").textContent = "1";
+ document.getElementById("whiteclock").classList.remove("running-clock");
+ document.getElementById("blackclock").classList.remove("running-clock");
+ return;
+ }
+ }
+
+ let white_clock_ms = null;
+ let black_clock_ms = null;
+
+ // Static clocks.
+ if (data['position'] &&
+ data['position']['white_clock'] &&
+ data['position']['black_clock']) {
+ white_clock_ms = data['position']['white_clock'] * 1000;
+ black_clock_ms = data['position']['black_clock'] * 1000;
+ }
+
+ // Dynamic clock (only one, obviously).
+ let color;
+ if (data['position']['white_clock_target']) {
+ color = "white";
+ document.getElementById("whiteclock").classList.add("running-clock");
+ document.getElementById("blackclock").classList.remove("running-clock");
+ } else if (data['position']['black_clock_target']) {
+ color = "black";
+ document.getElementById("whiteclock").classList.remove("running-clock");
+ document.getElementById("blackclock").classList.add("running-clock");
+ } else {
+ document.getElementById("whiteclock").classList.remove("running-clock");
+ document.getElementById("blackclock").classList.remove("running-clock");
+ }
+ let remaining_ms;
+ if (color) {
+ let now = new Date().getTime() + client_clock_offset_ms;
+ remaining_ms = data['position'][color + '_clock_target'] * 1000 - now;
+ if (color === "white") {
+ white_clock_ms = remaining_ms;
+ } else {
+ black_clock_ms = remaining_ms;
+ }
+ }
+
+ if (white_clock_ms === null || black_clock_ms === null) {
+ document.getElementById("whiteclock").replaceChildren();
+ document.getElementById("blackclock").replaceChildren();
+ return;
+ }
+
+ // If either player has twenty minutes or less left, add the second counters.
+ // This matches what DGT clocks do.
+ let show_seconds = (white_clock_ms < 60 * 20 * 1000 || black_clock_ms < 60 * 20 * 1000);
+
+ if (color) {
+ // See when the clock will change next, and update right after that.
+ let next_update_ms;
+ if (show_seconds) {
+ next_update_ms = remaining_ms % 1000 + 100;
+ } else {
+ next_update_ms = remaining_ms % 60000 + 100;
+ }
+ clock_timer = setTimeout(update_clock, next_update_ms);
+ }
+
+ document.getElementById("whiteclock").textContent = format_clock(white_clock_ms, show_seconds);
+ document.getElementById("blackclock").textContent = format_clock(black_clock_ms, show_seconds);
+}
+
+/**
+ * @param {Number} remaining_ms
+ * @param {boolean} show_seconds
+ */
+let format_clock = function(remaining_ms, show_seconds) {
+ if (remaining_ms <= 0) {
+ if (show_seconds) {
+ return "00:00:00";
+ } else {
+ return "00:00";
+ }
+ }
+
+ let remaining = Math.floor(remaining_ms / 1000);
+ let seconds = remaining % 60;
+ remaining = (remaining - seconds) / 60;
+ let minutes = remaining % 60;
+ remaining = (remaining - minutes) / 60;
+ let hours = remaining;
+ if (show_seconds) {
+ return format_2d(hours) + ":" + format_2d(minutes) + ":" + format_2d(seconds);
+ } else {
+ return format_2d(hours) + ":" + format_2d(minutes);
+ }
+}
+
+/**
+ * @param {Number} x
+ */
+let format_2d = function(x) {
+ if (x >= 10) {
+ return x;
+ } else {
+ return "0" + x;
+ }
+}
+
+/**
+ * @param {string} move
+ * @param {Number} move_num Move number of this move.
+ * @param {boolean} white_to_play Whether white is to play this move.
+ */
+let format_move_with_number = function(move, move_num, white_to_play) {
+ let ret;
+ if (white_to_play) {
+ ret = move_num + '. ';
+ } else {
+ ret = move_num + '… ';
+ }
+ ret += move;
+ return ret;
+}
+
+/**
+ * @param {string} move
+ * @param {Number} halfmove_num Half-move number that is to be played,
+ * starting from 0.
+ */
+let format_halfmove_with_number = function(move, halfmove_num) {
+ return format_move_with_number(
+ move,
+ Math.floor(halfmove_num / 2) + 1,
+ halfmove_num % 2 == 0);
+}
+
+/**
+ * @param {Object} data
+ * @param {Number} halfmove_num
+ */
+let format_tooltip = function(data, halfmove_num) {
+ if (data['score_history'][halfmove_num + 1] ||
+ (halfmove_num + 1) === data['position']['history'].length) {
+ // Position is in the history, or it is the current position
+ // (which is implicitly tacked onto the history).
+ let move;
+ let short_score;
+ if ((halfmove_num + 1) === data['position']['history'].length) {
+ move = data['position']['last_move'];
+ short_score = format_short_score(data['score']);
+ } else {
+ move = data['position']['history'][halfmove_num];
+ short_score = format_short_score(data['score_history'][halfmove_num + 1]);
+ }
+ if (halfmove_num === -1) {
+ return "Start position: " + short_score;
+ } else {
+ let move_with_number = format_halfmove_with_number(move, halfmove_num);
+ return "After " + move_with_number + ": " + short_score;
+ }
+ } else {
+ for (let i = halfmove_num; i --> -1; ) {
+ if (data['score_history'][i]) {
+ let move = data['position']['history'][i];
+ if (i === -1) {
+ return "[Analysis kept from start position]";
+ } else {
+ return "[Analysis kept from " + format_halfmove_with_number(move, i) + "]";
+ }
+ }
+ }
+ }
+}
+
+/**
+ * @param {boolean} truncate_history
+ */
+let set_truncate_history = function(truncate_history) {
+ truncate_display_history = truncate_history;
+ update_refutation_lines();
+}
+window['set_truncate_history'] = set_truncate_history;
+
+/**
+ * @param {number} line_num
+ * @param {number} move_num
+ */
+let show_line = function(line_num, move_num) {
+ if (line_num == -1) {
+ current_display_line = null;