refactor : theme, add ThemeManager

src/context.tsx

@@ -1,23 +1,28 @@
-import { Texts, TrTr } from "./const/texts"
-import { RTMT } from "./rtmt/rtmt"
-import { RTMTWS } from "./rtmt/rtmt_websocket"
-import { UserKeyStore, UserKeyStoreImpl } from "./store/key_store"
+import { Texts, TrTr } from "./const/texts";
+import { RTMT } from "./rtmt/rtmt";
+import { RTMTWS } from "./rtmt/rtmt_websocket";
+import { UserKeyStore, UserKeyStoreImpl } from "./store/key_store";
+import defaultTheme from "./theme/DefaultTheme";
+import ThemeManager from "./theme/ThemeManager";
 
-type Context = {
-    rtmt : RTMT
-    userKeyStore : UserKeyStore
-    texts : Texts
-}
+export type Context = {
+  rtmt: RTMT;
+  userKeyStore: UserKeyStore;
+  texts: Texts;
+  themeManager: ThemeManager;
+};
 
 export const initContext = () => {
-    const rtmt =  new RTMTWS()
-    const userKeyStore = new UserKeyStoreImpl()
-    const texts = TrTr
+  const rtmt = new RTMTWS();
+  const userKeyStore = new UserKeyStoreImpl();
+  const texts = TrTr;
+  const themeManager = new ThemeManager(defaultTheme);
   return {
     rtmt: rtmt,
     userKeyStore: userKeyStore,
     texts: texts,
-    }
-}
+    themeManager,
+  };
+};
 
-export const context : Context = initContext()
+export const context: Context = initContext();

src/theme/DefaultTheme.ts

@@ -0,0 +1,18 @@
+import { Theme } from "./Theme";
+
+const defaultTheme: Theme = {
+  background: "#EEEEEE",
+  boardColor: "#4D606E",
+  boardColorWhenPlayerTurn: "#84b8a6",
+  storeColor: "#3FBAC2",
+  storeColorWhenPlayerTurn: "#6cab94",
+  holeColor: "#D3D4D8",
+  ballColor: "#393E46",
+  ballLightColor: "#393E46",
+  pitGameMoveAnimateColor: "#5f94c2",
+  pitEmptyPitAnimateColor: "#5d7322",
+  pitLastStoneInBankPitAnimateColor: "#79708c",
+  pitGetRivalStonePitAnimateColor: "#ff3d44",
+};
+
+export default defaultTheme;

src/theme/Theme.ts

@@ -0,0 +1,14 @@
+export type Theme = {
+  background: string;
+  boardColor: string;
+  boardColorWhenPlayerTurn: string;
+  storeColor: string;
+  storeColorWhenPlayerTurn: string;
+  holeColor: string;
+  ballColor: string;
+  ballLightColor: string;
+  pitGameMoveAnimateColor: string;
+  pitEmptyPitAnimateColor: string;
+  pitLastStoneInBankPitAnimateColor: string;
+  pitGetRivalStonePitAnimateColor: string;
+};

src/theme/ThemeManager.ts

@@ -0,0 +1,18 @@
+import { Theme } from "./Theme";
+
+export default class ThemeManager {
+  _theme: Theme;
+  onThemeChange: (theme: Theme) => void;
+  constructor(theme: Theme) {
+    this._theme = theme;
+  }
+
+  public get theme() {
+    return this._theme;
+  }
+
+  public set theme(value) {
+    this._theme = value;
+    this.onThemeChange?.(value);
+  }
+}