fix guesser hydration and auto animatin play

packages/website/src/components/Guesser/index.tsx

@@ -76,7 +76,6 @@ export function Guesser() {
   const [results, setResults] = useState<TankDefinition[] | null>(null);
   const [selected, setSelected] = useState<TankDefinition | null>(null);
   const tiers = Guess.use((state) => state.tiers);
-  const status = useRef<HTMLSpanElement>(null);
   const allTiersSelected = tiers.length === TIERS.length;
 
   const requestSearch = useCallback(() => {
@@ -105,22 +104,6 @@ export function Guesser() {
     if (guessState !== GuessState.NotGuessed) setSelected(null);
   }, [guessState]);
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (!status.current) return;
-
-      status.current.innerText = allTiersSelected
-        ? literals(strings.guesser.stats, {
-            correct: correctGuesses,
-            total: totalGuesses,
-            streak: streak,
-          })
-        : strings.guesser.stats_untracked;
-    }, 1000 / 200);
-
-    return () => clearInterval(interval);
-  }, [correctGuesses, totalGuesses, streak, allTiersSelected]);
-
   return (
     <div className={styles.guesser}>
       <div className={styles.results}>
@@ -167,7 +150,15 @@ export function Guesser() {
         )}
       </div>
 
-      <Text lowContrast ref={status} />
+      <Text lowContrast>
+        {allTiersSelected
+          ? literals(strings.guesser.stats, {
+              correct: correctGuesses,
+              total: totalGuesses,
+              streak,
+            })
+          : strings.guesser.stats_untracked}
+      </Text>
 
       <div className={styles.controls}>
         <DropdownMenu.Root modal={false}>

packages/website/src/hooks/useSkinAnimation.ts

@@ -6,7 +6,7 @@ export function useSkinAnimation(skins: Skin[]) {
   const animate = Tankopedia.use((state) => state.animate);
 
   useFrame((_, delta) => {
-    if (animate) return;
+    if (!animate) return;
 
     for (const { mixer } of skins) {
       if (!mixer) continue;