From 3e321416d99f5b947a8aae3fc216a2edec1f2bc0 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Mon, 17 Jun 2024 18:52:26 +0300 Subject: [PATCH] [refactor] move theme to core package --- core/src/index.ts | 4 +- core/src/storage/storage.ts | 4 ++ {frontend => core}/src/theme/DarkTheme.ts | 0 {frontend => core}/src/theme/GreyTheme.ts | 0 {frontend => core}/src/theme/LightTheme.ts | 0 {frontend => core}/src/theme/Theme.ts | 0 {mobile => core}/src/theme/ThemeManager.ts | 12 +++--- core/src/theme/index.ts | 5 +++ frontend/src/context/context.tsx | 12 ++++-- frontend/src/storage/index.ts | 7 +++ frontend/src/theme/ThemeManager.ts | 50 ---------------------- mobile/src/context/context.tsx | 11 +++-- mobile/src/storage/index.ts | 9 +++- mobile/src/theme/DarkTheme.ts | 33 -------------- mobile/src/theme/GreyTheme.ts | 23 ---------- mobile/src/theme/LightTheme.ts | 25 ----------- mobile/src/theme/Theme.ts | 19 -------- 17 files changed, 49 insertions(+), 165 deletions(-) create mode 100644 core/src/storage/storage.ts rename {frontend => core}/src/theme/DarkTheme.ts (100%) rename {frontend => core}/src/theme/GreyTheme.ts (100%) rename {frontend => core}/src/theme/LightTheme.ts (100%) rename {frontend => core}/src/theme/Theme.ts (100%) rename {mobile => core}/src/theme/ThemeManager.ts (80%) create mode 100644 core/src/theme/index.ts create mode 100644 frontend/src/storage/index.ts delete mode 100644 frontend/src/theme/ThemeManager.ts delete mode 100644 mobile/src/theme/DarkTheme.ts delete mode 100644 mobile/src/theme/GreyTheme.ts delete mode 100644 mobile/src/theme/LightTheme.ts delete mode 100644 mobile/src/theme/Theme.ts diff --git a/core/src/index.ts b/core/src/index.ts index c53877a..60c1161 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -1,2 +1,4 @@ export * from './models/index' -export * from './rtmt/index' \ No newline at end of file +export * from './rtmt/index' +export * from './theme/index' +export * from './storage/storage' \ No newline at end of file diff --git a/core/src/storage/storage.ts b/core/src/storage/storage.ts new file mode 100644 index 0000000..992e069 --- /dev/null +++ b/core/src/storage/storage.ts @@ -0,0 +1,4 @@ + +export interface Storage { + getString(key: string): string | undefined; +} \ No newline at end of file diff --git a/frontend/src/theme/DarkTheme.ts b/core/src/theme/DarkTheme.ts similarity index 100% rename from frontend/src/theme/DarkTheme.ts rename to core/src/theme/DarkTheme.ts diff --git a/frontend/src/theme/GreyTheme.ts b/core/src/theme/GreyTheme.ts similarity index 100% rename from frontend/src/theme/GreyTheme.ts rename to core/src/theme/GreyTheme.ts diff --git a/frontend/src/theme/LightTheme.ts b/core/src/theme/LightTheme.ts similarity index 100% rename from frontend/src/theme/LightTheme.ts rename to core/src/theme/LightTheme.ts diff --git a/frontend/src/theme/Theme.ts b/core/src/theme/Theme.ts similarity index 100% rename from frontend/src/theme/Theme.ts rename to core/src/theme/Theme.ts diff --git a/mobile/src/theme/ThemeManager.ts b/core/src/theme/ThemeManager.ts similarity index 80% rename from mobile/src/theme/ThemeManager.ts rename to core/src/theme/ThemeManager.ts index 8195b7f..95ad66b 100644 --- a/mobile/src/theme/ThemeManager.ts +++ b/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; } diff --git a/core/src/theme/index.ts b/core/src/theme/index.ts new file mode 100644 index 0000000..d0a5940 --- /dev/null +++ b/core/src/theme/index.ts @@ -0,0 +1,5 @@ +export * from './DarkTheme' +export * from './GreyTheme' +export * from './LightTheme' +export * from './Theme' +export * from './ThemeManager' diff --git a/frontend/src/context/context.tsx b/frontend/src/context/context.tsx index 9c7b77a..eae2a16 100644 --- a/frontend/src/context/context.tsx +++ b/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 }; }; diff --git a/frontend/src/storage/index.ts b/frontend/src/storage/index.ts new file mode 100644 index 0000000..f2e0a08 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/frontend/src/theme/ThemeManager.ts b/frontend/src/theme/ThemeManager.ts deleted file mode 100644 index 8aa28f6..0000000 --- a/frontend/src/theme/ThemeManager.ts +++ /dev/null @@ -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); - } -} diff --git a/mobile/src/context/context.tsx b/mobile/src/context/context.tsx index 470ee97..6f96376 100644 --- a/mobile/src/context/context.tsx +++ b/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 }; }; diff --git a/mobile/src/storage/index.ts b/mobile/src/storage/index.ts index a315458..d06afd7 100644 --- a/mobile/src/storage/index.ts +++ b/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() \ No newline at end of file +export const storage = new MMKV() + +export class LocalStorage implements Storage { + getString(key: string): string | undefined { + return storage.getString(key) + } +} \ No newline at end of file diff --git a/mobile/src/theme/DarkTheme.ts b/mobile/src/theme/DarkTheme.ts deleted file mode 100644 index 625aff2..0000000 --- a/mobile/src/theme/DarkTheme.ts +++ /dev/null @@ -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; diff --git a/mobile/src/theme/GreyTheme.ts b/mobile/src/theme/GreyTheme.ts deleted file mode 100644 index 448e8c9..0000000 --- a/mobile/src/theme/GreyTheme.ts +++ /dev/null @@ -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; diff --git a/mobile/src/theme/LightTheme.ts b/mobile/src/theme/LightTheme.ts deleted file mode 100644 index e81d5e4..0000000 --- a/mobile/src/theme/LightTheme.ts +++ /dev/null @@ -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; diff --git a/mobile/src/theme/Theme.ts b/mobile/src/theme/Theme.ts deleted file mode 100644 index 11fa3f6..0000000 --- a/mobile/src/theme/Theme.ts +++ /dev/null @@ -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; -};