From 57971453ade3eedff1fe28d960ab150242eee3c1 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 4 May 2025 21:45:38 -0500
Subject: [PATCH] feat: stats

---
 packages/i18n/strings/en.json                    |  3 ++-
 .../tools/guess/components/Guesser.tsx           | 16 ++++++++++++++--
 packages/website/src/stores/guessEphemeral.ts    |  8 ++++----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 44e40c25f..76335bd5c 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -863,7 +863,8 @@
           "guess": "Guess",
           "next": "Next",
           "no_results": "No results"
-        }
+        },
+        "stats": "%s1 / %s2 guessed correctly"
       },
 
       "tankopedia": {
diff --git a/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx b/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx
index 9f20b20d9..0646be04b 100644
--- a/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx
+++ b/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)]);
diff --git a/packages/website/src/stores/guessEphemeral.ts b/packages/website/src/stores/guessEphemeral.ts
index 106f481be..2f841ba6d 100644
--- a/packages/website/src/stores/guessEphemeral.ts
+++ b/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,
   })),
 );