Merge pull request #18 from RedDuck-Software/feat/ui-improvements

Feat/UI improvements

src/components/common/BaseTooltip/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { ReactNode, useState } from 'react';
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

src/components/common/Header/index.tsx

@@ -20,8 +20,15 @@ export const Header = () => {
 
   return (
     <header className="max-h-[69px] border-b border-customBlack bg-[url('/images/textures/sand.png')] py-[10px] md:max-h-fit md:py-[20px]">
-      <div className="mx-auto flex w-full max-w-[90%] items-center justify-between bg-repeat">
-        <Link to={routes.HOME}>
+      <div className="mx-auto flex w-full max-w-[1688px] items-center justify-between bg-repeat px-6">
+        <Link
+          to={routes.HOME}
+          onClick={() => {
+            if (isMenuOpen) {
+              handleModalOpen();
+            }
+          }}
+        >
           <span className="text-[25px] leading-[30px] md:text-[35px] md:leading-[42px]">Tarotsol AI</span>
         </Link>
         <NavMenu className="hidden md:flex" />

src/components/pages/game/game.tsx

@@ -8,6 +8,7 @@ import { z } from 'zod';
 import { BaseTooltip } from '@/components/common/BaseTooltip';
 import Solana from '@/components/common/Svg/Solana.tsx';
 import { Button } from '@/components/ui/button.tsx';
+import { env } from '@/env';
 import useMakePrediction from '@/hooks/contracts/write/use-make-prediction';
 import useSendSol from '@/hooks/contracts/write/use-send-sol';
 import { cn } from '@/lib/utils';
@@ -22,15 +23,25 @@ const TarotRequestSchema = z.object({
     .refine((value) => value.trim() !== '', { message: 'String cannot consist of only spaces' }),
 });
 
+const DEFAULT_IMAGE = 'images/tarot-game/bord.png';
+const SHUFFLE_DECK = 'images/tarot-game/shuffle-deck.png';
+const ORACLE_NEEDS_TIME = 'images/tarot-game/oracle-needs-time.png';
+const THANKS_ORACLE = 'images/tarot-game/thanks-oracle.png';
+
+const LOADING_IMAGES = [SHUFFLE_DECK, ORACLE_NEEDS_TIME] as const;
+
 type TarotRequestSchemaType = z.infer<typeof TarotRequestSchema>;
 
 export const GameSection = () => {
   const { publicKey } = useWallet();
   const { setIsOpen } = useWalletModalStore();
   const { mutateAsync: transfer, isSuccess, isPending, data: predictionAnswer } = useMakePrediction();
-  const { mutateAsync: transferSol, isPending: isSolPending } = useSendSol();
+  const { mutateAsync: transferSol, isPending: isSolPending, isSuccess: isTipSuccess } = useSendSol();
 
   const [selectedTip, setSelectedTip] = useState<number>(0);
+  const [currentMainImage, setCurrentMainImage] = useState<string>(DEFAULT_IMAGE);
+  const [currentPendingImage, setCurrentPendingImage] = useState<number>(0);
+  const [isFadingOut, setIsFadingOut] = useState<boolean>(false);
 
   const {
     register,
@@ -68,13 +79,49 @@ export const GameSection = () => {
     }
   }, [isSuccess, predictionAnswer, setValue, watch]);
 
+  useEffect(() => {
+    if (isTipSuccess) {
+      setCurrentMainImage(THANKS_ORACLE);
+
+      const timer = setTimeout(() => {
+        setCurrentMainImage(DEFAULT_IMAGE);
+      }, 5000);
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [isTipSuccess]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout | null = null;
+
+    if (isPending) {
+      interval = setInterval(() => {
+        setIsFadingOut(true);
+
+        setTimeout(() => {
+          setCurrentPendingImage((prevIndex) => (prevIndex + 1) % LOADING_IMAGES.length);
+          setIsFadingOut(false);
+        }, 500);
+      }, 5000);
+      setCurrentMainImage(LOADING_IMAGES[currentPendingImage]);
+    } else {
+      setCurrentMainImage(DEFAULT_IMAGE);
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [isPending, currentPendingImage]);
+
   return (
     <div className="container flex flex-col gap-[20px] py-[20px] font-inknut">
       <div className="text-center font-bona-nova-sc text-[30px] sm:text-[50px]">Your Future In One Bet</div>
 
       <div className="w-[90vw] overflow-x-auto sm:w-auto">
         <div className="relative -z-50 h-[444px] w-[888px] sm:h-auto sm:w-auto">
-          {predictionAnswer && (
+          {predictionAnswer && currentMainImage === DEFAULT_IMAGE && (
             <div className="absolute flex h-[93%] w-full flex-row justify-around py-4 sm:h-full sm:justify-evenly">
               {predictionAnswer.tarots.map((e) => {
                 return (
@@ -88,7 +135,15 @@ export const GameSection = () => {
               })}
             </div>
           )}
-          <img src="images/tarot-game/bord.png" alt="bord" className="relative -z-50" />
+          <img
+            src={currentMainImage}
+            alt="bord"
+            className={cn(
+              'relative -z-50 mx-auto h-auto max-h-[484px] w-auto',
+              isPending && 'transition-opacity duration-500 ease-in-out',
+              isFadingOut ? 'opacity-0' : 'opacity-100',
+            )}
+          />
         </div>
       </div>
 
@@ -115,7 +170,7 @@ export const GameSection = () => {
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-10">
         <div className="flex flex-row items-center gap-4 rounded-[8px] border border-[#3A3939] bg-[#D0C7A3] p-[14px] text-[20px]">
           <Solana />
-          <div className="font-poppins">0.002 SOL</div>
+          <div className="font-poppins">{env.VITE_DEPOSIT_AMOUNT_SOL} SOL</div>
         </div>
 
         {publicKey ? (

tailwind.config.ts

@@ -7,7 +7,7 @@ const config = {
       center: true,
       padding: '16px',
       screens: {
-        '2xl': '1360px',
+        '2xl': '1040px',
       },
     },
     extend: {
@@ -100,7 +100,7 @@ const config = {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
-        'tarot-line-scroll': 'tarotLineScroll 60s linear infinite',
+        'tarot-line-scroll': 'tarotLineScroll 80s linear infinite',
       },
     },
   },