From ea744b673a6cbec74532be5ec86a8e399571467c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 4 Aug 2025 20:30:39 -0500
Subject: [PATCH] feat: add progress bar to hero section

---
 .../TankSandbox/Title/components/Tracker.tsx  | 25 +++++++++++++++++++
 .../{Title.tsx => Title/index.tsx}            | 24 ++++++++++--------
 2 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx
 rename packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/{Title.tsx => Title/index.tsx} (81%)

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx
new file mode 100644
index 000000000..9448e0ac3
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx
@@ -0,0 +1,25 @@
+import { Box, Progress } from '@radix-ui/themes';
+import { useProgress } from '@react-three/drei';
+
+interface Props {
+  fontSize?: string;
+}
+
+export function Tracker({ fontSize }: Props) {
+  const { loaded, total } = useProgress();
+  const progress = total === 0 ? 0 : (loaded / total) * 100;
+
+  return (
+    <Box
+      position="absolute"
+      left="50%"
+      bottom="0"
+      width="min(100%, 16rem)"
+      style={{
+        transform: `translate(-50%, calc(${fontSize} / 2))`,
+      }}
+    >
+      <Progress color="gray" value={progress} />
+    </Box>
+  );
+}
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx
similarity index 81%
rename from packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx
rename to packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx
index 970dcd19c..44d1b3bca 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx
+++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx
@@ -1,10 +1,11 @@
 import { TankType } from '@blitzkit/core';
 import { Box, Heading } from '@radix-ui/themes';
-import { Var } from '../../../../../core/radix/var';
-import { useLocale } from '../../../../../hooks/useLocale';
-import { Duel } from '../../../../../stores/duel';
-import type { RadixColor } from '../../../../../stores/embedState';
-import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
+import { Var } from '../../../../../../core/radix/var';
+import { useLocale } from '../../../../../../hooks/useLocale';
+import { Duel } from '../../../../../../stores/duel';
+import type { RadixColor } from '../../../../../../stores/embedState';
+import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
+import { Tracker } from './components/Tracker';
 
 interface TitleProps {
   foreground?: boolean;
@@ -81,6 +82,11 @@ export function Title({ foreground }: TitleProps) {
       : `${nationColors.text}-12`,
   );
   const name = unwrap(protagonist.name);
+  const fontSize = revealed
+    ? disturbed
+      ? '2rem'
+      : `min(65vh, ${125 / name.length}vw)`
+    : `min(48vh, ${75 / name.length}vw)`;
 
   return (
     <Box
@@ -97,11 +103,7 @@ export function Title({ foreground }: TitleProps) {
           fontWeight: 900,
           userSelect: 'none',
           pointerEvents: 'none',
-          fontSize: revealed
-            ? disturbed
-              ? '2rem'
-              : `min(65vh, ${125 / name.length}vw)`
-            : `min(48vh, ${75 / name.length}vw)`,
+          fontSize,
           whiteSpace: 'nowrap',
           color: foreground ? Var('gray-a10') : color,
           opacity: foreground && disturbed ? 0 : 1,
@@ -117,6 +119,8 @@ export function Title({ foreground }: TitleProps) {
       >
         {name}
       </Heading>
+
+      {!revealed && <Tracker fontSize={fontSize} />}
     </Box>
   );
 }