From 0c9b9224f65cec767a830f13bebeda6313387466 Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Wed, 8 Jan 2025 18:34:51 +0500 Subject: [PATCH] labels added lottery auth form and other fixes --- app/(main)/lottery/page.tsx | 1 + components/common/TextMaskReveal.tsx | 60 +++++++++++++++++++ components/lottery/LotteryHeader.tsx | 5 +- components/lottery/LotteryWinnersSection.tsx | 39 ++++++++---- .../slotCounter/LotterySlotCounter.tsx | 7 +-- tailwind.config.js | 1 + 6 files changed, 96 insertions(+), 17 deletions(-) create mode 100644 components/common/TextMaskReveal.tsx diff --git a/app/(main)/lottery/page.tsx b/app/(main)/lottery/page.tsx index d211694..925e788 100644 --- a/app/(main)/lottery/page.tsx +++ b/app/(main)/lottery/page.tsx @@ -25,6 +25,7 @@ const LotteryPage = () => { description={lotteryData.data.description} image={lotteryData.data.image} smsCode={lotteryData.data.sms_code} + startDate={lotteryData.data.start_time} /> {status === 'not-started' ? ( diff --git a/components/common/TextMaskReveal.tsx b/components/common/TextMaskReveal.tsx new file mode 100644 index 0000000..acbda84 --- /dev/null +++ b/components/common/TextMaskReveal.tsx @@ -0,0 +1,60 @@ +import { useEffect, useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; + +interface TextMaskRevealProps { + text: string; + className?: string; + duration?: number; // Duration in seconds for each character + startDelay?: number; // Delay before animation starts +} + +const TextMaskReveal = ({ + text, + className = '', + duration = 0.1, + startDelay = 0, +}: TextMaskRevealProps) => { + const [characters, setCharacters] = useState([]); + + useEffect(() => { + setCharacters(text.split('')); + }, [text]); + + return ( +
+ + {characters.map((char, index) => ( + + + {char === ' ' ? '\u00A0' : char} + + + ))} + +
+ ); +}; + +export default TextMaskReveal; diff --git a/components/lottery/LotteryHeader.tsx b/components/lottery/LotteryHeader.tsx index 5dc9eac..02c1d58 100644 --- a/components/lottery/LotteryHeader.tsx +++ b/components/lottery/LotteryHeader.tsx @@ -1,13 +1,15 @@ import Image from 'next/image'; +import InfoDateAllert from '../common/InfoDateAllert'; interface LotteryHeaderProps { title: string; description: string; image: string; smsCode: string; + startDate: string; } -const LotteryHeader = ({ title, description, image, smsCode }: LotteryHeaderProps) => { +const LotteryHeader = ({ title, description, image, smsCode, startDate }: LotteryHeaderProps) => { return (
@@ -16,6 +18,7 @@ const LotteryHeader = ({ title, description, image, smsCode }: LotteryHeaderProp {title}

{description}

+
{image && (
diff --git a/components/lottery/LotteryWinnersSection.tsx b/components/lottery/LotteryWinnersSection.tsx index abb660e..1fc9ea7 100644 --- a/components/lottery/LotteryWinnersSection.tsx +++ b/components/lottery/LotteryWinnersSection.tsx @@ -17,7 +17,6 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => const [currentNumber, setCurrentNumber] = useState(); const [isConfettiActive, setIsConfettiActive] = useState(false); - const { width, height } = useWindowSize(); const { lotteryData } = useLotteryAuth(); const [winnerSelectingStatus, setWinnerSelectingStatus] = useState< 'not-selected' | 'is-selecting' | 'selected' @@ -29,8 +28,6 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => // WebSocket Hook const { wsStatus, subscribeToMessages } = useWebsocketLottery(WEBSOCKET_URL); - console.log(winners); - useEffect(() => { if (lotteryData) { if (lotteryData?.data.winners.length > 0) { @@ -42,8 +39,9 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => setWinners(simplifiedWinners); setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00'); setWinnerSelectingStatus('selected'); - setTopText('Ýeniji'); + setTopText('Ýeňiji'); setBottomText(lotteryData.data.winners.at(-1)?.client || ''); + setIsConfettiActive(true); } } }, [lotteryData]); @@ -62,6 +60,9 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => ticket: newWinner.ticket, }; + setTimeout(() => { + setIsConfettiActive(false); + }, 1000); setTopText(`${winnerData.winner_no}-nji(y) ýeňiji saýlanýar`); setBottomText('...'); setWinnerSelectingStatus('is-selecting'); @@ -74,10 +75,6 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => setWinnerSelectingStatus('selected'); setIsConfettiActive(true); setWinners((prev) => [...prev, winnerData]); - setTimeout(() => { - setIsConfettiActive(false); - // setPendingWinner(null); - }, 5000); }, SLOT_COUNTER_DURATION + 500); }); @@ -91,7 +88,7 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => {wsStatus === 'error' && (
Websocket connection error.
)} - {isConfettiActive && } + {' '}
}}>
{winnerSelectingStatus === 'not-selected' ? ( + // ) : (
+ {/* */} {bottomText && ( + // )}
)}
- {currentNumber && ( - - )} + {currentNumber && }
diff --git a/components/lottery/slotCounter/LotterySlotCounter.tsx b/components/lottery/slotCounter/LotterySlotCounter.tsx index 54e032a..1fecf10 100644 --- a/components/lottery/slotCounter/LotterySlotCounter.tsx +++ b/components/lottery/slotCounter/LotterySlotCounter.tsx @@ -6,10 +6,9 @@ import { useMediaQuery } from 'usehooks-ts'; interface LotterySlotCounterProps { numberString: string; - isAnimating: boolean; } -const LotterySlotCounter = ({ numberString, isAnimating }: LotterySlotCounterProps) => { +const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => { const [formattedNumber, setFormattedNumber] = useState(numberString); useEffect(() => { @@ -80,9 +79,9 @@ const LotterySlotCounter = ({ numberString, isAnimating }: LotterySlotCounterPro startValueOnce charClassName="rolling-number" separatorClassName="slot-seperator" - duration={10} + duration={3} speed={6} - delay={10} + delay={3} startFromLastDigit animateUnchanged animateOnVisible={false} diff --git a/tailwind.config.js b/tailwind.config.js index 859b7da..74e8a29 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -85,6 +85,7 @@ export const theme = { lightPrimaryOutline: '#D8D6FF', // Allert lightInfoAllertContainer: '#E3F2FD', + lightInfoAllertContainerOutline: '#D4EBFC', lightOnInfoAllertContainer: '#1E3A5F', lightOnWarningAllertContainer: '#F57C00', lightWarningAllertContainer: '#FFF8E1',