Add support for toggling the stone removal graphic and removal scaling

online-go · Jul 30, 2024 · d93fe4e · d93fe4e
1 parent 3bd44e5
commit d93fe4e
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 19 deletions.
diff --git a/engine/package.json b/engine/package.json
@@ -1,6 +1,6 @@
 {
     "name": "goban-engine",
-    "version": "8.3.16",
+    "version": "8.3.19",
     "description": "",
     "main": "build/goban-engine.js",
     "types": "build/engine/index.d.ts",

diff --git a/examples/main.tsx b/examples/main.tsx
@@ -46,11 +46,11 @@ try {
 
 Goban.setCallbacks({
     getSelectedThemes: () => ({
-        board: "Kaya",
+        "board": "Kaya",
         //board: "Anime",
 
-        white: "Plain",
-        black: "Plain",
+        "white": "Plain",
+        "black": "Plain",
         //white: "Glass",
         //black: "Glass",
         //white: "Worn Glass",
@@ -63,6 +63,8 @@ Goban.setCallbacks({
         //black: "Anime",
         //white: "Custom",
         //black: "Custom",
+        "removal-graphic": "square",
+        "removal-scale": 1.0,
     }),
 
     customWhiteStoneUrl: () => {
@@ -309,7 +311,7 @@ function GobanTestPage(): JSX.Element {
                     <ReactGobanCanvas key={idx} />
                 ),
             )}
-            {true && (svg_or_canvas === "svg" ? <ReactGobanSVG /> : <ReactGobanCanvas />)}
+            {svg_or_canvas === "svg" ? <ReactGobanSVG /> : <ReactGobanCanvas />}
         </div>
     );
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "goban",
-    "version": "8.3.16",
+    "version": "8.3.19",
     "description": "",
     "main": "build/goban.js",
     "types": "build/src/index.d.ts",

diff --git a/src/Goban/CanvasRenderer.ts b/src/Goban/CanvasRenderer.ts
@@ -132,9 +132,11 @@ export class GobanCanvas extends Goban implements GobanCanvasInterface {
     protected title_div?: HTMLElement;
 
     private themes: GobanSelectedThemes = {
-        board: "Plain",
-        black: "Plain",
-        white: "Plain",
+        "board": "Plain",
+        "black": "Plain",
+        "white": "Plain",
+        "removal-graphic": "x",
+        "removal-scale": 1.0,
     };
     private theme_black!: GobanTheme;
     private theme_black_stones: Array<any> = [];

diff --git a/src/Goban/Goban.ts b/src/Goban/Goban.ts
@@ -24,9 +24,11 @@ import { THEMES, THEMES_SORTED } from "./themes";
 
 export const GOBAN_FONT = "Verdana,Arial,sans-serif";
 export interface GobanSelectedThemes {
-    board: string;
-    white: string;
-    black: string;
+    "board": string;
+    "white": string;
+    "black": string;
+    "removal-graphic": "square" | "x";
+    "removal-scale": number;
 }
 export type LabelPosition =
     | "all"
@@ -85,7 +87,13 @@ export abstract class Goban extends OGSConnectivity {
         }
         //return {white:'Plain', black:'Plain', board:'Plain'};
         //return {white:'Plain', black:'Plain', board:'Kaya'};
-        return { white: "Shell", black: "Slate", board: "Kaya" };
+        return {
+            "white": "Shell",
+            "black": "Slate",
+            "board": "Kaya",
+            "removal-graphic": "square",
+            "removal-scale": 1.0,
+        };
     }
 
     protected putOrClearLabel(x: number, y: number, mode?: "put" | "clear"): boolean {

diff --git a/src/Goban/SVGRenderer.ts b/src/Goban/SVGRenderer.ts
@@ -137,9 +137,11 @@ export class SVGRenderer extends Goban implements GobanSVGInterface {
     protected title_div?: HTMLElement;
 
     private themes: GobanSelectedThemes = {
-        board: "Plain",
-        black: "Plain",
-        white: "Plain",
+        "board": "Plain",
+        "black": "Plain",
+        "white": "Plain",
+        "removal-graphic": "x",
+        "removal-scale": 1.0,
     };
     private theme_black!: GobanTheme;
     private theme_black_stones: Array<any> = [];
@@ -1198,7 +1200,7 @@ export class SVGRenderer extends Goban implements GobanSVGInterface {
         }
     }
     private __drawSquare(i: number, j: number): void {
-        if (!this.drawing_enabled || this.no_display) {
+        if (!this.drawing_enabled || this.no_display || !this.grid || !this.grid[j]) {
             return;
         }
         if (i < 0 || j < 0) {
@@ -1218,7 +1220,7 @@ export class SVGRenderer extends Goban implements GobanSVGInterface {
         cell = this.grid[j][i] = document.createElementNS("http://www.w3.org/2000/svg", "g");
         this.grid_layer!.appendChild(cell);
 
-        const removed_stone_scale = 0.9;
+        const removed_stone_scale = this.themes["removal-scale"];
         const ss = this.square_size;
         let ox = this.draw_left_labels ? ss : 0;
         let oy = this.draw_top_labels ? ss : 0;
@@ -1662,7 +1664,7 @@ export class SVGRenderer extends Goban implements GobanSVGInterface {
                     //(this.mode === "analyze" && pos.stone_removed)
                     pos.stone_removed
                 ) {
-                    draw_removal_x = true;
+                    draw_removal_x = this.themes["removal-graphic"] === "x";
                     transform = `translate(${l + this.metrics.mid * (1.0 - removed_stone_scale)}, ${
                         t + this.metrics.mid * (1.0 - removed_stone_scale)
                     }) scale(${removed_stone_scale})`;