From fbbfa5307c23b1f55043b571d7ee8e4ba198736b Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 5 May 2025 21:22:05 -0500
Subject: [PATCH] feat: skip

---
 packages/i18n/strings/en.json                 |  1 +
 .../website/src/components/PageWrapper.tsx    |  2 +-
 .../guess/components/Background/index.tsx     | 10 +++++++++-
 .../tools/guess/components/Guesser.tsx        | 19 +++++++++++++------
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 76335bd5c..1de35c052 100644
--- a/packages/i18n/strings/en.json
+++ b/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"
diff --git a/packages/website/src/components/PageWrapper.tsx b/packages/website/src/components/PageWrapper.tsx
index f78b1dd8b..f8d3894e5 100644
--- a/packages/website/src/components/PageWrapper.tsx
+++ b/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,
       }}
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 a0116d98b..fadef8605 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
@@ -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"
diff --git a/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx b/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx
index 8e9493f55..5c3997b57 100644
--- a/packages/website/src/pages/[...locale]/tools/guess/components/Guesser.tsx
+++ b/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 />}
             </>
           ) : (
             <>