text order fixed

2025-01-06 18:17:03 +05:00 · 2025-01-06 18:17:03 +05:00 · 7d0e90e53f
parent ebf7ea65a6
commit 7d0e90e53f
6 changed files with 95 additions and 118 deletions
--- a/components/common/Confetti.tsx
+++ b/components/common/Confetti.tsx
@ -3,7 +3,13 @@
 import ReactConfetti from 'react-confetti';
 import { useWindowSize } from 'react-use';

-const Confetti = () => {
+const Confetti = ({
+  infinite = true,
+  numberOfPieces = 200,
+}: {
+  infinite?: boolean;
+  numberOfPieces?: number;
+}) => {
  const { width, height } = useWindowSize();
  const colors = [
    'linear-gradient(45deg, #5D5D72, #8589DE)',
@ -19,9 +25,9 @@ const Confetti = () => {
      <ReactConfetti
        width={width}
        height={height}
-        recycle={true}
-        numberOfPieces={200}
-        tweenDuration={10000}
+        recycle={infinite}
+        numberOfPieces={numberOfPieces}
+        tweenDuration={5000}
        run={true}
        colors={colors}
      />
--- a/components/lottery/LotteryWinnersSection.tsx
+++ b/components/lottery/LotteryWinnersSection.tsx
@ -1,21 +1,18 @@
-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 { 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';

-const WEBSOCKET_URL = "wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506";
-const SLOT_COUNTER_DURATION = 20000;
+const WEBSOCKET_URL = 'wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506';
+const SLOT_COUNTER_DURATION = 100000;

-const LotteryWinnersSection = ({
-  lotteryStatus,
-}: {
-  lotteryStatus: string;
-}) => {
+const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => {
  const [winners, setWinners] = useState<LotteryWinnerDataSimplified[]>([]);
  const [currentNumber, setCurrentNumber] = useState<string>();
  const [isConfettiActive, setIsConfettiActive] = useState(false);
@ -23,40 +20,39 @@ const LotteryWinnersSection = ({
  const { width, height } = useWindowSize();
  const { lotteryData } = useLotteryAuth();
  const [winnerSelectingStatus, setWinnerSelectingStatus] = useState<
-    "not-selected" | "is-selecting" | "selected"
-  >("not-selected");
-  const [pendingWinner, setPendingWinner] =
-    useState<LotteryWinnerDataSimplified | null>(null);
-  const [displayText, setDisplayText] = useState<string>("...");
-  const [winnerText, setWinnerText] = useState<string>("");
+    'not-selected' | 'is-selecting' | 'selected'
+  >('not-selected');
+  const [pendingWinner, setPendingWinner] = useState<LotteryWinnerDataSimplified | null>(null);
+  const [topText, setTopText] = useState<string>('Ýeňiji saýlanmady');
+  const [bottomText, setBottomText] = useState<string>('');

  // WebSocket Hook
  const { wsStatus, subscribeToMessages } = useWebsocketLottery(WEBSOCKET_URL);

+  console.log(winners);
+
  useEffect(() => {
-    if (lotteryData?.data.winners) {
+    if (lotteryData) {
+      if (lotteryData?.data.winners.length > 0) {
        const simplifiedWinners = lotteryData.data.winners.map((winner) => ({
          client: winner.client,
          winner_no: winner.winner_no,
          ticket: winner.ticket,
        }));
        setWinners(simplifiedWinners);
-      setCurrentNumber(
-        lotteryData.data.winners.at(-1)?.ticket || "00-00-00-00-00"
-      );
+        setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00');
+        setWinnerSelectingStatus('selected');
+        setTopText('Ýeniji');
+        setBottomText(lotteryData.data.winners.at(-1)?.client || '');
+      }
    }
  }, [lotteryData]);

  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;
      }

@ -66,26 +62,23 @@ const LotteryWinnersSection = ({
        ticket: newWinner.ticket,
      };

-      setDisplayText(`${winnerData.winner_no}-nji ýeňiji saýlanýar`);
-      setWinnerSelectingStatus("is-selecting");
+      setTopText(`${winnerData.winner_no}-nji(y) ýeňiji saýlanýar`);
+      setBottomText('...');
+      setWinnerSelectingStatus('is-selecting');
      setPendingWinner(winnerData);
      setCurrentNumber(winnerData.ticket);

      setTimeout(() => {
-        setDisplayText("The winner is");
-        setWinnerText(winnerData.client);
-        setWinnerSelectingStatus("selected");
+        setTopText('Ýeniji');
+        setBottomText(winnerData.client);
+        setWinnerSelectingStatus('selected');
        setIsConfettiActive(true);
        setWinners((prev) => [...prev, winnerData]);
-      }, SLOT_COUNTER_DURATION);
-
        setTimeout(() => {
          setIsConfettiActive(false);
-        setWinnerSelectingStatus("not-selected");
-        setPendingWinner(null);
-        setDisplayText("...");
-        setWinnerText("");
-      }, 10000);
+          // setPendingWinner(null);
+        }, 5000);
+      }, SLOT_COUNTER_DURATION + 500);
    });

    return () => {
@ -95,46 +88,31 @@ const LotteryWinnersSection = ({

  return (
    <section>
-      {wsStatus === "error" && (
-        <div className="text-red-500 text-center mb-2">
-          Websocket connection error.
-        </div>
-      )}
-      {isConfettiActive && (
-        <div className="fixed top-0 left-0 z-50">
-          <ReactConfetti
-            width={width}
-            height={height}
-            recycle={false}
-            numberOfPieces={1000}
-            tweenDuration={10000}
-            run={true}
-          />
-        </div>
+      {wsStatus === 'error' && (
+        <div className="text-red-500 text-center mb-2">Websocket connection error.</div>
      )}
+      {isConfettiActive && <Confetti infinite={false} numberOfPieces={1000} />}
      <div className="container">
        <div
          className="flex flex-col items-center rounded-[32px] gap-[40px]"
          style={{
-            background: "linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)",
-          }}
-        >
+            background: 'linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)',
+          }}>
          <div className="flex items-center justify-center w-full min-h-[240px]">
-            {winnerSelectingStatus === "not-selected" ||
-            winnerSelectingStatus === "is-selecting" ? (
+            {winnerSelectingStatus === 'not-selected' ? (
              <AnimatedText
-                text={displayText}
+                text={topText}
                className="text-center flex items-center justify-center text-[100px] leading-[108px] text-[#E65E19]"
              />
            ) : (
              <div className="flex flex-col items-center justify-center">
                <AnimatedText
-                  text={displayText}
+                  text={topText}
                  className="text-center text-[56px] leading-[64px] text-[#E65E19]"
                />
-                {winnerText && (
+                {bottomText && (
                  <AnimatedText
-                    text={winnerText}
+                    text={bottomText}
                    className="text-center text-[80px] leading-[88px] text-[#E65E19]"
                  />
                )}
@ -143,10 +121,7 @@ const LotteryWinnersSection = ({
          </div>
          <div className="z-10">
            {currentNumber && (
-              <LotterySlotCounter
-                numberString={currentNumber}
-                isAnimating={false}
-              />
+              <LotterySlotCounter numberString={currentNumber} isAnimating={false} />
            )}
          </div>
          <div className="flex gap-6 rounded-[12px] flex-1 w-full items-center justify-center sm:pb-[62px] pb-[32px] px-4">
--- a/components/lottery/rules/LotteryRulesSection.tsx
+++ b/components/lottery/rules/LotteryRulesSection.tsx
@ -1,4 +1,4 @@
-import { useLotteryAuth } from "@/store/useLotteryAuth";
+import { useLotteryAuth } from '@/store/useLotteryAuth';

 const LotteryRulesSection = () => {
  const { lotteryData } = useLotteryAuth();
@ -8,7 +8,7 @@ const LotteryRulesSection = () => {
      <div className="container">
        <div className="flex flex-col md:gap-8 gap-6">
          <h2 className="md:font-heading-1-regular sm:text-[32px] text-[26px] sm:leading-[40px] leading-[34px]">
-            Lotereýanyň duzgunleri:
+            Bijäniň düzgünleri:
          </h2>

          <div className="flex sm:flex-row flex-col gap-6">
@ -18,7 +18,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
@ -29,7 +29,7 @@ const LotteryRulesSection = () => {

            <div className="flex flex-col md:gap-4 sm:gap-2 gap-4 bg-lightSurfaceContainer sm:py-4 md:px-8 sm:px-6 py-3 px-4 rounded-[12px] w-full">
              <h3 className="md:font-heading-5-regular sm:text-[20px] text-[18px] sm:leading-[24px] leading-[28px]">
-                Üns beriň:
+                Siziň açar sözleriňiz:
              </h3>
              <ul className="list-disc flex flex-col md:gap-4 gap-2 pl-[16px]">
                {lotteryData?.user_lottery_numbers.map((item, i) => (
--- a/components/lottery/slotCounter/LotterySlotCounter.tsx
+++ b/components/lottery/slotCounter/LotterySlotCounter.tsx
@ -1,27 +1,24 @@
-"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, useState } from 'react';
+import SlotCounter from 'react-slot-counter';
+import { useMediaQuery } from 'usehooks-ts';

 interface LotterySlotCounterProps {
  numberString: string;
  isAnimating: boolean;
 }

-const LotterySlotCounter = ({
-  numberString,
-  isAnimating,
-}: LotterySlotCounterProps) => {
+const LotterySlotCounter = ({ numberString, isAnimating }: LotterySlotCounterProps) => {
  const [formattedNumber, setFormattedNumber] = useState(numberString);

  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)");
+  const tablet = useMediaQuery('(max-width: 769px)');
+  const mobile = useMediaQuery('(max-width: 426px)');

  return (
    <div className="relative w-fit">
@ -65,18 +62,16 @@ const LotterySlotCounter = ({
        className="flex items-center h-fit md:max-w-[1132px] sm:max-w-[640px] max-w-[324px] w-full justify-center text-white md: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",
-        }}
-      >
+            '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>
+              'linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)',
+          }}></div>

        <div className="z-10">
          <SlotCounter
@ -85,9 +80,9 @@ const LotterySlotCounter = ({
            startValueOnce
            charClassName="rolling-number"
            separatorClassName="slot-seperator"
-            duration={2}
-            speed={2}
-            delay={2}
+            duration={10}
+            speed={6}
+            delay={10}
            startFromLastDigit
            animateUnchanged
            animateOnVisible={false}
--- a/components/lottery/winners/LotteryWinner.tsx
+++ b/components/lottery/winners/LotteryWinner.tsx
@ -1,6 +1,6 @@
-"use client";
+'use client';

-import { motion } from "framer-motion";
+import { motion } from 'framer-motion';

 interface IProps {
  phone: string;
@ -17,10 +17,11 @@ const LotteryWinner = ({ phone, ticket, isNew, winnerNumber }: IProps) => {
      animate={{ opacity: 1, translateY: 0 }}
      exit={{ opacity: 0, translateY: -20 }}
      transition={{ duration: 0.5 }}
-      className="flex flex-col gap-2 md:pb-4 pb-3 border-b w-full border-[#CECCFF]"
-    >
+      className="flex flex-col gap-2 md:pb-4 pb-3 border-b w-full border-[#CECCFF]">
      <h4 className="md:font-heading-6-regular text-[20px] leading-[28px]">
-        The winner of the {winnerNumber} stage:
+        {/* The winner of the {winnerNumber} stage: */}
+        {winnerNumber}
+        {' - nji(y) ýeňiji'}
      </h4>
      <div className="flex items-center gap-4">
        <p className="md:font-base-medium font-base-regular">{phone}</p>
--- a/components/lottery/winners/LotteryWinnersList.tsx
+++ b/components/lottery/winners/LotteryWinnersList.tsx
@ -7,7 +7,7 @@ const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerDataSimplified[
  return (
    <div className="flex flex-col gap-4 w-full max-w-[1028px]">
      <div className="flex flex-col gap-2 w-full pb-4 border-b border-[#CECCFF]">
-        <h4 className="md:font-heading-3-regular text-[28px]">Results</h4>
+        <h4 className="md:font-heading-3-regular text-[28px]">Ýeňijiler</h4>
        <p className="md:font-base-medium text-[16px]">
          The results after each stage will be shown here.
        </p>