fix: hero interactibility

This commit is contained in:
tresabhi committed 2025-04-20 21:16:50 -05:00
1 parent 0924a77776
commit 5fdc9044ca
1 file changed
+44 -44
@@ -94,7 +94,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
return (
<Flex justify="center">
<Flex
direction={{ initial: 'column', md: 'row' }}
direction={{ initial: 'column-reverse', md: 'row' }}
style={{
zIndex: isFullScreen ? 2 : undefined,
backgroundColor: 'black',
@@ -110,6 +110,49 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
top={isFullScreen ? '0' : undefined}
left={isFullScreen ? '0' : undefined}
>
<Box
className="tank-sandbox-container"
flexGrow="1"
flexBasis="0"
flexShrink="0"
position="relative"
>
<Box position="absolute" width="100%" height="100%" overflow="hidden">
<Box
width="100%"
height="100%"
position="relative"
left={disturbed ? '0' : { initial: '0', md: '12.5%' }}
style={{ transitionDuration: '200ms' }}
>
{!revealed && (
<Spinner
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: Var('space-6'),
height: Var('space-6'),
}}
/>
)}
{/* {skeleton && <TankSandboxLoader id={protagonist.id} />} */}
<Suspense>
<TankSandbox ref={canvas} thicknessRange={thicknessRange} />
</Suspense>
</Box>
<Options
skeleton={skeleton}
canvas={canvas}
thicknessRange={thicknessRange}
/>
</Box>
</Box>
<Flex
className="tankopedia-title-bar"
justify="center"
@@ -261,49 +304,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
)}
</Flex>
</Flex>
<Box
className="tank-sandbox-container"
flexGrow="1"
flexBasis="0"
flexShrink="0"
position="relative"
>
<Box position="absolute" width="100%" height="100%" overflow="hidden">
<Box
width="100%"
height="100%"
position="relative"
left={disturbed ? '0' : { initial: '0', md: '12.5%' }}
style={{ transitionDuration: '200ms' }}
>
{!revealed && (
<Spinner
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: Var('space-6'),
height: Var('space-6'),
}}
/>
)}
{/* {skeleton && <TankSandboxLoader id={protagonist.id} />} */}
<Suspense>
<TankSandbox ref={canvas} thicknessRange={thicknessRange} />
</Suspense>
</Box>
<Options
skeleton={skeleton}
canvas={canvas}
thicknessRange={thicknessRange}
/>
</Box>
</Box>
</Flex>
</Flex>
);