Refactor: Simplifying names for clarity

src/renderer/GobanCanvas.ts → src/Goban/CanvasRenderer.ts

@@ -22,8 +22,7 @@ import { GobanConfig } from "../GobanBase";
 import { GoEngine } from "engine";
 import * as GoMath from "engine/GoMath";
 import { MoveTree } from "engine/MoveTree";
-import { GoTheme } from "./GoTheme";
-import { GoThemes } from "./GoThemes";
+import { Theme, THEMES } from "./themes";
 import { MoveTreePenMarks } from "engine/MoveTree";
 import {
     createDeviceScaledCanvas,
@@ -46,7 +45,7 @@ const __theme_cache: {
 
 declare let ResizeObserver: any;
 
-export interface GobanCanvasConfig extends GobanConfig {
+export interface CanvasRendererGobanConfig extends GobanConfig {
     board_div?: HTMLElement;
     title_div?: HTMLElement;
     move_tree_container?: HTMLElement;
@@ -134,22 +133,22 @@ export class GobanCanvas extends Goban implements GobanCanvasInterface {
         black: "Plain",
         white: "Plain",
     };
-    private theme_black!: GoTheme;
+    private theme_black!: Theme;
     private theme_black_stones: Array<any> = [];
     private theme_black_text_color: string = HOT_PINK;
     private theme_blank_text_color: string = HOT_PINK;
-    private theme_board!: GoTheme;
+    private theme_board!: Theme;
     private theme_faded_line_color: string = HOT_PINK;
     private theme_faded_star_color: string = HOT_PINK;
     //private theme_faded_text_color:string;
     private theme_line_color: string = "";
     private theme_star_color: string = "";
     private theme_stone_radius: number = 10;
-    private theme_white!: GoTheme;
+    private theme_white!: Theme;
     private theme_white_stones: Array<any> = [];
     private theme_white_text_color: string = HOT_PINK;
 
-    constructor(config: GobanCanvasConfig, preloaded_data?: AdHocFormat | JGOF) {
+    constructor(config: CanvasRendererGobanConfig, preloaded_data?: AdHocFormat | JGOF) {
         /* TODO: Need to reconcile the clock fields before we can get rid of this `any` cast */
         super(config, preloaded_data as any);
 
@@ -200,7 +199,7 @@ export class GobanCanvas extends Goban implements GobanCanvasInterface {
         // this.theme_board
         // this.theme_white
         // this.theme_black
-        this.setThemes(this.getSelectedThemes(), true);
+        this.setTheme(this.getSelectedThemes(), true);
         let first_pass = true;
         const watcher = this.watchSelectedThemes((themes: GobanSelectedThemes) => {
             if (
@@ -213,7 +212,7 @@ export class GobanCanvas extends Goban implements GobanCanvasInterface {
             delete __theme_cache.black?.["Custom"];
             delete __theme_cache.white?.["Custom"];
             delete __theme_cache.board?.["Custom"];
-            this.setThemes(themes, first_pass ? true : false);
+            this.setTheme(themes, first_pass ? true : false);
             first_pass = false;
         });
         this.on("destroy", () => watcher.remove());
@@ -2717,7 +2716,7 @@ export class GobanCanvas extends Goban implements GobanCanvasInterface {
                     throw new Error(`Failed to obtain drawing context for board`);
                 }
 
-                this.setThemes(this.getSelectedThemes(), true);
+                this.setTheme(this.getSelectedThemes(), true);
             } catch (e) {
                 setTimeout(() => {
                     throw e;
@@ -2975,15 +2974,15 @@ export class GobanCanvas extends Goban implements GobanCanvasInterface {
 
         this.emit("clear-message");
     }
-    protected setThemes(themes: GobanSelectedThemes, dont_redraw: boolean): void {
+    protected setTheme(themes: GobanSelectedThemes, dont_redraw: boolean): void {
         if (this.no_display) {
             return;
         }
 
         this.themes = themes;
-        const BoardTheme = GoThemes["board"]?.[themes.board] || GoThemes["board"]["Plain"];
-        const WhiteTheme = GoThemes["white"]?.[themes.white] || GoThemes["white"]["Plain"];
-        const BlackTheme = GoThemes["black"]?.[themes.black] || GoThemes["black"]["Plain"];
+        const BoardTheme = THEMES["board"]?.[themes.board] || THEMES["board"]["Plain"];
+        const WhiteTheme = THEMES["white"]?.[themes.white] || THEMES["white"]["Plain"];
+        const BlackTheme = THEMES["black"]?.[themes.black] || THEMES["black"]["Plain"];
         this.theme_board = new BoardTheme();
         this.theme_white = new WhiteTheme(this.theme_board);
         this.theme_black = new BlackTheme(this.theme_board);

src/renderer/Goban.ts → src/Goban/Goban.ts

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import { MARK_TYPES } from "./GobanInteractive";
-import { GobanOGSConnectivity } from "./GobanOGSConnectivity";
+import { MARK_TYPES } from "./InteractiveBase";
+import { OGSConnectivity } from "./OGSConnectivity";
 import { GobanConfig } from "../GobanBase";
 import { callbacks } from "./callbacks";
 import { makeMatrix, StoneStringBuilder } from "engine";
 import { getRelativeEventPosition } from "./canvas_utils";
+import { THEMES, THEMES_SORTED, Theme } from "./themes";
 
 export const GOBAN_FONT = "Verdana,Arial,sans-serif";
 export interface GobanSelectedThemes {
@@ -49,8 +50,14 @@ export interface GobanMetrics {
  * You can't create an instance of a Goban directly, you have to create an instance of
  * one of the renderers, such as GobanSVG.
  */
-export abstract class Goban extends GobanOGSConnectivity {
-    protected abstract setThemes(themes: GobanSelectedThemes, dont_redraw: boolean): void;
+export abstract class Goban extends OGSConnectivity {
+    static THEMES = THEMES;
+    static THEMES_SORTED = THEMES_SORTED;
+    static Theme = Theme;
+
+    protected abstract setTheme(themes: GobanSelectedThemes, dont_redraw: boolean): void;
+
+    protected parent!: HTMLElement;
 
     constructor(config: GobanConfig, preloaded_data?: GobanConfig) {
         super(config, preloaded_data);

src/renderer/GobanInteractive.ts → src/Goban/InteractiveBase.ts

@@ -129,13 +129,15 @@ export interface StateUpdateEvents {
 }
 
 /**
+ * This class serves as a functionality layer encapsulating core interactions
+ * we do with a Goban, we have it as a separate base class simply to help with
+ * code organization and to keep our Goban class size down.
  */
 export abstract class GobanInteractive extends GobanBase {
     public abstract sendTimedOut(): void;
     public abstract sent_timed_out_message: boolean; /// Expected to be true if sendTimedOut has been called
     protected abstract sendMove(mv: MoveCommand, cb?: () => void): boolean;
 
-    protected parent!: HTMLElement;
     public conditional_starting_color: "black" | "white" | "invalid" = "invalid";
     public conditional_tree: GoConditionalMove = new GoConditionalMove(null);
     public double_click_submit: boolean;

src/renderer/GobanOGSConnectivity.ts → src/Goban/OGSConnectivity.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { AudioClockEvent, GobanInteractive, MARK_TYPES, MoveCommand } from "./GobanInteractive";
+import { AudioClockEvent, GobanInteractive, MARK_TYPES, MoveCommand } from "./InteractiveBase";
 import { GobanConfig, JGOFClockWithTransmitting } from "../GobanBase";
 import { callbacks } from "./callbacks";
 import { _, interpolate } from "../engine/translate";
@@ -59,10 +59,13 @@ interface JGOFPlayerClockWithTimedOut extends JGOFPlayerClock {
     timed_out: boolean;
 }
 /**
- * Provides the online connectivity functionality for a Goban to be able
- * to connect to the Online-Go.com servers
+ * This class serves as a functionality layer encapsulating the logic connection
+ * that manages connections to the online-go.com servers.
+ *
+ * We have it as a separate base class simply to help with code organization
+ * and to keep our Goban class size down.
  */
-export abstract class GobanOGSConnectivity extends GobanInteractive {
+export abstract class OGSConnectivity extends GobanInteractive {
     public sent_timed_out_message: boolean = false;
     protected socket!: GobanSocket;
     protected socket_event_bindings: Array<[keyof GobanSocketEvents, () => void]> = [];

src/Goban/README.md

@@ -0,0 +1,51 @@
+
+
+This directory contains primarily front end `Goban` functionality. 
+
+The main class here is the `Goban` class, however because there is a lot of
+code and functionality that get's bundled up into a `Goban`, we've broken up
+that functionality across several files which implement different units of
+functionality and we use class inheritance to stack them up to something
+usable.
+
+
+
+
+```mermaid
+---
+title: Goban functionality layers
+---
+classDiagram
+    SVGRenderer --|> Goban : Rendering implementation
+    CanvasRenderer --|> Goban: Rendering implementation
+    Goban --|> OGSConnectivity : extends
+    OGSConnectivity --|> InteractiveBase: extends
+    InteractiveBase --|> GobanBase: extends
+    
+    
+
+    class SVGRenderer {
+        Final rendering functionality
+    }
+    class CanvasRenderer {
+        Final rendering functionality
+    }
+
+    class Goban {
+        Full functionality exposed
+        Common DOM manipulation functionality for our renderers
+    }
+
+    class OGSConnectivity {
+        Encapsulates socket connection logic
+    }
+
+    class InteractiveBase {
+        General purpose interactive functionality
+        No DOM expectations at this layer
+    }
+
+    class GobanBase {
+        Very abstract base that the Engine can use to interact with the Goban
+    }
+```

src/renderer/GobanSVG.ts → src/Goban/SVGRenderer.ts

@@ -23,8 +23,7 @@ import { GobanConfig } from "../GobanBase";
 import { GoEngine } from "engine";
 import * as GoMath from "engine/GoMath";
 import { MoveTree } from "engine/MoveTree";
-import { GoTheme } from "./GoTheme";
-import { GoThemes } from "./GoThemes";
+import { Theme, THEMES } from "./themes";
 import { MoveTreePenMarks } from "engine/MoveTree";
 import { getRelativeEventPosition } from "./canvas_utils";
 import { _ } from "engine/translate";
@@ -45,7 +44,7 @@ const __theme_cache: {
 
 declare let ResizeObserver: any;
 
-export interface GobanSVGConfig extends GobanConfig {
+export interface SVGRendererGobanConfig extends GobanConfig {
     board_div?: HTMLElement;
     title_div?: HTMLElement;
     move_tree_container?: HTMLElement;
@@ -91,7 +90,7 @@ interface GobanSVGInterface {
     destroy(): void;
 }
 
-export class GobanSVG extends Goban implements GobanSVGInterface {
+export class SVGRenderer extends Goban implements GobanSVGInterface {
     public engine: GoEngine;
     //private board_div: HTMLElement;
     private svg: SVGElement;
@@ -139,22 +138,22 @@ export class GobanSVG extends Goban implements GobanSVGInterface {
         black: "Plain",
         white: "Plain",
     };
-    private theme_black!: GoTheme;
+    private theme_black!: Theme;
     private theme_black_stones: Array<any> = [];
     private theme_black_text_color: string = HOT_PINK;
     private theme_blank_text_color: string = HOT_PINK;
-    private theme_board!: GoTheme;
+    private theme_board!: Theme;
     private theme_faded_line_color: string = HOT_PINK;
     private theme_faded_star_color: string = HOT_PINK;
     //private theme_faded_text_color:string;
     private theme_line_color: string = "";
     private theme_star_color: string = "";
     private theme_stone_radius: number = 10;
-    private theme_white!: GoTheme;
+    private theme_white!: Theme;
     private theme_white_stones: Array<any> = [];
     private theme_white_text_color: string = HOT_PINK;
 
-    constructor(config: GobanSVGConfig, preloaded_data?: AdHocFormat | JGOF) {
+    constructor(config: SVGRendererGobanConfig, preloaded_data?: AdHocFormat | JGOF) {
         /* TODO: Need to reconcile the clock fields before we can get rid of this `any` cast */
         super(config, preloaded_data as any);
 
@@ -203,7 +202,7 @@ export class GobanSVG extends Goban implements GobanSVGInterface {
         // this.theme_board
         // this.theme_white
         // this.theme_black
-        this.setThemes(this.getSelectedThemes(), true);
+        this.setTheme(this.getSelectedThemes(), true);
         let first_pass = true;
         const watcher = this.watchSelectedThemes((themes: GobanSelectedThemes) => {
             if (
@@ -216,7 +215,7 @@ export class GobanSVG extends Goban implements GobanSVGInterface {
             delete __theme_cache.black?.["Custom"];
             delete __theme_cache.white?.["Custom"];
             delete __theme_cache.board?.["Custom"];
-            this.setThemes(themes, first_pass ? true : false);
+            this.setTheme(themes, first_pass ? true : false);
             first_pass = false;
         });
         this.on("destroy", () => watcher.remove());
@@ -2933,7 +2932,7 @@ export class GobanSVG extends Goban implements GobanSVGInterface {
                 this.__set_board_width = metrics.width;
                 this.__set_board_height = metrics.height;
 
-                this.setThemes(this.getSelectedThemes(), true);
+                this.setTheme(this.getSelectedThemes(), true);
             } catch (e) {
                 setTimeout(() => {
                     throw e;
@@ -3067,16 +3066,16 @@ export class GobanSVG extends Goban implements GobanSVGInterface {
 
         this.emit("clear-message");
     }
-    protected setThemes(themes: GobanSelectedThemes, dont_redraw: boolean): void {
+    protected setTheme(themes: GobanSelectedThemes, dont_redraw: boolean): void {
         if (this.no_display) {
             console.log("No display");
             return;
         }
 
         this.themes = themes;
-        const BoardTheme = GoThemes["board"]?.[themes.board] || GoThemes["board"]["Plain"];
-        const WhiteTheme = GoThemes["white"]?.[themes.white] || GoThemes["white"]["Plain"];
-        const BlackTheme = GoThemes["black"]?.[themes.black] || GoThemes["black"]["Plain"];
+        const BoardTheme = THEMES["board"]?.[themes.board] || THEMES["board"]["Plain"];
+        const WhiteTheme = THEMES["white"]?.[themes.white] || THEMES["white"]["Plain"];
+        const BlackTheme = THEMES["black"]?.[themes.black] || THEMES["black"]["Plain"];
         this.theme_board = new BoardTheme();
         this.theme_white = new WhiteTheme(this.theme_board);
         this.theme_black = new BlackTheme(this.theme_board);

src/renderer/TestGoban.ts → src/Goban/TestGoban.ts

@@ -49,7 +49,7 @@ export class TestGoban extends Goban {
         timeout?: number | undefined,
     ): void {}
     public clearMessage(): void {}
-    protected setThemes(themes: GobanSelectedThemes, dont_redraw: boolean): void {}
+    protected setTheme(themes: GobanSelectedThemes, dont_redraw: boolean): void {}
     public drawSquare(i: number, j: number): void {}
     public redraw(force_clear?: boolean | undefined): void {}
     public move_tree_redraw(no_warp?: boolean | undefined): void {}

src/renderer/GoTheme.ts → src/Goban/themes/Theme.ts

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { GobanBase } from "../GobanBase";
+import { GobanBase } from "../../GobanBase";
 
-export interface GoThemeBackgroundCSS {
+export interface ThemeBackgroundCSS {
     "background-color"?: string;
     "background-image"?: string;
     "background-size"?: string;
 }
 
-export interface GoThemeBackgroundReactStyles {
+export interface ThemeBackgroundReactStyles {
     backgroundColor?: string;
     backgroundImage?: string;
     backgroundSize?: string;
@@ -54,12 +54,12 @@ export interface SVGStoneParameters {
     url?: string;
 }
 
-export class GoTheme {
+export class Theme {
     public name: string;
     public styles: { [style_name: string]: string } = {};
-    protected parent?: GoTheme; // An optional parent theme
+    protected parent?: Theme; // An optional parent theme
 
-    constructor(parent?: GoTheme) {
+    constructor(parent?: Theme) {
         this.name = `[ERROR theme missing name]`;
         this.parent = parent;
     }
@@ -301,17 +301,17 @@ export class GoTheme {
     }
 
     /* Returns a set of CSS styles that should be applied to the background layer (ie the board) */
-    public getBackgroundCSS(): GoThemeBackgroundCSS {
+    public getBackgroundCSS(): ThemeBackgroundCSS {
         return {
             "background-color": "#DCB35C",
             "background-image": "",
         };
     }
 
     /* Returns a set of CSS styles (for react) that should be applied to the background layer (ie the board) */
-    public getReactStyles(): GoThemeBackgroundReactStyles {
-        const ret: GoThemeBackgroundReactStyles = {};
-        const css: GoThemeBackgroundCSS = this.getBackgroundCSS();
+    public getReactStyles(): ThemeBackgroundReactStyles {
+        const ret: ThemeBackgroundReactStyles = {};
+        const css: ThemeBackgroundCSS = this.getBackgroundCSS();
 
         ret.backgroundColor = css["background-color"];
         ret.backgroundImage = css["background-image"];