X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=www%2Fjs%2Fbook.js;h=6017fd9d0d5eb6a91a1238089c080a7af460c819;hb=1067590eb03c8571f6e4aafc215b71bcb7a71001;hp=796b04ed8b8d7e3caa5fed7433b0cf1430e7d135;hpb=5f62f406da8dcbf111720bd528b7d71c053d9e95;p=remoteglot-book diff --git a/www/js/book.js b/www/js/book.js index 796b04e..6017fd9 100644 --- a/www/js/book.js +++ b/www/js/book.js @@ -1,27 +1,79 @@ (function() { var board = null; -var moves = []; +var history = []; var move_override = 0; +var includetransp = true; + +var entity_map = { + "&": "&", + "<": "<", + ">": ">", + '"': '"', + "'": ''', +}; + +function escape_html(string) { + return String(string).replace(/[&<>"']/g, function (s) { + return entity_map[s]; + }); +} + +var get_game = function(skip_last_move) { + var moves_to_drop = 0; + if (skip_last_move === true) { + moves_to_drop = 1; + } -var get_game = function() { var game = new Chess(); - for (var i = 0; i < move_override; ++i) { - game.move(moves[i]); + for (var i = 0; i < move_override - moves_to_drop; ++i) { + game.move(history[i]); } return game; } var update = function() { + var text = ""; + for (var i = 0; i < history.length; ++i) { + if (i % 2 == 0) { + text += (i/2 + 1) + ". "; + } + if (i + 1 == move_override) { + text += '' + history[i] + ''; + } else { + text += '' + history[i] + ''; + } + text += " "; + } + $('#gamehistory').html(text); + var game = get_game(); board.position(game.fen()); + + var all_moves = game.history({ verbose: true }); + if (all_moves.length > 0) { + var last_move = all_moves.pop(); + var highlight_from = last_move.from; + var highlight_to = last_move.to; + $("#board").find('.square-55d63').removeClass('nonuglyhighlight'); + $("#board").find('.square-' + highlight_from).addClass('nonuglyhighlight'); + $("#board").find('.square-' + highlight_to).addClass('nonuglyhighlight'); + } + fetch_analysis(); } var fetch_analysis = function() { var game = get_game(); + var fen = game.fen(); + var prevfen = ""; + if (move_override > 0) { + prevfen = get_game(true).fen(); + } $.ajax({ - url: "/opening-stats.pl?fen=" + encodeURIComponent(game.fen()) + url: "/opening-stats.pl?fen=" + encodeURIComponent(fen) + + ";prevfen=" + encodeURIComponent(prevfen) + + ";includetransp=" + (includetransp ? 1 : 0) }).done(function(data, textstatus, xhr) { show_lines(data, game); }); @@ -61,12 +113,33 @@ var direction = 1; var show_lines = function(data, game) { var moves = data['moves']; $('#numviewers').text(data['opening']); + + if (data['root_game']) { + var text = escape_html(data['root_game']['white']); + if (data['root_game']['white_elo']) { + text += " (" + escape_html(data['root_game']['white_elo']) + ")"; + } + text += " – " + escape_html(data['root_game']['black']); + if (data['root_game']['black_elo']) { + text += " (" + escape_html(data['root_game']['black_elo']) + ")"; + } + text += "  " + escape_html(data['root_game']['result']).replace(/-/, "–") + "
"; + if (data['root_game']['eco']) { + text += "[" + escape_html(data['root_game']['eco']) + "] "; + } + text += "(" + data['root_game']['moves'] + ") "; + text += escape_html(data['root_game']['event']) + "  " + escape_html(data['root_game']['date']); + $('#gamesummary').html(text); + } + var total_num = 0; for (var i = 0; i < moves.length; ++i) { var move = moves[i]; - total_num += parseInt(move['white']); - total_num += parseInt(move['draw']); - total_num += parseInt(move['black']); + if (move['move']) { + total_num += parseInt(move['white']); + total_num += parseInt(move['draw']); + total_num += parseInt(move['black']); + } } var headings_tr = $("#headings"); @@ -144,6 +217,10 @@ var show_lines = function(data, game) { var line = lines[i]; var tr = document.createElement("tr"); + if (line[0] === undefined) { + $(tr).addClass("totals"); + } + for (var j = 0; j < line.length; ++j) { if (line[j] === null) { add_td(tr, ""); @@ -151,6 +228,14 @@ var show_lines = function(data, game) { var td = document.createElement("td"); tr.appendChild(td); $(td).addClass("move"); + if (line[j] !== undefined) { + if (move_override % 2 == 0) { + $(td).text(((move_override / 2) + 1) + ". "); + } else { + $(td).text(((move_override / 2) + 0.5) + "…"); + } + } + var move_a = document.createElement("a"); move_a.href = "javascript:make_move('" + line[j] + "')"; td.appendChild(move_a); @@ -168,10 +253,21 @@ var show_lines = function(data, game) { } } +var set_includetransp = function(value) { + includetransp = value; + update(); +} +window['set_includetransp'] = set_includetransp; + var make_move = function(move) { - moves.length = move_override; - moves.push(move); - move_override = moves.length; + if (move_override < history.length && history[move_override] == move) { + // User effectively only moved forward in history. + ++move_override; + } else { + history.length = move_override; + history.push(move); + move_override = history.length; + } update(); } window['make_move'] = make_move; @@ -185,13 +281,19 @@ var prev_move = function() { window['prev_move'] = prev_move; var next_move = function() { - if (move_override < moves.length) { + if (move_override < history.length) { ++move_override; update(); } } window['next_move'] = next_move; +var set_move = function(n) { + move_override = n; + update(); +} +window['set_move'] = set_move; + // almost all of this stuff comes from the chessboard.js example page var onDragStart = function(source, piece, position, orientation) { var game = get_game(); @@ -214,8 +316,12 @@ var onDrop = function(source, target) { // illegal move if (move === null) return 'snapback'; - moves = game.history({ verbose: true }); - move_override = moves.length; + var new_history = game.history({ verbose: true }); + history = []; + for (var i = 0; i < new_history.length; ++i) { + history.push(new_history[i].san); + } + move_override = history.length; }; // update the board position after the piece snap @@ -223,7 +329,7 @@ var onDrop = function(source, target) { var onSnapEnd = function() { var game = get_game(); board.position(game.fen()); - fetch_analysis(); + update(); }; var init = function() {