feat: tweak a few things and enable guess game

packages/website/src/components/GuessRenderer.tsx

@@ -5,7 +5,7 @@ import { Controls } from './Tankopedia/HeroSection/components/TankSandbox/compon
 import { Lighting } from './Tankopedia/HeroSection/components/TankSandbox/components/Lighting';
 import { TankModel } from './Tankopedia/HeroSection/components/TankSandbox/components/TankModel';
 
-const BRIGHTNESS = 2 ** -5;
+const BRIGHTNESS = 2 ** -5.5;
 const CONTRAST = 2 ** 2;
 
 export function GuessRenderer() {
@@ -16,13 +16,12 @@ export function GuessRenderer() {
     <SmartCanvas
       style={{
         filter: `grayscale(${isRevealed ? 0 : 1}) contrast(${isRevealed ? 1 : CONTRAST}) brightness(${isRevealed ? 1 : BRIGHTNESS})`,
-        // filter: `drop-shadow(0 0 1rem ${Var('black-a11')})`,
         transitionDuration: isRevealed ? '2s' : undefined,
         transitionProperty: 'filter',
       }}
       camera={{ position: [-5, 5, -5] }}
     >
-      <Controls distanceScale={2} zoomable={false} />
+      <Controls zoomable={false} />
       <Lighting display={TankopediaDisplay.Model} />
       <TankModel />
     </SmartCanvas>

packages/website/src/components/Guesser.tsx

@@ -88,7 +88,7 @@ export function Guesser() {
       position="absolute"
       bottom="0"
       left="50%"
-      style={{ transform: 'translateX(-50%)' }}
+      style={{ transform: 'translateX(-50%)', pointerEvents: 'none' }}
       width="100%"
       p="4"
       maxWidth="25rem"

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

@@ -24,7 +24,6 @@ interface ControlsProps {
   autoRotate?: boolean;
   zoomable?: boolean;
   enableRotate?: boolean;
-  distanceScale?: number;
 }
 
 export function Controls({
@@ -32,7 +31,6 @@ export function Controls({
   autoRotate = true,
   zoomable = true,
   enableRotate = true,
-  distanceScale = 1,
 }: ControlsProps) {
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const duelStore = Duel.useStore();
@@ -86,7 +84,7 @@ export function Controls({
     -8,
     gunHeight + (naked ? 10 : 2),
     -13,
-  ).multiplyScalar(distanceScale);
+  );
 
   const t0 = useRef(Date.now() / 1000);
   useFrame(() => {

packages/website/src/constants/tools.ts

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

packages/website/src/pages/[...locale]/guess/_index.tsx

@@ -7,7 +7,6 @@ import { GuessRendererLoader } from '../../../components/GuessRendererLoader';
 import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions';
 import { awaitableProvisionDefinitions } from '../../../core/awaitables/provisionDefinitions';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
-import { Var } from '../../../core/radix/var';
 import {
   type LocaleAcceptorProps,
   LocaleProvider,
@@ -33,13 +32,13 @@ export function Page({ locale }: LocaleAcceptorProps) {
   return (
     <GuessEphemeral.Provider data={initialTank}>
       <LocaleProvider locale={locale}>
-        <Page2 />
+        <Container />
       </LocaleProvider>
     </GuessEphemeral.Provider>
   );
 }
 
-function Page2() {
+function Container() {
   const tank = GuessEphemeral.use((state) => state.tank);
   const model = modelDefinitions.models[tank.id];
 
@@ -57,65 +56,62 @@ function Content() {
   const tank = GuessEphemeral.use((state) => state.tank);
   const guessState = GuessEphemeral.use((state) => state.guessState);
   const isRevealed = guessState !== null;
+  const name = unwrap(tank.name);
+  const fontSize = `min(48vh, ${55 / name.length}vw)`;
+  const transitionDuration = isRevealed ? '2s' : undefined;
 
   return (
     <Flex flexGrow="1" position="relative" overflow="hidden">
       <GuessBackground />
 
-      <Flex
+      <Heading
-        position="absolute"
-        left="50%"
-        top="50%"
-        ml="9"
         style={{
+          transitionDuration,
           opacity: isRevealed ? 1 : 0,
-          transitionDuration: isRevealed ? '2s' : undefined,
+          fontWeight: 900,
-          transform: 'translateY(-50%)',
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          fontSize,
+          userSelect: 'none',
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
         }}
       >
-        <Heading weight="medium" size="9">
+        {name}
-          {unwrap(tank.name)}
+      </Heading>
-        </Heading>
-      </Flex>
 
       <Box
         position="absolute"
+        top="0"
+        left="0"
         width="100%"
         height="100%"
-        top="0"
+        style={{ transitionDuration }}
-        right={isRevealed ? '16rem' : '0'}
-        style={{
-          transitionDuration: isRevealed ? '2s' : undefined,
-        }}
       >
         <Suspense fallback={<GuessRendererLoader />}>
           <GuessRenderer />
         </Suspense>
       </Box>
 
-      <Flex
+      <Heading
-        position="absolute"
-        left="50%"
-        top="50%"
-        ml="9"
         style={{
-          opacity: isRevealed ? 1 : 0,
+          transitionDuration,
-          transitionDuration: isRevealed ? '2s' : undefined,
+          opacity: isRevealed ? 0.5 : 0,
-          transform: 'translateY(-50%)',
+          fontWeight: 900,
-          color: 'transparent',
+          position: 'absolute',
-          WebkitTextStroke: `1px ${Var('gray-12')}`,
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+          fontSize,
+          userSelect: 'none',
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
         }}
       >
-        <Heading
+        {name}
-          style={{
+      </Heading>
-            WebkitTextStroke: `1px inherit`,
-          }}
-          weight="medium"
-          size="9"
-        >
-          {unwrap(tank.name)}
-        </Heading>
-      </Flex>
 
       <Guesser />
     </Flex>

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

@@ -7,7 +7,6 @@ import { Box, Flex, Heading, Link } from '@radix-ui/themes';
 import type { GetStaticPaths } from 'astro';
 import { AesonPlug } from '../../components/AesonPlug';
 import HomeHero from '../../components/HomeHero.astro';
-import { HomePageHotTanks } from '../../components/HomePageHotTanks';
 import { Plugs } from '../../components/Plugs';
 import ToolCard from '../../components/ToolCard.astro';
 import {
@@ -15,6 +14,7 @@ import {
   discordTool,
   embedTool,
   galleryTool,
+  guessTool,
   moreTool,
   performanceTool,
   sessionTool,
@@ -110,22 +110,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} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={embedTool} />
-        <ToolCard tool={moreTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={moreTool} />
         <Box flexGrow="1" />
       </Flex>