Add per-feature sample boards to theme settings, refactor some settings

package.json

@@ -60,7 +60,7 @@
         "express-http-proxy": "^2.0.0",
         "fork-ts-checker-webpack-plugin": "^9.0.0",
         "globals": "^15.8.0",
-        "goban": "=8.3.21",
+        "goban": "=8.3.22",
         "gulp": "^5.0.0",
         "gulp-clean-css": "^4.3.0",
         "gulp-eslint-new": "^2.2.0",

src/components/MiniGoban/MiniGoban.tsx

@@ -20,7 +20,7 @@ import { Link } from "react-router-dom";
 import { npgettext, interpolate } from "translate";
 import * as moment from "moment";
 import * as preferences from "preferences";
-import { GobanRenderer, createGoban } from "goban";
+import { GobanRenderer, JGOFMove, createGoban } from "goban";
 import * as data from "data";
 import { PersistentElement } from "PersistentElement";
 import { getUserRating, PROVISIONAL_RATING_CUTOFF } from "rank_utils";
@@ -36,6 +36,7 @@ export interface MiniGobanProps {
     width?: number;
     height?: number;
     displayWidth?: number;
+    className?: string;
 
     // If these are not provided, we look in the game itself (via the id prop)...
     // Also note that if you pass in a string, you won't get the rank of the player displayed...
@@ -54,6 +55,10 @@ export interface MiniGobanProps {
     onGobanCreated?: (goban: GobanRenderer) => void;
     chat?: boolean;
     labels_positioning?: "none" | "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    sampleOptions?: {
+        undo?: boolean;
+        variation?: JGOFMove[];
+    };
 }
 
 export function MiniGoban(props: MiniGobanProps): JSX.Element {
@@ -117,6 +122,7 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
                 width: props.width || (props.json ? props.json.width : 19),
                 height: props.height || (props.json ? props.json.height : 19),
                 last_move_opacity: last_move_opacity,
+                variation_stone_opacity: preferences.get("variation-stone-opacity"),
             },
             props.json,
         );
@@ -125,6 +131,19 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
             props.onGobanCreated(goban.current);
         }
 
+        if (props.sampleOptions?.undo) {
+            (window as any)["mini_goban"] = goban.current;
+            //goban.current.visual_undo_request_indicator = true;
+            goban.current.engine.undo_requested = goban.current.engine.cur_move.move_number;
+        }
+
+        if (props.sampleOptions?.variation) {
+            goban.current.setMode("analyze");
+            for (const move of props.sampleOptions.variation) {
+                goban.current.engine.place(move.x, move.y);
+            }
+        }
+
         goban.current.on("update", () => {
             const engine = goban.current?.engine;
             if (!engine) {
@@ -351,13 +370,13 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
     }
 
     if (props.noLink || (!props.game_id && !props.review_id)) {
-        return <div className="MiniGoban nolink">{inner}</div>;
+        return <div className={"MiniGoban nolink " + (props.className ?? "")}>{inner}</div>;
     } else {
         if (props.game_id) {
             return (
                 <Link
                     to={`/game/${props.game_id}`}
-                    className="MiniGoban link"
+                    className={"MiniGoban link " + (props.className ?? "")}
                     {...new_tab_attributes}
                 >
                     {inner}
@@ -367,7 +386,7 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
             return (
                 <Link
                     to={`/review/${props.review_id}`}
-                    className="MiniGoban link"
+                    className={"MiniGoban link " + (props.className ?? "")}
                     {...new_tab_attributes}
                 >
                     {inner}

src/lib/configure-goban.tsx

@@ -101,7 +101,7 @@ export function configure_goban() {
         getClockDrift: (): number => get_clock_drift(),
         getNetworkLatency: (): number => get_network_latency(),
         getLocation: (): string => window.location.pathname,
-        getShowMoveNumbers: (): boolean => !!preferences.get("show-move-numbers"),
+        //getShowMoveNumbers: (): boolean => !!preferences.get("show-move-numbers"),
         getShowVariationMoveNumbers: (): boolean => preferences.get("show-variation-move-numbers"),
         getMoveTreeNumbering: (): "none" | "move-number" | "move-coordinates" =>
             preferences.get("move-tree-numbering"),
@@ -112,6 +112,9 @@ export function configure_goban() {
         watchSelectedThemes: (cb) => preferences.watchSelectedThemes(cb),
         getSelectedThemes: () => preferences.getSelectedThemes(),
 
+        getShowUndoRequestIndicator: (): boolean =>
+            preferences.get("visual-undo-request-indicator"),
+
         customBlackStoneColor: (): string =>
             preferences.get("goban-theme-custom-black-stone-color"),
         customBlackTextColor: (): string => preferences.get("goban-theme-custom-white-stone-color"),

src/views/Game/Game.tsx

@@ -1124,7 +1124,6 @@ export function Game(): JSX.Element | null {
             draw_left_labels: label_position === "all" || label_position.indexOf("left") >= 0,
             draw_right_labels: label_position === "all" || label_position.indexOf("right") >= 0,
             draw_bottom_labels: label_position === "all" || label_position.indexOf("bottom") >= 0,
-            visual_undo_request_indicator: preferences.get("visual-undo-request-indicator"),
             variation_stone_opacity: preferences.get("variation-stone-opacity"),
             onScoreEstimationUpdated: () => {
                 goban.current?.redraw(true);
@@ -1381,9 +1380,11 @@ export function Game(): JSX.Element | null {
                         "double-click-submit-correspondence",
                     );
                 }
+                /*
                 goban.current.visual_undo_request_indicator = preferences.get(
                     "visual-undo-request-indicator",
                 );
+                */
             } catch (e) {
                 console.error(e.stack);
             }

src/views/Settings/ThemePreferences.styl

@@ -33,4 +33,18 @@
     .small.board {
         padding-left: 0;
     }
+
+    .MiniGoban.inline {
+        height: 1.5rem;
+        width: 10rem;
+        margin-left: 3rem;
+    }
+
+    div.with-sample-goban {
+        .left {
+            display: inline-flex;
+            align-items: center;
+            width: 12rem;
+        }
+    }
 }