From 668feb6c79e351d3e0128e763cbdf11613611709 Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Thu, 16 Jan 2025 17:59:03 +0500 Subject: [PATCH] fix --- app/globals.css | 12 +- components/lottery/LotteryWinnersSection.tsx | 130 ++++++++---------- .../slotCounter/LotterySlotCounter.tsx | 52 ++++--- components/lottery/winners/LotteryWinner.tsx | 2 +- .../lottery/winners/LotteryWinnersList.tsx | 5 +- tailwind.config.js | 3 + 6 files changed, 97 insertions(+), 107 deletions(-) diff --git a/app/globals.css b/app/globals.css index 888ff39..2893054 100644 --- a/app/globals.css +++ b/app/globals.css @@ -312,16 +312,16 @@ big { } } -@media (max-width: 1024px) { +@media (max-width: 1025px) { + .rolling-number { + @apply text-[48px] px-2; + } .slot-seperator { content: url('/dash-md.svg'); @apply mx-2; } -} - -@media (max-width: 1025px) { - .rolling-number { - @apply text-[48px] px-2; + .lottery-winner-list { + grid-template-columns: 2; } } diff --git a/components/lottery/LotteryWinnersSection.tsx b/components/lottery/LotteryWinnersSection.tsx index e6aada5..d9def69 100644 --- a/components/lottery/LotteryWinnersSection.tsx +++ b/components/lottery/LotteryWinnersSection.tsx @@ -1,36 +1,31 @@ -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 [currentNumber, setCurrentNumber] = useState('00-00-00-00-00'); + 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('Bije az wagtdan başlaýar'); + const [bottomText, setBottomText] = useState(''); // WebSocket Hook const { wsStatus, subscribeToMessages } = useWebsocketLottery(WEBSOCKET_URL); @@ -44,14 +39,10 @@ const LotteryWinnersSection = ({ 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 || ""); + // setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00'); + setWinnerSelectingStatus('selected'); + setTopText(`${lotteryData.data.winners.at(-1)?.winner_no}-nji ýeňiji`); + setBottomText(lotteryData.data.winners.at(-1)?.client || ''); setIsConfettiActive(true); } } @@ -60,13 +51,8 @@ const LotteryWinnersSection = ({ 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; } @@ -77,16 +63,16 @@ const LotteryWinnersSection = ({ }; setIsConfettiActive(false); - setTopText(`${winnerData.winner_no}-nji(y) ýeňiji saýlanýar`); - setBottomText("..."); - setWinnerSelectingStatus("is-selecting"); + setTopText(`${winnerData.winner_no}-nji ýeňiji saýlanýar`); + setBottomText('...'); + setWinnerSelectingStatus('is-selecting'); setPendingWinner(winnerData); setCurrentNumber(winnerData.ticket); setTimeout(() => { - setTopText(`${winnerData.winner_no}-nji(y) ýeňiji`); + setTopText(`${winnerData.winner_no}-nji ýeňiji`); setBottomText(winnerData.client); - setWinnerSelectingStatus("selected"); + setWinnerSelectingStatus('selected'); setIsConfettiActive(true); setWinners((prev) => [...prev, winnerData]); }, SLOT_COUNTER_DURATION); @@ -100,16 +86,16 @@ const LotteryWinnersSection = ({ // useEffect(() => { // setTimeout(() => { // setIsConfettiActive(false); - // setTopText(`${1}-nji(y) ýeňiji saýlanýar`); - // setBottomText("..."); - // setWinnerSelectingStatus("is-selecting"); + // setTopText(`${1}-nji ýeňiji saýlanýar`); + // setBottomText('...'); + // setWinnerSelectingStatus('is-selecting'); // // setPendingWinner(winnerData); - // setCurrentNumber("55-44-33-22-11"); + // setCurrentNumber('55-44-33-22-11'); // setTimeout(() => { - // setTopText("Ýeniji"); - // setBottomText("99361245555"); - // setWinnerSelectingStatus("selected"); + // setTopText('Ýeniji'); + // setBottomText('99361245555'); + // setWinnerSelectingStatus('selected'); // setIsConfettiActive(true); // // setWinners((prev) => [...prev, winnerData]); // }, SLOT_COUNTER_DURATION); @@ -117,16 +103,16 @@ const LotteryWinnersSection = ({ // setTimeout(() => { // setIsConfettiActive(false); - // setTopText(`${1}-nji(y) ýeňiji saýlanýar`); - // setBottomText("..."); - // setWinnerSelectingStatus("is-selecting"); + // setTopText(`${1}-nji ýeňiji saýlanýar`); + // setBottomText('...'); + // setWinnerSelectingStatus('is-selecting'); // // setPendingWinner(winnerData); - // setCurrentNumber("11-22-33-44-55"); + // setCurrentNumber('11-22-33-44-55'); // setTimeout(() => { - // setTopText("Ýeniji"); - // setBottomText("99361245555"); - // setWinnerSelectingStatus("selected"); + // setTopText('Ýeniji'); + // setBottomText('99361245555'); + // setWinnerSelectingStatus('selected'); // setIsConfettiActive(true); // // setWinners((prev) => [...prev, winnerData]); // }, SLOT_COUNTER_DURATION); @@ -135,22 +121,19 @@ const LotteryWinnersSection = ({ 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' ? ( // ) : ( @@ -175,8 +158,7 @@ const LotteryWinnersSection = ({ }, }, }} - className="flex flex-col items-center justify-center" - > + className="flex flex-col items-center justify-center"> {/*
- {currentNumber && ( - - )} + {currentNumber && }
- + {winners.length > 0 && }
diff --git a/components/lottery/slotCounter/LotterySlotCounter.tsx b/components/lottery/slotCounter/LotterySlotCounter.tsx index 95235a4..f87186a 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, useRef, useState } from 'react'; +import SlotCounter, { SlotCounterRef } from 'react-slot-counter'; +import { useMediaQuery } from 'usehooks-ts'; interface LotterySlotCounterProps { numberString: string; @@ -10,15 +10,27 @@ interface LotterySlotCounterProps { const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => { const [formattedNumber, setFormattedNumber] = useState(numberString); + const slotCounterRef = useRef(null); // Ref for manual control + const isFirstRender = useRef(true); // Ref to track the initial render + + const tablet = useMediaQuery('(max-width: 769px)'); + const mobile = useMediaQuery('(max-width: 426px)'); 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)"); - console.log(formattedNumber); + // Skip animation on the first render + if (isFirstRender.current) { + isFirstRender.current = false; // Mark as no longer the first render + return; + } + + // Trigger animation manually when numberString changes + if (slotCounterRef.current) { + slotCounterRef.current.startAnimation(); + } + }, [numberString]); return (
@@ -59,27 +71,25 @@ const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => { )}
+ '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%)', + }}>
{ delay={3} startFromLastDigit animateUnchanged + autoAnimationStart={false} animateOnVisible={false} - // autoAnimationStart={false} />
diff --git a/components/lottery/winners/LotteryWinner.tsx b/components/lottery/winners/LotteryWinner.tsx index 8da13ef..fdfc88c 100644 --- a/components/lottery/winners/LotteryWinner.tsx +++ b/components/lottery/winners/LotteryWinner.tsx @@ -21,7 +21,7 @@ const LotteryWinner = ({ phone, ticket, isNew, winnerNumber }: IProps) => {

{/* The winner of the {winnerNumber} stage: */} {winnerNumber} - {' - nji(y) ýeňiji'} + {' - nji ýeňiji'}

{phone}

diff --git a/components/lottery/winners/LotteryWinnersList.tsx b/components/lottery/winners/LotteryWinnersList.tsx index ea0c57f..44579c6 100644 --- a/components/lottery/winners/LotteryWinnersList.tsx +++ b/components/lottery/winners/LotteryWinnersList.tsx @@ -8,13 +8,10 @@ const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerDataSimplified[

Ýeňijiler

-

- The results after each stage will be shown here. -

+ className="grid min-[1025px]:grid-cols-3 min-[700px]:grid-cols-2 grid-cols-1 gap-x-2 gap-y-4 w-full lottery-winner-list"> {winners.map((item, index) => (