From 8b527f2333ed5eac7e450ba49c65a532bbb10aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Mon, 1 Sep 2025 22:55:31 -0500 Subject: [PATCH] fix: last and next checking --- packages/varuna/src/index.ts | 17 ++++++++------ .../src/components/GuessBackground/index.tsx | 6 ++--- .../website/src/components/GuessRenderer.tsx | 4 ++-- packages/website/src/components/Guesser.tsx | 23 ++++++++++++------- .../src/pages/[...locale]/guess/_index.tsx | 4 ++-- packages/website/src/stores/guessEphemeral.ts | 13 +++++++---- 6 files changed, 40 insertions(+), 27 deletions(-) diff --git a/packages/varuna/src/index.ts b/packages/varuna/src/index.ts index 9ac5fa06d..1286e5503 100644 --- a/packages/varuna/src/index.ts +++ b/packages/varuna/src/index.ts @@ -2,10 +2,6 @@ import { produce } from "immer"; import { merge } from "lodash-es"; import { useEffect, useState } from "react"; -interface ProviderProps { - args: Arguments; -} - export class Varuna { private listeners = new Set<(state: Type) => void>(); @@ -53,11 +49,15 @@ export class Varuna { } on(slicer: (state: Type) => Slice, callback: (state: Slice) => void) { - const last = slicer(this.state); + let last = slicer(this.state); function listener(state: Type) { const next = slicer(state); - if (next !== last) callback(next); + + if (next !== last) { + callback(next); + last = next; + } } this.listeners.add(listener); @@ -94,8 +94,11 @@ export class Varuna { use( slicer: (state: Type) => Slice = (state) => state as unknown as Slice ) { + const instance = this; const [slice, setSlice] = useState(slicer(this.state)); - useEffect(() => this.on(slicer, setSlice), []); + + useEffect(() => instance.on(slicer, setSlice), []); + return slice; } } diff --git a/packages/website/src/components/GuessBackground/index.tsx b/packages/website/src/components/GuessBackground/index.tsx index 55bf6e408..6a42a2a93 100644 --- a/packages/website/src/components/GuessBackground/index.tsx +++ b/packages/website/src/components/GuessBackground/index.tsx @@ -5,7 +5,7 @@ import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDe import { tankToDuelMember } from "../../core/blitzkit/tankToDuelMember"; import { Var } from "../../core/radix/var"; import { Duel } from "../../stores/duel"; -import { Guess } from "../../stores/guessEphemeral"; +import { Guess, GuessState } from "../../stores/guessEphemeral"; import { TankopediaEphemeral } from "../../stores/tankopediaEphemeral"; import "./index.css"; @@ -39,9 +39,9 @@ export function GuessBackground() { style={{ transitionDuration: "2s", backgroundColor: Var( - guessState === null + guessState === GuessState.NotGuessed ? "accent-2" - : guessState + : guessState === GuessState.Correct ? "jade-3" : "tomato-3" ), diff --git a/packages/website/src/components/GuessRenderer.tsx b/packages/website/src/components/GuessRenderer.tsx index a1cb70898..0fbd8fd80 100644 --- a/packages/website/src/components/GuessRenderer.tsx +++ b/packages/website/src/components/GuessRenderer.tsx @@ -1,4 +1,4 @@ -import { Guess } from "../stores/guessEphemeral"; +import { Guess, GuessState } from "../stores/guessEphemeral"; import { SmartCanvas } from "./SmartCanvas"; import { Controls } from "./Tankopedia/HeroSection/components/TankSandbox/components/Control"; import { Lighting } from "./Tankopedia/HeroSection/components/TankSandbox/components/Lighting"; @@ -9,7 +9,7 @@ const CONTRAST = 2 ** 2; export function GuessRenderer() { const guessState = Guess.use((state) => state.guessState); - const isRevealed = guessState !== null; + const isRevealed = guessState !== GuessState.NotGuessed; return ( { - if (guessState !== null) setSelected(null); + if (guessState !== GuessState.NotGuessed) setSelected(null); }, [guessState]); return ( @@ -148,7 +148,7 @@ export function Guesser() { { - if (guessState === null) { + if (guessState === GuessState.NotGuessed) { const correct = selected !== null && selected.id === tank.id; Guess.mutate((draft) => { - draft.guessState = correct; + draft.guessState = correct + ? GuessState.Correct + : GuessState.Incorrect; draft.totalGuesses++; draft.correctGuesses += correct ? 1 : 0; }); @@ -181,13 +187,14 @@ export function Guesser() { if (!input.current) return; draft.tank = tank; - draft.guessState = null; + draft.guessState = GuessState.NotGuessed; + input.current.value = ""; }); } }} > - {guessState === null ? ( + {guessState === GuessState.NotGuessed ? ( <> { strings.website.tools.guess.search[ diff --git a/packages/website/src/pages/[...locale]/guess/_index.tsx b/packages/website/src/pages/[...locale]/guess/_index.tsx index ec4f2d3aa..10005671c 100644 --- a/packages/website/src/pages/[...locale]/guess/_index.tsx +++ b/packages/website/src/pages/[...locale]/guess/_index.tsx @@ -13,7 +13,7 @@ import { useLocale, } from "../../../hooks/useLocale"; import { Duel } from "../../../stores/duel"; -import { Guess } from "../../../stores/guessEphemeral"; +import { Guess, GuessState } from "../../../stores/guessEphemeral"; import { TankopediaEphemeral } from "../../../stores/tankopediaEphemeral"; const [tankDefinitions, modelDefinitions, provisionDefinitions] = @@ -55,7 +55,7 @@ function Content() { const { unwrap } = useLocale(); const tank = Guess.use((state) => state.tank); const guessState = Guess.use((state) => state.guessState); - const isRevealed = guessState !== null; + const isRevealed = guessState !== GuessState.NotGuessed; const name = unwrap(tank.name); const fontSize = `min(48vh, ${55 / name.length}vw)`; const transitionDuration = isRevealed ? "2s" : undefined; diff --git a/packages/website/src/stores/guessEphemeral.ts b/packages/website/src/stores/guessEphemeral.ts index 61d2d9ed8..d84847f79 100644 --- a/packages/website/src/stores/guessEphemeral.ts +++ b/packages/website/src/stores/guessEphemeral.ts @@ -1,19 +1,22 @@ import type { TankDefinition } from "@blitzkit/core"; import { Varuna } from "varuna"; +export enum GuessState { + Correct, + Incorrect, + NotGuessed, +} + export interface Guess { tank: TankDefinition; - /** - * true = correct, false = incorrect, null = not guessed - */ - guessState: boolean | null; + guessState: GuessState; totalGuesses: number; correctGuesses: number; } export const Guess = new Varuna((tank) => ({ tank, - guessState: null, + guessState: GuessState.NotGuessed, totalGuesses: 0, correctGuesses: 0, }));