diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx index 47e408f3f..18f01b69a 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx @@ -90,10 +90,11 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { const mutateTankopediaPersistent = TankopediaPersistent.useMutation(); const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation(); const { strings, unwrap } = useLocale(); + const disturbed = TankopediaEphemeral.use((state) => state.disturbed); return ( <> - + {disturbed && } {display === TankopediaDisplay.ShootingRange && ( state.protagonist.tank); + const disturbed = TankopediaEphemeral.use((state) => state.disturbed); + const revealed = TankopediaEphemeral.use((state) => state.revealed); + const treeColor = + protagonist.type === TankType.COLLECTOR + ? 'blue' + : protagonist.type === TankType.PREMIUM + ? 'amber' + : undefined; + const name = unwrap(protagonist.name); + + return ( + + {name} + + ); +} diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx index 93ac896c6..a0400ac9b 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx @@ -128,8 +128,8 @@ export function Controls({ camera.position .copy(inspectModeInitialPosition) - .applyAxisAngle(I_HAT, (Math.PI / 16) * Math.sin(t / 9)) - .applyAxisAngle(J_HAT, (-Math.PI / 4) * Math.sin(t / 7)); + .applyAxisAngle(I_HAT, (Math.PI / 32) * Math.sin(t / 9)) + .applyAxisAngle(J_HAT, (-Math.PI / 16) * Math.sin(t / 7)); invalidate(); } diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx index 7133ca8a0..b6fa880d8 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx @@ -30,7 +30,6 @@ import { AutoClear } from './components/AutoClear'; import { Controls } from './components/Control'; import { InitialFogReveal } from './components/InitialFogReveal'; import { Lighting } from './components/Lighting'; -import { SceneProps } from './components/SceneProps'; import { TankModel } from './components/TankModel'; import { TransitionSkeleton } from './components/TransitionSkeleton'; @@ -234,7 +233,7 @@ export const TankSandbox = forwardRef( outline: naked ? '1rem red solid' : undefined, }} > - {!naked && } + {/* {!naked && } */} {(display === TankopediaDisplay.Model || (display === TankopediaDisplay.DynamicArmor && !hideTankModelUnderArmor)) && } diff --git a/packages/website/src/components/Tankopedia/HeroSection/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/index.tsx index e387a04ca..075e5fa14 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/index.tsx @@ -1,14 +1,11 @@ -import { assertSecret, TankType } from '@blitzkit/core'; -import { CaretLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons'; -import { Box, Dialog, Flex, Heading, Link, Spinner } from '@radix-ui/themes'; +import { TankType } from '@blitzkit/core'; +import { Box, Flex } from '@radix-ui/themes'; import { times } from 'lodash-es'; import { Suspense, useEffect, useMemo, useRef, useState } from 'react'; import { NAVBAR_HEIGHT } from '../../../constants/navbar'; import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions'; import { awaitableProvisionDefinitions } from '../../../core/awaitables/provisionDefinitions'; import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions'; -import { tankToDuelMember } from '../../../core/blitzkit/tankToDuelMember'; -import { Var } from '../../../core/radix/var'; import { useFullScreen } from '../../../hooks/useFullScreen'; import { useLocale } from '../../../hooks/useLocale'; import { Duel } from '../../../stores/duel'; @@ -16,10 +13,9 @@ import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral'; import type { MaybeSkeletonComponentProps } from '../../../types/maybeSkeletonComponentProps'; import type { ThicknessRange } from '../../Armor/components/StaticArmor'; import { classIcons } from '../../ClassIcon'; -import { ScienceIcon } from '../../ScienceIcon'; -import { TankSearch } from '../../TankSearch'; import { Options } from './components/Options'; import { TankSandbox } from './components/TankSandbox'; +import { Title } from './components/TankSandbox/Title'; const [provisionDefinitions, modelDefinitions, tankDefinitions] = await Promise.all([ @@ -110,6 +106,8 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) { top={isFullScreen ? '0' : undefined} left={isFullScreen ? '0' : undefined} > + + <Box className="tank-sandbox-container" flexGrow="1" @@ -122,10 +120,11 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) { width="100%" height="100%" position="relative" - left={disturbed ? '0' : { initial: '0', md: '12.5%' }} - style={{ transitionDuration: '200ms' }} + style={{ + transitionDuration: '1s', + }} > - {!revealed && ( + {/* {!revealed && ( <Spinner style={{ position: 'absolute', @@ -136,13 +135,22 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) { height: Var('space-6'), }} /> - )} + )} */} {/* {skeleton && <TankSandboxLoader id={protagonist.id} />} */} - <Suspense> - <TankSandbox ref={canvas} thicknessRange={thicknessRange} /> - </Suspense> + <Box + style={{ + width: '100%', + height: '100%', + transitionDuration: '2s', + opacity: revealed ? 1 : 0, + }} + > + <Suspense> + <TankSandbox ref={canvas} thicknessRange={thicknessRange} /> + </Suspense> + </Box> </Box> <Options @@ -153,157 +161,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) { </Box> </Box> - <Flex - className="tankopedia-title-bar" - justify="center" - position={{ initial: 'static', md: 'absolute' }} - left={{ - initial: '0', - md: disturbed ? '3' : '5', - lg: disturbed ? '7' : '9', - }} - pt="7" - pb="4" - top={{ initial: '8', md: '50%' }} - mt={{ initial: '0', md: '-9' }} - style={{ - transitionDuration: '200ms', - userSelect: 'none', - // background: 'red', - }} - direction="column" - align="center" - gap="2" - > - <Flex - align="center" - gap="3" - width="100%" - justify={{ initial: 'center', md: 'start' }} - > - <Heading - color={treeColor} - trim="end" - size={ - disturbed - ? { initial: '6', lg: '7' } - : { initial: '7', lg: '8' } - } - style={{ transitionDuration: '200ms', position: 'relative' }} - > - <Icon width="1em" height="1em" /> - </Heading> - - <Heading - weight="medium" - size={ - disturbed - ? { initial: '7', lg: '8' } - : { initial: '8', lg: '9' } - } - style={{ transitionDuration: '200ms' }} - wrap="nowrap" - color={treeColor} - > - {unwrap(protagonist.name)} - </Heading> - </Flex> - - <Flex - gap="4" - ml={disturbed ? '0' : '-2'} - style={{ transitionDuration: '200ms' }} - > - <Link color="gray" underline="always" href="/tools/tankopedia"> - <Flex align="center" gap="1"> - <CaretLeftIcon /> - {strings.website.tools.tankopedia.meta.back} - </Flex> - </Link> - - <Link - color="gray" - underline="always" - href={`/tools/compare?tanks=${compareTanks.join('%2C')}`} - > - <Flex align="center" gap="1"> - <MixIcon /> - {strings.website.tools.tankopedia.meta.compare} - </Flex> - </Link> - - <Dialog.Root open={showSwapDialog} onOpenChange={setShowSwapDialog}> - <Dialog.Trigger> - <Link - color="gray" - underline="always" - href="#" - onClick={(event) => { - event.preventDefault(); - setShowSwapDialog(true); - }} - > - <Flex align="center" gap="1"> - <UpdateIcon /> - {strings.website.tools.tankopedia.meta.swap.button} - </Flex> - </Link> - </Dialog.Trigger> - - <Dialog.Content> - <Dialog.Title> - {strings.website.tools.tankopedia.meta.swap.title} - </Dialog.Title> - - <TankSearch - compact - onSelect={(tank) => { - const model = modelDefinitions.models[tank.id]; - - setShowSwapDialog(false); - mutateTankopediaEphemeral((draft) => { - draft.model = modelDefinitions.models[tank.id]; - }); - mutateDuel((draft) => { - draft.protagonist = tankToDuelMember( - tank, - model, - provisionDefinitions, - ); - }); - - window.history.replaceState( - null, - '', - `/tools/tankopedia/${tank.id}`, - ); - }} - /> - </Dialog.Content> - </Dialog.Root> - - {assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === - 'true' && ( - <Link - color="jade" - href={`https://${ - assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) === - 'opentest' - ? '' - : 'opentest.' - }blitzkit.app/tools/tankopedia/${protagonist.id}`} - > - <Flex align="center" gap="1"> - <ScienceIcon width="1.25em" height="1.25em" /> - {assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) === - 'opentest' - ? strings.website.tools.tankopedia.meta.vanilla - : strings.website.tools.tankopedia.meta.opentest} - </Flex> - </Link> - )} - </Flex> - </Flex> + <Title outline /> </Flex> </Flex> );