diff --git a/src/app/tools/tankopedia/[id]/components/Control.tsx b/src/app/tools/tankopedia/[id]/components/Control.tsx index 6c6101860..84c72c4c1 100644 --- a/src/app/tools/tankopedia/[id]/components/Control.tsx +++ b/src/app/tools/tankopedia/[id]/components/Control.tsx @@ -59,7 +59,7 @@ export function Controls() { const [autoRotate, setAutoRotate] = useState(true); useEffect(() => { - camera.position.set(-4, 4, -16); + camera.position.set(-10, 12, -12); orbitControls.current?.target.set(0, 1.25, 0); }, [camera]); diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx index 29d714543..8d853e806 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx @@ -1,15 +1,17 @@ import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons'; import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes'; import Link from 'next/link'; +import { Suspense } from 'react'; import { classIcons } from '../../../../../../components/ClassIcon'; import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants'; import { useFullScreen } from '../../../../../../hooks/useFullScreen'; import strings from '../../../../../../lang/en-US.json'; import * as Duel from '../../../../../../stores/duel'; -import { TankSandbox } from './TankSandbox'; import { Options } from './components/Options'; +import { TankSandbox } from './TankSandbox'; +import { TankSandboxLoader } from './TankSandboxLoader'; -export function HeroSection() { +export function HeroSection({ id }: { id: number }) { const protagonist = Duel.use((state) => state.protagonist.tank); const antagonist = Duel.use((state) => state.antagonist.tank); const compareTanks = @@ -106,7 +108,10 @@ export function HeroSection() { > - + }> + + + diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx index b2984bb32..1b1402bc9 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx @@ -1,6 +1,6 @@ import { PerspectiveCamera } from '@react-three/drei'; import { Canvas } from '@react-three/fiber'; -import { Suspense, use, useEffect, useRef } from 'react'; +import { use, useEffect, useRef } from 'react'; import { Armor } from '../../../../../../components/Armor'; import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits'; import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions'; @@ -12,7 +12,6 @@ import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemer import { Controls } from '../Control'; import { Lighting } from '../Lighting'; import { SceneProps } from '../SceneProps'; -import { ModelLoader } from './components/ModelLoader'; import { TankModel } from './components/TankModel'; export function TankSandbox() { @@ -140,11 +139,9 @@ export function TankSandbox() { - }> - - - - + + + ); } diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankSandboxLoader.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankSandboxLoader.tsx new file mode 100644 index 000000000..30bf8b09b --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/Model/TankSandboxLoader.tsx @@ -0,0 +1,11 @@ +import { Flex, Spinner } from '@radix-ui/themes'; +import { tankIcon } from '../../../../../../core/blitzkit/tankIcon'; + +export function TankSandboxLoader({ id }: { id: number }) { + return ( + + + + + ); +} diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index bb036d7f7..d5a95324f 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -13,7 +13,7 @@ import { TechTreeSection } from './components/Model/TechTreeSection'; import { ShotDisplaySection } from './components/ShotDisplaySection'; import { VideoSection } from './components/VideoSection'; -export default function Page() { +export default function Page({ params }: { params: { id: string } }) { const exempt = useAdExempt(); const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation(); const mutateDuel = Duel.useMutation(); @@ -73,7 +73,7 @@ export default function Page() { return ( - + {!exempt && }