nicer behaviour

80_info.js

@@ -283,7 +283,7 @@ function NewInfoHandler() {
 		}
 	};
 
-	ih.draw_infobox = function(mouse_point, active_square, leela_should_go, active_colour, searchmoves, hoverdraw_line) {
+	ih.draw_infobox = function(mouse_point, active_square, leela_should_go, active_colour, searchmoves, hoverdraw_index) {
 
 		ih.draw_statusbox(leela_should_go, searchmoves);
 
@@ -296,6 +296,8 @@ function NewInfoHandler() {
 			return;
 		}
 
+		let info_list = this.sorted();
+
 		// We might be highlighting some div...
 
 		let highlight_move = null;
@@ -306,10 +308,8 @@ function NewInfoHandler() {
 			highlight_class = "ocm_highlight";
 		}
 
-		let hoverdraw_move = null;
-
-		if (Array.isArray(hoverdraw_line) && hoverdraw_line.length > 0) {
-			highlight_move = hoverdraw_line[0];
+		if (typeof hoverdraw_index === "number" && hoverdraw_index >= 0 && hoverdraw_index < info_list.length) {
+			highlight_move = info_list[hoverdraw_index].move;
 			highlight_class = "hover_highlight";
 		}
 
@@ -337,9 +337,9 @@ function NewInfoHandler() {
 
 		this.info_clickers = [];
 
-		let info_list = this.sorted();
 		let substrings = [];
-		let n = 0;
+		let clicker_index = 0;
+		let div_index = 0;
 
 		for (let info of info_list) {
 
@@ -351,7 +351,7 @@ function NewInfoHandler() {
 				divclass += " " + highlight_class;
 			}
 
-			substrings.push(`<div id="infoline_${info.move}" class="${divclass}">`);
+			substrings.push(`<div id="infoline_${div_index++}" class="${divclass}">`);
 
 			// The "focus" button...
 
@@ -391,7 +391,7 @@ function NewInfoHandler() {
 				if (nice_pv[i].includes("O-O")) {
 					spanclass += " nobr";
 				}
-				substrings.push(`<span id="infobox_${n++}" class="${spanclass}">${nice_pv[i]} </span>`);
+				substrings.push(`<span id="infobox_${clicker_index++}" class="${spanclass}">${nice_pv[i]} </span>`);
 				this.info_clickers.push({
 					move: info.pv[i],
 					is_start: i === 0,

95_renderer.js

@@ -16,7 +16,8 @@ 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.hoverdraw_line = [];								// The fantasy line drawn so far.
+	renderer.hoverdraw_index = -1;
+	renderer.hoverdraw_depth = 0;
 	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.
 
@@ -38,7 +39,7 @@ function NewRenderer() {
 		this.position_change_time = performance.now();
 
 		this.searchmoves = [];
-		this.hoverdraw_line = [];
+		this.hoverdraw_index = -1;
 		this.position_changed_clear_info_handler(new_game_flag);
 		this.escape();
 
@@ -1012,59 +1013,52 @@ function NewRenderer() {
 	renderer.hoverdraw = function() {
 
 		if (!config.hover_draw) {
-			this.hoverdraw_line = [];
+			this.hoverdraw_index = -1;
 			return false;
 		}
 
 		if (performance.now() - this.position_change_time < 1000) {
-			this.hoverdraw_line = [];
+			this.hoverdraw_index = -1;
 			return false;
 		}
 
 		let overlist = document.querySelectorAll(":hover");
 
-		let firstmove = null;
+		let sorted_index = null;
 
 		for (let item of overlist) {
 			if (typeof item.id === "string" && item.id.startsWith("infoline_")) {
-				firstmove = item.id.slice("infoline_".length);
+				sorted_index = parseInt(item.id.slice("infoline_".length), 10);
 				break;
 			}
 		}
 
-		if (!firstmove) {
-			this.hoverdraw_line = [];
+		if (typeof sorted_index !== "number" || Number.isNaN(sorted_index)) {
+			this.hoverdraw_index = -1;
 			return false;
 		}
 
-		let info = this.info_handler.table[firstmove];
-
-		// 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.
+		let info = this.info_handler.sorted()[sorted_index];							// Possibly undefined
 
 		if (!info || Array.isArray(info.pv) === false || info.pv.length === 0) {
-			this.hoverdraw_line = [];
+			this.hoverdraw_index = -1;
 			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 the user is hovering over a different div index in the infobox, reset depth...
 
-		if (ArrayStartsWith(info.pv, this.hoverdraw_line) === false) {
-			this.hoverdraw_line = [];
+		if (sorted_index !== this.hoverdraw_index) {
+			this.hoverdraw_index = sorted_index;
+			this.hoverdraw_depth = 0;
 		}
 
-		// And now, sometimes add a move to the drawn line...
+		// Sometimes increase depth...
 
 		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]);
-			}
+			this.hoverdraw_depth++;
 		}
 
-		return this.draw_fantasy_from_moves(this.hoverdraw_line);
+		return this.draw_fantasy_from_moves(info.pv.slice(0, this.hoverdraw_depth));	// Relies on slice() being safe if depth > length
 	};
 
 	renderer.draw_fantasy_from_moves = function(moves) {
@@ -1136,7 +1130,7 @@ function NewRenderer() {
 			this.leela_should_go(),
 			this.node.get_board().active,
 			this.searchmoves,
-			this.hoverdraw_line);
+			this.hoverdraw_index);
 	};
 
 	renderer.draw_loop = function() {