diff --git a/app/(main)/lottery/page.tsx b/app/(main)/lottery/page.tsx index 4199863..04010d0 100644 --- a/app/(main)/lottery/page.tsx +++ b/app/(main)/lottery/page.tsx @@ -1,25 +1,25 @@ -"use client"; +'use client'; -import { useLotteryAuth } from "@/store/useLotteryAuth"; -import ProtectedRoute from "@/components/lottery/auth/ProtectedRoute"; -import { useLottery } from "@/lib/hooks/useLottery"; -import { LOTTERY_CONFIG } from "@/constants/lottery"; -import LotteryHeader from "@/components/lottery/LotteryHeader"; -import LotteryCounter from "@/components/lottery/RollingCounter/RollingCounter"; +import { useLotteryAuth } from '@/store/useLotteryAuth'; +import ProtectedRoute from '@/components/lottery/auth/ProtectedRoute'; +import { useLottery } from '@/lib/hooks/useLottery'; +import { LOTTERY_CONFIG } from '@/constants/lottery'; +import LotteryHeader from '@/components/lottery/LotteryHeader'; +import LotteryCounter from '@/components/lottery/RollingCounter/RollingCounter'; -import LotteryWinnersSection from "@/components/lottery/LotteryWinnersSection"; -import LotteryRulesSection from "@/components/lottery/rules/LotteryRulesSection"; +import LotteryWinnersSection from '@/components/lottery/LotteryWinnersSection'; +import LotteryRulesSection from '@/components/lottery/rules/LotteryRulesSection'; +import RollingCounter from '@/components/lottery/RollingCounter/RollingCounter'; const LotteryPage = () => { const { lotteryData } = useLotteryAuth(); - const { status, currentNumber } = useLottery( - LOTTERY_CONFIG.START_DATE, - LOTTERY_CONFIG.END_DATE - ); + const { status, currentNumber } = useLottery(LOTTERY_CONFIG.START_DATE, LOTTERY_CONFIG.END_DATE); return (
+ + {lotteryData && ( { - {(status === "ended" || status === "started") && ( - - )} + {(status === 'ended' || status === 'started') && }
); diff --git a/app/layout.tsx b/app/layout.tsx index 2553602..d227da0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -9,6 +9,7 @@ import { Alexandria } from 'next/font/google'; import 'swiper/swiper-bundle.css'; import './globals.css'; import QueryProvider from '@/providers/QueryProvider'; +import { HtmlContext } from 'next/dist/shared/lib/html-context.shared-runtime'; // FONTS const aeroport = localFont({ src: '../fonts/Aeroport.otf', diff --git a/components/lottery/LotteryWinnersSection.tsx b/components/lottery/LotteryWinnersSection.tsx index 1f08572..e174194 100644 --- a/components/lottery/LotteryWinnersSection.tsx +++ b/components/lottery/LotteryWinnersSection.tsx @@ -1,11 +1,11 @@ -"use client"; +'use client'; -import LotteryWinnersList from "./winners/LotteryWinnersList"; -import SpinWheel from "./spinWheel/SpinWheel"; -import { useState, useEffect } from "react"; -import RollingCounterWorking from "./RollingCounter/RollingCounterWorking"; -import { useLotteryAuth } from "@/store/useLotteryAuth"; -import { LotteryWinnerData } from "@/typings/lottery/lottery.types"; +import LotteryWinnersList from './winners/LotteryWinnersList'; +import SpinWheel from './spinWheel/SpinWheel'; +import { useState, useEffect } from 'react'; +import { useLotteryAuth } from '@/store/useLotteryAuth'; +import { LotteryWinnerData } from '@/typings/lottery/lottery.types'; +import RollingCounter from './RollingCounter/RollingCounter'; const LotteryWinnersSection = () => { const [winners, setWinners] = useState([]); @@ -17,13 +17,13 @@ const LotteryWinnersSection = () => { setWinners(lotteryData.data.winners); } - const wsUrl = "https://sms.turkmentv.gov.tm/api/ws/lottery"; + const wsUrl = 'https://sms.turkmentv.gov.tm/api/ws/lottery'; const ws = new WebSocket(wsUrl); ws.onmessage = (event) => { - console.log("WebSocket message received:", event.data); + console.log('WebSocket message received:', event.data); const newWinner = JSON.parse(event.data); - console.log("Parsed WebSocket data:", newWinner); + console.log('Parsed WebSocket data:', newWinner); setWinners((prev) => [...prev, newWinner]); }; @@ -45,8 +45,6 @@ const LotteryWinnersSection = () => { {/* */} - - diff --git a/components/lottery/RollingCounter/RollingCounter.tsx b/components/lottery/RollingCounter/RollingCounter.tsx index afab738..e775e5c 100644 --- a/components/lottery/RollingCounter/RollingCounter.tsx +++ b/components/lottery/RollingCounter/RollingCounter.tsx @@ -1,72 +1,36 @@ 'use client'; import { motion } from 'framer-motion'; -import { useCallback, useMemo, useState, useEffect } from 'react'; +import { useCallback, useMemo, useState } from 'react'; interface RollingCounterProps { numberString: string; } +// Move constants outside component const ROLLS = 2; const DIGIT_HEIGHT = 104; const INITIAL_OFFSET = 38; const EXTRA_NUMBERS_AFTER = 5; -const EXTRA_NUMBERS_BEFORE = 2; -const getNumbers = (targetValue: number, previousValue?: number) => { +// Memoize number generation function +const getNumbers = (targetValue: number) => { const numbers = []; - if (previousValue === undefined) { - // Initial load - for (let i = 0; i < ROLLS; i++) { - for (let n = 0; n < 10; n++) { - numbers.push(n); - } + // Add complete rolls + for (let i = 0; i < ROLLS; i++) { + for (let n = 0; n < 10; n++) { + numbers.push(n); } + } - // Add sequence before target - for (let n = EXTRA_NUMBERS_BEFORE; n > 0; n--) { - numbers.push((targetValue - n + 10) % 10); - } + // Add sequence to target + for (let n = 0; n <= targetValue; n++) { + numbers.push(n); + } - numbers.push(targetValue); - - // Add extra numbers after target - for (let n = 1; n <= EXTRA_NUMBERS_AFTER; n++) { - numbers.push((targetValue + n) % 10); - } - } else { - // Keep the previous sequence - for (let i = 0; i < ROLLS; i++) { - for (let n = 0; n < 10; n++) { - numbers.push(n); - } - } - - // Add sequence before previous value - for (let n = EXTRA_NUMBERS_BEFORE; n > 0; n--) { - numbers.push((previousValue - n + 10) % 10); - } - - numbers.push(previousValue); - - // Add complete rolls between previous and target - for (let i = 0; i < ROLLS; i++) { - for (let n = 0; n < 10; n++) { - numbers.push(n); - } - } - - // Add sequence before target - for (let n = EXTRA_NUMBERS_BEFORE; n > 0; n--) { - numbers.push((targetValue - n + 10) % 10); - } - - numbers.push(targetValue); - - // Add extra numbers after target - for (let n = 1; n <= EXTRA_NUMBERS_AFTER; n++) { - numbers.push((targetValue + n) % 10); - } + // Add extra numbers after target + for (let n = (targetValue + 1) % 10; n < ((targetValue + 1) % 10) + EXTRA_NUMBERS_AFTER; n++) { + numbers.push(n % 10); } return numbers; @@ -78,27 +42,22 @@ const RollingDigit = ({ onAnimationComplete, isStopped, showHyphen, - previousValue, }: { targetValue: number; index: number; onAnimationComplete: () => void; isStopped: boolean; showHyphen: boolean; - previousValue?: number; }) => { - const numbers = useMemo( - () => getNumbers(targetValue, previousValue), - [targetValue, previousValue], - ); + const numbers = useMemo(() => getNumbers(targetValue), [targetValue]); return (
= ({ numberString }) => { - const [isInitialLoading, setIsInitialLoading] = useState(true); const [isStopped, setIsStopped] = useState([]); - const [previousNumbers, setPreviousNumbers] = useState([]); - const [isNewNumber, setIsNewNumber] = useState(false); - useEffect(() => { - if (!isInitialLoading) { - setPreviousNumbers(numbers); - setIsStopped(new Array(numberString.replace(/-/g, '').length).fill(false)); - setIsNewNumber(true); + const { numbers, isInitialLoading } = useMemo(() => { + if (!numberString) { + return { numbers: [], isInitialLoading: true }; } - }, [numberString, isInitialLoading]); - - const numbers = useMemo(() => { - if (!numberString) return []; const parsed = numberString .replace(/-/g, '') .split('') .map((char) => parseInt(char, 10)); - if (isInitialLoading) { - setIsStopped(new Array(parsed.length).fill(false)); - setIsInitialLoading(false); - } + setIsStopped(new Array(parsed.length).fill(false)); - return parsed; - }, [numberString, isInitialLoading]); + return { + numbers: parsed, + isInitialLoading: false, + }; + }, [numberString]); const handleAnimationComplete = useCallback((index: number) => { setIsStopped((prev) => { @@ -175,7 +125,6 @@ const RollingCounter: React.FC = ({ numberString }) => { handleAnimationComplete(index)} isStopped={isStopped[index]} diff --git a/components/lottery/RollingCounter/RollingCounterWorking.tsx b/components/lottery/RollingCounter/RollingCounterWorking.tsx deleted file mode 100644 index 4f0bf74..0000000 --- a/components/lottery/RollingCounter/RollingCounterWorking.tsx +++ /dev/null @@ -1,143 +0,0 @@ -'use client'; -import { motion } from 'framer-motion'; -import { useCallback, useMemo, useState } from 'react'; - -interface RollingCounterWorkingProps { - numberString: string; -} - -// Move constants outside component -const ROLLS = 5; -const DIGIT_HEIGHT = 104; -const INITIAL_OFFSET = 38; -const EXTRA_NUMBERS_AFTER = 5; -const EXTRA_NUMBERS_BEFORE = 2; - -// Memoize number generation function -const getNumbers = (targetValue: number) => { - const numbers = []; - - // Add complete rolls - for (let i = 0; i < ROLLS; i++) { - for (let n = 0; n < 10; n++) { - numbers.push(n); - } - } - - // Add sequence before target - for (let n = EXTRA_NUMBERS_BEFORE; n > 0; n--) { - numbers.push((targetValue - n + 10) % 10); - } - - // Add target - numbers.push(targetValue); - - // Add extra numbers after target - for (let n = 1; n <= EXTRA_NUMBERS_AFTER; n++) { - numbers.push((targetValue + n) % 10); - } - - return numbers; -}; - -const RollingDigit = ({ - targetValue, - index, - onAnimationComplete, - isStopped, - showHyphen, -}: { - targetValue: number; - index: number; - onAnimationComplete: () => void; - isStopped: boolean; - showHyphen: boolean; -}) => { - const numbers = useMemo(() => getNumbers(targetValue), [targetValue]); - - const targetIndex = ROLLS * 10 + EXTRA_NUMBERS_BEFORE; - - return ( -
-
- - {numbers.map((num, i) => ( -
- {num} -
- ))} - -
- {showHyphen &&
} -
- ); -}; - -const RollingCounterWorking: React.FC = ({ numberString }) => { - const [isInitialLoading, setIsInitialLoading] = useState(true); - const [isStopped, setIsStopped] = useState([]); - - const numbers = useMemo(() => { - if (!numberString) return []; - - const parsed = numberString - .replace(/-/g, '') - .split('') - .map((char) => parseInt(char, 10)); - - if (isInitialLoading) { - setIsStopped(new Array(parsed.length).fill(false)); - setIsInitialLoading(false); - } - - return parsed; - }, [numberString, isInitialLoading]); - - const handleAnimationComplete = useCallback((index: number) => { - setIsStopped((prev) => { - const newState = [...prev]; - newState[index] = true; - return newState; - }); - }, []); - - if (isInitialLoading) { - return ( -
- Loading... -
- ); - } - - return ( -
- {numbers.map((num, index) => ( - handleAnimationComplete(index)} - isStopped={isStopped[index]} - showHyphen={(index + 1) % 2 === 0 && index !== numbers.length - 1} - /> - ))} -
- ); -}; - -export default RollingCounterWorking;