Merge pull request #46 from fohristiwhirl/animate

Animate when hovering

20_utils.js

@@ -99,6 +99,25 @@ function ArrayIncludes(a, b) {
 	return false;
 }
 
+function ArrayStartsWith(a, b) {
+
+	if (Array.isArray(a) === false || Array.isArray(b) === false) {
+		return false;
+	}
+
+	if (a.length < b.length) {
+		return false;
+	}
+
+	for (let n = 0; n < b.length; n++) {
+		if (a[n] !== b[n]) {
+			return false;
+		}
+	}
+
+	return true;
+}
+
 function OppositeColour(s) {
 	if (s === "w" || s === "W") return "b";
 	if (s === "b" || s === "B") return "w";

80_info.js

@@ -283,7 +283,7 @@ function NewInfoHandler() {
 		}
 	};
 
-	ih.draw_infobox = function(mouse_point, active_square, leela_should_go, active_colour, searchmoves, hoverdraw_move) {
+	ih.draw_infobox = function(mouse_point, active_square, leela_should_go, active_colour, searchmoves, hoverdraw_line) {
 
 		ih.draw_statusbox(leela_should_go, searchmoves);
 
@@ -306,8 +306,10 @@ function NewInfoHandler() {
 			highlight_class = "ocm_highlight";
 		}
 
-		if (hoverdraw_move) {
-			highlight_move = hoverdraw_move;
+		let hoverdraw_move = null;
+
+		if (Array.isArray(hoverdraw_line) && hoverdraw_line.length > 0) {
+			highlight_move = hoverdraw_line[0];
 			highlight_class = "hover_highlight";
 		}
 
@@ -349,7 +351,7 @@ function NewInfoHandler() {
 				divclass += " " + highlight_class;
 			}
 
-			substrings.push(`<div class="${divclass}">`);
+			substrings.push(`<div id="infoline_${info.move}" class="${divclass}">`);
 
 			// The "focus" button...
 
@@ -390,7 +392,11 @@ function NewInfoHandler() {
 					spanclass += " nobr";
 				}
 				substrings.push(`<span id="infobox_${n++}" class="${spanclass}">${nice_pv[i]} </span>`);
-				this.info_clickers.push({move: info.pv[i], is_start: i === 0});
+				this.info_clickers.push({
+					move: info.pv[i],
+					is_start: i === 0,
+					is_end: i === info.pv.length - 1,
+				});
 				colour = OppositeColour(colour);
 			}
 
@@ -466,7 +472,7 @@ function NewInfoHandler() {
 
 	ih.moves_from_click_n = function(n) {
 
-		if (typeof n !== "number") {
+		if (typeof n !== "number" || Number.isNaN(n)) {
 			return [];
 		}
 
@@ -491,6 +497,31 @@ function NewInfoHandler() {
 		return move_list;
 	};
 
+	ih.entire_pv_from_click_n = function(n) {
+
+		let move_list = this.moves_from_click_n(n);		// Does all the sanity checks.
+
+		if (move_list.length === 0) {
+			return move_list;
+		}
+
+		if (this.info_clickers[n].is_end) {				// Do we already have the whole thing?
+			return move_list;
+		}
+
+		n++;
+
+		for (; n < this.info_clickers.length; n++) {
+			let object = this.info_clickers[n];
+			move_list.push(object.move);
+			if (object.is_end) {
+				break;
+			}
+		}
+
+		return move_list;
+	};
+
 	ih.searchmove_from_click = function(event) {
 		let s = EventPathString(event, "searchmove_");
 		if (typeof s === "string" && (s.length === 4 || s.length === 5)) {

95_renderer.js

@@ -16,8 +16,9 @@ function NewRenderer() {
 	renderer.pgn_choices = null;								// All games found when opening a PGN file.
 	renderer.friendly_draws = New2DArray(8, 8);					// What pieces are drawn in boardfriends. Used to skip redraws.
 	renderer.active_square = null;								// Clicked square.
-	renderer.infolist_click_time = performance.now();			// When user last clicked a move in infolist. Don't draw fantasy board for a bit.
-	renderer.hoverdraw_move = null;								// Initial move of the current hoverdraw. Used for highlighting.
+	renderer.hoverdraw_line = [];								// The fantasy line drawn so far.
+	renderer.tick = 0;											// How many draw loops we've been through.
+	renderer.position_change_time = performance.now();			// Time of the last position change. Used for cooldown on hover draw.
 
 	// Some sync stuff...
 
@@ -33,10 +34,16 @@ function NewRenderer() {
 	// --------------------------------------------------------------------------------------------
 
 	renderer.position_changed = function(new_game_flag) {
+
+		this.position_change_time = performance.now();
+
 		this.searchmoves = [];
+		this.hoverdraw_line = [];
 		this.position_changed_clear_info_handler(new_game_flag);
-		this.go_or_halt(new_game_flag);
 		this.escape();
+
+		this.go_or_halt(new_game_flag);
+
 		this.draw();
 		this.movelist_handler.draw(this.node);
 		fenbox.value = this.node.get_board().fen();
@@ -765,8 +772,6 @@ function NewRenderer() {
 			node = node.make_move(move);
 		}
 
-		this.infolist_click_time = performance.now();
-
 		// Maybe we're done...
 
 		if (!config.serious_analysis_mode) {
@@ -1006,44 +1011,67 @@ function NewRenderer() {
 
 	renderer.hoverdraw = function() {
 
-		if (performance.now() - this.infolist_click_time < 1000) {
+		if (!config.hover_draw) {
+			this.hoverdraw_line = [];
 			return false;
 		}
 
-		if (!config.hover_draw) {
+		if (performance.now() - this.position_change_time < 1000) {
+			this.hoverdraw_line = [];
 			return false;
 		}
 
 		let overlist = document.querySelectorAll(":hover");
 
-		let hover_item = null;
+		let firstmove = null;
 
 		for (let item of overlist) {
-			if (typeof item.id === "string" && item.id.startsWith("infobox_")) {
-				hover_item = item;
+			if (typeof item.id === "string" && item.id.startsWith("infoline_")) {
+				firstmove = item.id.slice("infoline_".length);
 				break;
 			}
 		}
 
-		if (!hover_item) {
+		if (!firstmove) {
+			this.hoverdraw_line = [];
 			return false;
 		}
 
-		let moves = this.info_handler.moves_from_click_n(parseInt(hover_item.id.slice("infobox_".length), 10));
+		let info = this.info_handler.table[firstmove];
 
-		if (moves.length > 0) {
-			return this.draw_fantasy_from_moves(moves);
+		// It is entirely possible that the firstmove we've detected is illegal
+		// due to the HTML being stale - because we call hoverdraw() before
+		// updating the HTML to prevent flicker.
+
+		if (!info || Array.isArray(info.pv) === false || info.pv.length === 0) {
+			this.hoverdraw_line = [];
+			return false;
+		}
+
+		// At this point, info.pv represents the full line to animate. We need
+		// to check if it's compatible with the moves we've already drawn, if
+		// there are any...
+
+		if (ArrayStartsWith(info.pv, this.hoverdraw_line) === false) {
+			this.hoverdraw_line = [];
+		}
+
+		// And now, sometimes add a move to the drawn line...
+
+		if (this.tick % config.animate_delay_multiplier === 0) {
+			if (this.hoverdraw_line.length < info.pv.length) {
+				this.hoverdraw_line.push(info.pv[this.hoverdraw_line.length]);
+			}
 		}
 
-		return false;
+		return this.draw_fantasy_from_moves(this.hoverdraw_line);
 	};
 
 	renderer.draw_fantasy_from_moves = function(moves) {
 
-		// Because our hover detection is running a cycle behind,
-		// this could be a series of illegal moves.
+		// Don't assume moves is an array of legal moves, or even an array.
 
-		if (Array.isArray(moves) === false || moves.length === 0) {
+		if (Array.isArray(moves) === false) {
 			return false;
 		}
 
@@ -1058,7 +1086,6 @@ function NewRenderer() {
 		}
 
 		this.draw_fantasy(board);
-		this.hoverdraw_move = moves[0];
 		return true;
 	};
 
@@ -1096,7 +1123,6 @@ function NewRenderer() {
 			fantasy.style.display = "block";
 		} else {
 			fantasy.style.display = "none";
-			this.hoverdraw_move = null;
 			context.clearRect(0, 0, canvas.width, canvas.height);
 			this.draw_move_in_canvas();
 			this.draw_enemies_in_canvas();
@@ -1110,10 +1136,11 @@ function NewRenderer() {
 			this.leela_should_go(),
 			this.node.get_board().active,
 			this.searchmoves,
-			this.hoverdraw_move);
+			this.hoverdraw_line);
 	};
 
 	renderer.draw_loop = function() {
+		this.tick++;
 		this.draw();	// We could wrap this in a try, but for dev purposes it's best to break hard.
 		setTimeout(this.draw_loop.bind(this), config.update_delay);
 	};

config.example.json

@@ -41,6 +41,7 @@
 	"hover_draw": false,
 	"serious_analysis_mode": false,
 	"update_delay": 170,
+	"animate_delay_multiplier": 2,
 	"search_nodes": "infinite",
 	"save_enabled": false,
 	"override_piece_directory": null,

modules/load_config.js

@@ -41,6 +41,7 @@ const defaults = {
 	"hover_draw": false,
 	"serious_analysis_mode": false,
 	"update_delay": 170,
+	"animate_delay_multiplier": 2,
 	"search_nodes": "infinite",
 	"save_enabled": false,
 	"override_piece_directory": null,
@@ -78,6 +79,14 @@ function fix(cfg) {
 			cfg.search_nodes = "infinite";
 		}
 	}
+
+	// This can't be 0 because we divide by it.
+
+	cfg.animate_delay_multiplier = Math.floor(cfg.animate_delay_multiplier);
+
+	if (cfg.animate_delay_multiplier <= 0) {
+		cfg.animate_delay_multiplier = 1;
+	}
 }
 
 function assign_without_overwrite(target, source) {