*/
let current_hash_display_timer = null;
-let supports_html5_storage = function() {
+function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
// Make the unique token persistent so people refreshing the page won't count twice.
// Of course, you can never fully protect against people deliberately wanting to spam.
-let get_unique = function() {
+function get_unique() {
let use_local_storage = supports_html5_storage();
if (use_local_storage && window['localStorage']['unique']) {
return window['localStorage']['unique'];
return unique;
}
-let request_update = function() {
+function request_update() {
current_analysis_request_timer = null;
let handle_err = () => {
}
-let process_update_response = function(data, headers) {
+function process_update_response(data, headers) {
sync_server_clock(headers.get('Date'));
ims = headers.get('X-RGLM');
let num_viewers = headers.get('X-RGNV');
}
}
-let possibly_play_sound = function(old_data, new_data) {
+function possibly_play_sound(old_data, new_data) {
if (!enable_sound) {
return;
}
/**
* @type {!string} server_date_string
*/
-let sync_server_clock = function(server_date_string) {
+function sync_server_clock(server_date_string) {
let server_time_ms = new Date(server_date_string).getTime();
let client_time_ms = new Date().getTime();
let estimated_offset_ms = server_time_ms - client_time_ms;
}
}
-let clear_arrows = function() {
+function clear_arrows() {
for (let i = 0; i < arrows.length; ++i) {
if (arrows[i].svg) {
- if (arrows[i].svg.parentElement) {
- arrows[i].svg.parentElement.removeChild(arrows[i].svg);
- }
+ arrows[i].svg.remove();
delete arrows[i].svg;
}
}
}
}
-let redraw_arrows = function() {
+function redraw_arrows() {
for (let i = 0; i < arrows.length; ++i) {
position_arrow(arrows[i]);
}
/** @param {!number} x
* @return {!number}
*/
-let sign = function(x) {
+function sign(x) {
if (x > 0) {
return 1;
} else if (x < 0) {
* @param {!string} to The square the arrow is to (e.g. e4).
* @return {boolean}
*/
-let interfering_arrow = function(from, to) {
+function interfering_arrow(from, to) {
let from_col = from.charCodeAt(0) - "a1".charCodeAt(0);
let from_row = from.charCodeAt(1) - "a1".charCodeAt(1);
let to_col = to.charCodeAt(0) - "a1".charCodeAt(0);
* @param {!number} u
* @return {!string} The point in "x y" form, suitable for SVG paths.
*/
-let point_from_start = function(x1, y1, x2, y2, t, u) {
+function point_from_start(x1, y1, x2, y2, t, u) {
let dx = x2 - x1;
let dy = y2 - y1;
* @param {!number} u
* @return {!string} The point in "x y" form, suitable for SVG paths.
*/
-let point_from_end = function(x1, y1, x2, y2, t, u) {
+function point_from_end(x1, y1, x2, y2, t, u) {
let dx = x2 - x1;
let dy = y2 - y1;
return x + " " + y;
}
-let position_arrow = function(arrow) {
+function position_arrow(arrow) {
if (arrow.svg) {
if (arrow.svg.parentElement) {
arrow.svg.parentElement.removeChild(arrow.svg);
return;
}
- let zoom_factor = document.getElementById("board").getBoundingClientRect().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 = document.querySelector(".square-a8").getBoundingClientRect().width;
+ 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;
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", /** @type{number} */ (document.getElementById("board").getBoundingClientRect().width));
- svg.setAttribute("height", /** @type{number} */ (document.getElementById("board").getBoundingClientRect().height));
- 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);
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;
* @param {number} line_width
* @param {number} arrow_size
*/
-let create_arrow = function(from_square, to_square, fg_color, line_width, arrow_size) {
+function create_arrow(from_square, to_square, fg_color, line_width, arrow_size) {
let from_col = from_square.charCodeAt(0) - "a1".charCodeAt(0);
let from_row = from_square.charCodeAt(1) - "a1".charCodeAt(1);
let to_col = to_square.charCodeAt(0) - "a1".charCodeAt(0);
arrows.push(arrow);
}
-let compare_by_score = function(refutation_lines, invert, a, b) {
+function compare_by_score(refutation_lines, invert, a, b) {
let sa = compute_score_sort_key(refutation_lines[b]['score'], refutation_lines[b]['depth'], invert);
let sb = compute_score_sort_key(refutation_lines[a]['score'], refutation_lines[a]['depth'], invert);
return sa - sb;
* @return {Array.<string>} The FEN representation (e.g. Ne4) of all
* moves, in score order.
*/
-let find_nonstupid_moves = function(data, margin, invert) {
+function find_nonstupid_moves(data, margin, invert) {
// First of all, if there are any moves that are more than 0.5 ahead of
// the primary move, the refutation lines are probably bunk, so just
// kill them all.
let pv_score = undefined;
for (let move in data['refutation_lines']) {
let line = data['refutation_lines'][move];
- let score = compute_score_sort_key(line['score'], line['depth'], invert, false);
+ let score = compute_score_sort_key(line['score'], line['depth'], invert);
if (move == data['pv'][0]) {
pv_score = score;
}
* @param {number} x
* @return {!string}
*/
-let thousands = function(x) {
+function thousands(x) {
return String(x).split('').reverse().join('').replace(/(\d{3}\B)/g, '$1,').split('').reverse().join('');
}
* @param {number=} opt_limit
* @param {boolean=} opt_showlast
*/
-let add_pv = function(start_fen, pv, move_num, toplay, scores, start_display_move_num, opt_limit, opt_showlast) {
+function add_pv(start_fen, pv, move_num, toplay, scores, start_display_move_num, opt_limit, opt_showlast) {
display_lines.push({
start_fen: start_fen,
pv: pv,
* @param {number=} opt_limit If set, show at most this number of moves.
* @param {boolean=} opt_showlast If limit is set, show the last moves instead of the first ones.
*/
-let print_pv = function(line_num, splicepos, opt_limit, opt_showlast) {
+function print_pv(line_num, splicepos, opt_limit, opt_showlast) {
let display_line = display_lines[line_num];
let pv = display_line.pv;
let move_num = display_line.move_num;
}
}
- let ret = '';
- let i = 0;
+ 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
// opt_showlast is set, then it is the history, and thus,
// the UI should be to expand the history.
- ret = '(<a class="move" href="javascript:collapse_history(false)">…</a>) ';
+ ret.appendChild(document.createTextNode('('));
+ let link = document.createElement('a');
+ link.className = 'move';
+ 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) {
- let move = "";
- if (splicepos === 0) {
- move += "(TB: ";
- in_tb = true;
- }
- move += "<a class=\"move\" id=\"automove" + line_num + "-0\" href=\"javascript:show_line(" + line_num + ", " + 0 + ");\">" + pv[0] + "</a>";
- ret = move_num + '. … ' + move;
- toplay = 'W';
- ++i;
- ++move_num;
- }
- for ( ; i < pv.length; ++i) {
- let move = "<a class=\"move\" id=\"automove" + line_num + "-" + i + "\" href=\"javascript:show_line(" + line_num + ", " + i + ");\">" + pv[i] + "</a>";
+ ret.appendChild(document.createTextNode(move_num + '. … '));
+ }
+ for (; 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 + ');';
if (splicepos === i) {
- ret += " (TB: ";
+ ret.appendChild(document.createTextNode('(TB: '));
in_tb = true;
}
- if (toplay == 'W') {
+ if (toplay == 'B' && i == 0) {
+ ++move_num;
+ toplay = 'W';
+ } else if (toplay == 'W') {
if (i > opt_limit && !opt_showlast) {
if (in_tb) {
- ret += ")";
+ ret.appendChild(document.createTextNode(')'));
}
- return ret + ' (…)';
- }
- if (ret != '') {
- ret += ' ';
+ ret.appendChild(document.createTextNode(' (…)'));
+ return ret;
}
- 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;
}
/** Update the highlighted to/from squares on the board.
* Based on the global "highlight_from" and "highlight_to" letiables.
*/
-let update_board_highlight = function() {
+function update_board_highlight() {
document.getElementById("board").querySelectorAll('.square-55d63').forEach((square) => square.classList.remove('nonuglyhighlight'));
if ((current_display_line === null || current_display_line_is_history) &&
highlight_from !== undefined && highlight_to !== undefined) {
}
}
-let update_history = function() {
+function update_history() {
+ 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 =
- '(<a class="move" href="javascript:collapse_history(true)">collapse</a>) ' +
- 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));
}
}
/**
* @param {!boolean} truncate_history
*/
-let collapse_history = function(truncate_history) {
+function collapse_history(truncate_history) {
truncate_display_history = truncate_history;
update_history();
}
*
* Also recreates the global "display_lines".
*/
-let update_refutation_lines = function() {
+function update_refutation_lines() {
if (base_fen === null) {
return;
}
tbl.replaceChildren();
if (display_lines.length < 2) {
+ // Update the move highlight, as we've rewritten all the HTML.
+ update_move_highlight();
return;
}
if (line['pv'].length == 0) {
// Not found, so just make a one-move PV.
- let move = "<a class=\"move\" href=\"javascript:show_line(" + display_lines.length + ", " + 0 + ");\">" + line['move'] + "</a>";
- 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);
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;
}
- 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);
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);
}
* @param {Array.<string>} moves
* @param {number} last_move
*/
-let chess_from = function(fen, moves, last_move) {
+function chess_from(fen, moves, last_move) {
let hiddenboard = new Chess();
if (fen !== null && fen !== undefined) {
hiddenboard.load(fen);
return hiddenboard;
}
-let update_game_list = function(games) {
+function update_game_list(games) {
document.getElementById("games").textContent = "";
if (games === null) {
return;
* Try to find a running game that matches with the current hash,
* and switch to it if we're not already displaying it.
*/
-let possibly_switch_game_from_hash = function() {
+function possibly_switch_game_from_hash() {
let history_match = window.location.hash.match(/^#history=([a-zA-Z0-9_-]+)/);
if (history_match !== null) {
let game_id = history_match[1];
* If this is a Chess960 castling which doesn't move the king,
* move the rook instead.
*/
-let patch_move = function(move) {
+function patch_move(move) {
if (move === null) return null;
if (move.from !== move.to) return move;
/** Update all the HTML on the page, based on current global state.
*/
-let update_board = function() {
+function update_board() {
document.body.style.opacity = null;
let data = displayed_analysis_data || current_analysis_data;
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();
return;
}
+ if (clock_timer !== null) {
+ clearTimeout(clock_timer);
+ }
update_clock();
// The score.
// 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']) {
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();
update_sparkline(data);
}
-let update_sparkline = function(data) {
+function update_sparkline(data) {
let scorespark = document.getElementById('scoresparkcontainer');
scorespark.textContent = '';
if (data && data['score_history']) {
if (score < min_score) min_score = score;
if (score > max_score) max_score = score;
}
+ if (max_score - min_score < 100) {
+ if (Math.abs(max_score) >= Math.abs(min_score)) {
+ max_score = min_score + 100;
+ } else {
+ min_score = max_score - 100;
+ }
+ }
const h = scorespark.getBoundingClientRect().height;
let color;
if (scores[i] === 0) {
color = [0.5, 0.5, 0.5];
- rect.setAttributeNS(null, 'y', base_y - 1);
+ rect.setAttributeNS(null, 'y', base_y);
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);
+ rect.setAttributeNS(null, 'height', extent + 1);
} else {
color = [1.0, 0.267, 0.267];
rect.setAttributeNS(null, 'y', base_y);
- rect.setAttributeNS(null, 'height', -extent);
+ rect.setAttributeNS(null, 'height', -extent + 1);
}
let hlcolor = [color[0], color[1], color[2]];
if (scores[i] !== 0) {
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) => show_line(0, i + first_move_num - 1));
+ 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) {
+function draw_hover(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.style.top = top + 'px';
}
-let hide_hover = function(e, color) {
+function hide_hover(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) {
+function update_num_viewers(num_viewers) {
let text = "";
if (num_viewers === null) {
text = "";
document.getElementById("numviewers").textContent = text;
}
-let update_clock = function() {
- clearTimeout(clock_timer);
+function update_clock() {
+ clock_timer = null;
let data = displayed_analysis_data || current_analysis_data;
if (!data) return;
* @param {Number} remaining_ms
* @param {boolean} show_seconds
*/
-let format_clock = function(remaining_ms, show_seconds) {
+function format_clock(remaining_ms, show_seconds) {
if (remaining_ms <= 0) {
if (show_seconds) {
return "00:00:00";
/**
* @param {Number} x
*/
-let format_2d = function(x) {
+function format_2d(x) {
if (x >= 10) {
return x;
} else {
* @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) {
+function format_move_with_number(move, move_num, white_to_play) {
let ret;
if (white_to_play) {
ret = move_num + '. ';
* @param {Number} halfmove_num Half-move number that is to be played,
* starting from 0.
*/
-let format_halfmove_with_number = function(move, halfmove_num) {
+function format_halfmove_with_number(move, halfmove_num) {
return format_move_with_number(
move,
Math.floor(halfmove_num / 2) + 1,
* @param {Object} data
* @param {Number} halfmove_num
*/
-let format_tooltip = function(data, halfmove_num) {
+function format_tooltip(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
/**
* @param {boolean} truncate_history
*/
-let set_truncate_history = function(truncate_history) {
+function set_truncate_history(truncate_history) {
truncate_display_history = truncate_history;
update_refutation_lines();
}
* @param {number} line_num
* @param {number} move_num
*/
-let show_line = function(line_num, move_num) {
+function show_line(line_num, move_num) {
if (line_num == -1) {
current_display_line = null;
current_display_move = null;
}
window['show_line'] = show_line;
-let prev_move = function() {
+function prev_move() {
if (current_display_line &&
current_display_move >= current_display_line.start_display_move_num) {
--current_display_move;
}
window['prev_move'] = prev_move;
-let next_move = function() {
+function next_move() {
if (current_display_line &&
current_display_move < current_display_line.pv.length - 1) {
++current_display_move;
}
window['next_move'] = next_move;
-let next_game = function() {
+function next_game() {
if (current_games === null) {
return;
}
// Couldn't find it; give up.
}
-let update_historic_analysis = function() {
+function update_historic_analysis() {
if (!current_display_line_is_history) {
return;
}
/**
* @param {string} fen
*/
-let update_imbalance = function(fen) {
- let hiddenboard = new Chess(fen);
+function update_imbalance(fen) {
let imbalance = {'k': 0, 'q': 0, 'r': 0, 'b': 0, 'n': 0, 'p': 0};
- for (let row = 0; row < 8; ++row) {
- for (let col = 0; col < 8; ++col) {
- let col_text = String.fromCharCode('a1'.charCodeAt(0) + col);
- let row_text = String.fromCharCode('a1'.charCodeAt(1) + row);
- let square = col_text + row_text;
- let contents = hiddenboard.get(square);
- if (contents !== null) {
- if (contents.color === 'w') {
- ++imbalance[contents.type];
- } else {
- --imbalance[contents.type];
- }
- }
+ for (const c of fen) {
+ if (c === ' ') {
+ // End of board
+ break;
+ }
+ if (c != c.toUpperCase()) {
+ --imbalance[c];
+ } else if (c != c.toLowerCase()) {
+ ++imbalance[c.toLowerCase()];
}
}
- 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.
* Also replaces the PV with the current displayed line if it's not shown
* anywhere else on the screen.
*/
-let update_move_highlight = function() {
+function update_move_highlight() {
if (highlighted_move !== null) {
highlighted_move.classList.remove('highlight');
}
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.
*
* @return {?number}
*/
-let find_display_line_matching_num = function() {
+function find_display_line_matching_num() {
for (let i = 0; i < display_lines.length; ++i) {
let line = display_lines[i];
if (line.start_display_move_num > 0) continue;
* TODO: This should really be called only whenever something changes,
* instead of all the time.
*/
-let update_displayed_line = function() {
+function update_displayed_line() {
if (current_display_line === null) {
document.getElementById("linenav").style.display = 'none';
document.getElementById("linemsg").style.display = 'revert';
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 = "<a href=\"javascript:prev_move();\">Previous</a></span>";
}
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 = "<a href=\"javascript:next_move();\">Next</a></span>";
}
update_imbalance(hiddenboard.fen());
}
-let set_board_position = function(new_fen) {
+function set_board_position(new_fen) {
board_is_animating = true;
let old_fen = board.fen();
board.position(new_fen);
/**
* @param {boolean} param_enable_sound
*/
-let set_sound = function(param_enable_sound) {
+function set_sound(param_enable_sound) {
enable_sound = param_enable_sound;
if (enable_sound) {
document.getElementById("soundon").innerHTML = "<strong>On</strong>";
/** Send off a hash probe request to the backend.
* @param {string} fen
*/
-let explore_hash = function(fen) {
+function explore_hash(fen) {
// If we already have a backend response going, abort it.
if (current_hash_xhr) {
current_hash_xhr.abort();
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.
* @param {!Object} data
* @param {string} fen
*/
-let show_explore_hash_results = function(data, fen) {
+function show_explore_hash_results(data, fen) {
if (board_is_animating) {
// Updating while the animation is still going causes
// the animation to jerk. This is pretty crude, but it will do.
}
// almost all of this stuff comes from the chessboard.js example page
-let onDragStart = function(source, piece, position, orientation) {
+function onDragStart(source, piece, position, orientation) {
let pseudogame = new Chess(display_fen);
if (pseudogame.game_over() === true ||
(pseudogame.turn() === 'w' && piece.search(/^b/) !== -1) ||
return true;
}
-let mousedownSquare = function(e) {
- if (!e.target || !e.target.matches('.square-55d63')) {
+function mousedownSquare(e) {
+ if (!e.target || !e.target.getAttribute('data-square')) {
return;
}
}
}
-let mouseupSquare = function(e) {
- if (!e.target || !e.target.matches('.square-55d63')) {
+function mouseupSquare(e) {
+ if (!e.target || !e.target.getAttribute('data-square')) {
return;
}
if (reverse_dragging_from === null) {
});
}
-let get_best_move = function(game, source, target, invert) {
+function get_best_move(game, source, target, invert) {
let moves = game.moves({ verbose: true });
if (source !== null) {
moves = moves.filter(function(move) { return move.from == source; });
return best_move;
}
-let onDrop = function(source, target) {
+function onDrop(source, target) {
if (source === target) {
if (recommended_move === null) {
return 'snapback';
if (move === null) return 'snapback';
}
-let onSnapEnd = function(source, target) {
+function onSnapEnd(source, target) {
if (source === target && recommended_move !== null) {
source = recommended_move.from;
target = recommended_move.to;
promotion: 'q' // NOTE: always promote to a queen for example simplicity
});
+ // Move ahead on the line we're on -- this includes history if we've
+ // gone backwards.
if (current_display_line &&
current_display_move < current_display_line.pv.length - 1 &&
current_display_line.pv[current_display_move + 1] === move.san) {
// Walk down the displayed lines until we find one that starts with
// this move, then select that. Note that this gives us a good priority
- // order (history first, then PV, then multi-PV lines).
- for (let i = 0; i < display_lines.length; ++i) {
+ // order (PV, then multi-PV lines; history was already dealt with above,
+ // as it's the only line that originates backwards).
+ for (let i = 1; i < display_lines.length; ++i) {
if (i == 1 && current_display_line) {
// Do not choose PV if not on it.
continue;
// Shouldn't really be here if we have hash probes, but there's really
// nothing we can do.
+ // FIXME: Just make a new line, probably (even if we don't have hash moves).
+ // As it is, we can actually drag (but not click) such a move in the UI,
+ // but it has no effect on what we're probing.
}
// End of dragging-related code.
-let fmt_cp = function(v) {
+function fmt_cp(v) {
if (v === 0) {
return "0.00";
} else if (v > 0) {
}
}
-let format_short_score = function(score) {
+function format_short_score(score) {
if (!score) {
return "???";
}
return null;
}
-let format_long_score = function(score) {
+function format_long_score(score) {
if (!score) {
return "???";
}
return null;
}
-let compute_plot_score = function(score) {
+function compute_plot_score(score) {
if (score[0] === 'M' || score[0] === 'T') {
return 500;
} else if (score[0] === 'm' || score[0] === 't') {
* @param score The score digest tuple.
* @param {?number} depth Depth the move has been computed to, or null.
* @param {boolean} invert Whether black is to play.
- * @param {boolean=} depth_secondary_key
* @return {number}
*/
-let compute_score_sort_key = function(score, depth, invert, depth_secondary_key) {
+function compute_score_sort_key(score, depth, invert) {
let s;
if (!score) {
return -10000000;
}
if (s) {
if (invert) s = -s;
- if (depth_secondary_key) {
- return s * 200 + (depth || 0);
- } else {
- return s;
- }
+ return s;
} else {
return null;
}
/**
* @param {Object} game
*/
-let switch_backend = function(game) {
+function switch_backend(game) {
// Stop looking at historic data.
current_display_line = null;
current_display_move = null;
'bP': 'data:image/svg+xml,<?xml version=%221.0%22 encoding=%22UTF-8%22 standalone=%22no%22?>%0A<!DOCTYPE svg PUBLIC %22-//W3C//DTD SVG 1.1//EN%22 %22http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22>%0A<svg xmlns=%22http://www.w3.org/2000/svg%22 version=%221.1%22 width=%2245%22 height=%2245%22><path d=%22m 22.5,9 c -2.21,0 -4,1.79 -4,4 0,0.89 0.29,1.71 0.78,2.38 C 17.33,16.5 16,18.59 16,21 c 0,2.03 0.94,3.84 2.41,5.03 C 15.41,27.09 11,31.58 11,39.5 H 34 C 34,31.58 29.59,27.09 26.59,26.03 28.06,24.84 29,23.03 29,21 29,18.59 27.67,16.5 25.72,15.38 26.21,14.71 26.5,13.89 26.5,13 c 0,-2.21 -1.79,-4 -4,-4 z%22 style=%22opacity:1;fill:%23000000;fill-opacity:1;fill-rule:nonzero;stroke:%23000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1%22/></svg>',
};
-let svg_piece_theme = function(piece) {
+function svg_piece_theme(piece) {
return svg_pieces[piece];
}
-let init = function() {
+function init() {
unique = get_unique();
// Load settings from HTML5 local storage if available.