diff --git a/packages/website/src/pages/[...locale]/tools/guess/components/Background/index.tsx b/packages/website/src/pages/[...locale]/tools/guess/components/Background/index.tsx index 009574341..a0116d98b 100644 --- a/packages/website/src/pages/[...locale]/tools/guess/components/Background/index.tsx +++ b/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 + ? 'accent-2' + : guessState + ? 'jade-3' + : 'tomato-3', + ), }} - > - - + /> (); +const BRIGHTNESS = 2 ** -5; +const CONTRAST = 2 ** 2; export function GuessRenderer() { - const fog = useRef(new Fog('black', nearConcealed, farConcealed)); - const reveal = useCallback((show: boolean) => { - 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 = ({ data }) => { - reveal(data); - }; - - revealEvent.on(handleRevealEvent); - - return () => { - revealEvent.off(handleRevealEvent); - }; - }, []); + const guessState = GuessEphemeral.use((state) => state.guessState); + const isRevealed = guessState !== null; return ( diff --git a/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx b/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx index 0646be04b..8e9493f55 100644 --- a/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx +++ b/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;