diff --git a/packages/website/src/components/Guesser.tsx b/packages/website/src/components/Guesser.tsx index 62ff27553..292025229 100644 --- a/packages/website/src/components/Guesser.tsx +++ b/packages/website/src/components/Guesser.tsx @@ -58,12 +58,14 @@ export function Guesser() { const [results, setResults] = useState(null); const [selected, setSelected] = useState(null); const tiers = Guess.use((state) => state.tiers); + const status = useRef(null); const requestSearch = useCallback(() => { setSelected(null); setSearching(true); search(); }, []); + const search = useCallback( debounce(() => { if (!input.current) return; @@ -92,6 +94,20 @@ export function Guesser() { if (guessState !== GuessState.NotGuessed) setSelected(null); }, [guessState]); + useEffect(() => { + const interval = setInterval(() => { + if (!status.current) return; + + status.current.innerText = literals(strings.website.tools.guess.stats, { + correct: correctGuesses, + total: totalGuesses, + streak: streak, + }); + }, 1000 / 60); + + return () => clearInterval(interval); + }, [correctGuesses, totalGuesses, streak]); + return ( - - {literals(strings.website.tools.guess.stats, { - correct: correctGuesses, - total: totalGuesses, - streak: streak, - })} - +