From 687a7f0f8140283945a61e1da54e10a23780c36b Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Thu, 9 Jan 2025 19:53:20 +0500 Subject: [PATCH] last work on lottery/ --- app/globals.css | 5 + components/common/AnimatedText.tsx | 55 +++++---- components/common/Confetti.tsx | 5 +- components/lottery/LotteryWinnersSection.tsx | 115 +++++++++++------- .../slotCounter/LotterySlotCounter.tsx | 6 +- 5 files changed, 117 insertions(+), 69 deletions(-) diff --git a/app/globals.css b/app/globals.css index bb40758..888ff39 100644 --- a/app/globals.css +++ b/app/globals.css @@ -329,6 +329,11 @@ big { .rolling-number { @apply text-[24px] px-1; } + + .slot-seperator { + content: url('/dash-md.svg'); + @apply !mx-1; + } } @media (max-width: 320px) { diff --git a/components/common/AnimatedText.tsx b/components/common/AnimatedText.tsx index 909bb0a..db78c36 100644 --- a/components/common/AnimatedText.tsx +++ b/components/common/AnimatedText.tsx @@ -1,5 +1,5 @@ import { cn } from '@/lib/utils'; -import { motion } from 'framer-motion'; +import { AnimatePresence, motion } from 'framer-motion'; interface AnimatedTextProps { text: string; @@ -23,31 +23,38 @@ const AnimatedText = ({ const characters = text.split(''); return ( -
+ - {characters.map((character, i) => ( - - {character} - - ))} + className={cn(`flex`, className)} + variants={{ + enter: { + transition: { staggerChildren: 1, delayChildren: 0.5 }, + }, + exit: { + transition: { staggerChildren: 0.05, staggerDirection: -1 }, + }, + }}> + + {characters.map((character, i) => ( + + {character === ' ' ? '\u00A0' : character} + + ))} + -
+ ); }; diff --git a/components/common/Confetti.tsx b/components/common/Confetti.tsx index c128f10..b056de8 100644 --- a/components/common/Confetti.tsx +++ b/components/common/Confetti.tsx @@ -3,6 +3,7 @@ import { useState, useEffect } from 'react'; import ReactConfetti from 'react-confetti'; import { useWindowSize } from 'react-use'; +import { useMediaQuery } from 'usehooks-ts'; const Confetti = ({ numberOfPieces = 200, @@ -21,13 +22,15 @@ const Confetti = ({ '#FF3131', ]; + const mobile = useMediaQuery('(max-width: 426px)'); + return (
{ const [winners, setWinners] = useState([]); @@ -39,7 +40,7 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => setWinners(simplifiedWinners); setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00'); setWinnerSelectingStatus('selected'); - setTopText('Ýeňiji'); + setTopText(`${lotteryData.data.winners.at(-1)?.winner_no}-nji(y) ýeňiji`); setBottomText(lotteryData.data.winners.at(-1)?.client || ''); setIsConfettiActive(true); } @@ -60,9 +61,7 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => ticket: newWinner.ticket, }; - setTimeout(() => { - setIsConfettiActive(false); - }, 1000); + setIsConfettiActive(false); setTopText(`${winnerData.winner_no}-nji(y) ýeňiji saýlanýar`); setBottomText('...'); setWinnerSelectingStatus('is-selecting'); @@ -70,12 +69,12 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => setCurrentNumber(winnerData.ticket); setTimeout(() => { - setTopText('Ýeniji'); + setTopText(`${winnerData.winner_no}-nji(y) ýeňiji`); setBottomText(winnerData.client); setWinnerSelectingStatus('selected'); setIsConfettiActive(true); setWinners((prev) => [...prev, winnerData]); - }, SLOT_COUNTER_DURATION + 500); + }, SLOT_COUNTER_DURATION); }); return () => { @@ -83,6 +82,25 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => }; }, [subscribeToMessages]); + // useEffect(() => { + // setTimeout(() => { + // setIsConfettiActive(false); + // setTopText(`${1}-nji(y) ýeňiji saýlanýar`); + // setBottomText('...'); + // setWinnerSelectingStatus('is-selecting'); + // // setPendingWinner(winnerData); + // setCurrentNumber('55-44-33-22-11'); + + // setTimeout(() => { + // setTopText('Ýeniji'); + // setBottomText('99361245555'); + // setWinnerSelectingStatus('selected'); + // setIsConfettiActive(true); + // // setWinners((prev) => [...prev, winnerData]); + // }, SLOT_COUNTER_DURATION); + // }, 10000); + // }, []); + return (
{wsStatus === 'error' && ( @@ -95,47 +113,62 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => style={{ background: 'linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)', }}> -
- {winnerSelectingStatus === 'not-selected' ? ( - // - - ) : ( -
- {/* +
+ {winnerSelectingStatus === 'not-selected' ? ( + // + + ) : ( + + {/* */} - - {bottomText && ( - // - )} -
- )} -
+ {bottomText && ( + // + + )} + + )} +
+ +
{currentNumber && }
diff --git a/components/lottery/slotCounter/LotterySlotCounter.tsx b/components/lottery/slotCounter/LotterySlotCounter.tsx index 1fecf10..96e916b 100644 --- a/components/lottery/slotCounter/LotterySlotCounter.tsx +++ b/components/lottery/slotCounter/LotterySlotCounter.tsx @@ -27,7 +27,7 @@ const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => { alt="roller-triangle" width={24} height={24} - className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 z-20" + className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2/3 z-20" /> ) : ( { alt="roller-triangle" width={24} height={24} - className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-20 rotate-180" + className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2/3 z-20 rotate-180" /> ) : ( { )}