jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix theme switch issue when game not started

Browse Source
This commit is contained in:
Halit Aksoy 2022-07-09 08:31:43 +03:00
parent eb1a51c41f
commit 3827020f37
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Home.tsx
View File

@ -22,6 +22,7 @@ import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu";
import "@szhsin/react-menu/dist/index.css"; import "@szhsin/react-menu/dist/index.css";
import "@szhsin/react-menu/dist/transitions/slide.css"; import "@szhsin/react-menu/dist/transitions/slide.css";
import { getColorByLuminance } from "./util/ColorUtil"; import { getColorByLuminance } from "./util/ColorUtil";
import { Theme } from "./theme/Theme";
type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"; type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
@ -45,6 +46,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
const [pitAnimator, setPitAnimator] = useState<PitAnimator>(); const [pitAnimator, setPitAnimator] = useState<PitAnimator>();
const [theme, setTheme] = useState<Theme | undefined>(undefined);
const onConnectionDone = () => { const onConnectionDone = () => {
setConnetionState("connected"); setConnetionState("connected");
}; };
@ -111,6 +114,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
}; };
React.useEffect(() => { React.useEffect(() => {
setTheme(context.themeManager.theme);
const pitAnimator = new PitAnimator(context, updateBoardViewModel); const pitAnimator = new PitAnimator(context, updateBoardViewModel);
setPitAnimator(pitAnimator); setPitAnimator(pitAnimator);
listenMessages(pitAnimator); listenMessages(pitAnimator);
@ -121,8 +125,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
}, []); }, []);
React.useEffect(() => { React.useEffect(() => {
context.themeManager.onThemeChange = () => { context.themeManager.onThemeChange = (theme) => {
updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game)); setTheme(theme);
pitAnimator && updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
}; };
}, [boardViewModel]); }, [boardViewModel]);
@ -206,7 +211,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
background: context.themeManager.theme.background, background: theme?.background,
flex: "1", flex: "1",
}} }}
> >