diff --git a/src/App.tsx b/src/App.tsx index 256878c..7518896 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,10 +6,13 @@ import { Keyboard } from './components/keyboard/Keyboard' import { AboutModal } from './components/modals/AboutModal' import { InfoModal } from './components/modals/InfoModal' import { WinModal } from './components/modals/WinModal' +import { StatsModal } from './components/modals/StatsModal' import { isWordInWordList, isWinningWord, solution } from './lib/words' import { loadGameStateFromLocalStorage, saveGameStateToLocalStorage, + loadStatsFromLocalStorage, + saveStatsToLocalStorage } from './lib/localStorage' function App() { @@ -36,6 +39,13 @@ function App() { saveGameStateToLocalStorage({ guesses, solution }) }, [guesses]) + const maxStreak = 7 + const currentStreak = 8 + const [stats, setStats ] = useState(() => { + const loaded = loadStatsFromLocalStorage() + return loaded + }) + useEffect(() => { if (isGameWon) { setIsWinModalOpen(true) @@ -67,10 +77,18 @@ function App() { setCurrentGuess('') if (winningWord) { + stats[currentStreak]++ + stats[guesses.length + 1]++ + if( stats[currentStreak] > stats[maxStreak] ){ + stats[maxStreak] = stats[currentStreak] } + saveStatsToLocalStorage({ stats }) return setIsGameWon(true) } if (guesses.length === 5) { + stats[currentStreak] = 0 + stats[guesses.length + 1]++ + saveStatsToLocalStorage({ stats }) setIsGameLost(true) return setTimeout(() => { setIsGameLost(false) diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx new file mode 100644 index 0000000..b091e95 --- /dev/null +++ b/src/components/modals/StatsModal.tsx @@ -0,0 +1,74 @@ +import { Fragment } from 'react' +import { Dialog, Transition } from '@headlessui/react' +import { XCircleIcon } from '@heroicons/react/outline' + +type Props = { + isOpen: boolean + handleClose: () => void +} + +export const StatsModal = ({ isOpen, handleClose }: Props) => { + return ( + + +
+ + + + + {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+ handleClose()} + /> +
+
+
+ + Statistics + +
+
+
+
+
+
+
+
+
+ ) +} diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts index 4f5c825..f72ca07 100644 --- a/src/lib/localStorage.ts +++ b/src/lib/localStorage.ts @@ -14,3 +14,19 @@ export const loadGameStateFromLocalStorage = () => { return state ? (JSON.parse(state) as StoredGameState) : null } + +const gameStatKey = 'gameStats' + +type StoredGameStats = { + stats: number[] +} + +export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => { + localStorage.setItem(gameStatKey, JSON.stringify(gameStats)) +} + +export const loadStatsFromLocalStorage = () => { + const stats = localStorage.getItem(gameStatKey) + + return /* stats ? (JSON.parse(stats) as StoredGameStats) :*/ [0,0,0,0,0,0,0,0,0] +}