From 4165533838f3631a817bd574cb5634ea03adfa83 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 5 May 2025 21:05:46 -0500
Subject: [PATCH] feat: simplier hiding
---
.../guess/components/Background/index.tsx | 23 +++----
.../tools/guess/components/GuessRenderer.tsx | 69 +++----------------
.../tools/guess/components/Guesser.tsx | 3 -
3 files changed, 20 insertions(+), 75 deletions(-)
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 (