diff --git a/src/App.tsx b/src/App.tsx index 7518896..6f4d240 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ import { InformationCircleIcon } from '@heroicons/react/outline' +import { ChartBarIcon } from '@heroicons/react/outline' import { useState, useEffect } from 'react' import { Alert } from './components/alerts/Alert' import { Grid } from './components/grid/Grid' @@ -8,11 +9,10 @@ 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 { addEvent } from './lib/stats' import { loadGameStateFromLocalStorage, saveGameStateToLocalStorage, - loadStatsFromLocalStorage, - saveStatsToLocalStorage } from './lib/localStorage' function App() { @@ -21,6 +21,7 @@ function App() { const [isWinModalOpen, setIsWinModalOpen] = useState(false) const [isInfoModalOpen, setIsInfoModalOpen] = useState(false) const [isAboutModalOpen, setIsAboutModalOpen] = useState(false) + const [isStatsModalOpen, setIsStatsModalOpen] = useState(false) const [isWordNotFoundAlertOpen, setIsWordNotFoundAlertOpen] = useState(false) const [isGameLost, setIsGameLost] = useState(false) const [shareComplete, setShareComplete] = useState(false) @@ -38,14 +39,7 @@ function App() { useEffect(() => { saveGameStateToLocalStorage({ guesses, solution }) }, [guesses]) - - const maxStreak = 7 - const currentStreak = 8 - const [stats, setStats ] = useState(() => { - const loaded = loadStatsFromLocalStorage() - return loaded - }) - + useEffect(() => { if (isGameWon) { setIsWinModalOpen(true) @@ -77,18 +71,12 @@ function App() { setCurrentGuess('') if (winningWord) { - stats[currentStreak]++ - stats[guesses.length + 1]++ - if( stats[currentStreak] > stats[maxStreak] ){ - stats[maxStreak] = stats[currentStreak] } - saveStatsToLocalStorage({ stats }) + addEvent(guesses.length) return setIsGameWon(true) } if (guesses.length === 5) { - stats[currentStreak] = 0 - stats[guesses.length + 1]++ - saveStatsToLocalStorage({ stats }) + addEvent(guesses.length + 1) setIsGameLost(true) return setTimeout(() => { setIsGameLost(false) @@ -115,6 +103,10 @@ function App() { className="h-6 w-6 cursor-pointer" onClick={() => setIsInfoModalOpen(true)} /> + setIsStatsModalOpen(true)} + /> setIsInfoModalOpen(false)} /> + setIsStatsModalOpen(false)} + /> setIsAboutModalOpen(false)} diff --git a/src/components/modals/StatsModal.tsx b/src/components/modals/StatsModal.tsx index b091e95..d2f05c9 100644 --- a/src/components/modals/StatsModal.tsx +++ b/src/components/modals/StatsModal.tsx @@ -1,6 +1,7 @@ import { Fragment } from 'react' import { Dialog, Transition } from '@headlessui/react' import { XCircleIcon } from '@heroicons/react/outline' +import { trysStat, successRateStat, bestStreakStat, currentStreakStat } from '../../lib/stats' type Props = { isOpen: boolean @@ -62,6 +63,9 @@ export const StatsModal = ({ isOpen, handleClose }: Props) => { Statistics
+

trys = {trysStat}

+

success rate = {successRateStat}

+

Best streak is {bestStreakStat} currently {currentStreakStat}

diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts index f72ca07..215d470 100644 --- a/src/lib/localStorage.ts +++ b/src/lib/localStorage.ts @@ -11,14 +11,15 @@ export const saveGameStateToLocalStorage = (gameState: StoredGameState) => { export const loadGameStateFromLocalStorage = () => { const state = localStorage.getItem(gameStateKey) - return state ? (JSON.parse(state) as StoredGameState) : null } const gameStatKey = 'gameStats' type StoredGameStats = { - stats: number[] + data: number[] + bestStreak: number + currentStreak: number } export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => { @@ -27,6 +28,5 @@ export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => { export const loadStatsFromLocalStorage = () => { const stats = localStorage.getItem(gameStatKey) - - return /* stats ? (JSON.parse(stats) as StoredGameStats) :*/ [0,0,0,0,0,0,0,0,0] + return stats ? (JSON.parse(stats) as StoredGameStats) : null } diff --git a/src/lib/stats.ts b/src/lib/stats.ts new file mode 100644 index 0000000..9164d5f --- /dev/null +++ b/src/lib/stats.ts @@ -0,0 +1,58 @@ +/** +** An attempt at a statistics object and its interface +** +** James Sturgis 18/1/2022 +**/ + +import { + loadStatsFromLocalStorage, + saveStatsToLocalStorage +} from './localStorage' + +var bestStreak: number = 0 +var currentStreak: number = 0 +var data: number[] = [0,0,0,0,0,0,0] // Persistent data + +export const addEvent = (count: number) => { + // Count is number of incorrect guesses before end. + if(count < 0) { count = 0 } // Should not really need this + if( count > 5 ){ // A fail situation + currentStreak = 0 // End current streak + data[6] += 1 // Increase number of fails + } else { + data[count] += 1 // Increase counters + currentStreak += 1 + if( bestStreak < currentStreak ){ + bestStreak = currentStreak + } + } + saveStats() +} + +export const resetStats = () => { + currentStreak = 0 + bestStreak = 0 + data = [0,0,0,0,0,0,0] +} + +export const saveStats = () => { + saveStatsToLocalStorage({ data, bestStreak, currentStreak }) +} + +export const loadStats = () => { + const loaded = loadStatsFromLocalStorage() + resetStats() + if( loaded ){ + data = loaded.data + bestStreak = loaded.bestStreak + currentStreak = loaded.currentStreak + } +} + +const trys = data.reduce((a,b) => a+b , 0 ) + +export const trysStat = String(trys) +export const successRateStat = String(Math.round((100*(trys - data[6])/Math.max(trys,1))))+"%" +export const bestStreakStat = String(bestStreak) +export const currentStreakStat = String(currentStreak) +