feat: hide guess

packages/website/src/components/Navbar.astro

@@ -13,6 +13,11 @@ import { getStrings } from '../core/i18n/getStrings';
 import { Var } from '../core/radix/var';
 import { LinkI18n } from './LinkI18n';
 
+export interface Props {
+  integrated?: boolean;
+}
+
+const { integrated } = Astro.props;
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const { locale } = Astro.params;
 const branchName = resolveBranchName(locale);
@@ -62,7 +67,11 @@ const strings = getStrings(locale);
   });
 </script>
 
-<Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
+{
+  !integrated && (
+    <Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
+  )
+}
 
 <Flex
   direction="column"
@@ -74,6 +83,7 @@ const strings = getStrings(locale);
   position="fixed"
   style={{
     zIndex: 1,
+    backdropFilter: 'blur(4rem)',
   }}
 >
   <Flex
@@ -81,7 +91,7 @@ const strings = getStrings(locale);
     p={{ initial: '4', sm: '3' }}
     direction="column"
     align="center"
-    style={{ backgroundColor: Var('gray-1') }}
+    style={{ backgroundColor: integrated ? undefined : Var('gray-1') }}
   >
     <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
       <Flex align="center">

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx

@@ -85,7 +85,7 @@ export function Title({ outline }: TitleProps) {
   return (
     <Box
       position="absolute"
-      top={disturbed ? '8' : '50%'}
+      top={disturbed ? '6rem' : '50%'}
       left="50%"
       style={{
         transitionDuration: '1s',
@@ -109,10 +109,10 @@ export function Title({ outline }: TitleProps) {
             : undefined,
           letterSpacing: disturbed || !revealed ? 0 : '-0.03em',
           transition: `
-          letter-spacing 1s ease ${disturbed ? '0s' : '1s'},
+            letter-spacing 1s ${disturbed ? '0s' : '1s'},
-          font-size 1s,
+            font-size 1s,
-          -webkit-text-stroke 1.5s
+            -webkit-text-stroke 1.5s
-        `,
+          `,
         }}
         wrap="nowrap"
       >

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -103,11 +103,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
         backgroundColor: 'black',
       }}
       position="relative"
-      onWheel={() => {
-        mutateTankopediaEphemeral((draft) => {
-          draft.disturbed = true;
-        });
-      }}
     >
       <Box
         position="absolute"
@@ -132,7 +127,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           zIndex: isFullScreen ? 2 : undefined,
           transitionDuration: '1s',
         }}
-        height="calc(100vh - 6rem)"
+        height={disturbed && !isFullScreen ? 'calc(100vh - 6rem)' : '100vh'}
         maxHeight={isFullScreen ? undefined : '60rem'}
         maxWidth={isFullScreen ? undefined : '120rem'}
         flexGrow="1"
@@ -184,6 +179,28 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
 
         <Title outline />
       </Flex>
+
+      {!disturbed && (
+        <Box
+          onPointerDown={(event) => {
+            event.stopPropagation();
+            mutateTankopediaEphemeral((draft) => {
+              draft.disturbed = true;
+            });
+          }}
+          onWheel={(event) => {
+            event.stopPropagation();
+            mutateTankopediaEphemeral((draft) => {
+              draft.disturbed = true;
+            });
+          }}
+          position="absolute"
+          width="100%"
+          height="100%"
+          top="0"
+          left="0"
+        />
+      )}
     </Flex>
   );
 }

packages/website/src/constants/tools.ts

@@ -130,7 +130,7 @@ export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
   performanceTool,
-  guessTool,
+  // guessTool,
   // chartsTool,
   galleryTool,
   sessionTool,

packages/website/src/layouts/BaseLayout.astro

@@ -11,9 +11,10 @@ import { DEFAULT_LOCALE } from '@blitzkit/i18n';
 export interface Props {
   noFooter?: boolean;
   noNavbar?: boolean;
+  integrated?: boolean;
 }
 
-const { noFooter, noNavbar } = Astro.props;
+const { noFooter, noNavbar, integrated } = Astro.props;
 const locale = Astro.params.locale ?? DEFAULT_LOCALE;
 ---
 
@@ -57,7 +58,7 @@ const locale = Astro.params.locale ?? DEFAULT_LOCALE;
   <body class={noNavbar ? 'no-navbar' : ''}>
     <BlitzKitTheme>
       <Flex direction="column" minHeight="100vh">
-        <Navbar />
+        <Navbar {integrated} />
 
         <Checks {locale} client:only="react" />
 

packages/website/src/pages/[...locale]/index.astro

@@ -17,7 +17,6 @@ import {
   discordTool,
   embedTool,
   galleryTool,
-  guessTool,
   moreTool,
   performanceTool,
   sessionTool,
@@ -119,22 +118,22 @@ export const getStaticPaths = (() => {
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <!-- <ToolCard tool={chartsTool} /> -->
-        <ToolCard tool={guessTool} />
+        <!-- <ToolCard tool={guessTool} /> -->
         <ToolCard tool={galleryTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={sessionTool} />
+      </Flex>
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={discordTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={tierListTool} />
-        <ToolCard tool={embedTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={embedTool} />
         <ToolCard tool={moreTool} />
+      </Flex>
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <Box flexGrow="1" />
       </Flex>
 

packages/website/src/pages/[...locale]/tools/tankopedia/[id]/index.astro

@@ -107,7 +107,7 @@ const description = literals(
 <meta name="twitter:card" content="summary" />
 <meta name="twitter:image:src" content={icon} />
 
-<BaseLayout>
+<BaseLayout integrated>
   <Page {locale} id={id} client:only="react">
     <Page {locale} id={id} skeleton slot="fallback" />
   </Page>