diff --git a/packages/website/src/components/Guesser.tsx b/packages/website/src/components/Guesser.tsx index ce512cffb..d8e8a0e6f 100644 --- a/packages/website/src/components/Guesser.tsx +++ b/packages/website/src/components/Guesser.tsx @@ -41,7 +41,11 @@ const [tankNames, tankDefinitions] = await Promise.all([ const ids = Object.keys(tankDefinitions.tanks); -export function Guesser() { +interface GuesserProps { + selectedTiers: number[]; +} + +export function Guesser({ selectedTiers }: GuesserProps) { const tank = Guess.use((state) => state.tank); const guessState = Guess.use((state) => state.guessState); const correctGuesses = Guess.use((state) => state.correctGuesses); @@ -99,6 +103,8 @@ export function Guesser() { maxWidth="25rem" gap="4" > + + {results !== null && ( @@ -219,6 +225,7 @@ export function Guesser() { + ); } diff --git a/packages/website/src/pages/[...locale]/guess/_index.tsx b/packages/website/src/pages/[...locale]/guess/_index.tsx index 7282e7bbc..b572617ed 100644 --- a/packages/website/src/pages/[...locale]/guess/_index.tsx +++ b/packages/website/src/pages/[...locale]/guess/_index.tsx @@ -1,5 +1,8 @@ -import { Box, Flex, Heading } from "@radix-ui/themes"; -import { Suspense } from "react"; +import { Box, DropdownMenu, Flex, Heading, IconButton, Text } from "@radix-ui/themes"; +import { Suspense, useEffect, useState } from "react"; +import { MixerVerticalIcon } from "@radix-ui/react-icons"; +import { times } from "lodash-es"; +import { TIER_ROMAN_NUMERALS } from "@blitzkit/core"; import { GuessBackground } from "../../../components/GuessBackground"; import { Guesser } from "../../../components/Guesser"; import { GuessRenderer } from "../../../components/GuessRenderer"; @@ -55,18 +58,115 @@ function Container({ skeleton }: MaybeSkeletonComponentProps) { } function Content({ skeleton }: MaybeSkeletonComponentProps) { - const { unwrap } = useLocale(); + const { unwrap, strings } = useLocale(); const tank = Guess.use((state) => state.tank); const guessState = Guess.use((state) => state.guessState); const isRevealed = guessState !== GuessState.NotGuessed; const name = unwrap(tank.name); const fontSize = `min(48vh, ${55 / name.length}vw)`; const transitionDuration = isRevealed ? "2s" : undefined; + const [selectedTiers, setSelectedTiers] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); + + useEffect(() => { + if (selectedTiers.length === 0) return; + + const filteredIds = ids.filter((id) => { + const tank = tankDefinitions.tanks[Number(id)]; + return selectedTiers.includes(tank.tier); + }); + + if (filteredIds.length === 0) return; + + const id = Number(filteredIds[Math.floor(Math.random() * filteredIds.length)]); + const newTank = tankDefinitions.tanks[id]; + + Guess.mutate((draft) => { + draft.tank = newTank; + draft.guessState = GuessState.NotGuessed; + draft.helpingReveal = false; + }); + }, [selectedTiers]); return ( + + + + + + + + + {times(10, (index) => { + const tier = 10 - index; + const isSelected = selectedTiers.includes(tier); + + return ( + { + event.preventDefault(); + setSelectedTiers((prev) => { + if (prev.includes(tier)) { + return prev.filter((t) => t !== tier); + } else { + return [...prev, tier]; + } + }); + }} + > + {TIER_ROMAN_NUMERALS[tier]} + + ); + })} + + + + setSelectedTiers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])} + > + Select All + + + setSelectedTiers([])} + > + Clear All + + + + + {selectedTiers.length === 0 && ( + + + Select tier(s) to start playing + + + )} + - + ); }