Add support for switching between the new SVG based goban renderer an…

…d the old canvas renderer

src/components/AnnulQueueModal/AnnulQueueModal.tsx

@@ -18,7 +18,7 @@
 import * as React from "react";
 import { _ } from "translate";
 import { MiniGoban } from "MiniGoban";
-import { Goban } from "goban";
+import { GobanRenderer } from "goban";
 import { AIReview, GameTimings, ChatMode, GameChat, GobanContext } from "Game";
 import { Player } from "Player";
 import { Resizable } from "Resizable";
@@ -45,9 +45,9 @@ export function AnnulQueueModal({
 }: AnnulQueueModalProps) {
     // Declare state variables
     const [selectedGameIndex, setSelectedGameIndex] = React.useState(0);
-    const [goban, setGoban] = React.useState<Goban | null>(null);
+    const [goban, setGoban] = React.useState<GobanRenderer | null>(null);
     const [selectedChatLog, setSelectedChatLog] = React.useState<ChatMode>("main");
-    const onGobanCreated = React.useCallback((goban: Goban) => {
+    const onGobanCreated = React.useCallback((goban: GobanRenderer) => {
         setGoban(goban);
     }, []);
     const [, setAiReviewUuid] = React.useState<string | null>(null);

src/components/ChallengeModal/ChallengeModal.tsx

@@ -41,7 +41,7 @@ import { notification_manager, NotificationManagerEvents } from "Notifications/N
 import { one_bot, bot_count, bots_list } from "bots";
 import { goban_view_mode } from "Game/util";
 import {
-    Goban,
+    GobanRenderer,
     GoEngineConfig,
     GoEngineInitialState,
     GoEnginePlayerEntry,
@@ -1889,7 +1889,7 @@ export function challengeComputer() {
     return challenge(undefined, null, true);
 }
 export function challengeRematch(
-    goban: Goban,
+    goban: GobanRenderer,
     opponent: GoEnginePlayerEntry,
     original_game_meta: GoEngineConfig & { pause_on_weekends?: boolean },
 ) {

src/components/ChallengeModal/ForkModal.tsx

@@ -19,7 +19,7 @@ import * as React from "react";
 import * as data from "data";
 import { _ } from "translate";
 import { Modal, openModal } from "Modal";
-import { Goban } from "goban";
+import { GobanRenderer } from "goban";
 import { PlayerAutocomplete } from "PlayerAutocomplete";
 import { MiniGoban } from "MiniGoban";
 import { challenge } from "ChallengeModal";
@@ -28,7 +28,7 @@ import { PlayerCacheEntry } from "src/lib/player_cache";
 interface Events {}
 
 interface ForkModalProperties {
-    goban: Goban;
+    goban: GobanRenderer;
 }
 
 export class ForkModal extends Modal<Events, ForkModalProperties, any> {
@@ -99,10 +99,10 @@ export class ForkModal extends Modal<Events, ForkModalProperties, any> {
     }
 }
 
-export function openForkModal(goban: Goban) {
+export function openForkModal(goban: GobanRenderer) {
     return openModal(<ForkModal goban={goban} />);
 }
-export function challengeFromBoardPosition(goban: Goban) {
+export function challengeFromBoardPosition(goban: GobanRenderer) {
     if (!goban) {
         return;
     }

src/components/GameList/GameList.tsx

@@ -30,7 +30,7 @@ import {
     AdHocPlayerClock,
     AdHocPauseControl,
     AdHocPackedMove,
-    Goban,
+    GobanRenderer,
 } from "goban";
 
 interface UserType {
@@ -43,7 +43,7 @@ interface GameType {
     name: string;
     black: UserType;
     white: UserType;
-    goban?: Goban;
+    goban?: GobanRenderer;
     json?: {
         clock: AdHocClock;
         moves: AdHocPackedMove[];
@@ -373,7 +373,7 @@ export class GameList extends React.PureComponent<GameListProps, GameListState>
                     currentSort={this.state.sort_order}
                     player={this.props.player}
                     lineSummaryMode={this.props.lineSummaryMode}
-                    onGobanCreated={(game: GameType, goban: Goban) =>
+                    onGobanCreated={(game: GameType, goban: GobanRenderer) =>
                         this.onGobanCreated(game, goban)
                     }
                 ></LineSummaryTable>
@@ -382,14 +382,14 @@ export class GameList extends React.PureComponent<GameListProps, GameListState>
             return MiniGobanList(
                 games,
                 !!this.props.namesByGobans,
-                (game: GameType, goban: Goban) => this.onGobanCreated(game, goban),
+                (game: GameType, goban: GobanRenderer) => this.onGobanCreated(game, goban),
                 this.props?.player,
                 this.props.miniGobanProps,
             );
         }
     }
 
-    onGobanCreated(game: GameType, goban: Goban) {
+    onGobanCreated(game: GameType, goban: GobanRenderer) {
         // Save a pointer into the goban to use when sorting.
         game.goban = goban;
 
@@ -419,7 +419,7 @@ interface LineSummaryTableProps extends GameListProps {
     disableSort: boolean;
     currentSort: SortOrder | DescendingSortOrder;
     onSort: (sortBy: SortOrder) => void;
-    onGobanCreated: (game: GameType, goban: Goban) => void;
+    onGobanCreated: (game: GameType, goban: GobanRenderer) => void;
 }
 
 function LineSummaryTable({
@@ -523,7 +523,7 @@ function LineSummaryTable({
 function MiniGobanList(
     games: GameType[],
     withNames: boolean,
-    onGobanCreated: (game: GameType, goban: Goban) => void,
+    onGobanCreated: (game: GameType, goban: GobanRenderer) => void,
     player?: { id: number },
     miniGobanProps?: MiniGobanProps,
 ): JSX.Element {

src/components/GobanContainer/GobanContainer.tsx

@@ -18,15 +18,15 @@
 import * as React from "react";
 import { PersistentElement } from "PersistentElement";
 import { OgsResizeDetector } from "OgsResizeDetector";
-import { GobanCanvas, GobanCanvasConfig } from "goban";
+import { GobanRenderer, GobanRendererConfig } from "goban";
 // Pull this out its own util
 import { goban_view_mode } from "Game/util";
 //import { generateGobanHook } from "Game/GameHooks";
 
 import { usePreference } from "preferences";
 
 interface GobanContainerProps {
-    goban?: GobanCanvas;
+    goban?: GobanRenderer;
     /** callback that is called when the goban detects a resize. */
     onResize?: () => void;
     /** Additional props to pass to the PersistentElement that wraps the goban_div */
@@ -45,8 +45,7 @@ export function GobanContainer({
     const resize_debounce = React.useRef<NodeJS.Timeout | null>(null);
     const [last_move_opacity] = usePreference("last-move-opacity");
 
-    // Since goban is a GobanCanvas, we know goban.config is a GobanCanvasConfig
-    const goban_div = (goban?.config as GobanCanvasConfig | undefined)?.board_div;
+    const goban_div = (goban?.config as GobanRendererConfig | undefined)?.board_div;
 
     const recenterGoban = () => {
         if (!ref_goban_container.current || !goban || !goban_div) {
@@ -112,7 +111,7 @@ export function GobanContainer({
         [goban, goban_div, onResizeCb],
     );
 
-    // Trigger resize on new Goban and subsequent "load" events
+    // Trigger resize on createGoban and subsequent "load" events
     //generateGobanHook(() => onResize(/* no_debounce */ true, /* do_cb */ false))(goban || null);
 
     if (!goban || !goban_div) {

src/components/GobanLineSummary/GobanLineSummary.tsx

@@ -18,7 +18,7 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 import { interpolate } from "translate";
-import { Goban } from "goban";
+import { createGoban, GobanRenderer } from "goban";
 import * as data from "data";
 import { rankString } from "rank_utils";
 import { Player } from "Player";
@@ -41,7 +41,7 @@ interface GobanLineSummaryProps {
     black: UserType;
     white: UserType;
     player?: { id: number };
-    gobanRef?: (goban: Goban) => void;
+    gobanRef?: (goban: GobanRenderer) => void;
     width?: number;
     height?: number;
     rengo_teams?: {
@@ -62,7 +62,7 @@ export class GobanLineSummary extends React.Component<
     GobanLineSummaryProps,
     GobanLineSummaryState
 > {
-    goban!: Goban;
+    goban!: GobanRenderer;
 
     constructor(props: GobanLineSummaryProps) {
         super(props);
@@ -100,7 +100,7 @@ export class GobanLineSummary extends React.Component<
          */
 
         requestAnimationFrame(() => {
-            this.goban = new Goban({
+            this.goban = createGoban({
                 board_div: undefined,
                 draw_top_labels: false,
                 draw_bottom_labels: false,

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 { Goban } from "goban";
+import { GobanRenderer, createGoban } from "goban";
 import * as data from "data";
 import { PersistentElement } from "PersistentElement";
 import { getUserRating, PROVISIONAL_RATING_CUTOFF } from "rank_utils";
@@ -51,7 +51,7 @@ export interface MiniGobanProps {
     openLinksInNewTab?: boolean;
     noText?: boolean;
     title?: boolean;
-    onGobanCreated?: (goban: Goban) => void;
+    onGobanCreated?: (goban: GobanRenderer) => void;
     chat?: boolean;
 }
 
@@ -63,7 +63,7 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
             return ret;
         })(),
     );
-    const goban = React.useRef<Goban>();
+    const goban = React.useRef<GobanRenderer>();
 
     const [white_points, setWhitePoints] = React.useState("");
     const [black_points, setBlackPoints] = React.useState("");
@@ -83,7 +83,7 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
     const [last_move_opacity] = usePreference("last-move-opacity");
 
     React.useEffect(() => {
-        goban.current = new Goban(
+        goban.current = createGoban(
             {
                 board_div: goban_div.current,
                 draw_top_labels: false,

src/components/TimeControl/util.ts

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { computeAverageMoveTime, Goban, JGOFTimeControl } from "goban";
+import { computeAverageMoveTime, GobanRenderer, JGOFTimeControl } from "goban";
 import { _, pgettext, ngettext, interpolate } from "translate";
 import { TimeControl, TimeControlTypes } from "./TimeControl";
 
@@ -454,7 +454,7 @@ export function usedForCheating(_time_control: ValidTimeControlFormats) {
 
 export function lookingAtOurLiveGame(): boolean {
     // Is the current page looking at a game we are live playing in...
-    const goban = (window as any)["global_goban"] as Goban;
+    const goban = (window as any)["global_goban"] as GobanRenderer;
     if (!goban) {
         return false;
     }

src/lib/configure-goban.ts

@@ -20,10 +20,10 @@ import * as data from "data";
 import * as Sentry from "@sentry/browser";
 import { get_clock_drift, get_network_latency, socket } from "sockets";
 import { current_language } from "translate";
-import { Goban, GobanCore, GoEngine, GoThemes } from "goban";
+import { GobanCore, GoEngine, GoThemes, setGobanRenderer } from "goban";
 import { sfx } from "sfx";
 
-(window as any)["Goban"] = Goban;
+//(window as any)["Goban"] = Goban;
 (window as any)["GoThemes"] = GoThemes;
 (window as any)["GoEngine"] = GoEngine;
 
@@ -34,7 +34,14 @@ data.setDefault("custom.line", "#000000");
 data.setDefault("custom.url", "");
 
 export function configure_goban() {
-    Goban.setHooks({
+    data.watch("experiments.v6", () => {
+        const v = data.get("experiments.v6");
+        if (v === "enabled") {
+            setGobanRenderer("svg");
+        }
+    });
+
+    GobanCore.setHooks({
         defaultConfig: () => {
             return {
                 server_socket: socket,

src/lib/sockets.ts

@@ -16,7 +16,7 @@
  */
 
 import Debug from "debug";
-import { GobanSocket, protocol, Goban, JGOFTimeControl } from "goban";
+import { GobanSocket, protocol, GobanRenderer, JGOFTimeControl } from "goban";
 import { lookingAtOurLiveGame } from "TimeControl/util";
 
 const debug = new Debug("sockets");
@@ -95,7 +95,7 @@ socket.on("latency", (latency, drift) => {
     // If they are playing a live game at the moment, work out what timing they would like
     // us to make sure that they have...
     if (lookingAtOurLiveGame()) {
-        const goban = (window as any)["global_goban"] as Goban;
+        const goban = (window as any)["global_goban"] as GobanRenderer;
         const time_control = goban.engine.time_control as JGOFTimeControl;
         switch (time_control.system) {
             case "fischer":

src/views/Game/AIDemoReview.tsx

@@ -22,7 +22,7 @@ import { Toggle } from "Toggle";
 import { uuid } from "misc";
 import * as preferences from "preferences";
 import { usePreference } from "preferences";
-import { JGOFNumericPlayerColor, ColoredCircle, MoveTree, Goban } from "goban";
+import { JGOFNumericPlayerColor, ColoredCircle, MoveTree, GobanRenderer } from "goban";
 import { useUser } from "hooks";
 
 const cached_data: { [review_id: number]: { [board_string: string]: any } } = {};
@@ -36,7 +36,7 @@ export function AIDemoReview({
     goban,
     controller,
 }: {
-    goban: Goban;
+    goban: GobanRenderer;
     controller: number;
 }): JSX.Element | null {
     const user = useUser();
@@ -324,7 +324,7 @@ function stringifyBoardState(move: MoveTree): string {
     return move.state.board.reduce((a, b) => a + b.reduce((a, b) => a + b, ""), "");
 }
 
-function clearAnalysis(goban: Goban) {
+function clearAnalysis(goban: GobanRenderer) {
     goban.setMarks({}, true); /* draw the remaining AI sequence as ghost marks, if any */
     goban.setHeatmap(undefined, true);
     goban.setColoredCircles([], false);
@@ -334,7 +334,7 @@ function computePrediction(data: any): any {
     return { score: data.analysis.score, win_rate: data.analysis.win_rate };
 }
 
-function renderAnalysis(goban: Goban, data: any) {
+function renderAnalysis(goban: GobanRenderer, data: any) {
     if (!preferences.get("ai-review-enabled")) {
         return;
     }

src/views/Game/Game.tsx

@@ -28,9 +28,9 @@ import { KBShortcut } from "KBShortcut";
 import { UIPush } from "UIPush";
 import { errorAlerter, ignore, rulesText } from "misc";
 import {
-    Goban,
-    GobanCanvas,
-    GobanCanvasConfig,
+    createGoban,
+    GobanRenderer,
+    GobanRendererConfig,
     GoMath,
     MoveTree,
     AudioClockEvent,
@@ -99,7 +99,7 @@ export function Game(): JSX.Element | null {
     const copied_node = React.useRef<MoveTree>();
     const white_username = React.useRef<string>("White");
     const black_username = React.useRef<string>("Black");
-    const goban = React.useRef<Goban | null>(null);
+    const goban = React.useRef<GobanRenderer | null>(null);
     const return_url_debounce = React.useRef<boolean>(false);
     const last_phase = React.useRef<string>("");
     const page_loaded_time = React.useRef<number>(Date.now()); // when we first created this view
@@ -1041,7 +1041,7 @@ export function Game(): JSX.Element | null {
     const setMoveTreeContainer = (resizable: Resizable): void => {
         ref_move_tree_container.current = resizable ? resizable.div ?? undefined : undefined;
         if (goban.current && ref_move_tree_container.current) {
-            (goban.current as GobanCanvas).setMoveTreeContainer(ref_move_tree_container.current);
+            (goban.current as GobanRenderer).setMoveTreeContainer(ref_move_tree_container.current);
         }
     };
 
@@ -1073,7 +1073,7 @@ export function Game(): JSX.Element | null {
         document.addEventListener("keypress", setLabelHandler);
 
         const label_position = preferences.get("label-positioning");
-        const opts: GobanCanvasConfig = {
+        const opts: GobanRendererConfig = {
             board_div: goban_div.current,
             move_tree_container: ref_move_tree_container.current,
             interactive: true,
@@ -1107,7 +1107,7 @@ export function Game(): JSX.Element | null {
                 goban.current?.review_controller_id === data.get("user").id;
         }
 
-        goban.current = new Goban(opts);
+        goban.current = createGoban(opts);
 
         onResize(true);
         (window as any)["global_goban"] = goban.current;
@@ -1772,7 +1772,7 @@ export function Game(): JSX.Element | null {
     );
 }
 
-function bindAudioEvents(goban: Goban): void {
+function bindAudioEvents(goban: GobanRenderer): void {
     // called by init
     const user = data.get("user");