diff --git a/components/lottery/LotteryWinnersSection.tsx b/components/lottery/LotteryWinnersSection.tsx index 2438dc7..fea9449 100644 --- a/components/lottery/LotteryWinnersSection.tsx +++ b/components/lottery/LotteryWinnersSection.tsx @@ -1,57 +1,72 @@ -import { useState, useEffect } from 'react'; -import { useLotteryAuth } from '@/store/useLotteryAuth'; -import { LotteryWinnerDataSimplified } from '@/typings/lottery/lottery.types'; -import LotteryWinnersList from './winners/LotteryWinnersList'; -import LotterySlotCounter from './slotCounter/LotterySlotCounter'; -import ReactConfetti from 'react-confetti'; -import { useWindowSize } from 'react-use'; -import AnimatedText from '@/components/common/AnimatedText'; -import { useWebsocketLottery } from '@/hooks/useWebSocketLottery'; -import Confetti from '../common/Confetti'; -import { AnimatePresence, motion } from 'framer-motion'; +import { useState, useEffect } from "react"; +import { useLotteryAuth } from "@/store/useLotteryAuth"; +import { LotteryWinnerDataSimplified } from "@/typings/lottery/lottery.types"; +import LotteryWinnersList from "./winners/LotteryWinnersList"; +import LotterySlotCounter from "./slotCounter/LotterySlotCounter"; +import ReactConfetti from "react-confetti"; +import { useWindowSize } from "react-use"; +import AnimatedText from "@/components/common/AnimatedText"; +import { useWebsocketLottery } from "@/hooks/useWebSocketLottery"; +import Confetti from "../common/Confetti"; +import { AnimatePresence, motion } from "framer-motion"; -const WEBSOCKET_URL = 'wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506'; +const WEBSOCKET_URL = "wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506"; const SLOT_COUNTER_DURATION = 30000; -const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => { +const LotteryWinnersSection = ({ + lotteryStatus, +}: { + lotteryStatus: string; +}) => { const [winners, setWinners] = useState([]); const [currentNumber, setCurrentNumber] = useState(); + const [startNumber, setStartNumber] = useState("00-00-00-00-00"); const [isConfettiActive, setIsConfettiActive] = useState(false); const { lotteryData } = useLotteryAuth(); const [winnerSelectingStatus, setWinnerSelectingStatus] = useState< - 'not-selected' | 'is-selecting' | 'selected' - >('not-selected'); - const [pendingWinner, setPendingWinner] = useState(null); - const [topText, setTopText] = useState('Ýeňiji saýlanmady'); - const [bottomText, setBottomText] = useState(''); + "not-selected" | "is-selecting" | "selected" + >("not-selected"); + const [pendingWinner, setPendingWinner] = + useState(null); + const [topText, setTopText] = useState("Ýeňiji saýlanmady"); + const [bottomText, setBottomText] = useState(""); // WebSocket Hook const { wsStatus, subscribeToMessages } = useWebsocketLottery(WEBSOCKET_URL); - useEffect(() => { - if (lotteryData) { - if (lotteryData?.data.winners.length > 0) { - const simplifiedWinners = lotteryData.data.winners.map((winner) => ({ - client: winner.client, - winner_no: winner.winner_no, - ticket: winner.ticket, - })); - setWinners(simplifiedWinners); - setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00'); - setWinnerSelectingStatus('selected'); - setTopText(`${lotteryData.data.winners.at(-1)?.winner_no}-nji(y) ýeňiji`); - setBottomText(lotteryData.data.winners.at(-1)?.client || ''); - setIsConfettiActive(true); - } - } - }, [lotteryData]); + // useEffect(() => { + // if (lotteryData) { + // if (lotteryData?.data.winners.length > 0) { + // const simplifiedWinners = lotteryData.data.winners.map((winner) => ({ + // client: winner.client, + // winner_no: winner.winner_no, + // ticket: winner.ticket, + // })); + // setWinners(simplifiedWinners); + // setCurrentNumber( + // lotteryData.data.winners.at(-1)?.ticket || "00-00-00-00-00" + // ); + // setWinnerSelectingStatus("selected"); + // setTopText( + // `${lotteryData.data.winners.at(-1)?.winner_no}-nji(y) ýeňiji` + // ); + // setBottomText(lotteryData.data.winners.at(-1)?.client || ""); + // setIsConfettiActive(true); + // } + // } + // }, [lotteryData]); useEffect(() => { const unsubscribe = subscribeToMessages((event) => { const newWinner = JSON.parse(event.data); - if (!newWinner || !newWinner.phone || !newWinner.winner_no || !newWinner.ticket) { - console.error('❌ Invalid data format received'); + if ( + !newWinner || + !newWinner.phone || + !newWinner.winner_no || + !newWinner.ticket + ) { + console.error("❌ Invalid data format received"); return; } @@ -63,15 +78,15 @@ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => setIsConfettiActive(false); setTopText(`${winnerData.winner_no}-nji(y) ýeňiji saýlanýar`); - setBottomText('...'); - setWinnerSelectingStatus('is-selecting'); + setBottomText("..."); + setWinnerSelectingStatus("is-selecting"); setPendingWinner(winnerData); setCurrentNumber(winnerData.ticket); setTimeout(() => { setTopText(`${winnerData.winner_no}-nji(y) ýeňiji`); setBottomText(winnerData.client); - setWinnerSelectingStatus('selected'); + setWinnerSelectingStatus("selected"); setIsConfettiActive(true); setWinners((prev) => [...prev, winnerData]); }, SLOT_COUNTER_DURATION); @@ -82,40 +97,60 @@ 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'); + 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); - // }, []); + setTimeout(() => { + setTopText("Ýeniji"); + setBottomText("99361245555"); + setWinnerSelectingStatus("selected"); + setIsConfettiActive(true); + // setWinners((prev) => [...prev, winnerData]); + }, SLOT_COUNTER_DURATION); + }, 10000); + + setTimeout(() => { + setIsConfettiActive(false); + setTopText(`${1}-nji(y) ýeňiji saýlanýar`); + setBottomText("..."); + setWinnerSelectingStatus("is-selecting"); + // setPendingWinner(winnerData); + setCurrentNumber("11-22-33-44-55"); + + setTimeout(() => { + setTopText("Ýeniji"); + setBottomText("99361245555"); + setWinnerSelectingStatus("selected"); + setIsConfettiActive(true); + // setWinners((prev) => [...prev, winnerData]); + }, SLOT_COUNTER_DURATION); + }, SLOT_COUNTER_DURATION + 20000); + }, []); return (
- {wsStatus === 'error' && ( -
Websocket connection error.
+ {wsStatus === "error" && ( +
+ Websocket connection error. +
)} - {' '} + {" "}
+ background: "linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)", + }} + >
- {winnerSelectingStatus === 'not-selected' ? ( + {winnerSelectingStatus === "not-selected" ? ( // transition: { staggerChildren: 1, delayChildren: 0.5 }, }, exit: { - transition: { staggerChildren: 0.05, staggerDirection: -1 }, + transition: { + staggerChildren: 0.05, + staggerDirection: -1, + }, }, }} - className="flex flex-col items-center justify-center"> + className="flex flex-col items-center justify-center" + > {/*
- {currentNumber && } + {currentNumber && ( + + )}
diff --git a/components/lottery/slotCounter/LotterySlotCounter.tsx b/components/lottery/slotCounter/LotterySlotCounter.tsx index 96e916b..95235a4 100644 --- a/components/lottery/slotCounter/LotterySlotCounter.tsx +++ b/components/lottery/slotCounter/LotterySlotCounter.tsx @@ -1,8 +1,8 @@ -'use client'; -import Image from 'next/image'; -import React, { useEffect, useState } from 'react'; -import SlotCounter from 'react-slot-counter'; -import { useMediaQuery } from 'usehooks-ts'; +"use client"; +import Image from "next/image"; +import React, { useEffect, useState } from "react"; +import SlotCounter from "react-slot-counter"; +import { useMediaQuery } from "usehooks-ts"; interface LotterySlotCounterProps { numberString: string; @@ -12,12 +12,13 @@ const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => { const [formattedNumber, setFormattedNumber] = useState(numberString); useEffect(() => { - const formatted = numberString.replace(/-/g, ','); + const formatted = numberString.replace(/-/g, ","); setFormattedNumber(formatted); }, [numberString]); - const tablet = useMediaQuery('(max-width: 769px)'); - const mobile = useMediaQuery('(max-width: 426px)'); + const tablet = useMediaQuery("(max-width: 769px)"); + const mobile = useMediaQuery("(max-width: 426px)"); + console.log(formattedNumber); return (
@@ -61,22 +62,24 @@ const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => { className="flex items-center h-fit md:max-w-[1132px] sm:max-w-[640px] max-w-[400px] w-full justify-center text-white md:py-4 md:px-6 rounded-full overflow-y-hidden overflow-x-visible relative border-4 border-lightPrimary" style={{ background: - 'linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)', - boxShadow: '0px 4px 4px 0px #00000040', - }}> + "linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)", + boxShadow: "0px 4px 4px 0px #00000040", + }} + > {/* Highlight */}
+ "linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)", + }} + >
{ startFromLastDigit animateUnchanged animateOnVisible={false} - autoAnimationStart={false} + // autoAnimationStart={false} />