Logic and maths working need interface

src/App.tsx

@@ -9,7 +9,7 @@ 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 { addEvent, loadStats } from './lib/stats'
 import {
   loadGameStateFromLocalStorage,
   saveGameStateToLocalStorage,
@@ -36,6 +36,11 @@ function App() {
     return loaded.guesses
   })
 
+  const [stats, setStats] = useState<number[]>(() => {
+    const  loaded = loadStats()
+    return loaded
+  })
+  
   useEffect(() => {
     saveGameStateToLocalStorage({ guesses, solution })
   }, [guesses])
@@ -71,12 +76,12 @@ function App() {
       setCurrentGuess('')
 
       if (winningWord) {
-        addEvent(guesses.length)
+        setStats(addEvent(stats, guesses.length))
         return setIsGameWon(true)
       }
 
       if (guesses.length === 5) {
-        addEvent(guesses.length + 1)
+        setStats(addEvent(stats, guesses.length + 1))
         setIsGameLost(true)
         return setTimeout(() => {
           setIsGameLost(false)
@@ -134,6 +139,7 @@ function App() {
       <StatsModal
         isOpen={isStatsModalOpen}
         handleClose={() => setIsStatsModalOpen(false)}
+        stats={stats}
       />
       <AboutModal
         isOpen={isAboutModalOpen}

src/components/modals/StatsModal.tsx

@@ -1,14 +1,15 @@
 import { Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { XCircleIcon } from '@heroicons/react/outline'
-import { trysStat, successRateStat, bestStreakStat, currentStreakStat } from '../../lib/stats'
+import { trys, successRate, currentStreak, bestStreak } from '../../lib/stats'
 
 type Props = {
   isOpen: boolean
   handleClose: () => void
+  stats: number[]
 }
 
-export const StatsModal = ({ isOpen, handleClose }: Props) => {
+export const StatsModal = ({ isOpen, handleClose, stats }: Props) => {
   return (
     <Transition.Root show={isOpen} as={Fragment}>
       <Dialog
@@ -63,10 +64,22 @@ 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>
+                    <p>trys = {String(trys(stats))}</p>
+                    <p>success rate = {String(successRate(stats))}%</p>
+                    <p>Best streak is {String(bestStreak(stats))} currently {String(currentStreak(stats))}</p>
                   </div>
+                  <Dialog.Title
+                    as="h3"
+                    className="text-lg leading-6 font-medium text-gray-900"
+                  >
+                  Distribution
+                  </Dialog.Title>
+                    <p>1 {String(stats[0])}</p>
+                    <p>2 {String(stats[1])}</p>
+                    <p>3 {String(stats[2])}</p>
+                    <p>4 {String(stats[3])}</p>
+                    <p>5 {String(stats[4])}</p>
+                    <p>6 {String(stats[5])}</p>
                 </div>
               </div>
             </div>

src/lib/localStorage.ts

@@ -17,9 +17,9 @@ export const loadGameStateFromLocalStorage = () => {
 const gameStatKey = 'gameStats'
 
 type StoredGameStats = {
-  data: number[]
-  bestStreak: number
-  currentStreak: number
+  distribution: number[]
+  current: number
+  best: number
 }
 
 export const saveStatsToLocalStorage = ( gameStats: StoredGameStats) => {

src/lib/stats.ts

@@ -7,50 +7,61 @@ import {
   saveStatsToLocalStorage
 } from './localStorage'
 
-var bestStreak: number = 0
-var currentStreak: number = 0
-var data: number[] = [0,0,0,0,0,0,0]   // Persistent data
+// In stats array elements 0-5 are successes in 1-6 trys
+// stats[6] is the number of failures
+// stats[7] is the currentStreak
+// stats[8] is the bestStreak
 
-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
+export const failures      = (stats: number[] ) => { return stats[6] }
+export const currentStreak = (stats: number[] ) => { return stats[7] }
+export const bestStreak    = (stats: number[] ) => { return stats[8] }
+
+export const addEvent = (stats: number[], 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
+    stats[7] = 0                        // End current streak
+    stats[6] += 1                       // Increase number of fails
   } else {
-    data[count] += 1                   // Increase counters
-    currentStreak += 1
-    if( bestStreak < currentStreak ){
-      bestStreak = currentStreak
+    stats[count] += 1                   // Increase counters
+    stats[7] += 1
+    if( bestStreak(stats) < currentStreak(stats) ){
+      stats[8] = currentStreak(stats)
     }
   }
-  saveStats()
+  saveStats(stats)
+  return stats
 }
 
 export const resetStats = () => {
-  currentStreak = 0
-  bestStreak = 0
-  data = [0,0,0,0,0,0,0]
+  return [0,0,0,0,0,0,0,0,0]
 }
 
-export const saveStats = () => {
-  saveStatsToLocalStorage({ data, bestStreak, currentStreak })
+export const saveStats = (stats: number[]) => {
+  const distribution = stats.slice(0,7)
+  const current = currentStreak(stats)
+  const best = bestStreak(stats)
+  saveStatsToLocalStorage({ distribution , current, best })
 }
 
 export const loadStats = () => {
   const loaded = loadStatsFromLocalStorage()
-  resetStats()
+  var stats  = resetStats()
   if( loaded ){
-    data = loaded.data
-    bestStreak = loaded.bestStreak
-    currentStreak = loaded.currentStreak
+    stats = loaded.distribution
+    stats[7] = loaded.current
+    stats[8] = loaded.best
   }
+  return ( stats )
+}
+
+export const trys = (stats: number[] ) => {
+  return(stats.slice(0,7).reduce((a,b) => a+b , 0 ))
+}
+
+export const successRate = (stats: number[] ) => {
+  return(Math.round((100*(trys(stats) - failures(stats)))/Math.max(trys(stats),1)))
 }
 
-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)