X-Git-Url: https://git.sesse.net/?p=remoteglot;a=blobdiff_plain;f=www%2Fjs%2Fremoteglot.js;h=8cffebdeda197c78022ad443fdc2ea73c7fc56e7;hp=0b7a6028e66418a1377aa5f235c9e80ce24a3747;hb=071760a7bd1a175ebe9c77b460b8d0f654eeee48;hpb=0451d189f5c931e7c122faa1cf4e1c3174d994fe diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js index 0b7a602..8cffebd 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 = false; + +/** @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,15 +475,19 @@ 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. @@ -494,18 +606,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; @@ -530,7 +649,7 @@ var next_move = function() { ++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) { @@ -568,7 +687,7 @@ 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();