diff --git a/public/images/tarot-game/bord.png b/public/images/tarot-game/bord.png index 7da1d32..10000fc 100644 Binary files a/public/images/tarot-game/bord.png and b/public/images/tarot-game/bord.png differ diff --git a/public/images/tarot-game/oracle-needs-time.png b/public/images/tarot-game/oracle-needs-time.png new file mode 100644 index 0000000..0bd0880 Binary files /dev/null and b/public/images/tarot-game/oracle-needs-time.png differ diff --git a/public/images/tarot-game/shuffle-deck.png b/public/images/tarot-game/shuffle-deck.png new file mode 100644 index 0000000..2e55e45 Binary files /dev/null and b/public/images/tarot-game/shuffle-deck.png differ diff --git a/public/images/tarot-game/thanks-oracle.png b/public/images/tarot-game/thanks-oracle.png new file mode 100644 index 0000000..1278566 Binary files /dev/null and b/public/images/tarot-game/thanks-oracle.png differ diff --git a/src/components/common/BaseTooltip/index.tsx b/src/components/common/BaseTooltip/index.tsx index b9e9f3b..a2b4136 100644 --- a/src/components/common/BaseTooltip/index.tsx +++ b/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'; diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index cce8358..2c2520a 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -20,8 +20,15 @@ export const Header = () => { return (
-
- +
+ { + if (isMenuOpen) { + handleModalOpen(); + } + }} + > Tarotsol AI diff --git a/src/components/pages/game/game.tsx b/src/components/pages/game/game.tsx index f05208a..91bab39 100644 --- a/src/components/pages/game/game.tsx +++ b/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; 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(0); + const [currentMainImage, setCurrentMainImage] = useState(DEFAULT_IMAGE); + const [currentPendingImage, setCurrentPendingImage] = useState(0); + const [isFadingOut, setIsFadingOut] = useState(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 (
Your Future In One Bet
- {predictionAnswer && ( + {predictionAnswer && currentMainImage === DEFAULT_IMAGE && (
{predictionAnswer.tarots.map((e) => { return ( @@ -88,7 +135,15 @@ export const GameSection = () => { })}
)} - bord + bord
@@ -115,7 +170,7 @@ export const GameSection = () => {
-
0.002 SOL
+
{env.VITE_DEPOSIT_AMOUNT_SOL} SOL
{publicKey ? ( diff --git a/tailwind.config.ts b/tailwind.config.ts index 0642ddd..513d939 100644 --- a/tailwind.config.ts +++ b/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', }, }, },