110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
'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;
|
|
}
|
|
|
|
const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => {
|
|
const [formattedNumber, setFormattedNumber] = useState(numberString);
|
|
const slotCounterRef = useRef<SlotCounterRef>(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, ',');
|
|
setFormattedNumber(formatted);
|
|
|
|
// 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 (
|
|
<div className="relative w-fit">
|
|
{mobile ? (
|
|
<Image
|
|
src="/roller-triangle-sm.svg"
|
|
alt="roller-triangle"
|
|
width={24}
|
|
height={24}
|
|
className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2/3 z-20"
|
|
/>
|
|
) : (
|
|
<Image
|
|
src="/roller-triangle.svg"
|
|
alt="roller-triangle"
|
|
width={48}
|
|
height={48}
|
|
className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 z-20"
|
|
/>
|
|
)}
|
|
|
|
{mobile ? (
|
|
<Image
|
|
src="/roller-triangle-sm.svg"
|
|
alt="roller-triangle"
|
|
width={24}
|
|
height={24}
|
|
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2/3 z-20 rotate-180"
|
|
/>
|
|
) : (
|
|
<Image
|
|
src="/roller-triangle.svg"
|
|
alt="roller-triangle"
|
|
width={48}
|
|
height={48}
|
|
className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-20 rotate-180"
|
|
/>
|
|
)}
|
|
|
|
<div
|
|
className="flex items-center h-fit md:max-w-[1132px] sm:max-w-[640px] max-w-[400px] w-full justify-center text-white min-[1025px]: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',
|
|
}}>
|
|
{/* Highlight */}
|
|
<div
|
|
className="absolute top-[50%] -translate-y-1/2 left-0 w-full h-full"
|
|
style={{
|
|
background:
|
|
'linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)',
|
|
}}></div>
|
|
|
|
<div className="z-10">
|
|
<SlotCounter
|
|
ref={slotCounterRef}
|
|
value={formattedNumber}
|
|
startValue={'00,00,00,00,00'}
|
|
charClassName="rolling-number"
|
|
separatorClassName="slot-seperator"
|
|
duration={3}
|
|
speed={6}
|
|
delay={3}
|
|
startFromLastDigit
|
|
animateUnchanged
|
|
autoAnimationStart={false}
|
|
animateOnVisible={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LotterySlotCounter;
|