{gameState.endType === 'win' ? lang.config.win : lang.config.loose}
{endType === 'win' ? config.win : config.loose}
- {lang.config.settings.size.label} + {config.settings.size.label}
- {lang.config.settings.difficulty.label} + {config.settings.difficulty.label}
#
- {lang.config.date} + {config.date}
- {lang.config.time} + {config.time}
{placedFlags} / {bombs} diff --git a/src/components/Stats/Timer/Timer.tsx b/src/components/Stats/Timer/Timer.tsx index 318ff67..7dfc9d1 100644 --- a/src/components/Stats/Timer/Timer.tsx +++ b/src/components/Stats/Timer/Timer.tsx @@ -2,40 +2,42 @@ //! Imports // --------------------------------------------------------------------------------------------------------------------- -// ------------------------------------------------------ React -------------------------------------------------------- +// -------------------------------------------------- Hooks & Utils ---------------------------------------------------- import { useEffect, useState } from 'react'; -// --------------------------------------------------------------------------------------------------------------------- - -// ----------------------------------------------------- Context ------------------------------------------------------- -import { useRecoilState } from 'recoil'; -import { gameStateAtom } from '../../../contexts/gameState'; -// --------------------------------------------------------------------------------------------------------------------- - -// -------------------------------------------------- Utils & Types ---------------------------------------------------- -import { Difficulty } from '../../../types/game'; +import { useShallow } from 'zustand/react/shallow'; +import { useGameStateStore } from '@/store/gameState'; import { saveToLocalStorage } from '../../../utils/generics'; // --------------------------------------------------------------------------------------------------------------------- -// ----------------------------------------------------- Assets -------------------------------------------------------- +// ------------------------------------------------- Assets & Styles --------------------------------------------------- import Clock from '../../../assets/clock'; import '../styles.scss'; // --------------------------------------------------------------------------------------------------------------------- const Timer = () => { - const [gameState, setGameState] = useRecoilState(gameStateAtom); + const { status, endType, difficulty, gridSize, setGameTime } = useGameStateStore( + useShallow((state) => ({ + status: state.status, + endType: state.endType, + difficulty: state.difficulty, + gridSize: state.gridSize, + + setGameTime: state.setGameTime, + })), + ); const [intervalId, setIntervalId] = useState(null); const [startedTime, setStartedTime] = useState(null); const [displayedTime, setDisplayedTime] = useState('00:00'); useEffect(() => { - if (gameState.status === 'win' || gameState.status === 'loose') { + if (endType === 'win' || endType === 'loose') { setStartedTime(null); } - }, [gameState.status]); + }, [status]); useEffect(() => { - if (!startedTime && gameState.endType === '' && gameState.status === 'playing') { + if (!startedTime && endType === '' && status === 'playing') { const now = Date.now(); setStartedTime(now); @@ -53,25 +55,22 @@ const Timer = () => { setIntervalId(interval); } - }, [startedTime, gameState.endType, gameState.status]); + }, [startedTime, endType, status]); useEffect(() => { - if (intervalId && gameState.endType !== '') { - setGameState((prev) => ({ - ...prev, - gameTime: displayedTime, - })); + if (intervalId && endType !== '') { + setGameTime(displayedTime); clearInterval(intervalId); - if (gameState.endType === 'win') { - saveToLocalStorage(displayedTime, gameState.difficulty as Difficulty, gameState.gridSize); + if (endType === 'win') { + saveToLocalStorage(displayedTime, difficulty, gridSize); } } - }, [intervalId, gameState.endType, gameState.difficulty, gameState.gridSize, setGameState, displayedTime]); + }, [intervalId, endType, difficulty, gridSize, displayedTime, setGameTime]); return ( - + {displayedTime} diff --git a/src/components/Stats/styles.scss b/src/components/Stats/styles.scss index af45820..df1c665 100644 --- a/src/components/Stats/styles.scss +++ b/src/components/Stats/styles.scss @@ -1,4 +1,4 @@ -.statContainer { +.stat-container { display: grid; grid-template-columns: 25px 40px; align-items: center; diff --git a/src/contexts/gameState.ts b/src/contexts/gameState.ts deleted file mode 100644 index e43258a..0000000 --- a/src/contexts/gameState.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { atom } from 'recoil'; - -/** - * Values: - * - Status: 'settings' | 'idle' | 'playing' | 'board' - * - Difficulty: 'beginner' | 'intermediate' | 'expert' - * - Grid Size: 12, 16, 20 - * - Bombs: ]0;{GridSize}] - * - Placed Flags: [0;{GridSize}] - * - gameTime: Timestamp - * - End Type: 'win' | 'loose' - */ - -export const gameStateAtom = atom({ - key: 'gameState', - default: { - status: 'settings', - difficulty: 'beginner', - gridSize: 12, - bombs: 0, - placedFlags: 0, - gameTime: '', - endType: '', - }, -}); diff --git a/src/contexts/langState.ts b/src/contexts/langState.ts deleted file mode 100644 index a768a6e..0000000 --- a/src/contexts/langState.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { atom } from 'recoil'; - -export const langAtom = atom({ - key: 'lang', - default: { - key: null as any, - config: null as any, - }, -}); diff --git a/src/index.tsx b/src/index.tsx index 6de5312..d705493 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,15 +1,22 @@ +// --------------------------------------------------------------------------------------------------------------------- +//! Imports +// --------------------------------------------------------------------------------------------------------------------- + +// --------------------------------------------------- Components ------------------------------------------------------ import React from 'react'; -import ReactDOM from 'react-dom/client'; +import { createRoot } from 'react-dom/client'; +import App from './app/App'; +// --------------------------------------------------------------------------------------------------------------------- + import './index.scss'; -import App from './App'; -import { RecoilRoot } from 'recoil'; -const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); +const appElement = document.getElementById('root'); +if (!appElement) throw Error('No app root element found'); -root.render( +const reactRoot = createRoot(appElement); + +reactRoot.render( - - - + , ); diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5..0000000 --- a/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/src/store/gameState.ts b/src/store/gameState.ts new file mode 100644 index 0000000..758071e --- /dev/null +++ b/src/store/gameState.ts @@ -0,0 +1,48 @@ +import { create } from 'zustand'; + +type GameStateStore = { + status: 'settings' | 'idle' | 'playing' | 'board'; + difficulty: 'beginner' | 'intermediate' | 'expert'; + gridSize: 12 | 16 | 20; + bombs: number; + placedFlags: number; + gameTime: string; + endType: '' | 'win' | 'loose'; + + setStatus: (status: 'settings' | 'idle' | 'playing' | 'board') => void; + setDifficulty: (difficulty: 'beginner' | 'intermediate' | 'expert') => void; + setGridSize: (gridSize: 12 | 16 | 20) => void; + setBombs: (amount: number) => void; + setPlacedFlags: (amount: number) => void; + setGameTime: (time: string) => void; + setEndType: (endType: '' | 'win' | 'loose') => void; +}; + +/** + * Values: + * - Status: 'settings' | 'idle' | 'playing' | 'board' + * - Difficulty: 'beginner' | 'intermediate' | 'expert' + * - Grid Size: 12, 16, 20 + * - Bombs: ]0;{GridSize}] + * - Placed Flags: [0;{GridSize}] + * - gameTime: Timestamp + * - End Type: 'win' | 'loose' + */ + +export const useGameStateStore = create((set) => ({ + status: 'settings', + difficulty: 'beginner', + gridSize: 12, + bombs: 0, + placedFlags: 0, + gameTime: '', + endType: '', + + setStatus: (newStatus) => set({ status: newStatus }), + setDifficulty: (newDifficulty) => set({ difficulty: newDifficulty }), + setGridSize: (size) => set({ gridSize: size }), + setBombs: (amount) => set({ bombs: amount }), + setPlacedFlags: (amount) => set({ placedFlags: amount }), + setGameTime: (time) => set({ gameTime: time }), + setEndType: (type) => set({ endType: type }), +})); diff --git a/src/store/langState.ts b/src/store/langState.ts new file mode 100644 index 0000000..b2d2644 --- /dev/null +++ b/src/store/langState.ts @@ -0,0 +1,16 @@ +import { create } from 'zustand'; + +type LangStore = { + key: any; + config: any; + + setKey: (key: any) => void; + setLang: ({ key, config }: { key: any; config: any }) => void; +}; + +export const useLangStore = create((set) => ({ + key: null, + config: null, + setKey: (key) => set({ key: key }), + setLang: ({ key, config }) => set({ key: key, config: config }), +})); diff --git a/tsconfig.json b/tsconfig.json index 7efb3c3..1c67ac2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "es5", + "target": "es6", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -14,8 +14,11 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "paths": { + "@/*": ["./src/*"] + } }, - "include": ["src"], - "exclude": ["node_modules"] + "include": ["src/**/*"], + "exclude": ["node_modules", "**/node_modules/*", "dist"] } diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..468e121 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,49 @@ +import path from 'path'; +import dotenv from 'dotenv'; + +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import eslint from 'vite-plugin-eslint'; +import { VitePWA } from 'vite-plugin-pwa'; + +dotenv.config(); + +const alias = { + '@app': path.resolve(__dirname, 'src/app'), + '@assets': path.resolve(__dirname, 'src/assets'), + '@config': path.resolve(__dirname, 'src/config'), + '@components': path.resolve(__dirname, 'src/components'), + '@hooks': path.resolve(__dirname, 'src/hooks'), + '@pages': path.resolve(__dirname, 'src/pages'), + '@providers': path.resolve(__dirname, 'src/providers'), + '@selectors': path.resolve(__dirname, 'src/store/selectors'), + '@reducers': path.resolve(__dirname, 'src/store/reducers'), + '@services': path.resolve(__dirname, 'src/store/services'), + '@store': path.resolve(__dirname, 'src/store'), + '@utils': path.resolve(__dirname, 'src/utils'), +}; + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [ + react(), + eslint(), + VitePWA({ + srcDir: 'src', + filename: 'sw.js', + strategies: 'injectManifest', + manifest: false, + }), + ], + resolve: { + alias: { + '@': path.resolve(__dirname, 'src/'), + }, + }, + preview: { + port: 8000, + }, + server: { + port: 8080, + }, +});
{displayedTime}