feat: skip

packages/i18n/strings/en.json

@@ -860,6 +860,7 @@
         "seo_description": "Play a tank guessing game with a silhouette in World of Tanks Blitz",
         "search": {
           "placeholder": "Type to guess...",
+          "skip": "Skip",
           "guess": "Guess",
           "next": "Next",
           "no_results": "No results"

packages/website/src/components/PageWrapper.tsx

@@ -28,7 +28,7 @@ export function PageWrapper({
       style={{
         flex: noFlex1 ? undefined : 1,
         display: 'flex',
-        minHeight: noMinHeight ? 'unset' : `calc(100dvh - ${NAVBAR_HEIGHT}px)`,
+        minHeight: noMinHeight ? 'unset' : `calc(100svh - ${NAVBAR_HEIGHT}px)`,
         flexDirection: 'column',
         ...containerProps?.style,
       }}

packages/website/src/pages/[...locale]/tools/guess/components/Background/index.tsx

@@ -48,7 +48,15 @@ export function Background() {
                 : 'tomato-3',
           ),
         }}
-      />
+      >
+        <Box
+          width="100%"
+          height="100%"
+          style={{
+            background: `radial-gradient(circle, ${Var('color-panel-translucent')}, ${Var('color-panel-solid')})`,
+          }}
+        />
+      </Box>
 
       <Box
         className="guess-background"

packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx

@@ -20,7 +20,7 @@ import {
 } from '@radix-ui/themes';
 import fuzzysort from 'fuzzysort';
 import { debounce } from 'lodash-es';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { classIcons } from '../../../../../components/ClassIcon';
 import { SearchResults } from '../../../../../components/SearchResults';
 import { awaitableTankDefinitions } from '../../../../../core/awaitables/tankDefinitions';
@@ -78,6 +78,10 @@ export function Guesser() {
     [],
   );
 
+  useEffect(() => {
+    if (guessState !== null) setSelected(null);
+  }, [guessState]);
+
   return (
     <Flex
       direction="column"
@@ -160,11 +164,10 @@ export function Guesser() {
 
         <Button
           size="3"
-          disabled={guessState === null && selected === null}
+          color={guessState === null && selected === null ? 'red' : undefined}
           onClick={() => {
             if (guessState === null) {
-              console.log('what');
-              const correct = selected!.id === tank.id;
+              const correct = selected !== null && selected.id === tank.id;
 
               mutateGuessEphemeral((draft) => {
                 draft.guessState = correct;
@@ -187,8 +190,12 @@ export function Guesser() {
         >
           {guessState === null ? (
             <>
-              {strings.website.tools.guess.search.guess}
-              <PaperPlaneIcon />
+              {
+                strings.website.tools.guess.search[
+                  selected === null ? 'skip' : 'guess'
+                ]
+              }
+              {selected === null ? <ArrowRightIcon /> : <PaperPlaneIcon />}
             </>
           ) : (
             <>