Show numbers on moves branched from main line (#852)

* add hacking info to README

* Remove annotation enum, make annotation layer draw annotations as alabels.  Position::addChild() will now add annotations to non-mainline children.

* add show-divergence handlers to study mode

* fix type error caught by ts; null not a valid value to assign.

* add duplicate annotation checking to position.ts

* fix null property for pointer style, nits

Author: Andrew Jackson

minigui/README.md

@@ -310,3 +310,16 @@ stdout: = D4
    - *fails*: If the id doesn't correspond to a position played in the game or
      one of its variations.
    - *comments*: Required only for Minigui's study mode.
+
+
+### Hacking
+
+
+e.g. in study.ts, change the last line to something like
+
+```
+(window as any)['app'] = new ExploreApp();
+```
+
+This will put the application in a global variable named "app"; you need to cast
+the window object to the "any" type to silence the TS compiler.

minigui/board.ts

@@ -284,7 +284,7 @@ class ClickableBoard extends Board {
   drawImpl() {
     super.drawImpl();
     let p = this.enabled ? this.p : null;
-    this.ctx.canvas.style.cursor = p ? 'pointer' : null;
+    this.ctx.canvas.style.cursor = p ? 'pointer' : '';
     if (p) {
       this.drawStones([p], this.position.toPlay, 0.6);
     }

minigui/layer.ts

@@ -458,11 +458,24 @@ namespace Variation {
 
 
 class Annotations extends Layer {
-  private annotations = new Map<Annotation.Shape, Annotation[]>();
+  private annotations: Annotation[] = [];
+  private _showDivergence = false;
+
+  get showDivergence() : boolean {
+    return this._showDivergence;
+  }
+  set showDivergence(x: boolean) {
+    if (x == this._showDivergence) {
+      return;
+    }
+    this._showDivergence = x;
+    this.update(new Set<string>(["annotations"]));
+    this.board.draw();
+  }
 
   clear() {
-    if (this.annotations.size > 0) {
-      this.annotations.clear();
+    if (this.annotations.length > 0) {
+      this.annotations = [];
       this.board.draw();
     }
   }
@@ -473,41 +486,34 @@ class Annotations extends Layer {
     }
 
     let position = this.board.position;
-    this.annotations.clear();
-    for (let annotation of position.annotations) {
-      let byShape = this.annotations.get(annotation.shape);
-      if (byShape === undefined) {
-        byShape = [];
-        this.annotations.set(annotation.shape, byShape);
-      }
-      byShape.push(annotation);
-    }
+    // TODO this.annotations could be a map keyed by coordinate.
+    this.annotations = position.annotations;
     return true;
   }
 
   draw() {
-    if (this.annotations.size == 0) {
+    if (this.annotations.length == 0) {
       return;
     }
 
     let sr = this.board.stoneRadius;
-    let pr = pixelRatio();
 
     let ctx = this.board.ctx;
-    ctx.lineCap = 'round';
-    this.annotations.forEach((annotations: Annotation[], shape: Annotation.Shape) => {
-      switch (shape) {
-        case Annotation.Shape.Dot:
-          for (let annotation of annotations) {
-            let c = this.boardToCanvas(annotation.p.row, annotation.p.col);
-            ctx.fillStyle = annotation.colors[0];
-            ctx.beginPath();
-            ctx.arc(c.x + 0.5, c.y + 0.5, 0.16 * sr, 0, 2 * Math.PI);
-            ctx.fill();
-          }
-          break;
+    let textHeight = Math.floor(0.8 * sr);
+    ctx.font = `${textHeight}px sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    for (let annotation of this.annotations) {
+      ctx.fillStyle = annotation.colors[0];
+      let c = this.boardToCanvas(annotation.p.row, annotation.p.col);
+      if (annotation.label == "●"){
+        ctx.fillText(annotation.label, c.x, c.y);
       }
-    });
+      else if (this.showDivergence) {
+        ctx.fillText(annotation.label, c.x, c.y);
+      }
+    }
   }
 }
 

minigui/position.ts

@@ -15,15 +15,9 @@
 import {Color, Move, N, Nullable, Point, moveIsPoint, movesEqual, otherColor, stonesEqual, toGtp} from './base'
 import * as util from './util'
 
-namespace Annotation {
-  export enum Shape {
-    Dot,
-  }
-}
-
 interface Annotation {
   p: Point;
-  shape: Annotation.Shape;
+  label: string;
   colors: string[];
 }
 
@@ -100,10 +94,10 @@ class Position {
     if (moveIsPoint(this.lastMove)) {
       this.annotations.push({
         p: this.lastMove,
-        shape: Annotation.Shape.Dot,
+        label: "●",
         colors: ['#ef6c02'],
       });
-    }
+    } 
   }
 
   addChild(p: Position) {
@@ -125,6 +119,34 @@ class Position {
     // Create a new child.
     p.isMainLine = this.isMainLine && this.children.length == 0;
     p.parent = this;
+
+    // If it is not on the main line, prepare the move number annotations.
+    if (! p.isMainLine) {
+      let result: Move[] = [];
+      let node: Nullable<Position>
+      for (node = p; node && !node.isMainLine; node = node.parent) {
+        if (node.lastMove == null) { break; }
+        result.push(node.lastMove);
+      }
+      result.reverse();
+      let playedCount = new Uint16Array(N * N);
+      for (let i=0; i < result.length - 1; ++i) {
+        let move = result[i];
+
+        if (moveIsPoint(move)) {
+          let idx = move.row * N + move.col;
+          let count = ++playedCount[idx];
+          if (count != 1) {
+            continue;
+          }
+          p.annotations.push({
+            p: move, // 'p' here for 'point'.
+            label: (i+1).toString(),
+            colors: ['#999999'],
+          });
+        }
+      }
+    }
     this.children.push(p);
   }