lottery roller and socket ready

app/(main)/lottery/page.tsx

@@ -9,17 +9,17 @@ import LotteryCounter from '@/components/lottery/RollingCounter/RollingCounter';
 
 import LotteryWinnersSection from '@/components/lottery/LotteryWinnersSection';
 import LotteryRulesSection from '@/components/lottery/rules/LotteryRulesSection';
-import RollingCounter from '@/components/lottery/RollingCounter/RollingCounter';
+import LotteryCountDown from '@/components/lottery/countDown/LotteryCountDown';
+import { useState } from 'react';
+import LotteryCountDownAllert from '@/components/lottery/countDown/countDownAllert/LotteryCountDownAllert';
 
 const LotteryPage = () => {
   const { lotteryData } = useLotteryAuth();
-  const { status, currentNumber } = useLottery(LOTTERY_CONFIG.START_DATE, LOTTERY_CONFIG.END_DATE);
+  const [status, setStatus] = useState<'not-started' | 'started' | 'ended'>('not-started');
 
   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}
@@ -29,6 +29,28 @@ const LotteryPage = () => {
           />
         )}
 
+        {lotteryData ? (
+          status === 'not-started' ? (
+            <div className="container">
+              <LotteryCountDown
+                lotteryStatus={status}
+                setLotteryStatus={setStatus}
+                endDate={lotteryData?.data.end_time}
+                startDate={lotteryData?.data.start_time}
+              />
+            </div>
+          ) : (
+            <div className="container">
+              <LotteryCountDownAllert
+                lotteryStatus={status}
+                setLotteryStatus={setStatus}
+                endDate={lotteryData?.data.end_time}
+                startDate={lotteryData?.data.start_time}
+              />
+            </div>
+          )
+        ) : null}
+
         <LotteryRulesSection />
 
         {(status === 'ended' || status === 'started') && <LotteryWinnersSection />}

app/globals.css

@@ -232,6 +232,10 @@ big {
   @apply font-medium -tracking-[1%] text-[24px] leading-[32px];
 }
 
+.font-heading-6-regular {
+  @apply -tracking-[1%] text-[20px] leading-[28px];
+}
+
 .font-base-regular {
   @apply font-normal -tracking-[1%] text-[16px] leading-[24px];
 }
@@ -263,6 +267,31 @@ big {
   background-repeat: no-repeat;
 }
 
