diff --git a/public/images/tarot-game/board-sm.png b/public/images/tarot-game/board-sm.png new file mode 100644 index 0000000..762f57e Binary files /dev/null and b/public/images/tarot-game/board-sm.png differ diff --git a/public/images/tarot-game/bord.png b/public/images/tarot-game/board.png similarity index 100% rename from public/images/tarot-game/bord.png rename to public/images/tarot-game/board.png diff --git a/public/images/tarot-game/oracle-needs-time-sm.png b/public/images/tarot-game/oracle-needs-time-sm.png new file mode 100644 index 0000000..816736e Binary files /dev/null and b/public/images/tarot-game/oracle-needs-time-sm.png differ diff --git a/public/images/tarot-game/shuffle-deck-sm.png b/public/images/tarot-game/shuffle-deck-sm.png new file mode 100644 index 0000000..73e3621 Binary files /dev/null and b/public/images/tarot-game/shuffle-deck-sm.png differ diff --git a/public/images/tarot-game/shutdown-sm.png b/public/images/tarot-game/shutdown-sm.png new file mode 100644 index 0000000..4b2413f Binary files /dev/null and b/public/images/tarot-game/shutdown-sm.png differ diff --git a/public/images/tarot-game/thanks-oracle-sm.png b/public/images/tarot-game/thanks-oracle-sm.png new file mode 100644 index 0000000..622970c Binary files /dev/null and b/public/images/tarot-game/thanks-oracle-sm.png differ diff --git a/src/components/pages/game/game.tsx b/src/components/pages/game/game.tsx index fe54522..a20973b 100644 --- a/src/components/pages/game/game.tsx +++ b/src/components/pages/game/game.tsx @@ -12,6 +12,7 @@ import { currencies, Currencies } from '@/constants/addresses'; import useStatus from '@/hooks/api/use-status'; import useMakePrediction from '@/hooks/contracts/write/use-make-prediction'; import useSend from '@/hooks/contracts/write/use-send'; +import { useBreakpoint } from '@/hooks/use-breakpoint'; import { cn, showTxToast } from '@/lib/utils'; import { useWalletModalStore } from '@/store/wallet-modal.tsx'; @@ -26,13 +27,21 @@ const TarotRequestSchema = z.object({ }), }); -const DEFAULT_IMAGE = 'images/tarot-game/bord.png'; +const DEFAULT_IMAGE = 'images/tarot-game/board.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 SHUTDOWN = 'images/tarot-game/shutdown.png'; +const DEFAULT_IMAGE_SM = 'images/tarot-game/board-sm.png'; +const SHUFFLE_DECK_SM = 'images/tarot-game/shuffle-deck-sm.png'; +const ORACLE_NEEDS_TIME_SM = 'images/tarot-game/oracle-needs-time-sm.png'; +const THANKS_ORACLE_SM = 'images/tarot-game/thanks-oracle-sm.png'; +const SHUTDOWN_SM = 'images/tarot-game/shutdown-sm.png'; + const LOADING_IMAGES = [SHUFFLE_DECK, ORACLE_NEEDS_TIME] as const; +const LOADING_IMAGES_SM = [SHUFFLE_DECK_SM, ORACLE_NEEDS_TIME_SM] as const; + const CARD_ANIMATIONS = [ 'firstCardAppearance 1s linear forwards', 'secondCardAppearance 2s linear forwards', @@ -44,13 +53,15 @@ type TarotRequestSchemaType = z.infer; export const GameSection = () => { const { publicKey } = useWallet(); + const isMd = useBreakpoint('md'); + const { setIsOpen } = useWalletModalStore(); const { mutateAsync: transfer, isSuccess, isPending, data: predictionAnswer } = useMakePrediction(); const { mutateAsync: transferCurrency, isPending: isSolPending, isSuccess: isTipSuccess } = useSend(); const { data: status } = useStatus(); const [selectedTip, setSelectedTip] = useState(0); - const [currentMainImage, setCurrentMainImage] = useState(DEFAULT_IMAGE); + const [currentMainImage, setCurrentMainImage] = useState(isMd ? DEFAULT_IMAGE : DEFAULT_IMAGE_SM); const [currentPendingImage, setCurrentPendingImage] = useState(0); const [isFadingOut, setIsFadingOut] = useState(false); const [showTip, setShowTip] = useState(false); @@ -69,6 +80,25 @@ export const GameSection = () => { resolver: zodResolver(TarotRequestSchema), }); + // const asd = { + // tarots: [ + // { + // id: 8, + // reverted: false, + // }, + // { + // id: 72, + // reverted: false, + // }, + // { + // id: 40, + // reverted: false, + // }, + // ], + // answer: + // "The cards drawn are Strength, Nine of Pentacles, and Five of Cups, all upright.\n\nStrength signifies inner courage, patience, and control. It suggests that you possess the inner strength to face challenges with grace and resilience.\n\nThe Nine of Pentacles represents self-sufficiency, financial independence, and enjoying the fruits of your labor. It indicates a period of prosperity and comfort, where your hard work is paying off.\n\nThe Five of Cups points to feelings of loss, regret, or focusing on the negative. However, it also serves as a reminder to shift your perspective and recognize the opportunities and support still available to you.\n\nTogether, these cards suggest that while you have the strength and resources to achieve personal success and independence, there may be an emotional hurdle or past disappointment that is holding you back. It's important to acknowledge any feelings of regret or loss, but also to focus on the positive aspects of your life and the potential for growth and fulfillment. Embrace your inner strength and the abundance around you, and allow yourself to move forward with confidence.", + // }; + const onSubmit: SubmitHandler = async (data, e) => { e?.preventDefault(); setQuestion(data.question.trim()); @@ -110,17 +140,17 @@ export const GameSection = () => { useEffect(() => { if (isTipSuccess) { - setCurrentMainImage(THANKS_ORACLE); + setCurrentMainImage(isMd ? THANKS_ORACLE : THANKS_ORACLE_SM); const timer = setTimeout(() => { - setCurrentMainImage(DEFAULT_IMAGE); + setCurrentMainImage(isMd ? DEFAULT_IMAGE : DEFAULT_IMAGE_SM); }, 5000); return () => { clearTimeout(timer); }; } - }, [isTipSuccess]); + }, [isMd, isTipSuccess]); useEffect(() => { let interval: NodeJS.Timeout | null = null; @@ -134,15 +164,15 @@ export const GameSection = () => { setIsFadingOut(false); }, 500); }, 5000); - setCurrentMainImage(LOADING_IMAGES[currentPendingImage]); + setCurrentMainImage(isMd ? LOADING_IMAGES[currentPendingImage] : LOADING_IMAGES_SM[currentPendingImage]); } else { - setCurrentMainImage(DEFAULT_IMAGE); + setCurrentMainImage(isMd ? DEFAULT_IMAGE : DEFAULT_IMAGE_SM); } return () => { if (interval) clearInterval(interval); }; - }, [isPending, currentPendingImage]); + }, [isPending, currentPendingImage, isMd]); useEffect(() => { if (!showTip) { @@ -170,14 +200,18 @@ export const GameSection = () => {
Your Future In One Forecast
-
- {predictionAnswer && currentMainImage === DEFAULT_IMAGE && ( -
+
+ {predictionAnswer && ( +
{predictionAnswer.tarots.map((e, idx) => { return ( card { })}
)} + bord
-
Type your question and ask the cards
+
Type your question and ask the cards