Merge pull request #2679 from online-go/svg

Add support for switching between the new SVG based goban renderer and the old canvas renderer
online-go · May 22, 2024 · 0beb956 · 0beb956
2 parents 1a06b4f + b4ab7fc
commit 0beb956
Show file tree

Hide file tree

Showing 33 changed files with 303 additions and 173 deletions.
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
         "express": "^4.19.2",
         "express-http-proxy": "^2.0.0",
         "fork-ts-checker-webpack-plugin": "^9.0.0",
-        "goban": "=0.7.40",
+        "goban": "=0.7.42",
         "gulp": "^5.0.0",
         "gulp-clean-css": "^4.3.0",
         "gulp-eslint-new": "^2.0.0",

diff --git a/src/components/AnnulQueueModal/AnnulQueueModal.tsx b/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);

diff --git a/src/components/ChallengeModal/ChallengeModal.tsx b/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 },
 ) {

diff --git a/src/components/ChallengeModal/ForkModal.tsx b/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;
     }

diff --git a/src/components/GameList/GameList.tsx b/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 {

diff --git a/src/components/GobanContainer/GobanContainer.tsx b/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) {

diff --git a/src/components/GobanLineSummary/GobanLineSummary.tsx b/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,