+.rolling-number {
+  font-size: 80px;
+  letter-spacing: -1%;
+  padding: 0px 16px;
+
+  @apply text-lightOnPrimary;
+}
+
+.index-module_slot__DpPgW {
+  overflow: visible !important;
+  /* height: auto !important; */
+}
+
+/* .index-module_num__j6XH3 {
+  height: fit-content !important;
+} */
+
+.slot-seperator {
+  content: url('/dash.svg');
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin: 0 20px;
+}
+
 .confetti-piece {
   position: absolute;
   /* border-radius: 50%; */

components/lottery/LotteryHeader.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import Image from 'next/image';
 
 interface LotteryHeaderProps {
   title: string;
@@ -7,12 +7,7 @@ interface LotteryHeaderProps {
   smsCode: string;
 }
 
-const LotteryHeader = ({
+const LotteryHeader = ({ title, description, image, smsCode }: LotteryHeaderProps) => {
-  title,
-  description,
-  image,
-  smsCode,
-}: LotteryHeaderProps) => {
   return (
     <section className="container">
       <div className="flex flex-col md:gap-[32px] gap-[24px]">
@@ -20,11 +15,25 @@ const LotteryHeader = ({
           <h1 className="sm:font-display-1-regular text-[32px] leading-[40px] text-center">
             {title}
           </h1>
-          <p className="text-center text-textLarge leading-textLarge">
+          <p className="text-center text-textLarge leading-textLarge">{description}</p>
-            {description}
+          <div className="flex items-center gap-[8px] px-4 py-3 bg-lightInfoAllertContainer">
-          </p>
+            <svg
-          <div className="flex items-center gap-[8px]">
+              width="24"
-            <span>SMS-kod: {smsCode}</span>
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M4.92893 4.92893C6.8043 3.05357 9.34784 2 12 2C14.6522 2 17.1957 3.05357 19.0711 4.92893C20.9464 6.8043 22 9.34784 22 12C22 13.3132 21.7413 14.6136 21.2388 15.8268C20.7362 17.0401 19.9997 18.1425 19.0711 19.0711C18.1425 19.9997 17.0401 20.7362 15.8268 21.2388C14.6136 21.7413 13.3132 22 12 22C10.6868 22 9.38642 21.7413 8.17317 21.2388C6.95991 20.7362 5.85752 19.9997 4.92893 19.0711C4.00035 18.1425 3.26375 17.0401 2.7612 15.8268C2.25866 14.6136 2 13.3132 2 12C2 9.34784 3.05357 6.8043 4.92893 4.92893ZM12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 13.0506 4.20693 14.0909 4.60896 15.0615C5.011 16.0321 5.60028 16.914 6.34315 17.6569C7.08601 18.3997 7.96793 18.989 8.93853 19.391C9.90914 19.7931 10.9494 20 12 20C13.0506 20 14.0909 19.7931 15.0615 19.391C16.0321 18.989 16.914 18.3997 17.6569 17.6569C18.3997 16.914 18.989 16.0321 19.391 15.0615C19.7931 14.0909 20 13.0506 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4ZM11 9C11 8.44772 11.4477 8 12 8H12.01C12.5623 8 13.01 8.44772 13.01 9C13.01 9.55228 12.5623 10 12.01 10H12C11.4477 10 11 9.55228 11 9ZM10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15C13.5523 15 14 15.4477 14 16C14 16.5523 13.5523 17 13 17H12C11.4477 17 11 16.5523 11 16V13C10.4477 13 10 12.5523 10 12Z"
+                fill="#1E3A5F"
+              />
+            </svg>
+
+            <span className="font-base-medium text-lightOnInfoAllertContainer">
+              SMS-kod: {smsCode}
+            </span>
           </div>
         </div>
         {image && (

components/lottery/LotteryWinnersSection.tsx

@@ -1,30 +1,61 @@
 'use client';
 
 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';
+import LotterySlotCounter from './slotCounter/LotterySlotCounter';
+import Confetti from 'react-confetti/dist/types/Confetti';
+import ReactConfetti from 'react-confetti';
+import { useWindowSize } from 'react-use';
 
 const LotteryWinnersSection = () => {
   const [winners, setWinners] = useState<LotteryWinnerData[]>([]);
+  const [currentNumber, setCurrentNumber] = useState<string>('00-00-00-00-00');
+  const [wsStatus, setWsStatus] = useState<'connecting' | 'connected' | 'error'>('connecting');
+
+  const [isConfettiActive, setIsConfettiActive] = useState(false);
+
+  const { width, height } = useWindowSize();
 
   const { lotteryData } = useLotteryAuth();
 
   useEffect(() => {
     if (lotteryData?.data.winners) {
       setWinners(lotteryData.data.winners);
+      setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00');
     }
 
     const wsUrl = 'https://sms.turkmentv.gov.tm/api/ws/lottery';
     const ws = new WebSocket(wsUrl);
 
+    ws.onopen = () => {
+      console.log('WebSocket connected');
+      setWsStatus('connected');
+    };
+
+    ws.onclose = () => {
+      console.log('WebSocket disconnected');
+      setWsStatus('error');
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      setWsStatus('error');
+    };
+
     ws.onmessage = (event) => {
       console.log('WebSocket message received:', event.data);
       const newWinner = JSON.parse(event.data);
       console.log('Parsed WebSocket data:', newWinner);
       setWinners((prev) => [...prev, newWinner]);
+
+      setTimeout(() => {
+        setIsConfettiActive(true);
+        setTimeout(() => {
+          setIsConfettiActive(false);
+        }, 5000);
+      }, 10000);
     };
 
     return () => {
@@ -34,16 +65,41 @@ const LotteryWinnersSection = () => {
 
   return (
     <section>
+      {wsStatus === 'error' && (
+        <div className="text-red-500 text-center mb-2">
+          Connection error. Please refresh the page.
+        </div>
+      )}
+
+      {isConfettiActive && (
+        <div className="fixed top-0 left-0 z-50">
+          <ReactConfetti
+            width={width}
+            height={height}
+            recycle={false}
+            numberOfPieces={1000}
+            tweenDuration={10000}
+            run={true}
+            colors={[
+              'linear-gradient(45deg, #5D5D72, #8589DE)',
+              'linear-gradient(45deg, #E1E0FF, #575992)',
+              '#8589DE',
+              '#575992',
+              '#E1E0FF',
+              '#BA1A1A',
+            ]}
+          />
+        </div>
+      )}
+
       <div className="container">
-        <div>
+        <div className="flex flex-col  items-center">
-          <div className="flex gap-6 bg-lightSurfaceContainer rounded-[12px] flex-1">
+          <div className="-mb-[90px] z-10">
+            <LotterySlotCounter numberString={currentNumber} />
+          </div>
+          <div className="flex gap-6 bg-lightPrimaryContainer rounded-[12px] flex-1 w-full items-center justify-center pt-[122px] pb-[62px]">
             {/* Winners */}
             <LotteryWinnersList winners={winners} />
-
-            {/* Sping the wheel */}
-            <div className="flex justify-center items-center md:w-full h-full md:px-8 md:py-[29px] p-6">
-              {/* <SpinWheel setWinners={setWinners} /> */}
-            </div>
           </div>
         </div>
       </div>

components/lottery/RollingCounter/RollingCounter.tsx

@@ -171,7 +171,7 @@ const RollingCounter: React.FC<RollingCounterProps> = ({ numberString }) => {
   }
 
   return (
-    <div className="flex items-center justify-center bg-lightPrimary text-white py-4 px-6 rounded-full">
+    <div className="flex items-center max-w-[1132px] justify-center bg-lightPrimary text-white py-4 px-6 rounded-full">
       {currentNumbers.map((num, index) => (
         <RollingDigit
           key={`${index}`} // Simplified key to prevent re-renders

components/lottery/rules/LotteryRulesSection.tsx

@@ -1,4 +1,4 @@
-import { useLotteryAuth } from "@/store/useLotteryAuth";
+import { useLotteryAuth } from '@/store/useLotteryAuth';
 
 const LotteryRulesSection = () => {
   const { lotteryData } = useLotteryAuth();
@@ -17,7 +17,7 @@ const LotteryRulesSection = () => {
               </h3>
               <ul className="list-disc flex flex-col md:gap-4 gap-2 pl-[16px]">
                 {Array(5)
-                  .fill(" ")
+                  .fill(' ')
                   .map((item, i) => (
                     <li className="font-small-regular" key={i}>
                       Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
@@ -27,15 +27,11 @@ const LotteryRulesSection = () => {
             </div>
 
             <div className="flex flex-col md:gap-4 gap-2 bg-lightSurfaceContainer py-4 md:px-8 px-6 rounded-[12px] w-full">
-              <h3 className="md:font-heading-5-regular text-[20px] leading-[24px]">
+              <h3 className="md:font-heading-5-regular text-[20px] leading-[24px]">Üns beriň:</h3>
-                Üns beriň:
-              </h3>
               <ul className="list-disc flex flex-col md:gap-4 gap-2 pl-[16px]">
-                {Array(1)
+                {lotteryData?.user_lottery_numbers.map((item, i) => (
-                  .fill(" ")
-                  .map((item, i) => (
                   <li className="font-small-regular" key={i}>
-                      SMS = 1 manat
+                    {item}
                   </li>
                 ))}
               </ul>

components/lottery/slotCounter/LotterySlotCounter.tsx

@@ -0,0 +1,64 @@
+'use client';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import SlotCounter from 'react-slot-counter';
+
+const LotterySlotCounter = ({ numberString }: { numberString: string }) => {
+  const [formattedNumber, setFormattedNumber] = useState(numberString);
+
+  useEffect(() => {
+    const formatted = numberString.replace(/-/g, ',');
+    setFormattedNumber(formatted);
+  }, [numberString]);
+
+  return (
+    <div className="relative w-fit">
+      <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"
+      />
+      <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 w-full items-center h-[180px] max-w-[1132px] justify-center text-white py-4 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
+            value={formattedNumber}
+            // startValue={'00,00,00,00,00'}
+            charClassName="rolling-number"
+            separatorClassName="slot-seperator"
+            duration={2}
+            speed={2}
+            startFromLastDigit
+            delay={2}
+            animateUnchanged={true}
+            // autoAnimationStart={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LotterySlotCounter;

components/lottery/winners/LotteryWinner.tsx

@@ -4,10 +4,11 @@ import { motion } from 'framer-motion';
 
 interface IProps {
   index: number;
-  number: string;
+  phone: string;
+  ticket: string;
 }
 
-const LotteryWinner = ({ index, number }: IProps) => {
+const LotteryWinner = ({ index, phone, ticket }: IProps) => {
   return (
     <motion.div
       initial={{
@@ -18,11 +19,15 @@ const LotteryWinner = ({ index, number }: IProps) => {
         opacity: 1,
         translateY: 0,
       }}
-      className="flex flex-col gap-2 md:pb-4 pb-3 last:border-none border-b border-lightOutlineVariant">
+      className="flex flex-col gap-2 md:pb-4 pb-3  border-b w-full border-[#CECCFF]">
-      <h4 className="md:font-heading-5-regular text-[20px] leading-[28px]">
+      <h4 className="md:font-heading-6-regular text-[20px] leading-[28px]">
         The winner of the {index + 1} stage:
       </h4>
-      <p className="font-base-medium">8 XX XX-XX-XX</p>
+      <div className="flex items-center gap-4">
+        <p className="font-base-medium">{phone}</p>
+        <div className="w-1 h-1 rounded-full bg-lightOnSurfaceVariant"></div>
+        <p className="font-base-medium">{ticket}</p>
+      </div>
     </motion.div>
   );
 };

components/lottery/winners/LotteryWinnersList.tsx

@@ -1,24 +1,19 @@
-import { LotteryWinnerData } from "@/typings/lottery/lottery.types";
+import { LotteryWinnerData } from '@/typings/lottery/lottery.types';
-import LotteryWinner from "./LotteryWinner";
+import LotteryWinner from './LotteryWinner';
 
 const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerData[] }) => {
   return (
-    <div className="w-full md:p-8 p-6">
+    <div className="flex flex-col gap-4 w-full max-w-[1028px]">
-      <div className="flex flex-col w-full gap-4 md:max-h-[548px] sm:max-h-[276px] max-h-[438px] h-full overflow-y-auto pr-2">
+      <div className="flex flex-col gap-2 w-full md:pb-4 pb-3  border-b border-[#CECCFF]">
-        <div className="flex flex-col gap-2 md:pb-4 pb-3 border-b border-lightOutlineVariant">
         <h4 className="font-heading-3-regular">Results</h4>
-          <p className="font-base-medium">
+        <p className="font-base-medium">The results after each stage will be shown here.</p>
-            The results after each stage will be shown here.
-          </p>
       </div>
-
+      <div className="grid grid-cols-3 gap-x-2 gap-y-4 w-full">
-        <div className="flex flex-col w-full gap-4">
+        {winners.map((item, index) => (
-          {winners.map((_, index) => (
+          <LotteryWinner key={item.ticket} phone={item.client} ticket={item.ticket} index={index} />
-            <LotteryWinner number="8 XX XX-XX-XX" index={index} />
         ))}
       </div>
     </div>
-    </div>
   );
 };
 

lib/hooks/useLottery.ts

@@ -1,9 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react';
-import { LotteryStatus } from "@/typings/lottery/lottery.types";
+import { LotteryStatus } from '@/typings/lottery/lottery.types';
 
 export const useLottery = (startDate: string, endDate: string) => {
-  const [status, setStatus] = useState<LotteryStatus>("not-started");
+  const [status, setStatus] = useState<LotteryStatus>('not-started');
-  const [currentNumber, setCurrentNumber] = useState("22-22-22-22-22");
+  const [currentNumber, setCurrentNumber] = useState('22-22-22-22-22');
 
   useEffect(() => {
     const calculateStatus = () => {
@@ -11,9 +11,9 @@ export const useLottery = (startDate: string, endDate: string) => {
       const start = new Date(startDate);
       const end = new Date(endDate);
 
-      if (now < start) return "not-started";
+      if (now < start) return 'not-started';
-      if (now > end) return "ended";
+      if (now > end) return 'ended';
-      return "started";
+      return 'started';
     };
 
     setStatus(calculateStatus());
@@ -25,9 +25,9 @@ export const useLottery = (startDate: string, endDate: string) => {
   }, [startDate, endDate]);
 
   useEffect(() => {
-    if (status === "started") {
+    if (status === 'started') {
       const timer = setTimeout(() => {
-        setCurrentNumber("81-34-52-35-61");
+        setCurrentNumber('81-34-52-35-61');
       }, 10000);
 
       return () => clearTimeout(timer);
@@ -36,6 +36,7 @@ export const useLottery = (startDate: string, endDate: string) => {
 
   return {
     status,
+    setStatus,
     currentNumber,
   };
 };

package-lock.json

@@ -41,6 +41,7 @@
         "react-hook-form": "^7.43.9",
         "react-icons": "^4.8.0",
         "react-player": "^2.12.0",
+        "react-slot-counter": "^3.0.4",
         "react-use": "^17.5.1",
         "swiper": "^9.2.4",
         "tailwind-merge": "^2.4.0",
@@ -5504,6 +5505,18 @@
         }
       }
     },
+    "node_modules/react-slot-counter": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-slot-counter/-/react-slot-counter-3.0.4.tgz",
+      "integrity": "sha512-38eJP7NFr6eU7YiqgJ9UOhvZOIMNISjg1FmyIbcdoirKCeEabnP3JHwtY2QhoMj4+XtBHm7/QldsytMv+b2Zgw==",
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -10541,6 +10554,12 @@
         "tslib": "^2.0.0"
       }
     },
+    "react-slot-counter": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-slot-counter/-/react-slot-counter-3.0.4.tgz",
+      "integrity": "sha512-38eJP7NFr6eU7YiqgJ9UOhvZOIMNISjg1FmyIbcdoirKCeEabnP3JHwtY2QhoMj4+XtBHm7/QldsytMv+b2Zgw==",
+      "requires": {}
+    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",

package.json

@@ -42,6 +42,7 @@
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
     "react-player": "^2.12.0",
+    "react-slot-counter": "^3.0.4",
     "react-use": "^17.5.1",
     "swiper": "^9.2.4",
     "tailwind-merge": "^2.4.0",
@@ -58,4 +59,3 @@
     "eslint-config-next": "^14.1.0"
   }
 }
-

public/dash.svg

@@ -0,0 +1,3 @@
+<svg width="33" height="4" viewBox="0 0 33 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="4" transform="translate(0.25)" fill="white"/>
+</svg>

public/roller-triangle.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="42" viewBox="0 0 36 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.67949L32 21L2 38.3205L2 3.67949Z" fill="#575992" stroke="#D8D6FF" stroke-width="4"/>
+</svg>

tailwind.config.js

@@ -89,6 +89,10 @@ export const theme = {
       lightOnWarningAllertContainer: '#F57C00',
       lightWarningAllertContainer: '#FFF8E1',
       lightWarningAllertContainerOutline: '#F9EDC8',
+
+      // RollerCounter
+      rollerCounterGradient:
+        'linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)',
     },
     fontSize: {
       // Display