From f9c182e68c576343fcd56994c6576a548565f876 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 6 May 2025 21:30:35 -0500
Subject: [PATCH] feat: hide guess

---
 packages/website/src/components/Navbar.astro  | 14 +++++++--
 .../components/TankSandbox/Title.tsx          | 10 +++----
 .../Tankopedia/HeroSection/index.tsx          | 29 +++++++++++++++----
 packages/website/src/constants/tools.ts       |  2 +-
 packages/website/src/layouts/BaseLayout.astro |  5 ++--
 .../website/src/pages/[...locale]/index.astro | 17 +++++------
 .../tools/tankopedia/[id]/index.astro         |  2 +-
 7 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/packages/website/src/components/Navbar.astro b/packages/website/src/components/Navbar.astro
index 49a510cb1..43de65183 100644
--- a/packages/website/src/components/Navbar.astro
+++ b/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">
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx
index dbea4720d..50881c446 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title.tsx
+++ b/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'},
-          font-size 1s,
-          -webkit-text-stroke 1.5s
-        `,
+            letter-spacing 1s ${disturbed ? '0s' : '1s'},
+            font-size 1s,
+            -webkit-text-stroke 1.5s
+          `,
         }}
         wrap="nowrap"
       >
diff --git a/packages/website/src/components/Tankopedia/HeroSection/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/index.tsx
index c5c040b74..925272606 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/index.tsx
+++ b/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>
   );
 }
diff --git a/packages/website/src/constants/tools.ts b/packages/website/src/constants/tools.ts
index b51aeff4c..395fe9604 100644
--- a/packages/website/src/constants/tools.ts
+++ b/packages/website/src/constants/tools.ts
@@ -130,7 +130,7 @@ export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
   performanceTool,
-  guessTool,
+  // guessTool,
   // chartsTool,
   galleryTool,
   sessionTool,
diff --git a/packages/website/src/layouts/BaseLayout.astro b/packages/website/src/layouts/BaseLayout.astro
index 900c8a9e0..340d5a80e 100644
--- a/packages/website/src/layouts/BaseLayout.astro
+++ b/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" />
 
diff --git a/packages/website/src/pages/[...locale]/index.astro b/packages/website/src/pages/[...locale]/index.astro
index 8473658aa..1fadf56f4 100644
--- a/packages/website/src/pages/[...locale]/index.astro
+++ b/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>
 
diff --git a/packages/website/src/pages/[...locale]/tools/tankopedia/[id]/index.astro b/packages/website/src/pages/[...locale]/tools/tankopedia/[id]/index.astro
index 7fd1cd27d..5b17aaa8c 100644
--- a/packages/website/src/pages/[...locale]/tools/tankopedia/[id]/index.astro
+++ b/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>