Show numbers on moves branched from main line

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,7 +458,20 @@ namespace Variation {
 
 
 class Annotations extends Layer {
-  private annotations = new Map<Annotation.Shape, Annotation[]>();
+  private annotations = new Map<string, 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) {
@@ -475,10 +488,12 @@ 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);
+      // this isn't really working with the enums, but its not clear how the
+      // annotations on a position should be grouped, otherwise.
+      let byShape = this.annotations.get(annotation.label);
       if (byShape === undefined) {
         byShape = [];
-        this.annotations.set(annotation.shape, byShape);
+        this.annotations.set(annotation.label, byShape);
       }
       byShape.push(annotation);
     }
@@ -491,21 +506,24 @@ class Annotations extends Layer {
     }
 
     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';
+
+    // TODO this.annotation should be keyed by the board position, oops.
+    this.annotations.forEach((annotations: Annotation[], label: string) => {
+      for (let annotation of annotations) {
+        ctx.fillStyle = annotation.colors[0];
+        let c = this.boardToCanvas(annotation.p.row, annotation.p.col);
+        if (label == "●"){
+          ctx.fillText(label, c.x, c.y);
+        }
+        else if (this.showDivergence) {
+          ctx.fillText(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);
   }
 

minigui/study.ts

@@ -47,16 +47,20 @@ class ExploreBoard extends ClickableBoard {
   }
 
   private searchLyr: lyr.Search;
+  public annoLyr: lyr.Annotations;
+
 
   constructor(parentElemId: string, position: Position, private gtp: Socket) {
     super(parentElemId, position, []);
 
     this.searchLyr = new lyr.Search();
+    this.annoLyr = new lyr.Annotations();
+
     this.addLayers([
         new lyr.Label(),
         new lyr.BoardStones(),
         this.searchLyr,
-        new lyr.Annotations()]);
+        this.annoLyr]);
     this.enabled = true;
   }
 
@@ -118,6 +122,7 @@ class ExploreApp extends App {
   private variationTree = new VariationTree('tree');
   private log = new Log('log', 'console');
   private showSearch = true;
+  private showDiverge = false;
   private showConsole = false;
   private moveElem = getElement('move');
   private commentElem = getElement('comment');
@@ -246,6 +251,9 @@ class ExploreApp extends App {
         case 'End':
           this.goForward(Infinity);
           break;
+        case 'v':
+          this.toggleNumberVariations();
+          break;
       }
     });
 
@@ -458,6 +466,10 @@ class ExploreApp extends App {
     }
   }
 
+  private toggleNumberVariations() {
+    this.board.annoLyr.showDivergence = !this.board.annoLyr.showDivergence;
+  }
+
   private uploadTmpFile(contents: string) {
     return fetch('write_tmp_file', {
       method: 'POST',