From f56c31fb4891e0a635b7c83cbc6be1f6bd714ed1 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 19:22:38 -0500 Subject: [PATCH] feat: upgrade Guess --- .../src/components/GuessBackground/index.tsx | 46 ++++++++-------- .../website/src/components/GuessRenderer.tsx | 16 +++--- packages/website/src/components/Guesser.tsx | 53 +++++++++---------- .../src/pages/[...locale]/guess/_index.tsx | 22 ++++---- packages/website/src/stores/guessEphemeral.ts | 25 +++++---- 5 files changed, 80 insertions(+), 82 deletions(-) diff --git a/packages/website/src/components/GuessBackground/index.tsx b/packages/website/src/components/GuessBackground/index.tsx index b71d56e96..55bf6e408 100644 --- a/packages/website/src/components/GuessBackground/index.tsx +++ b/packages/website/src/components/GuessBackground/index.tsx @@ -1,13 +1,13 @@ -import { Box } from '@radix-ui/themes'; -import { useEffect } from 'react'; -import { awaitableModelDefinitions } from '../../core/awaitables/modelDefinitions'; -import { awaitableProvisionDefinitions } from '../../core/awaitables/provisionDefinitions'; -import { tankToDuelMember } from '../../core/blitzkit/tankToDuelMember'; -import { Var } from '../../core/radix/var'; -import { Duel } from '../../stores/duel'; -import { GuessEphemeral } from '../../stores/guessEphemeral'; -import { TankopediaEphemeral } from '../../stores/tankopediaEphemeral'; -import './index.css'; +import { Box } from "@radix-ui/themes"; +import { useEffect } from "react"; +import { awaitableModelDefinitions } from "../../core/awaitables/modelDefinitions"; +import { awaitableProvisionDefinitions } from "../../core/awaitables/provisionDefinitions"; +import { tankToDuelMember } from "../../core/blitzkit/tankToDuelMember"; +import { Var } from "../../core/radix/var"; +import { Duel } from "../../stores/duel"; +import { Guess } from "../../stores/guessEphemeral"; +import { TankopediaEphemeral } from "../../stores/tankopediaEphemeral"; +import "./index.css"; const [modelDefinitions, provisionDefinitions] = await Promise.all([ awaitableModelDefinitions, @@ -15,8 +15,8 @@ const [modelDefinitions, provisionDefinitions] = await Promise.all([ ]); export function GuessBackground() { - const guessState = GuessEphemeral.use((state) => state.guessState); - const tank = GuessEphemeral.use((state) => state.tank); + const guessState = Guess.use((state) => state.guessState); + const tank = Guess.use((state) => state.tank); const mutateDuel = Duel.useMutation(); useEffect(() => { @@ -37,13 +37,13 @@ export function GuessBackground() { top="0" left="0" style={{ - transitionDuration: '2s', + transitionDuration: "2s", backgroundColor: Var( guessState === null - ? 'accent-2' + ? "accent-2" : guessState - ? 'jade-3' - : 'tomato-3', + ? "jade-3" + : "tomato-3" ), }} > @@ -51,7 +51,7 @@ export function GuessBackground() { width="100%" height="100%" style={{ - background: `radial-gradient(circle, ${Var('color-panel-translucent')}, ${Var('color-panel-solid')})`, + background: `radial-gradient(circle, ${Var("color-panel-translucent")}, ${Var("color-panel-solid")})`, }} /> @@ -65,13 +65,13 @@ export function GuessBackground() { left="0" style={{ backgroundImage: ` - radial-gradient(circle, ${Var('white-a1')} 20%, transparent 20%), - radial-gradient(circle at 0 0, ${Var('white-a1')} 10%, transparent 10%), - radial-gradient(circle at 100% 0, ${Var('white-a1')} 10%, transparent 10%), - radial-gradient(circle at 0 100%, ${Var('white-a1')} 10%, transparent 10%), - radial-gradient(circle at 100% 100%, ${Var('white-a1')} 10%, transparent 10%) + radial-gradient(circle, ${Var("white-a1")} 20%, transparent 20%), + radial-gradient(circle at 0 0, ${Var("white-a1")} 10%, transparent 10%), + radial-gradient(circle at 100% 0, ${Var("white-a1")} 10%, transparent 10%), + radial-gradient(circle at 0 100%, ${Var("white-a1")} 10%, transparent 10%), + radial-gradient(circle at 100% 100%, ${Var("white-a1")} 10%, transparent 10%) `, - backgroundSize: '4rem 4rem', + backgroundSize: "4rem 4rem", }} /> diff --git a/packages/website/src/components/GuessRenderer.tsx b/packages/website/src/components/GuessRenderer.tsx index de798327f..a1cb70898 100644 --- a/packages/website/src/components/GuessRenderer.tsx +++ b/packages/website/src/components/GuessRenderer.tsx @@ -1,22 +1,22 @@ -import { GuessEphemeral } 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'; -import { TankModel } from './Tankopedia/HeroSection/components/TankSandbox/components/TankModel'; +import { Guess } 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"; +import { TankModel } from "./Tankopedia/HeroSection/components/TankSandbox/components/TankModel"; const BRIGHTNESS = 2 ** -5.5; const CONTRAST = 2 ** 2; export function GuessRenderer() { - const guessState = GuessEphemeral.use((state) => state.guessState); + const guessState = Guess.use((state) => state.guessState); const isRevealed = guessState !== null; return ( diff --git a/packages/website/src/components/Guesser.tsx b/packages/website/src/components/Guesser.tsx index 9725836b8..81d37cbb8 100644 --- a/packages/website/src/components/Guesser.tsx +++ b/packages/website/src/components/Guesser.tsx @@ -2,13 +2,13 @@ import { SEARCH_KEYS, TankDefinition, TIER_ROMAN_NUMERALS, -} from '@blitzkit/core'; -import { literals } from '@blitzkit/i18n'; +} from "@blitzkit/core"; +import { literals } from "@blitzkit/i18n"; import { ArrowRightIcon, MagnifyingGlassIcon, PaperPlaneIcon, -} from '@radix-ui/react-icons'; +} from "@radix-ui/react-icons"; import { Box, Button, @@ -17,16 +17,16 @@ import { Spinner, Text, TextField, -} from '@radix-ui/themes'; -import fuzzysort from 'fuzzysort'; -import { debounce } from 'lodash-es'; -import { useCallback, useEffect, useRef, useState } from 'react'; -import { awaitableTankDefinitions } from '../core/awaitables/tankDefinitions'; -import { awaitableTankNames } from '../core/awaitables/tankNames'; -import { useLocale } from '../hooks/useLocale'; -import { GuessEphemeral } from '../stores/guessEphemeral'; -import { classIcons } from './ClassIcon'; -import { SearchResults } from './SearchResults'; +} from "@radix-ui/themes"; +import fuzzysort from "fuzzysort"; +import { debounce } from "lodash-es"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { awaitableTankDefinitions } from "../core/awaitables/tankDefinitions"; +import { awaitableTankNames } from "../core/awaitables/tankNames"; +import { useLocale } from "../hooks/useLocale"; +import { Guess } from "../stores/guessEphemeral"; +import { classIcons } from "./ClassIcon"; +import { SearchResults } from "./SearchResults"; const { go } = fuzzysort; @@ -38,16 +38,15 @@ const [tankNames, tankDefinitions] = await Promise.all([ const ids = Object.keys(tankDefinitions.tanks); export function Guesser() { - const tank = GuessEphemeral.use((state) => state.tank); - const guessState = GuessEphemeral.use((state) => state.guessState); - const correctGuesses = GuessEphemeral.use((state) => state.correctGuesses); - const totalGuesses = GuessEphemeral.use((state) => state.totalGuesses); + const tank = Guess.use((state) => state.tank); + const guessState = Guess.use((state) => state.guessState); + const correctGuesses = Guess.use((state) => state.correctGuesses); + const totalGuesses = Guess.use((state) => state.totalGuesses); const { strings, unwrap } = useLocale(); const input = useRef(null); const [searching, setSearching] = useState(false); const [results, setResults] = useState(null); const [selected, setSelected] = useState(null); - const mutateGuessEphemeral = GuessEphemeral.useMutation(); const requestSearch = useCallback(() => { setSelected(null); @@ -72,10 +71,10 @@ export function Guesser() { }); setResults( - searchResults.map((result) => tankDefinitions.tanks[result.obj.id]), + searchResults.map((result) => tankDefinitions.tanks[result.obj.id]) ); }, 500), - [], + [] ); useEffect(() => { @@ -88,7 +87,7 @@ export function Guesser() { position="absolute" bottom="0" left="50%" - style={{ transform: 'translateX(-50%)' }} + style={{ transform: "translateX(-50%)" }} width="100%" p="4" maxWidth="25rem" @@ -138,7 +137,7 @@ export function Guesser() { )} - + {literals(strings.website.tools.guess.stats, [ `${correctGuesses}`, @@ -164,12 +163,12 @@ export function Guesser() {