From 247b059fb740b66acc81437bfa689a153cdda2b0 Mon Sep 17 00:00:00 2001 From: Akita Noek Date: Fri, 6 Sep 2024 10:06:19 -0600 Subject: [PATCH] Fix default board/stone themes appearing selected for users that have never picked --- .../GobanThemePicker/GobanThemePicker.tsx | 61 +++++++++++-------- 1 file changed, 37 insertions(+), 24 deletions(-) diff --git a/src/components/GobanThemePicker/GobanThemePicker.tsx b/src/components/GobanThemePicker/GobanThemePicker.tsx index e4291eb9f1..c5078ded43 100644 --- a/src/components/GobanThemePicker/GobanThemePicker.tsx +++ b/src/components/GobanThemePicker/GobanThemePicker.tsx @@ -18,7 +18,7 @@ import * as React from "react"; import { _, pgettext } from "translate"; import { Goban, GobanTheme /*, GobanThemeBackgroundCSS */ } from "goban"; -import { usePreference } from "preferences"; +import { getSelectedThemes, usePreference } from "preferences"; import { PersistentElement } from "PersistentElement"; import { Experiment, Variant, Default } from "../Experiment"; import { LineText } from "../misc-ui"; @@ -72,7 +72,9 @@ export function GobanBoardThemePicker(props: GobanThemePickerProperties): JSX.El const canvases = React.useRef([]); const selectTheme = React.useRef<{ [k: string]: () => void }>({}); const [, setCanvasesRenderedCt] = React.useState(0); - const [board, setBoard] = usePreference("goban-theme-board"); + const [, setBoard] = usePreference("goban-theme-board"); + + const selected = getSelectedThemes(); React.useEffect(() => { canvases.current.length = 0; @@ -99,7 +101,9 @@ export function GobanBoardThemePicker(props: GobanThemePickerProperties): JSX.El
@@ -122,7 +126,8 @@ export function GobanCustomBoardPicker(props: GobanThemePickerProperties): JSX.E const sample_canvas = React.useRef(); const [, refresh] = React.useState(0); const theme = Goban.THEMES_SORTED.board.filter((x) => x.theme_name === "Custom")[0]; - const [board, setBoard] = usePreference("goban-theme-board"); + const [, setBoard] = usePreference("goban-theme-board"); + const selected = getSelectedThemes(); const inputStyle = { height: `${size}px`, width: `${size * 1.5}px` }; @@ -164,7 +169,7 @@ export function GobanCustomBoardPicker(props: GobanThemePickerProperties): JSX.E
setBoard("Custom")} > @@ -260,8 +265,9 @@ export function GobanWhiteThemePicker(props: GobanThemePickerProperties): JSX.El const canvases = React.useRef([]); const selectTheme = React.useRef<{ [k: string]: () => void }>({}); const [, setCanvasesRenderedCt] = React.useState(0); - const [white, setWhite] = usePreference("goban-theme-white"); - const [board] = usePreference("goban-theme-board"); + const [, setWhite] = usePreference("goban-theme-white"); + usePreference("goban-theme-board"); // trigger refresh when board changes + const selected = getSelectedThemes(); const [background_color, _setBackgroundColor] = usePreference( "goban-theme-custom-board-background", ); @@ -289,7 +295,7 @@ export function GobanWhiteThemePicker(props: GobanThemePickerProperties): JSX.El const custom_board = Goban.THEMES_SORTED.board.filter((x) => x.theme_name === "Custom")[0]; const active_standard_board_theme = Goban.THEMES_SORTED.board.filter( - (x) => x.theme_name === board, + (x) => x.theme_name === selected.board, )[0]; if (!active_standard_board_theme) { @@ -297,7 +303,7 @@ export function GobanWhiteThemePicker(props: GobanThemePickerProperties): JSX.El } const board_styles = - board === custom_board.theme_name + selected.board === custom_board.theme_name ? { backgroundColor: background_color, backgroundImage: `url(${background_image})`, @@ -317,7 +323,8 @@ export function GobanWhiteThemePicker(props: GobanThemePickerProperties): JSX.El key={theme.theme_name} title={_(theme.theme_name)} className={ - "selector" + (white === theme.theme_name ? " active" : "") + "selector" + + (selected.white === theme.theme_name ? " active" : "") } style={{ ...theme.styles, @@ -337,7 +344,8 @@ export function GobanWhiteThemePicker(props: GobanThemePickerProperties): JSX.El key={theme.theme_name} title={_(theme.theme_name)} className={ - "selector" + (white === theme.theme_name ? " active" : "") + "selector" + + (selected.white === theme.theme_name ? " active" : "") } style={{ ...theme.styles, @@ -362,8 +370,9 @@ export function GobanCustomBlackPicker(props: GobanThemePickerProperties): JSX.E const [color, _setColor] = usePreference("goban-theme-custom-black-stone-color"); const [, refresh] = React.useState(0); const theme = Goban.THEMES_SORTED.black.filter((x) => x.theme_name === "Custom")[0]; - const [black, setBlack] = usePreference("goban-theme-black"); - const [board] = usePreference("goban-theme-board"); + const [, setBlack] = usePreference("goban-theme-black"); + usePreference("goban-theme-board"); // trigger refresh when board changes + const selected = getSelectedThemes(); const [background_color, _setBackgroundColor] = usePreference( "goban-theme-custom-board-background", ); @@ -386,10 +395,10 @@ export function GobanCustomBlackPicker(props: GobanThemePickerProperties): JSX.E const custom_board = Goban.THEMES_SORTED.board.filter((x) => x.theme_name === "Custom")[0]; const active_standard_board_theme = Goban.THEMES_SORTED.board.filter( - (x) => x.theme_name === board, + (x) => x.theme_name === selected.board, )[0]; const board_styles = - board === custom_board.theme_name + selected.board === custom_board.theme_name ? { backgroundColor: background_color, backgroundImage: `url(${background_image})`, @@ -411,7 +420,7 @@ export function GobanCustomBlackPicker(props: GobanThemePickerProperties): JSX.E
setBlack("Custom")} > @@ -453,8 +462,9 @@ export function GobanBlackThemePicker(props: GobanThemePickerProperties): JSX.El const canvases = React.useRef([]); const selectTheme = React.useRef<{ [k: string]: () => void }>({}); const [, setCanvasesRenderedCt] = React.useState(0); - const [black, setBlack] = usePreference("goban-theme-black"); - const [board] = usePreference("goban-theme-board"); + const [, setBlack] = usePreference("goban-theme-black"); + usePreference("goban-theme-board"); // trigger refresh when board changes + const selected = getSelectedThemes(); const [background_color, _setBackgroundColor] = usePreference( "goban-theme-custom-board-background", ); @@ -482,7 +492,7 @@ export function GobanBlackThemePicker(props: GobanThemePickerProperties): JSX.El const custom_board = Goban.THEMES_SORTED.board.filter((x) => x.theme_name === "Custom")[0]; const active_standard_board_theme = Goban.THEMES_SORTED.board.filter( - (x) => x.theme_name === board, + (x) => x.theme_name === selected.board, )[0]; if (!active_standard_board_theme) { @@ -490,7 +500,7 @@ export function GobanBlackThemePicker(props: GobanThemePickerProperties): JSX.El } const board_styles = - board === custom_board.theme_name + selected.board === custom_board.theme_name ? { backgroundColor: background_color, backgroundImage: `url(${background_image})`, @@ -510,7 +520,8 @@ export function GobanBlackThemePicker(props: GobanThemePickerProperties): JSX.El key={theme.theme_name} title={_(theme.theme_name)} className={ - "selector" + (black === theme.theme_name ? " active" : "") + "selector" + + (selected.black === theme.theme_name ? " active" : "") } style={{ ...theme.styles, @@ -530,7 +541,8 @@ export function GobanBlackThemePicker(props: GobanThemePickerProperties): JSX.El key={theme.theme_name} title={_(theme.theme_name)} className={ - "selector" + (black === theme.theme_name ? " active" : "") + "selector" + + (selected.black === theme.theme_name ? " active" : "") } style={{ ...theme.styles, @@ -555,7 +567,8 @@ export function GobanCustomWhitePicker(props: GobanThemePickerProperties): JSX.E const [color, _setColor] = usePreference("goban-theme-custom-white-stone-color"); const [, refresh] = React.useState(0); const theme = Goban.THEMES_SORTED.white.filter((x) => x.theme_name === "Custom")[0]; - const [white, setWhite] = usePreference("goban-theme-white"); + const [, setWhite] = usePreference("goban-theme-white"); + const selected = getSelectedThemes(); const inputStyle = { height: `${size}px`, width: `${size * 1.5}px` }; @@ -583,7 +596,7 @@ export function GobanCustomWhitePicker(props: GobanThemePickerProperties): JSX.E
setWhite("Custom")} >