Stats object need dialog and save/restore

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<number[]>(() => {
-    const loaded = loadStatsFromLocalStorage()
-    return loaded
-  })
-  
   useEffect(() => {
     if (isGameWon) {
       setIsWinModalOpen(true)
@@ -77,18 +71,12 @@ function App() {
       setCurrentGuess('')
 
       if (winningWord) {
-        stats[currentStreak]++
+        addEvent(guesses.length)
-        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
+        addEvent(guesses.length + 1)
-        stats[guesses.length + 1]++
-        saveStatsToLocalStorage({ stats })
         setIsGameLost(true)
         return setTimeout(() => {
           setIsGameLost(false)
@@ -115,6 +103,10 @@ function App() {
           className="h-6 w-6 cursor-pointer"
           onClick={() => setIsInfoModalOpen(true)}
         />
+        <ChartBarIcon
+          className="h-6 w-6 cursor-pointer"
+          onClick={() => setIsStatsModalOpen(true)}
+        />
       </div>
       <Grid guesses={guesses} currentGuess={currentGuess} />
       <Keyboard
@@ -139,6 +131,10 @@ function App() {
         isOpen={isInfoModalOpen}
         handleClose={() => setIsInfoModalOpen(false)}
       />
+      <StatsModal
+        isOpen={isStatsModalOpen}
+        handleClose={() => setIsStatsModalOpen(false)}
+      />
       <AboutModal
         isOpen={isAboutModalOpen}
         handleClose={() => setIsAboutModalOpen(false)}

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
                   </Dialog.Title>
                   <div className="mt-2">
+                    <p>trys = {trysStat}</p>
+                    <p>success rate = {successRateStat}</p>
+                    <p>Best streak is {bestStreakStat} currently {currentStreakStat}</p>
                   </div>
                 </div>
               </div>

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) : null
-  return /* stats ? (JSON.parse(stats) as StoredGameStats) :*/ [0,0,0,0,0,0,0,0,0]
 }

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)
+