Compute "complexity/uncertainty/counterplay" value based on the draw

value in WDL

files/src/renderer/50_table.js

@@ -20,11 +20,13 @@ const table_prototype = {
 		this.limit = null;						// The limit of the last search that updated this.
 		this.terminal = null;					// null = unknown, "" = not terminal, "Non-empty string" = terminal reason
 		this.graph_y = null;					// Used by grapher only, value from White's POV between 0 and 1
+		this.graph_y_drawishness = null;			// Used by grapher only, drawishness between 0 and 1
 		this.graph_y_version = 0;				// Which version (above) was used to generate the graph_y value
 		this.already_autopopulated = false;
 	},
 
-	get_graph_y: function() {
+	// returns {'graph_y': number between 0.0 and 1.0, 'drawishness': number between 0.0 and 1.0}
+	get_graph_y_details: function() {
 
 		// Naphthalin's scheme: based on centipawns.
 
@@ -36,12 +38,19 @@ const table_prototype = {
 					cp *= -1;
 				}
 				this.graph_y = 1 / (1 + Math.pow(0.5, cp / 100));
+
+				if (info.wdl === null) {
+					this.graph_y_drawishness = null;
+				} else {
+					this.graph_y_drawishness = info.wdl[1] / 1000.0;
+				}
 			} else {
 				this.graph_y = null;
+				this.graph_y_drawishness = null;
 			}
 			this.graph_y_version = this.version;
 		}
-		return this.graph_y;
+		return {'graph_y': this.graph_y, 'drawishness': this.graph_y_drawishness};
 	},
 
 	set_terminal_info: function(reason, ev) {	// ev is ignored if reason is "" (i.e. not a terminal position)

files/src/renderer/51_node.js

@@ -125,6 +125,7 @@ const node_prototype = {
 		return ret;
 	},
 
+	// returns an array of {'graph_y': number between 0.0 and 1.0, 'drawishness': number between 0.0 and 1.0}
 	all_graph_values: function() {
 
 		// Call this on any node in the line will give the same result.
@@ -133,7 +134,7 @@ const node_prototype = {
 		let node = this.get_end();
 
 		while (node) {
-			ret.push(node.table.get_graph_y());
+			ret.push(node.table.get_graph_y_details());
 			node = node.parent;
 		}
 

files/src/renderer/55_winrate_graph.js

@@ -81,14 +81,49 @@ function NewGrapher() {
 
 		let last_x = null;
 		let last_y = null;
+		let last_y_shaded = null;
 		let last_n = null;
 
 		// This loop creates all edges that we are going to draw, and marks each
 		// edge as dashed or not...
 
 		for (let n = 0; n < eval_list.length; n++) {
 
-			let e = eval_list[n];
+			let e = eval_list[n].graph_y;
+			// W + L = 1 - D
+			// (W - L) / 2 + 0.5 = e
+			// (W - L)     + 1.0 = 2.0 * e
+			// ===
+			// assume W <= L (a.k.a. e <= 0.5)
+			// e_shaded = W
+			// 2W          + 1.0 = 2.0 * e + 1.0 - D
+			// 2W                = 2.0 * e       - D
+			//  W                =       e       - D / 2
+			// ===
+			// assume L < W (a.k.a. e > 0.5)
+			// e_shaded = L
+			//     2L      - 1.0 = -2.0 * e + 1.0 - D
+			//     2L            = -2.0 * e + 2.0 - D
+			//      L            =      - e + 1.0 - D / 2
+
+			let e_shaded = null;
+			if (eval_list[n].drawishness !== null) {
+				if (e <= 0.5) {
+					e_shaded = e - eval_list[n].drawishness / 2.0;
+				} else {
+					e_shaded = (1.0 - e) - eval_list[n].drawishness / 2.0;
+				}
+			}
+
+			// INVARIANT: e_shaded will be narrow in "dead draw" games, and wide in "equal but very unclear" games
+			//       e.g. W=500, D=0, L=500  ⇒  (e_shaded will be 0.5)
+			//       e.g. W=750, D=0, L=250  ⇒  (e_shaded will be 0.25)
+			//       e.g. W=250, D=0, L=750  ⇒  (e_shaded will be 0.25)
+			//       e.g. W=250, D=500, L=250  ⇒  (e_shaded will be 0.25)
+			//       e.g. W=300, D=500, L=200  ⇒  (e_shaded will be 0.20)
+			//       e.g. W=200, D=500, L=300  ⇒  (e_shaded will be 0.20)
+			//       e.g. W=1000, D=0, L=0  ⇒  (e_shaded will be 0.0)
+			//       e.g. W=0, D=1000, L=0  ⇒  (e_shaded will be 0.0)
 
 			if (e !== null) {
 
@@ -102,14 +137,17 @@ function NewGrapher() {
 					all_edges.push({
 						x1: last_x,
 						y1: last_y,
+						y_shaded1: last_y_shaded,
 						x2: x,
 						y2: y,
+						y_shaded2: e_shaded * height,
 						dashed: n - last_n !== 1,
 					});
 				}
 
 				last_x = x;
 				last_y = y;
+				last_y_shaded = e_shaded * height;
 				last_n = n;
 			}
 		}