X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;ds=sidebyside;f=www%2Fjs%2Fremoteglot.js;h=cb38ebe91e5ea6413a236277effd25475e1d30c4;hb=62c6bbdc00af3ddd63cdba48f53711fb4214f32c;hp=57c3ceab6f0d4e4701721e9726f1d7e4f62a8e97;hpb=4c5d301bac0c1cb70229c58a3c45bcafb306e95e;p=remoteglot diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js index 57c3cea..cb38ebe 100644 --- a/www/js/remoteglot.js +++ b/www/js/remoteglot.js @@ -1,34 +1,85 @@ (function() { +/** @type {window.ChessBoard} @private */ var board = null; + +/** @type {window.ChessBoard} @private */ var hiddenboard = null; + +/** @type {Array.<{ + * from_col: number, + * from_row: number, + * to_col: number, + * to_row: number, + * line_width: number, + * arrow_size: number, + * fg_color: string + * }>} + * @private + */ var arrows = []; + +/** @type {Array.>} */ var occupied_by_arrows = []; + var refutation_lines = []; + +/** @type {!number} @private */ var move_num = 1; + +/** @type {!string} @private */ var toplay = 'W'; + +/** @type {number} @private */ var ims = 0; -var sort_refutation_lines_by_score = 0; + +/** @type {boolean} @private */ +var sort_refutation_lines_by_score = true; + +/** @type {!string|undefined} @private */ var highlight_from = undefined; + +/** @type {!string|undefined} @private */ var highlight_to = undefined; + +/** @type {!number} @private */ var unique = Math.random(); +/** The current position on the board, represented as a FEN string. + * @type {?string} + * @private + */ var fen = null; + +/** @typedef {{ + * start_fen: string, + * uci_pv: Array., + * pretty_pv: Array. + * }} DisplayLine + */ + +/** @type {Array.} + * @private + */ var display_lines = []; + +/** @type {?DisplayLine} @private */ var current_display_line = null; + +/** @type {?number} @private */ var current_display_move = null; -var request_update = function(board) { +var request_update = function() { $.ajax({ url: "http://analysis.sesse.net/analysis.pl?ims=" + ims + "&unique=" + unique //url: "http://analysis.sesse.net:5000/analysis.pl?ims=" + ims + "&unique=" + unique }).done(function(data, textstatus, xhr) { ims = xhr.getResponseHeader('X-Remoteglot-Last-Modified'); var num_viewers = xhr.getResponseHeader('X-Remoteglot-Num-Viewers'); - update_board(board, data, num_viewers); + update_board(data, num_viewers); }).fail(function() { // Wait ten seconds, then try again. - setTimeout(function() { request_update(board); }, 10000); + setTimeout(function() { request_update(); }, 10000); }); } @@ -53,6 +104,9 @@ var redraw_arrows = function() { } } +/** @param {!number} x + * @return {!number} + */ var sign = function(x) { if (x > 0) { return 1; @@ -63,7 +117,11 @@ var sign = function(x) { } } -// See if drawing this arrow on the board would cause unduly amount of confusion. +/** See if drawing this arrow on the board would cause unduly amount of confusion. + * @param {!string} from The square the arrow is from (e.g. e4). + * @param {!string} to The square the arrow is to (e.g. e4). + * @return {boolean} + */ var interfering_arrow = function(from, to) { var from_col = from.charCodeAt(0) - "a1".charCodeAt(0); var from_row = from.charCodeAt(1) - "a1".charCodeAt(1); @@ -95,6 +153,16 @@ var interfering_arrow = function(from, to) { return false; } +/** Find a point along the coordinate system given by the given line, + * units forward from the start of the line, units to the right of it. + * @param {!number} x1 + * @param {!number} x2 + * @param {!number} y1 + * @param {!number} y2 + * @param {!number} t + * @param {!number} u + * @return {!string} The point in "x y" form, suitable for SVG paths. + */ var point_from_start = function(x1, y1, x2, y2, t, u) { var dx = x2 - x1; var dy = y2 - y1; @@ -108,6 +176,16 @@ var point_from_start = function(x1, y1, x2, y2, t, u) { return x + " " + y; } +/** Find a point along the coordinate system given by the given line, + * units forward from the end of the line, units to the right of it. + * @param {!number} x1 + * @param {!number} x2 + * @param {!number} y1 + * @param {!number} y2 + * @param {!number} t + * @param {!number} u + * @return {!string} The point in "x y" form, suitable for SVG paths. + */ var point_from_end = function(x1, y1, x2, y2, t, u) { var dx = x2 - x1; var dy = y2 - y1; @@ -145,8 +223,8 @@ var position_arrow = function(arrow) { var SVG_NS = "http://www.w3.org/2000/svg"; var XHTML_NS = "http://www.w3.org/1999/xhtml"; var svg = document.createElementNS(SVG_NS, "svg"); - svg.setAttribute("width", $("#board").width()); - svg.setAttribute("height", $("#board").height()); + svg.setAttribute("width", /** @type{number} */ ($("#board").width())); + svg.setAttribute("height", /** @type{number} */ ($("#board").height())); svg.setAttribute("style", "position: absolute"); svg.setAttribute("position", "absolute"); svg.setAttribute("version", "1.1"); @@ -186,7 +264,7 @@ var position_arrow = function(arrow) { head.setAttribute("xmlns", XHTML_NS); head.setAttribute("stroke", "#000"); head.setAttribute("stroke-width", "1"); - head.setAttribute("fill", "#f66"); + head.setAttribute("fill", arrow.fg_color); svg.appendChild(head); $(svg).css({ top: pos.top, left: pos.left }); @@ -194,6 +272,13 @@ var position_arrow = function(arrow) { arrow.svg = svg; } +/** + * @param {!string} from_square + * @param {!string} to_square + * @param {!string} fg_color + * @param {number} line_width + * @param {number} arrow_size + */ var create_arrow = function(from_square, to_square, fg_color, line_width, arrow_size) { var from_col = from_square.charCodeAt(0) - "a1".charCodeAt(0); var from_row = from_square.charCodeAt(1) - "a1".charCodeAt(1); @@ -229,8 +314,16 @@ var compare_by_score = function(refutation_lines, a, b) { return sa - sb; } -// Fake multi-PV using the refutation lines. Find all “relevant” moves, -// sorted by quality, descending. +/** + * Fake multi-PV using the refutation lines. Find all “relevant” moves, + * sorted by quality, descending. + * + * @param {!Object} data + * @param {number} margin The maximum number of centipawns worse than the + * best move can be and still be included. + * @return {Array.} The UCI representation (e.g. e1g1) of all + * moves, in score order. + */ var find_nonstupid_moves = function(data, margin) { // 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 @@ -269,10 +362,22 @@ var find_nonstupid_moves = function(data, margin) { return moves; } +/** + * @param {number} x + * @return {!string} + */ var thousands = function(x) { return String(x).split('').reverse().join('').replace(/(\d{3}\B)/g, '$1,').split('').reverse().join(''); } +/** + * @param {!string} fen + * @param {Array.} uci_pv + * @param {Array.} pretty_pv + * @param {number} move_num + * @param {!string} toplay + * @param {number=} opt_limit + */ var print_pv = function(fen, uci_pv, pretty_pv, move_num, toplay, opt_limit) { display_lines.push({ start_fen: fen, @@ -310,7 +415,7 @@ var print_pv = function(fen, uci_pv, pretty_pv, move_num, toplay, opt_limit) { return pv; } -var update_highlight = function() { +var update_highlight = function() { $("#board").find('.square-55d63').removeClass('nonuglyhighlight'); if (current_display_line === null && highlight_from !== undefined && highlight_to !== undefined) { $("#board").find('.square-' + highlight_from).addClass('nonuglyhighlight'); @@ -318,7 +423,10 @@ var update_highlight = function() { } } -var update_refutation_lines = function(board) { +var update_refutation_lines = function() { + if (fen === null) { + return; + } if (display_lines.length > 1) { display_lines = [ display_lines[0] ]; } @@ -367,19 +475,29 @@ var update_refutation_lines = function(board) { // Make one of the links clickable and the other nonclickable. if (sort_refutation_lines_by_score) { - $("#sortbyscore0").html("Move"); + $("#sortbyscore0").html("Move"); $("#sortbyscore1").html("Score"); } else { $("#sortbyscore0").html("Move"); - $("#sortbyscore1").html("Score"); + $("#sortbyscore1").html("Score"); } } -var update_board = function(board, data, num_viewers) { +/** + * @param {Object} data + * @param {number} num_viewers + */ +var update_board = function(data, num_viewers) { display_lines = []; // The headline. - var headline = 'Analysis'; + var headline; + if (data['position']['player_w'] && data['position']['player_b']) { + headline = data['position']['player_w'] + '–' + + data['position']['player_b'] + ', analysis'; + } else { + headline = 'Analysis'; + } if (data['position']['last_move'] !== 'none') { headline += ' after ' if (data['position']['toplay'] == 'W') { @@ -400,6 +518,11 @@ var update_board = function(board, data, num_viewers) { $("#numviewers").text(num_viewers + " current viewers"); } + // The engine id. + if (data['id'] && data['id']['name'] !== null) { + $("#engineid").text(data['id']['name']); + } + // The score. if (data['score'] !== null) { $("#score").text(data['score']); @@ -413,9 +536,9 @@ var update_board = function(board, data, num_viewers) { } if (data['tbhits'] && data['tbhits'] > 0) { if (data['tbhits'] == 1) { - stats += ', one Nalimov hit'; + stats += ', one Syzygy hit'; } else { - stats += ', ' + data['tbhits'] + ' Nalimov hits'; + stats += ', ' + thousands(data['tbhits']) + ' Syzygy hits'; } } @@ -426,7 +549,7 @@ var update_board = function(board, data, num_viewers) { fen = data['position']['fen']; update_displayed_line(); - if (data['position'].last_move_uci) { + if (data['position']['last_move_uci']) { highlight_from = data['position']['last_move_uci'].substr(0, 2); highlight_to = data['position']['last_move_uci'].substr(2, 4); } else { @@ -494,18 +617,25 @@ var update_board = function(board, data, num_viewers) { move_num = data['position']['move_num']; toplay = data['position']['toplay']; refutation_lines = data['refutation_lines']; - update_refutation_lines(board); + update_refutation_lines(); // Next update. - setTimeout(function() { request_update(board); }, 100); + setTimeout(function() { request_update(); }, 100); } +/** + * @param {boolean} sort_by_score + */ var resort_refutation_lines = function(sort_by_score) { sort_refutation_lines_by_score = sort_by_score; - update_refutation_lines(board); + update_refutation_lines(); } window['resort_refutation_lines'] = resort_refutation_lines; +/** + * @param {number} line_num + * @param {number} move_num + */ var show_line = function(line_num, move_num) { if (line_num == -1) { current_display_line = null; @@ -521,16 +651,20 @@ var show_line = function(line_num, move_num) { window['show_line'] = show_line; var prev_move = function() { - --current_display_move; + if (current_display_move > 0) { + --current_display_move; + } update_displayed_line(); } window['prev_move'] = prev_move; var next_move = function() { - ++current_display_move; + if (current_display_line && current_display_move < current_display_line.pretty_pv.length - 1) { + ++current_display_move; + } update_displayed_line(); } -window['next_move'] = prev_move; +window['next_move'] = next_move; var update_displayed_line = function() { if (current_display_line === null) { @@ -559,6 +693,18 @@ var update_displayed_line = function() { var move = current_display_line.uci_pv[i]; move = move.substr(0, 2) + "-" + move.substr(2, 4); hiddenboard.move(move, false); + + // chessboard.js does not automatically move the rook on castling + // (issue #51; marked as won't fix), so update it ourselves. + if (move == "e1-g1" && hiddenboard.position().g1 == "wK") { // white O-O + hiddenboard.move("h1-f1", false); + } else if (move == "e1-c1" && hiddenboard.position().c1 == "wK") { // white O-O-O + hiddenboard.move("a1-d1", false); + } else if (move == "e8-g8" && hiddenboard.position().g8 == "bK") { // black O-O + hiddenboard.move("h8-f8", false); + } else if (move == "e8-c8" && hiddenboard.position().c8 == "bK") { // black O-O-O + hiddenboard.move("a8-d8", false); + } } board.position(hiddenboard.position()); } @@ -568,12 +714,19 @@ var init = function() { board = new window.ChessBoard('board', 'start'); hiddenboard = new window.ChessBoard('hiddenboard', 'start'); - request_update(board); + request_update(); $(window).resize(function() { board.resize(); update_highlight(); redraw_arrows(); }); + $(window).keyup(function(event) { + if (event.which == 39) { + next_move(); + } else if (event.which == 37) { + prev_move(); + } + }); }; $(document).ready(init);