Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rollingCounter fix

This commit is contained in:
Kakabay 2024-12-24 17:19:08 +05:00
parent 16cc50a958
commit ae71097b11
5 changed files with 53 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/(main)/lottery/page.tsx
View File

@ -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 (
<ProtectedRoute>
<div className="flex flex-col md:gap-[128px] gap-[80px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
<RollingCounter numberString={'00-00-00-00-00'} />
{lotteryData && (
<LotteryHeader
title={lotteryData.data.title}
@ -31,9 +31,7 @@ const LotteryPage = () => {
<LotteryRulesSection />
{(status === "ended" || status === "started") && (
<LotteryWinnersSection />
)}
{(status === 'ended' || status === 'started') && <LotteryWinnersSection />}
</div>
</ProtectedRoute>
);

1
app/layout.tsx
View File

@ -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',

22
components/lottery/LotteryWinnersSection.tsx
View File

@ -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<LotteryWinnerData[]>([]);
@ -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 = () => {
{/* <SpinWheel setWinners={setWinners} /> */}
</div>
</div>
<RollingCounterWorking numberString={"81-34-52-35-61"} />
</div>
</div>
</section>

107
components/lottery/RollingCounter/RollingCounter.tsx
View File

@ -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 (
<div className="flex items-center">
<div className="overflow-hidden h-[180px] w-[77px] relative">
<motion.div
initial={false} // Don't reset to initial state
initial={{ y: INITIAL_OFFSET }}
animate={{
y: -(numbers.length - EXTRA_NUMBERS_AFTER - 1) * DIGIT_HEIGHT + INITIAL_OFFSET,
y: -((ROLLS * 10 + targetValue + 1) * DIGIT_HEIGHT) + INITIAL_OFFSET + DIGIT_HEIGHT,
}}
transition={{
duration: 2,
@ -124,34 +83,25 @@ const RollingDigit = ({
};
const RollingCounter: React.FC<RollingCounterProps> = ({ numberString }) => {
const [isInitialLoading, setIsInitialLoading] = useState(true);
const [isStopped, setIsStopped] = useState<boolean[]>([]);
const [previousNumbers, setPreviousNumbers] = useState<number[]>([]);
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<RollingCounterProps> = ({ numberString }) => {
<RollingDigit
key={`${index}-${num}`}
targetValue={num}
previousValue={previousNumbers[index]}
index={index}
onAnimationComplete={() => handleAnimationComplete(index)}
isStopped={isStopped[index]}

143
components/lottery/RollingCounter/RollingCounterWorking.tsx
View File

@ -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 (
<div className="flex items-center">
<div className="overflow-hidden h-[180px] w-[77px] relative">
<motion.div
initial={{ y: INITIAL_OFFSET }}
animate={{
y: -(targetIndex * DIGIT_HEIGHT) + INITIAL_OFFSET,
}}
transition={{
duration: 5,
delay: index * 4,
ease: 'easeInOut',
}}
onAnimationComplete={onAnimationComplete}
className="absolute flex flex-col">
{numbers.map((num, i) => (
<div
key={`${index}-${i}`}
className={`h-[${DIGIT_HEIGHT}px] w-[77px] flex items-center justify-center numeric-display-1 transition-colors duration-500 ${
isStopped && num === targetValue ? 'text-white' : 'text-[#B0B1CD]'
}`}>
{num}
</div>
))}
</motion.div>
</div>
{showHyphen && <div className="w-[32px] h-[4px] bg-lightOnPrimary mx-5 self-center" />}
</div>
);
};
const RollingCounterWorking: React.FC<RollingCounterWorkingProps> = ({ numberString }) => {
const [isInitialLoading, setIsInitialLoading] = useState(true);
const [isStopped, setIsStopped] = useState<boolean[]>([]);
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 (
<div className="flex items-center justify-center bg-lightPrimary text-white py-4 px-6 rounded-full">
Loading...
</div>
);
}
return (
<div className="flex items-center justify-center bg-lightPrimary text-white py-4 px-6 rounded-full">
{numbers.map((num, index) => (
<RollingDigit
key={`${index}-${num}`}
targetValue={num}
index={index}
onAnimationComplete={() => handleAnimationComplete(index)}
isStopped={isStopped[index]}
showHyphen={(index + 1) % 2 === 0 && index !== numbers.length - 1}
/>
))}
</div>
);
};
export default RollingCounterWorking;