Adding a stats dialog and persistent data storage and recovery

This commit is contained in:
James 2022-01-18 11:45:25 +01:00
parent 8fc56f011b
commit d617be67ac
3 changed files with 108 additions and 0 deletions

View file

@ -6,10 +6,13 @@ import { Keyboard } from './components/keyboard/Keyboard'
import { AboutModal } from './components/modals/AboutModal' import { AboutModal } from './components/modals/AboutModal'
import { InfoModal } from './components/modals/InfoModal' import { InfoModal } from './components/modals/InfoModal'
import { WinModal } from './components/modals/WinModal' import { WinModal } from './components/modals/WinModal'
import { StatsModal } from './components/modals/StatsModal'
import { isWordInWordList, isWinningWord, solution } from './lib/words' import { isWordInWordList, isWinningWord, solution } from './lib/words'
import { import {
loadGameStateFromLocalStorage, loadGameStateFromLocalStorage,
saveGameStateToLocalStorage, saveGameStateToLocalStorage,
loadStatsFromLocalStorage,
saveStatsToLocalStorage
} from './lib/localStorage' } from './lib/localStorage'
function App() { function App() {
@ -36,6 +39,13 @@ function App() {
saveGameStateToLocalStorage({ guesses, solution }) saveGameStateToLocalStorage({ guesses, solution })
}, [guesses]) }, [guesses])
const maxStreak = 7
const currentStreak = 8
const [stats, setStats ] = useState<number[]>(() => {
const loaded = loadStatsFromLocalStorage()
return loaded
})
useEffect(() => { useEffect(() => {
if (isGameWon) { if (isGameWon) {
setIsWinModalOpen(true) setIsWinModalOpen(true)
@ -67,10 +77,18 @@ function App() {
setCurrentGuess('') setCurrentGuess('')
if (winningWord) { if (winningWord) {
stats[currentStreak]++
stats[guesses.length + 1]++
if( stats[currentStreak] > stats[maxStreak] ){
stats[maxStreak] = stats[currentStreak] }
saveStatsToLocalStorage({ stats })
return setIsGameWon(true) return setIsGameWon(true)
} }
if (guesses.length === 5) { if (guesses.length === 5) {
stats[currentStreak] = 0
stats[guesses.length + 1]++
saveStatsToLocalStorage({ stats })
setIsGameLost(true) setIsGameLost(true)
return setTimeout(() => { return setTimeout(() => {
setIsGameLost(false) setIsGameLost(false)

View file

@ -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 (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
className="fixed z-10 inset-0 overflow-y-auto"
onClose={handleClose}
>
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
<span
className="hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden="true"
>
&#8203;
</span>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div className="inline-block align-bottom bg-white rounded-lg px-4
pt-5 pb-4 text-left overflow-hidden shadow-xl transform
transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
<div className="absolute right-4 top-4">
<XCircleIcon
className="h-6 w-6 cursor-pointer"
onClick={() => handleClose()}
/>
</div>
<div>
<div className="text-center">
<Dialog.Title
as="h3"
className="text-lg leading-6 font-medium text-gray-900"
>
Statistics
</Dialog.Title>
<div className="mt-2">
</div>
</div>
</div>
</div>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
)
}

View file

@ -14,3 +14,19 @@ export const loadGameStateFromLocalStorage = () => {
return state ? (JSON.parse(state) as StoredGameState) : null 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]
}