Skip to content

Commit

Permalink
Fixed re-using svg def id's to fix the ogs theme picker
Browse files Browse the repository at this point in the history 
Apparently chrome mobile (only mobile) doesn't like re-using the ids
between svg and just displays (properly measured) blank spaces instead.
  • Loading branch information
@anoek
anoek committed Jul 17, 2024
1 parent 561f105 commit 74fe290
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 22 deletions.
2 changes: 1 addition & 1 deletion engine/package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
12 changes: 10 additions & 2 deletions src/Goban/themes/GobanTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@

import { GobanBase } from "../../GobanBase";

let last_def_uid = 0;

export interface GobanThemeBackgroundCSS {
"background-color"?: string;
"background-image"?: string;
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -437,4 +439,10 @@ export class GobanTheme {

return stone;
}

public def_uid(base: string): string {
const uid = last_def_uid++;

return `${base}-${uid}`;
}
}
20 changes: 12 additions & 8 deletions src/Goban/themes/image_stones.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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];
}
}

Expand Down Expand Up @@ -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(
Expand All @@ -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];
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/Goban/themes/plain_stones.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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(
Expand Down
16 changes: 8 additions & 8 deletions src/Goban/themes/rendered_stones.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 74fe290

Please sign in to comment.