diff --git a/src/Goban/CanvasRenderer.ts b/src/Goban/CanvasRenderer.ts index 4a0f12cb..9f8e72ab 100644 --- a/src/Goban/CanvasRenderer.ts +++ b/src/Goban/CanvasRenderer.ts @@ -22,7 +22,7 @@ import { GobanConfig } from "../GobanBase"; import { GoEngine } from "engine"; import * as GoMath from "engine/GoMath"; import { MoveTree } from "engine/MoveTree"; -import { Theme, THEMES } from "./themes"; +import { GobanTheme, THEMES } from "./themes"; import { MoveTreePenMarks } from "engine/MoveTree"; import { createDeviceScaledCanvas, @@ -133,18 +133,18 @@ export class GobanCanvas extends Goban implements GobanCanvasInterface { black: "Plain", white: "Plain", }; - private theme_black!: Theme; + private theme_black!: GobanTheme; private theme_black_stones: Array = []; private theme_black_text_color: string = HOT_PINK; private theme_blank_text_color: string = HOT_PINK; - private theme_board!: Theme; + private theme_board!: GobanTheme; 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!: Theme; + private theme_white!: GobanTheme; private theme_white_stones: Array = []; private theme_white_text_color: string = HOT_PINK; diff --git a/src/Goban/Goban.ts b/src/Goban/Goban.ts index 325fa5fd..0b33a8a2 100644 --- a/src/Goban/Goban.ts +++ b/src/Goban/Goban.ts @@ -20,7 +20,7 @@ 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"; +import { THEMES, THEMES_SORTED } from "./themes"; export const GOBAN_FONT = "Verdana,Arial,sans-serif"; export interface GobanSelectedThemes { @@ -53,7 +53,6 @@ export interface GobanMetrics { 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; diff --git a/src/Goban/SVGRenderer.ts b/src/Goban/SVGRenderer.ts index 62de85d7..e0402072 100644 --- a/src/Goban/SVGRenderer.ts +++ b/src/Goban/SVGRenderer.ts @@ -23,7 +23,7 @@ import { GobanConfig } from "../GobanBase"; import { GoEngine } from "engine"; import * as GoMath from "engine/GoMath"; import { MoveTree } from "engine/MoveTree"; -import { Theme, THEMES } from "./themes"; +import { GobanTheme, THEMES } from "./themes"; import { MoveTreePenMarks } from "engine/MoveTree"; import { getRelativeEventPosition } from "./canvas_utils"; import { _ } from "engine/translate"; @@ -138,18 +138,18 @@ export class SVGRenderer extends Goban implements GobanSVGInterface { black: "Plain", white: "Plain", }; - private theme_black!: Theme; + private theme_black!: GobanTheme; private theme_black_stones: Array = []; private theme_black_text_color: string = HOT_PINK; private theme_blank_text_color: string = HOT_PINK; - private theme_board!: Theme; + private theme_board!: GobanTheme; 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!: Theme; + private theme_white!: GobanTheme; private theme_white_stones: Array = []; private theme_white_text_color: string = HOT_PINK; diff --git a/src/Goban/themes/Theme.ts b/src/Goban/themes/Theme.ts deleted file mode 100644 index 66d800c0..00000000 --- a/src/Goban/themes/Theme.ts +++ /dev/null @@ -1,436 +0,0 @@ -/* - * Copyright (C) Online-Go.com - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { GobanBase } from "../../GobanBase"; - -export interface ThemeBackgroundCSS { - "background-color"?: string; - "background-image"?: string; - "background-size"?: string; -} - -export interface ThemeBackgroundReactStyles { - backgroundColor?: string; - backgroundImage?: string; - backgroundSize?: string; -} - -export interface SVGStop { - offset: number; - color: string; -} - -export interface SVGStoneParameters { - id: string; - fill?: string; - stroke?: string; - stroke_scale?: number; // scale the radius by this amount - gradient?: { - stops: SVGStop[]; - type?: "radial" | "linear"; // default radial - x1?: number; - x2?: number; - y1?: number; - y2?: number; - cx?: number; - cy?: number; - r?: number; - fx?: number; - fy?: number; - }; - url?: string; -} - -export class Theme { - public name: string; - public styles: { [style_name: string]: string } = {}; - protected parent?: Theme; // An optional parent theme - - constructor(parent?: Theme) { - this.name = `[ERROR theme missing name]`; - this.parent = parent; - } - - get theme_name(): string { - return "ERROR missing theme_name"; - } - public sort(): number { - return 0; - } - - /* Returns an array of black stone objects. The structure - * of the array elements is up to the implementor, as they are passed - * verbatim to the placeBlackStone method */ - public preRenderBlack( - _radius: number, - _seed: number, - _deferredRenderCallback: () => void, - ): any { - return { black: "stone" }; - } - - /* Returns an array of white stone objects. The structure - * of the array elements is up to the implementor, as they are passed - * verbatim to the placeWhiteStone method */ - public preRenderWhite( - _radius: number, - _seed: number, - _deferredRenderCallback: () => void, - ): any { - return { white: "stone" }; - } - - /* Returns an array of black stone objects. The structure - * of the array elements is up to the implementor, as they are passed - * verbatim to the placeBlackStone method */ - public preRenderBlackSVG( - defs: SVGDefsElement, - radius: number, - _seed: number, - _deferredRenderCallback: () => void, - ): string[] { - const ret = []; - const key = `black-${radius}`; - ret.push(key); - - defs.appendChild( - this.renderSVG( - { - id: key, - //fill: "hsl(8, 7%, 10%)", - //stroke: "hsl(8, 7%, 10%)", - fill: this.getBlackStoneColor(), - stroke: this.getBlackStoneColor(), - }, - radius, - ), - ); - return ret; - } - - /* Returns an array of white stone objects. The structure - * of the array elements is up to the implementor, as they are passed - * verbatim to the placeWhiteStone method */ - public preRenderWhiteSVG( - defs: SVGDefsElement, - radius: number, - _seed: number, - _deferredRenderCallback: () => void, - ): string[] { - const ret = []; - const key = `white-${radius}`; - ret.push(key); - defs.appendChild( - this.renderSVG( - { - id: key, - //fill: "hsl(8, 7%, 90%)", - //stroke: "hsl(8, 7%, 30%)", - fill: this.getWhiteStoneColor(), - stroke: this.getBlackStoneColor(), - }, - radius, - ), - ); - return ret; - } - - /* Places a pre rendered stone onto the canvas, centered at cx, cy */ - public placeWhiteStone( - ctx: CanvasRenderingContext2D, - _shadow_ctx: CanvasRenderingContext2D | null, - _stone: any, - cx: number, - cy: number, - radius: number, - ) { - //if (shadow_ctx) do something - ctx.fillStyle = this.getWhiteStoneColor(); - ctx.beginPath(); - ctx.arc(cx, cy, Math.max(0.1, radius), 0, 2 * Math.PI, true); - ctx.fill(); - } - - public placeBlackStone( - ctx: CanvasRenderingContext2D, - _shadow_ctx: CanvasRenderingContext2D | null, - _stone: any, - cx: number, - cy: number, - radius: number, - ) { - //if (shadow_ctx) do something - ctx.fillStyle = this.getBlackStoneColor(); - ctx.beginPath(); - ctx.arc(cx, cy, Math.max(0.1, radius), 0, 2 * Math.PI, true); - ctx.fill(); - } - - public placeStoneShadowSVG( - shadow_cell: SVGGraphicsElement | undefined, - cx: number, - cy: number, - radius: number, - color: string, - ): SVGElement | undefined { - if (!shadow_cell) { - return; - } - - const invisible_circle_to_cast_shadow = document.createElementNS( - "http://www.w3.org/2000/svg", - "circle", - ); - invisible_circle_to_cast_shadow.setAttribute("class", "shadow"); - invisible_circle_to_cast_shadow.setAttribute("fill", color); - invisible_circle_to_cast_shadow.setAttribute("cx", cx.toString()); - invisible_circle_to_cast_shadow.setAttribute("cy", cy.toString()); - invisible_circle_to_cast_shadow.setAttribute("r", (radius * 0.97).toString()); - const sx = radius * 0.15; - const sy = radius * 0.15; - const softness = radius * 0.1; - invisible_circle_to_cast_shadow.setAttribute( - "style", - `filter: drop-shadow(${sx}px ${sy}px ${softness}px rgba(0,0,0,0.4)`, - ); - shadow_cell.appendChild(invisible_circle_to_cast_shadow); - return invisible_circle_to_cast_shadow; - } - - public placeWhiteStoneSVG( - cell: SVGGraphicsElement, - shadow_cell: SVGGraphicsElement | undefined, - stone: string, - cx: number, - cy: number, - radius: number, - ): [SVGElement, SVGElement | undefined] { - const shadow = this.placeStoneShadowSVG(shadow_cell, cx, cy, radius, "#eeeeee"); - - const ref = document.createElementNS("http://www.w3.org/2000/svg", "use"); - ref.setAttribute("href", `#${stone}`); - ref.setAttribute("x", `${cx - radius}`); - ref.setAttribute("y", `${cy - radius}`); - cell.appendChild(ref); - - return [ref, shadow]; - } - - public placeBlackStoneSVG( - cell: SVGGraphicsElement, - shadow_cell: SVGGraphicsElement | undefined, - stone: string, - cx: number, - cy: number, - radius: number, - ): [SVGElement, SVGElement | undefined] { - const shadow = this.placeStoneShadowSVG(shadow_cell, cx, cy, radius, "#222222"); - - const ref = document.createElementNS("http://www.w3.org/2000/svg", "use"); - ref.setAttribute("href", `#${stone}`); - ref.setAttribute("x", `${cx - radius}`); - ref.setAttribute("y", `${cy - radius}`); - cell.appendChild(ref); - - return [ref, shadow]; - } - - /* Resolve which stone graphic we should use. By default we just pick a - * random one, if there are multiple images, otherwise whatever was - * returned by the pre-render method */ - public getStone(x: number, y: number, stones: any, _goban: GobanBase): any { - const ret = Array.isArray(stones) - ? stones[((x + 1) * 53 * ((y + 1) * 97)) % stones.length] - : stones; - - if (!ret) { - console.error("No stone returned for ", x, y, stones); - throw new Error("Failed to get stone for " + x + ", " + y); - } - - return ret; - } - - /* Resolve which stone graphic we should use. By default we just pick a - * random one, if there are multiple images, otherwise whatever was - * returned by the pre-render method */ - public getStoneHash(x: number, y: number, stones: any, _goban: GobanBase): string { - if (Array.isArray(stones)) { - return "" + (((x + 1) * 53 * ((y + 1) * 97)) % stones.length); - } - return ""; - } - - /* Should return true if you would like the shadow layer to be present. False - * speeds up rendering typically */ - public stoneCastsShadow(_radius: number): boolean { - return false; - } - - /* Returns the color that should be used for white stones */ - public getWhiteStoneColor(): string { - return "#ffffff"; - } - - /* Returns the color that should be used for black stones */ - public getBlackStoneColor(): string { - return "#000000"; - } - - /* Returns the color that should be used for text over white stones */ - public getWhiteTextColor(_color?: string): string { - return "#000000"; - } - - /* Returns the color that should be used for text over black stones */ - public getBlackTextColor(_color?: string): string { - return "#ffffff"; - } - - /* Returns a set of CSS styles that should be applied to the background layer (ie the board) */ - 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(): ThemeBackgroundReactStyles { - const ret: ThemeBackgroundReactStyles = {}; - const css: ThemeBackgroundCSS = this.getBackgroundCSS(); - - ret.backgroundColor = css["background-color"]; - ret.backgroundImage = css["background-image"]; - - return ret; - } - - /* Returns the color that should be used for lines */ - public getLineColor(): string { - return "#000000"; - } - - /* Returns the color that should be used for lines * when there is text over the square */ - public getFadedLineColor(): string { - return "#888888"; - } - - /* Returns the color that should be used for star points */ - public getStarColor(): string { - return "#000000"; - } - - /* Returns the color that should be used for star points - * when there is text over the square */ - public getFadedStarColor(): string { - return "#888888"; - } - - /* Returns the color that text should be over empty intersections */ - public getBlankTextColor(): string { - return "#000000"; - } - - /** Returns the color that should be used for labels */ - public getLabelTextColor(): string { - return "#000000"; - } - - public renderSVG(params: SVGStoneParameters, radius: number): SVGGraphicsElement { - const cx = radius; - const cy = radius; - - const stone = document.createElementNS("http://www.w3.org/2000/svg", "g"); - stone.setAttribute("id", params.id); - stone.setAttribute("class", "stone"); - - if (params.fill || params.stroke || params.gradient) { - const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); - stone.appendChild(circle); - if (params.fill) { - circle.setAttribute("fill", params.fill); - } - let stroke_width = 0.0; - if (params.stroke) { - circle.setAttribute("stroke", params.stroke); - if (params.stroke_scale) { - stroke_width = radius * params.stroke_scale; - } else { - stroke_width = radius / 20; - } - circle.setAttribute("stroke-width", `${stroke_width.toFixed(1)}px`); - } - circle.setAttribute("cx", cx.toString()); - circle.setAttribute("cy", cy.toString()); - circle.setAttribute("r", (radius - stroke_width * 0.5).toString()); - circle.setAttribute("shape-rendering", "geometricPrecision"); - - // gradient - if (params.gradient) { - const grad = params.gradient; - const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); - - let gradient; - - if (grad.type === "linear") { - gradient = document.createElementNS( - "http://www.w3.org/2000/svg", - "linearGradient", - ); - gradient.setAttribute("x1", (grad.x1 ?? 0.0).toFixed(2)); - gradient.setAttribute("y1", (grad.y1 ?? 0.0).toFixed(2)); - gradient.setAttribute("x2", (grad.x2 ?? 1.0).toFixed(2)); - gradient.setAttribute("y2", (grad.y2 ?? 1.0).toFixed(2)); - } else { - gradient = document.createElementNS( - "http://www.w3.org/2000/svg", - params.gradient.type === "linear" ? "linearGradient" : "radialGradient", - ); - gradient.setAttribute("cx", (grad.cx ?? 0.5).toFixed(2)); - gradient.setAttribute("cy", (grad.cy ?? 0.5).toFixed(2)); - gradient.setAttribute("r", (grad.r ?? 0.5).toFixed(2)); - gradient.setAttribute("fx", (grad.fx ?? 0.3).toFixed(2)); - gradient.setAttribute("fy", (grad.fy ?? 0.2).toFixed(2)); - } - gradient.setAttribute("id", params.id + "-gradient"); - - for (const stop of params.gradient.stops) { - const s = document.createElementNS("http://www.w3.org/2000/svg", "stop"); - s.setAttribute("offset", `${stop.offset}%`); - s.setAttribute("stop-color", stop.color); - gradient.appendChild(s); - } - defs.appendChild(gradient); - stone.appendChild(defs); - circle.setAttribute("fill", `url(#${params.id}-gradient)`); - } - } - - if (params.url) { - const stone_image = document.createElementNS("http://www.w3.org/2000/svg", "image"); - stone_image.setAttribute("class", "stone"); - stone_image.setAttribute("x", `${cx - radius}`); - stone_image.setAttribute("y", `${cy - radius}`); - stone_image.setAttribute("width", `${radius * 2}`); - stone_image.setAttribute("height", `${radius * 2}`); - stone_image.setAttributeNS("http://www.w3.org/1999/xlink", "href", params.url); - stone.appendChild(stone_image); - } - - return stone; - } -} diff --git a/src/Goban/themes/board_plain.ts b/src/Goban/themes/board_plain.ts index e1dd7096..942f4e8e 100644 --- a/src/Goban/themes/board_plain.ts +++ b/src/Goban/themes/board_plain.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Theme, ThemeBackgroundCSS } from "./Theme"; +import { GobanTheme, GobanThemeBackgroundCSS } from "./GobanTheme"; import { ThemesInterface } from "./"; import { callbacks } from "../callbacks"; import { _ } from "engine/translate"; @@ -32,14 +32,14 @@ function hexToRgba(raw: string, alpha: number = 1): string { } export default function (THEMES: ThemesInterface) { - class Plain extends Theme { + class Plain extends GobanTheme { override sort(): number { return 1; } override get theme_name(): string { return "Plain"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DCB35C", "background-image": "", @@ -68,14 +68,14 @@ export default function (THEMES: ThemesInterface) { _("Plain"); // ensure translation exists THEMES["board"]["Plain"] = Plain; - class Custom extends Theme { + class Custom extends GobanTheme { override sort(): number { return 200; //last, because this is the "customisable" one } override get theme_name(): string { return "Custom"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": callbacks.customBoardColor ? callbacks.customBoardColor() @@ -119,14 +119,14 @@ export default function (THEMES: ThemesInterface) { _("Custom"); // ensure translation exists THEMES["board"]["Custom"] = Custom; - class Night extends Theme { + class Night extends GobanTheme { override sort(): number { return 100; } override get theme_name(): string { return "Night Play"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#444444", "background-image": "", @@ -155,7 +155,7 @@ export default function (THEMES: ThemesInterface) { _("Night Play"); // ensure translation exists THEMES["board"]["Night Play"] = Night; - class HNG extends Theme { + class HNG extends GobanTheme { static C = "#00193E"; static C2 = "#004C75"; override sort(): number { @@ -164,7 +164,7 @@ export default function (THEMES: ThemesInterface) { override get theme_name(): string { return "HNG"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#00e7fc", "background-image": "", @@ -193,7 +193,7 @@ export default function (THEMES: ThemesInterface) { _("HNG"); // ensure translation exists THEMES["board"]["HNG"] = HNG; - class HNGNight extends Theme { + class HNGNight extends GobanTheme { static C = "#007591"; override sort(): number { return 105; @@ -201,7 +201,7 @@ export default function (THEMES: ThemesInterface) { override get theme_name(): string { return "HNG Night"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#090C1F", "background-image": "", @@ -230,14 +230,14 @@ export default function (THEMES: ThemesInterface) { _("HNG Night"); // ensure translation exists THEMES["board"]["HNG Night"] = HNGNight; - class Book extends Theme { + class Book extends GobanTheme { override sort(): number { return 110; } override get theme_name(): string { return "Book"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#ffffff", "background-image": "", diff --git a/src/Goban/themes/board_woods.ts b/src/Goban/themes/board_woods.ts index c4e8c826..a8d4426d 100644 --- a/src/Goban/themes/board_woods.ts +++ b/src/Goban/themes/board_woods.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Theme, ThemeBackgroundCSS } from "./Theme"; +import { GobanTheme, GobanThemeBackgroundCSS } from "./GobanTheme"; import { ThemesInterface } from "./"; import { _ } from "engine/translate"; import { callbacks } from "../callbacks"; @@ -27,14 +27,14 @@ function getCDNReleaseBase() { } export default function (THEMES: ThemesInterface) { - class Kaya extends Theme { + class Kaya extends GobanTheme { override sort(): number { return 10; } override get theme_name(): string { return "Kaya"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DCB35C", "background-image": "url('" + getCDNReleaseBase() + "/img/kaya.jpg')", @@ -63,14 +63,14 @@ export default function (THEMES: ThemesInterface) { _("Kaya"); // ensure translation THEMES["board"]["Kaya"] = Kaya; - class RedOak extends Theme { + class RedOak extends GobanTheme { override sort(): number { return 20; } override get theme_name(): string { return "Red Oak"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DCB35C", "background-image": "url('" + getCDNReleaseBase() + "/img/oak.jpg')", @@ -99,14 +99,14 @@ export default function (THEMES: ThemesInterface) { _("Red Oak"); // ensure translation THEMES["board"]["Red Oak"] = RedOak; - class Persimmon extends Theme { + class Persimmon extends GobanTheme { override sort(): number { return 30; } override get theme_name(): string { return "Persimmon"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DCB35C", "background-image": "url('" + getCDNReleaseBase() + "/img/persimmon.jpg')", @@ -135,14 +135,14 @@ export default function (THEMES: ThemesInterface) { _("Persimmon"); // ensure translation THEMES["board"]["Persimmon"] = Persimmon; - class BlackWalnut extends Theme { + class BlackWalnut extends GobanTheme { override sort(): number { return 40; } override get theme_name(): string { return "Black Walnut"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DCB35C", "background-image": "url('" + getCDNReleaseBase() + "/img/black_walnut.jpg')", @@ -171,14 +171,14 @@ export default function (THEMES: ThemesInterface) { _("Black Walnut"); // ensure translation THEMES["board"]["Black Walnut"] = BlackWalnut; - class Granite extends Theme { + class Granite extends GobanTheme { override sort(): number { return 40; } override get theme_name(): string { return "Granite"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DCB35C", "background-image": "url('" + getCDNReleaseBase() + "/img/granite.jpg')", @@ -207,14 +207,14 @@ export default function (THEMES: ThemesInterface) { _("Granite"); // ensure translation THEMES["board"]["Granite"] = Granite; - class Anime extends Theme { + class Anime extends GobanTheme { override sort(): number { return 10; } override get theme_name(): string { return "Anime"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DCB35C", "background-image": "url('" + getCDNReleaseBase() + "/img/anime_board.svg')", @@ -244,14 +244,14 @@ export default function (THEMES: ThemesInterface) { _("Anime"); // ensure translation THEMES["board"]["Anime"] = Anime; - class BrightKaya extends Theme { + class BrightKaya extends GobanTheme { override sort(): number { return 15; } override get theme_name(): string { return "Bright Kaya"; } - override getBackgroundCSS(): ThemeBackgroundCSS { + override getBackgroundCSS(): GobanThemeBackgroundCSS { return { "background-color": "#DBB25B", "background-image": "url('" + getCDNReleaseBase() + "/img/kaya.jpg')", diff --git a/src/Goban/themes/image_stones.ts b/src/Goban/themes/image_stones.ts index f392749e..b6c1d980 100644 --- a/src/Goban/themes/image_stones.ts +++ b/src/Goban/themes/image_stones.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Theme } from "./Theme"; +import { GobanTheme } from "./GobanTheme"; import { ThemesInterface } from "./"; import { _ } from "engine/translate"; import { deviceCanvasScalingRatio, allocateCanvasOrError } from "../canvas_utils"; @@ -167,7 +167,7 @@ export default function (THEMES: ThemesInterface) { // ignore } - class Common extends Theme { + class Common extends GobanTheme { override stoneCastsShadow(radius: number): boolean { return stoneCastsShadow(radius * deviceCanvasScalingRatio()); } diff --git a/src/Goban/themes/index.ts b/src/Goban/themes/index.ts index f1e08152..93c80787 100644 --- a/src/Goban/themes/index.ts +++ b/src/Goban/themes/index.ts @@ -14,14 +14,17 @@ * limitations under the License. */ -export { Theme } from "./Theme"; +export { GobanTheme } from "./GobanTheme"; -import { Theme } from "./Theme"; +import { GobanTheme } from "./GobanTheme"; export interface ThemesInterface { - white: { [name: string]: typeof Theme }; - black: { [name: string]: typeof Theme }; - board: { [name: string]: typeof Theme }; + white: { [name: string]: typeof GobanTheme }; + black: { [name: string]: typeof GobanTheme }; + board: { [name: string]: typeof GobanTheme }; + + // Exists so we can do for (const theme of THEMES) { ...THEMES[theme]... } + [key: string]: { [name: string]: typeof GobanTheme }; } export const THEMES: ThemesInterface = { @@ -30,9 +33,12 @@ export const THEMES: ThemesInterface = { board: {}, }; export const THEMES_SORTED: { - white: Theme[]; - black: Theme[]; - board: Theme[]; + white: GobanTheme[]; + black: GobanTheme[]; + board: GobanTheme[]; + + // Exists so we can do for (const theme of THEMES_SORTED) { ...THEMES_SORTED[theme]... } + [key: string]: GobanTheme[]; } = { white: [], black: [], board: [] }; import init_board_plain from "./board_plain"; @@ -47,7 +53,7 @@ init_plain_stones(THEMES); init_rendered(THEMES); init_image_stones(THEMES); -function theme_sort(a: Theme, b: Theme) { +function theme_sort(a: GobanTheme, b: GobanTheme) { return a.sort() - b.sort(); } diff --git a/src/Goban/themes/plain_stones.ts b/src/Goban/themes/plain_stones.ts index dd615f3d..ec276050 100644 --- a/src/Goban/themes/plain_stones.ts +++ b/src/Goban/themes/plain_stones.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Theme } from "./Theme"; +import { GobanTheme } from "./GobanTheme"; import { ThemesInterface } from "./"; import { _ } from "engine/translate"; @@ -51,7 +51,7 @@ export function renderPlainStone( } export default function (THEMES: ThemesInterface) { - class Stone extends Theme { + class Stone extends GobanTheme { override sort(): number { return 1; } diff --git a/src/Goban/themes/rendered_stones.ts b/src/Goban/themes/rendered_stones.ts index e5fe4de0..a9d4291a 100644 --- a/src/Goban/themes/rendered_stones.ts +++ b/src/Goban/themes/rendered_stones.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Theme } from "./Theme"; +import { GobanTheme } from "./GobanTheme"; import { ThemesInterface } from "./"; import { _ } from "engine/translate"; import { deviceCanvasScalingRatio, allocateCanvasOrError } from "../canvas_utils"; @@ -478,7 +478,7 @@ function stoneCastsShadow(radius: number): boolean { } export default function (THEMES: ThemesInterface) { - class Common extends Theme { + class Common extends GobanTheme { override stoneCastsShadow(radius: number): boolean { return stoneCastsShadow(radius * deviceCanvasScalingRatio()); }