[refactor] move theme to core package

core/src/index.ts

@@ -1,2 +1,4 @@
 export * from './models/index'
 export * from './rtmt/index'
+export * from './theme/index'
+export * from './storage/storage'

core/src/storage/storage.ts

@@ -0,0 +1,4 @@
+
+export interface Storage {
+    getString(key: string): string | undefined;
+}

core/src/theme/ThemeManager.ts

@@ -3,7 +3,7 @@ import greyTheme from "./GreyTheme";
 import { Theme } from "./Theme";
 import darkTheme from "./DarkTheme";
 import { TinyEmitter } from "tiny-emitter";
-import { storage } from "../storage";
+import { Storage  } from "../storage/storage";
 
 export const themes = [lightTheme, darkTheme, greyTheme];
 
@@ -11,10 +11,12 @@ const THEME_ID = "theme_id";
 
 export type ThemeManagerEvents = "themechange";
 
-export default class ThemeManager extends TinyEmitter {
+export class ThemeManager extends TinyEmitter {
   private _theme: Theme;
-  constructor() {
+  private _storage: any;
+  constructor(storage: Storage) {
     super();
+    this._storage = storage;
     this._theme = this.readFromLocalStorage() || lightTheme;
   }
 
@@ -29,11 +31,11 @@ export default class ThemeManager extends TinyEmitter {
   }
 
   private writetToLocalStorage(value: Theme) {
-    storage.set(THEME_ID, value.id);
+    this._storage.set(THEME_ID, value.id);
   }
 
   private readFromLocalStorage(): Theme | undefined {
-    const themeID = storage.getString(THEME_ID);
+    const themeID = this._storage.getString(THEME_ID);
     const theme = themes.find((eachTheme: Theme) => themeID === eachTheme.id);
     return theme;
   }

core/src/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './DarkTheme'
+export * from './GreyTheme'
+export * from './LightTheme'
+export * from './Theme'
+export * from './ThemeManager'

frontend/src/context/context.tsx

@@ -1,10 +1,11 @@
 import { server } from "../const/config";
 import { Texts, TrTr } from "../const/texts";
-import { RTMT, RTMTWS } from "@mancala/core";
+import { RTMT, RTMTWS, ThemeManager } from "@mancala/core";
 import { HttpServiceImpl } from "../service/HttpService";
 import { GameStore, GameStoreImpl } from "../store/GameStore";
 import { UserKeyStore, UserKeyStoreImpl } from "../store/KeyStore";
-import ThemeManager from "../theme/ThemeManager";
+import { LocalStorage } from "../storage";
+import { Storage } from '@mancala/core'
 
 export type Context = {
   rtmt: RTMT;
@@ -12,6 +13,7 @@ export type Context = {
   texts: Texts;
   themeManager: ThemeManager;
   gameStore: GameStore;
+  storage: Storage;
 };
 
 export const initContext = (): Context => {
@@ -20,12 +22,14 @@ export const initContext = (): Context => {
   const userKeyStore = new UserKeyStoreImpl({ httpService });
   const gameStore = new GameStoreImpl({ httpService });
   const texts = TrTr;
-  const themeManager = new ThemeManager();
+  const storage = new LocalStorage();
+  const themeManager = new ThemeManager(storage);
   return {
     rtmt: rtmt,
     userKeyStore: userKeyStore,
     texts: texts,
     themeManager,
-    gameStore
+    gameStore,
+    storage
   };
 };

frontend/src/storage/index.ts

@@ -0,0 +1,7 @@
+import { Storage } from '@mancala/core'
+
+export class LocalStorage implements Storage {
+    getString(key: string): string | undefined {
+        return localStorage.getItem(key) as string;
+    }
+}

frontend/src/theme/ThemeManager.ts

@@ -1,50 +0,0 @@
-import lightTheme from "./LightTheme";
-import greyTheme from "./GreyTheme";
-import { Theme } from "./Theme";
-import darkTheme from "./DarkTheme";
-import EventEmitter2, { Listener } from "eventemitter2";
-
-export const themes = [lightTheme, darkTheme, greyTheme];
-
-const THEME_ID = "theme_id";
-
-export type ThemeManagerEvents = "themechange";
-
-export default class ThemeManager extends EventEmitter2 {
-  private _theme: Theme;
-  constructor() {
-    super();
-    this._theme = this.readFromLocalStorage() || lightTheme;
-  }
-
-  public get theme() {
-    return this._theme;
-  }
-
-  public set theme(value: Theme) {
-    this._theme = value;
-    this.emit("themechange", value);
-    this.writetToLocalStorage(value);
-  }
-
-  private writetToLocalStorage(value: Theme) {
-    localStorage.setItem(THEME_ID, value.id);
-  }
-
-  private readFromLocalStorage(): Theme | undefined {
-    const themeID = localStorage.getItem(THEME_ID);
-    const theme = themes.find((eachTheme: Theme) => themeID === eachTheme.id);
-    return theme;
-  }
-
-  public get themes(): Theme[] {
-    return themes;
-  }
-
-  public on(event: ThemeManagerEvents, callback: (...value: any[]) => void): Listener | this {
-    return super.on(event, callback);
-  }
-  public off(event: ThemeManagerEvents, callback: (...value: any[]) => void): this {
-    return super.off(event, callback);
-  }
-}

mobile/src/context/context.tsx

@@ -1,15 +1,16 @@
 import { server } from "../const/config";
-import { RTMT, RTMTWS } from "@mancala/core";
+import { RTMT, RTMTWS, ThemeManager, Storage } from "@mancala/core";
 import { HttpServiceImpl } from "../service/HttpService";
 import { GameStore, GameStoreImpl } from "../store/GameStore";
 import { UserKeyStore, UserKeyStoreImpl } from "../store/KeyStore";
-import ThemeManager from "../theme/ThemeManager";
+import { LocalStorage } from "../storage";
 
 export type Context = {
   rtmt: RTMT;
   userKeyStore: UserKeyStore;
   themeManager: ThemeManager;
   gameStore: GameStore;
+  storage: Storage;
 };
 
 export const initContext = (): Context => {
@@ -17,11 +18,13 @@ export const initContext = (): Context => {
   const httpService = new HttpServiceImpl(server.serverAdress);
   const userKeyStore = new UserKeyStoreImpl({ httpService });
   const gameStore = new GameStoreImpl({ httpService });
-  const themeManager = new ThemeManager();
+  const storage = new LocalStorage();
+  const themeManager = new ThemeManager(storage);
   return {
     rtmt: rtmt,
     userKeyStore: userKeyStore,
     themeManager,
-    gameStore
+    gameStore,
+    storage
   };
 };

mobile/src/storage/index.ts

@@ -1,3 +1,10 @@
+import { Storage } from '@mancala/core'
 import { MMKV } from 'react-native-mmkv'
 
 export const storage = new MMKV()
+
+export class LocalStorage implements Storage {
+    getString(key: string): string | undefined {
+        return storage.getString(key)
+    }
+}

mobile/src/theme/DarkTheme.ts

@@ -1,33 +0,0 @@
-import { Theme } from "./Theme";
-
-// https://colorhunt.co/palette/525252414141313131ec625f
-const colors = {
-  primary: "#414141",
-  secondary: "#313131",
-  tertiary: "#606060",
-  quaternary: "#808080",
-};
-
-const colorSpecial = "#337a44";
-
-const darkTheme: Theme = {
-  id: "2",
-  name: "Dark Theme",
-  themePreviewColor: colors.primary,
-  background: colors.primary,
-  appBarBgColor: colors.secondary,
-  textColor: colors.primary,
-  textLightColor: "#AAAAAA",
-  playerTurnColor: colors.tertiary,
-  boardColor: colors.secondary,
-  pitColor: colors.tertiary,
-  pitSelectedColor: colors.secondary,
-  stoneColor: "#252525",
-  stoneLightColor: "#252525",
-  pitGameMoveAnimateColor: colors.quaternary,
-  pitEmptyPitAnimateColor: colorSpecial,
-  pitLastStoneInBankPitAnimateColor: colorSpecial,
-  pitGetRivalStonePitAnimateColor: colorSpecial,
-};
-
-export default darkTheme;

mobile/src/theme/GreyTheme.ts

@@ -1,23 +0,0 @@
-import { Theme } from "./Theme";
-
-const greyTheme: Theme = {
-  id: "1",
-  name: "Grey Theme",
-  themePreviewColor: "#4D606E",
-  background: "#EEEEEE",
-  appBarBgColor: "#e4e4e4",
-  textColor: "#4D606E",
-  textLightColor: "#EEEEEE",
-  playerTurnColor: "#84b8a6",
-  boardColor: "#4D606E",
-  pitColor: "#D3D4D8",
-  pitSelectedColor: "#8837fa",
-  stoneColor: "#393E46",
-  stoneLightColor: "#EEEEEE",
-  pitGameMoveAnimateColor: "#c9b43c",
-  pitEmptyPitAnimateColor: "#5d7322",
-  pitLastStoneInBankPitAnimateColor: "#9463f7",
-  pitGetRivalStonePitAnimateColor: "#ff3d44",
-};
-
-export default greyTheme;

mobile/src/theme/LightTheme.ts

@@ -1,25 +0,0 @@
-import { Theme } from "./Theme";
-
-const colorSpecial = "#8B8B8B";
-
-const lightTheme: Theme = {
-  id: "1",
-  name: "Light Theme",
-  themePreviewColor: "#9B9B9B",
-  background: "#BBBBBB",
-  appBarBgColor: "#7B7B7B",
-  textColor: "#5B5B5B",
-  textLightColor: "#EBEBEB",
-  playerTurnColor: "#6B6B6B",
-  boardColor: "#9B9B9B",
-  pitColor: "#B8B8B8",
-  pitSelectedColor: "#9B9B9B",
-  stoneColor: "#5B5B5B",
-  stoneLightColor: "#3B3B3B",
-  pitGameMoveAnimateColor: "#ABABAB",
-  pitEmptyPitAnimateColor: colorSpecial,
-  pitLastStoneInBankPitAnimateColor: colorSpecial,
-  pitGetRivalStonePitAnimateColor: colorSpecial,
-};
-
-export default lightTheme;

mobile/src/theme/Theme.ts

@@ -1,19 +0,0 @@
-export type Theme = {
-  id: string;
-  name: string;
-  themePreviewColor: string; // for theme switch menu
-  textColor: string;
-  textLightColor: string;
-  background: string;
-  appBarBgColor: string;
-  playerTurnColor: string;
-  boardColor: string;
-  pitColor: string;
-  pitSelectedColor: string;
-  stoneColor: string;
-  stoneLightColor: string;
-  pitGameMoveAnimateColor: string;
-  pitEmptyPitAnimateColor: string;
-  pitLastStoneInBankPitAnimateColor: string;
-  pitGetRivalStonePitAnimateColor: string;
-};