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 ( + + + + ); +} 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 ( {name} + + {!revealed && } ); }