text order fixed
This commit is contained in:
Kakabay
parent
ebf7ea65a6
commit
7d0e90e53f
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
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"
|
||||
);
|
||||
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');
|
||||
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);
|
||||
setTimeout(() => {
|
||||
setIsConfettiActive(false);
|
||||
// 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">
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue