feat: stats

packages/i18n/strings/en.json

@@ -863,7 +863,8 @@
           "guess": "Guess",
           "next": "Next",
           "no_results": "No results"
-        }
+        },
+        "stats": "%s1 / %s2 guessed correctly"
       },
 
       "tankopedia": {

packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx

@@ -3,6 +3,7 @@ import {
   TankDefinition,
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
+import { literals } from '@blitzkit/i18n';
 import {
   ArrowRightIcon,
   MagnifyingGlassIcon,
@@ -40,6 +41,8 @@ const ids = Object.keys(tankDefinitions.tanks);
 export function Guesser() {
   const tank = GuessEphemeral.use((state) => state.tank);
   const guessState = GuessEphemeral.use((state) => state.guessState);
+  const correctGuesses = GuessEphemeral.use((state) => state.correctGuesses);
+  const totalGuesses = GuessEphemeral.use((state) => state.totalGuesses);
   const { strings, unwrap } = useLocale();
   const input = useRef<HTMLInputElement>(null);
   const [searching, setSearching] = useState(false);
@@ -132,6 +135,15 @@ export function Guesser() {
         </Card>
       )}
 
+      <Flex justify="center">
+        <Text>
+          {literals(strings.website.tools.guess.stats, [
+            `${correctGuesses}`,
+            `${totalGuesses}`,
+          ])}
+        </Text>
+      </Flex>
+
       <Flex gap="3">
         <TextField.Root
           disabled={guessState !== null}
@@ -158,8 +170,8 @@ export function Guesser() {
               revealEvent.dispatch(true);
               mutateGuessEphemeral((draft) => {
                 draft.guessState = correct;
-                draft.totalSeen++;
-                draft.correct += correct ? 1 : 0;
+                draft.totalGuesses++;
+                draft.correctGuesses += correct ? 1 : 0;
               });
             } else {
               const id = Number(ids[Math.floor(Math.random() * ids.length)]);

packages/website/src/stores/guessEphemeral.ts

@@ -6,15 +6,15 @@ export interface GuessEphemeral {
   tank: TankDefinition;
   // true = correct, false = incorrect, null = not guessed
   guessState: boolean | null;
-  totalSeen: number;
-  correct: number;
+  totalGuesses: number;
+  correctGuesses: number;
 }
 
 export const GuessEphemeral = createContextualStore((tank: TankDefinition) =>
   create<GuessEphemeral>()(() => ({
     tank,
     guessState: null,
-    totalSeen: 0,
-    correct: 0,
+    totalGuesses: 0,
+    correctGuesses: 0,
   })),
 );