feat: simplier hiding

packages/website/src/pages/[...locale]/tools/guess/components/Background/index.tsx

@@ -15,7 +15,7 @@ const [modelDefinitions, provisionDefinitions] = await Promise.all([
 ]);
 
 export function Background() {
-  const state = GuessEphemeral.use((state) => state.guessState);
+  const guessState = GuessEphemeral.use((state) => state.guessState);
   const tank = GuessEphemeral.use((state) => state.tank);
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
@@ -39,19 +39,16 @@ export function Background() {
         top="0"
         left="0"
         style={{
-          backgroundColor: Var(`${state ? 'jade' : 'tomato'}-3`),
+          transitionDuration: '2s',
-        }}
+          backgroundColor: Var(
-      >
+            guessState === null
-        <Box
+              ? 'accent-2'
-          width="100%"
+              : guessState
-          height="100%"
+                ? 'jade-3'
-          style={{
+                : 'tomato-3',
-            opacity: state === null ? 1 : 0,
+          ),
-            transitionDuration: '200ms',
-            backgroundColor: Var('cyan-3'),
         }}
       />
-      </Box>
 
       <Box
         className="guess-background"

packages/website/src/pages/[...locale]/tools/guess/components/GuessRenderer.tsx

@@ -1,75 +1,26 @@
-import { Canvas, invalidate } from '@react-three/fiber';
+import { Canvas } from '@react-three/fiber';
-import { type QuicklimeCallback, Quicklime } from 'quicklime';
-import { useCallback, useEffect, useRef } from 'react';
-import { Fog } from 'three';
 import { Controls } from '../../../../../components/Tankopedia/HeroSection/components/TankSandbox/components/Control';
 import { Lighting } from '../../../../../components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting';
 import { TankModel } from '../../../../../components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel';
-import { Var } from '../../../../../core/radix/var';
+import { GuessEphemeral } from '../../../../../stores/guessEphemeral';
 import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants';
 
-const nearConcealed = -45;
+const BRIGHTNESS = 2 ** -5;
-const farConcealed = 22;
+const CONTRAST = 2 ** 2;
-const nearRevealed = 25;
-const farRevealed = 25;
-const animationDuration = 1;
-
-export const revealEvent = new Quicklime<boolean>();
 
 export function GuessRenderer() {
-  const fog = useRef(new Fog('black', nearConcealed, farConcealed));
+  const guessState = GuessEphemeral.use((state) => state.guessState);
-  const reveal = useCallback((show: boolean) => {
+  const isRevealed = guessState !== null;
-    if (!show) {
-      fog.current.near = nearConcealed;
-      fog.current.far = farConcealed;
-      invalidate();
-      return;
-    }
-
-    const t0 = Date.now() / 1000;
-
-    function frame() {
-      const t = Date.now() / 1000;
-      const x = (t - t0) / animationDuration;
-      const y = Math.sqrt(x);
-      const near = nearConcealed * (1 - y) + nearRevealed * y;
-      const far = farConcealed * (1 - y) + farRevealed * y;
-
-      fog.current.near = near;
-      fog.current.far = far;
-
-      invalidate();
-
-      if (y < 1) {
-        requestAnimationFrame(frame);
-      } else {
-        fog.current.near = nearRevealed;
-        fog.current.far = farRevealed;
-      }
-    }
-
-    requestAnimationFrame(frame);
-  }, []);
-
-  useEffect(() => {
-    const handleRevealEvent: QuicklimeCallback<boolean> = ({ data }) => {
-      reveal(data);
-    };
-
-    revealEvent.on(handleRevealEvent);
-
-    return () => {
-      revealEvent.off(handleRevealEvent);
-    };
-  }, []);
 
   return (
     <Canvas
       style={{
-        filter: `drop-shadow(0 0 1rem ${Var('black-a11')})`,
+        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] }}
-      scene={{ fog: fog.current }}
     >
       <Controls distanceScale={2} zoomable={false} />
       <Lighting display={TankopediaDisplay.Model} />

packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx

@@ -27,7 +27,6 @@ import { awaitableTankDefinitions } from '../../../../../core/awaitables/tankDef
 import { awaitableTankNames } from '../../../../../core/awaitables/tankNames';
 import { useLocale } from '../../../../../hooks/useLocale';
 import { GuessEphemeral } from '../../../../../stores/guessEphemeral';
-import { revealEvent } from './GuessRenderer';
 
 const { go } = fuzzysort;
 
@@ -167,7 +166,6 @@ export function Guesser() {
               console.log('what');
               const correct = selected!.id === tank.id;
 
-              revealEvent.dispatch(true);
               mutateGuessEphemeral((draft) => {
                 draft.guessState = correct;
                 draft.totalGuesses++;
@@ -177,7 +175,6 @@ export function Guesser() {
               const id = Number(ids[Math.floor(Math.random() * ids.length)]);
               const tank = tankDefinitions.tanks[id];
 
-              revealEvent.dispatch(false);
               mutateGuessEphemeral((draft) => {
                 if (!input.current) return;