From 74fe2901130a251b4d84bb3a459153a1e5593f06 Mon Sep 17 00:00:00 2001 From: Akita Noek Date: Wed, 17 Jul 2024 06:51:42 -0600 Subject: [PATCH] Fixed re-using svg def id's to fix the ogs theme picker Apparently chrome mobile (only mobile) doesn't like re-using the ids between svg and just displays (properly measured) blank spaces instead. --- engine/package.json | 2 +- package.json | 2 +- src/Goban/themes/GobanTheme.ts | 12 ++++++++++-- src/Goban/themes/image_stones.ts | 20 ++++++++++++-------- src/Goban/themes/plain_stones.ts | 4 ++-- src/Goban/themes/rendered_stones.ts | 16 ++++++++-------- 6 files changed, 34 insertions(+), 22 deletions(-) diff --git a/engine/package.json b/engine/package.json index d1008f59..fa0b4e6d 100644 --- a/engine/package.json +++ b/engine/package.json @@ -1,6 +1,6 @@ { "name": "goban-engine", - "version": "8.3.13", + "version": "8.3.15", "description": "", "main": "build/goban-engine.js", "types": "build/engine/index.d.ts", diff --git a/package.json b/package.json index 7b579a30..b378072e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "goban", - "version": "8.3.13", + "version": "8.3.15", "description": "", "main": "build/goban.js", "types": "build/src/index.d.ts", diff --git a/src/Goban/themes/GobanTheme.ts b/src/Goban/themes/GobanTheme.ts index f129d244..e7b7a7ad 100644 --- a/src/Goban/themes/GobanTheme.ts +++ b/src/Goban/themes/GobanTheme.ts @@ -16,6 +16,8 @@ import { GobanBase } from "../../GobanBase"; +let last_def_uid = 0; + export interface GobanThemeBackgroundCSS { "background-color"?: string; "background-image"?: string; @@ -103,7 +105,7 @@ export class GobanTheme { _deferredRenderCallback: () => void, ): string[] { const ret = []; - const key = `black-${radius}`; + const key = this.def_uid(`black-${radius}`); ret.push(key); defs.appendChild( @@ -131,7 +133,7 @@ export class GobanTheme { _deferredRenderCallback: () => void, ): string[] { const ret = []; - const key = `white-${radius}`; + const key = this.def_uid(`white-${radius}`); ret.push(key); defs.appendChild( this.renderSVG( @@ -437,4 +439,10 @@ export class GobanTheme { return stone; } + + public def_uid(base: string): string { + const uid = last_def_uid++; + + return `${base}-${uid}`; + } } diff --git a/src/Goban/themes/image_stones.ts b/src/Goban/themes/image_stones.ts index ec3a0263..c8366dd3 100644 --- a/src/Goban/themes/image_stones.ts +++ b/src/Goban/themes/image_stones.ts @@ -267,17 +267,18 @@ export default function (THEMES: ThemesInterface) { _seed: number, deferredRenderCallback: () => void, ): string[] { + const id = this.def_uid(`anime-black-${radius}`); defs.append( this.renderSVG( { - id: `anime-black-${radius}`, + id, url: getCDNReleaseBase() + "/img/anime_black.svg", }, radius, ), ); - return [`anime-black-${radius}`]; + return [id]; } public override preRenderWhiteSVG( @@ -286,17 +287,18 @@ export default function (THEMES: ThemesInterface) { _seed: number, deferredRenderCallback: () => void, ): string[] { + const id = this.def_uid(`anime-white-${radius}`); defs.append( this.renderSVG( { - id: `anime-white-${radius}`, + id, url: getCDNReleaseBase() + "/img/anime_white.svg", }, radius, ), ); - return [`anime-white-${radius}`]; + return [id]; } } @@ -416,17 +418,18 @@ export default function (THEMES: ThemesInterface) { return super.preRenderBlackSVG(defs, radius, _seed, deferredRenderCallback); } + const id = this.def_uid(`custom-black-${radius}`); defs.append( this.renderSVG( { - id: `custom-black-${radius}`, + id, url: callbacks.customBlackStoneUrl(), }, radius, ), ); - return [`custom-black-${radius}`]; + return [id]; } public override preRenderWhiteSVG( @@ -439,17 +442,18 @@ export default function (THEMES: ThemesInterface) { return super.preRenderWhiteSVG(defs, radius, _seed, deferredRenderCallback); } + const id = this.def_uid(`custom-white-${radius}`); defs.append( this.renderSVG( { - id: `custom-white-${radius}`, + id, url: callbacks.customWhiteStoneUrl(), }, radius, ), ); - return [`custom-white-${radius}`]; + return [id]; } } diff --git a/src/Goban/themes/plain_stones.ts b/src/Goban/themes/plain_stones.ts index 2ded82d8..11137d3a 100644 --- a/src/Goban/themes/plain_stones.ts +++ b/src/Goban/themes/plain_stones.ts @@ -129,7 +129,7 @@ export default function (THEMES: ThemesInterface) { _deferredRenderCallback: () => void, ): string[] { const ret = []; - const key = `plain-black-${radius}`; + const key = this.def_uid(`plain-black-${radius}`); ret.push(key); let color: string | undefined = this.getBlackStoneColor(); @@ -174,7 +174,7 @@ export default function (THEMES: ThemesInterface) { _deferredRenderCallback: () => void, ): string[] { const ret = []; - const key = `plain-white-${radius}`; + const key = this.def_uid(`plain-white-${radius}`); ret.push(key); defs.appendChild( this.renderSVG( diff --git a/src/Goban/themes/rendered_stones.ts b/src/Goban/themes/rendered_stones.ts index e2510d34..f39f3ed7 100644 --- a/src/Goban/themes/rendered_stones.ts +++ b/src/Goban/themes/rendered_stones.ts @@ -533,7 +533,7 @@ export default function (THEMES: ThemesInterface) { _deferredRenderCallback: () => void, ): string[] { const ret = []; - const key = `black-slate-${radius}`; + const key = this.def_uid(`black-slate-${radius}`); ret.push(key); defs.appendChild( this.renderSVG( @@ -600,7 +600,7 @@ export default function (THEMES: ThemesInterface) { let s = seed; for (let i = 0; i < 20; ++i) { - const key = `white-shell-${i}-${radius}`; + const key = this.def_uid(`white-shell-${i}-${radius}`); ret.push(key); const stone = this.renderSVG( @@ -759,7 +759,7 @@ export default function (THEMES: ThemesInterface) { _seed: number, _deferredRenderCallback: () => void, ): string[] { - const key = `black-glass-${radius}`; + const key = this.def_uid(`black-glass-${radius}`); const stone = this.renderSVG( { id: key, @@ -795,7 +795,7 @@ export default function (THEMES: ThemesInterface) { _seed: number, _deferredRenderCallback: () => void, ): string[] { - const key = `white-glass-${radius}`; + const key = this.def_uid(`white-glass-${radius}`); const stone = this.renderSVG( { id: key, @@ -878,7 +878,7 @@ export default function (THEMES: ThemesInterface) { _seed: number, _deferredRenderCallback: () => void, ): string[] { - const key = `black-worn-glass-${radius}`; + const key = this.def_uid(`black-worn-glass-${radius}`); const stone = this.renderSVG( { id: key, @@ -914,7 +914,7 @@ export default function (THEMES: ThemesInterface) { _seed: number, _deferredRenderCallback: () => void, ): string[] { - const key = `white-worn-glass-${radius}`; + const key = this.def_uid(`white-worn-glass-${radius}`); const stone = this.renderSVG( { id: key, @@ -995,7 +995,7 @@ export default function (THEMES: ThemesInterface) { _seed: number, _deferredRenderCallback: () => void, ): string[] { - const key = `black-night-${radius}`; + const key = this.def_uid(`black-night-${radius}`); const stone = this.renderSVG( { id: key, @@ -1031,7 +1031,7 @@ export default function (THEMES: ThemesInterface) { _seed: number, _deferredRenderCallback: () => void, ): string[] { - const key = `white-night-${radius}`; + const key = this.def_uid(`white-night-${radius}`); const stone = this.renderSVG( { id: key,