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

fix

This commit is contained in:
Kakabay 2025-01-16 17:59:03 +05:00
parent 9ede196459
commit 668feb6c79
6 changed files with 97 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/globals.css
View File

@ -312,16 +312,16 @@ big {
} }
} }
@media (max-width: 1024px) { @media (max-width: 1025px) {
.rolling-number {
@apply text-[48px] px-2;
}
.slot-seperator { .slot-seperator {
content: url('/dash-md.svg'); content: url('/dash-md.svg');
@apply mx-2; @apply mx-2;
} }
} .lottery-winner-list {
grid-template-columns: 2;
@media (max-width: 1025px) {
.rolling-number {
@apply text-[48px] px-2;
} }
} }

130
components/lottery/LotteryWinnersSection.tsx
View File

@ -1,36 +1,31 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from 'react';
import { useLotteryAuth } from "@/store/useLotteryAuth"; import { useLotteryAuth } from '@/store/useLotteryAuth';
import { LotteryWinnerDataSimplified } from "@/typings/lottery/lottery.types"; import { LotteryWinnerDataSimplified } from '@/typings/lottery/lottery.types';
import LotteryWinnersList from "./winners/LotteryWinnersList"; import LotteryWinnersList from './winners/LotteryWinnersList';
import LotterySlotCounter from "./slotCounter/LotterySlotCounter"; import LotterySlotCounter from './slotCounter/LotterySlotCounter';
import ReactConfetti from "react-confetti"; import ReactConfetti from 'react-confetti';
import { useWindowSize } from "react-use"; import { useWindowSize } from 'react-use';
import AnimatedText from "@/components/common/AnimatedText"; import AnimatedText from '@/components/common/AnimatedText';
import { useWebsocketLottery } from "@/hooks/useWebSocketLottery"; import { useWebsocketLottery } from '@/hooks/useWebSocketLottery';
import Confetti from "../common/Confetti"; import Confetti from '../common/Confetti';
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from 'framer-motion';
const WEBSOCKET_URL = "wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506"; const WEBSOCKET_URL = 'wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506';
const SLOT_COUNTER_DURATION = 30000; const SLOT_COUNTER_DURATION = 30000;
const LotteryWinnersSection = ({ const LotteryWinnersSection = ({ lotteryStatus }: { lotteryStatus: string }) => {
lotteryStatus,
}: {
lotteryStatus: string;
}) => {
const [winners, setWinners] = useState<LotteryWinnerDataSimplified[]>([]); const [winners, setWinners] = useState<LotteryWinnerDataSimplified[]>([]);
const [currentNumber, setCurrentNumber] = useState<string>(); const [currentNumber, setCurrentNumber] = useState<string>('00-00-00-00-00');
const [startNumber, setStartNumber] = useState<string>("00-00-00-00-00"); const [startNumber, setStartNumber] = useState<string>('00-00-00-00-00');
const [isConfettiActive, setIsConfettiActive] = useState(false); const [isConfettiActive, setIsConfettiActive] = useState(false);
const { lotteryData } = useLotteryAuth(); const { lotteryData } = useLotteryAuth();
const [winnerSelectingStatus, setWinnerSelectingStatus] = useState< const [winnerSelectingStatus, setWinnerSelectingStatus] = useState<
"not-selected" | "is-selecting" | "selected" 'not-selected' | 'is-selecting' | 'selected'
>("not-selected"); >('not-selected');
const [pendingWinner, setPendingWinner] = const [pendingWinner, setPendingWinner] = useState<LotteryWinnerDataSimplified | null>(null);
useState<LotteryWinnerDataSimplified | null>(null); const [topText, setTopText] = useState<string>('Bije az wagtdan başlaýar');
const [topText, setTopText] = useState<string>("Ýeňiji saýlanmady"); const [bottomText, setBottomText] = useState<string>('');
const [bottomText, setBottomText] = useState<string>("");
// WebSocket Hook // WebSocket Hook
const { wsStatus, subscribeToMessages } = useWebsocketLottery(WEBSOCKET_URL); const { wsStatus, subscribeToMessages } = useWebsocketLottery(WEBSOCKET_URL);
@ -44,14 +39,10 @@ const LotteryWinnersSection = ({
ticket: winner.ticket, ticket: winner.ticket,
})); }));
setWinners(simplifiedWinners); setWinners(simplifiedWinners);
setCurrentNumber( // setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00');
lotteryData.data.winners.at(-1)?.ticket || "00-00-00-00-00" setWinnerSelectingStatus('selected');
); setTopText(`${lotteryData.data.winners.at(-1)?.winner_no}-nji ýeňiji`);
setWinnerSelectingStatus("selected"); setBottomText(lotteryData.data.winners.at(-1)?.client || '');
setTopText(
`${lotteryData.data.winners.at(-1)?.winner_no}-nji(y) ýeňiji`
);
setBottomText(lotteryData.data.winners.at(-1)?.client || "");
setIsConfettiActive(true); setIsConfettiActive(true);
} }
} }
@ -60,13 +51,8 @@ const LotteryWinnersSection = ({
useEffect(() => { useEffect(() => {
const unsubscribe = subscribeToMessages((event) => { const unsubscribe = subscribeToMessages((event) => {
const newWinner = JSON.parse(event.data); const newWinner = JSON.parse(event.data);
if ( if (!newWinner || !newWinner.phone || !newWinner.winner_no || !newWinner.ticket) {
!newWinner || console.error('❌ Invalid data format received');
!newWinner.phone ||
!newWinner.winner_no ||
!newWinner.ticket
) {
console.error("❌ Invalid data format received");
return; return;
} }
@ -77,16 +63,16 @@ const LotteryWinnersSection = ({
}; };
setIsConfettiActive(false); setIsConfettiActive(false);
setTopText(`${winnerData.winner_no}-nji(y) ýeňiji saýlanýar`); setTopText(`${winnerData.winner_no}-nji ýeňiji saýlanýar`);
setBottomText("..."); setBottomText('...');
setWinnerSelectingStatus("is-selecting"); setWinnerSelectingStatus('is-selecting');
setPendingWinner(winnerData); setPendingWinner(winnerData);
setCurrentNumber(winnerData.ticket); setCurrentNumber(winnerData.ticket);
setTimeout(() => { setTimeout(() => {
setTopText(`${winnerData.winner_no}-nji(y) ýeňiji`); setTopText(`${winnerData.winner_no}-nji ýeňiji`);
setBottomText(winnerData.client); setBottomText(winnerData.client);
setWinnerSelectingStatus("selected"); setWinnerSelectingStatus('selected');
setIsConfettiActive(true); setIsConfettiActive(true);
setWinners((prev) => [...prev, winnerData]); setWinners((prev) => [...prev, winnerData]);
}, SLOT_COUNTER_DURATION); }, SLOT_COUNTER_DURATION);
@ -100,16 +86,16 @@ const LotteryWinnersSection = ({
// useEffect(() => { // useEffect(() => {
// setTimeout(() => { // setTimeout(() => {
// setIsConfettiActive(false); // setIsConfettiActive(false);
// setTopText(`${1}-nji(y) ýeňiji saýlanýar`); // setTopText(`${1}-nji ýeňiji saýlanýar`);
// setBottomText("..."); // setBottomText('...');
// setWinnerSelectingStatus("is-selecting"); // setWinnerSelectingStatus('is-selecting');
// // setPendingWinner(winnerData); // // setPendingWinner(winnerData);
// setCurrentNumber("55-44-33-22-11"); // setCurrentNumber('55-44-33-22-11');
// setTimeout(() => { // setTimeout(() => {
// setTopText("Ýeniji"); // setTopText('Ýeniji');
// setBottomText("99361245555"); // setBottomText('99361245555');
// setWinnerSelectingStatus("selected"); // setWinnerSelectingStatus('selected');
// setIsConfettiActive(true); // setIsConfettiActive(true);
// // setWinners((prev) => [...prev, winnerData]); // // setWinners((prev) => [...prev, winnerData]);
// }, SLOT_COUNTER_DURATION); // }, SLOT_COUNTER_DURATION);
@ -117,16 +103,16 @@ const LotteryWinnersSection = ({
// setTimeout(() => { // setTimeout(() => {
// setIsConfettiActive(false); // setIsConfettiActive(false);
// setTopText(`${1}-nji(y) ýeňiji saýlanýar`); // setTopText(`${1}-nji ýeňiji saýlanýar`);
// setBottomText("..."); // setBottomText('...');
// setWinnerSelectingStatus("is-selecting"); // setWinnerSelectingStatus('is-selecting');
// // setPendingWinner(winnerData); // // setPendingWinner(winnerData);
// setCurrentNumber("11-22-33-44-55"); // setCurrentNumber('11-22-33-44-55');
// setTimeout(() => { // setTimeout(() => {
// setTopText("Ýeniji"); // setTopText('Ýeniji');
// setBottomText("99361245555"); // setBottomText('99361245555');
// setWinnerSelectingStatus("selected"); // setWinnerSelectingStatus('selected');
// setIsConfettiActive(true); // setIsConfettiActive(true);
// // setWinners((prev) => [...prev, winnerData]); // // setWinners((prev) => [...prev, winnerData]);
// }, SLOT_COUNTER_DURATION); // }, SLOT_COUNTER_DURATION);
@ -135,22 +121,19 @@ const LotteryWinnersSection = ({
return ( return (
<section> <section>
{wsStatus === "error" && ( {wsStatus === 'error' && (
<div className="text-red-500 text-center mb-2"> <div className="text-red-500 text-center mb-2">Websocket connection error.</div>
Websocket connection error.
</div>
)} )}
<Confetti showConfetti={isConfettiActive} numberOfPieces={300} />{" "} <Confetti showConfetti={isConfettiActive} numberOfPieces={300} />{' '}
<div className="container"> <div className="container">
<div <div
className="flex flex-col items-center rounded-[32px] gap-[40px]" className="flex flex-col items-center rounded-[32px] gap-[40px]"
style={{ style={{
background: "linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)", background: 'linear-gradient(180deg, #F0ECF4 0%, #E1E0FF 43.5%)',
}} }}>
>
<AnimatePresence> <AnimatePresence>
<div className="flex items-center justify-center w-full sm:min-h-[240px] pt-6"> <div className="flex items-center justify-center w-full sm:min-h-[240px] pt-6">
{winnerSelectingStatus === "not-selected" ? ( {winnerSelectingStatus === 'not-selected' ? (
// <TextMaskReveal // <TextMaskReveal
// text={topText} // text={topText}
// className="text-center flex items-center justify-center text-[100px] leading-[108px] text-[#E65E19]" // className="text-center flex items-center justify-center text-[100px] leading-[108px] text-[#E65E19]"
@ -159,7 +142,7 @@ const LotteryWinnersSection = ({
<AnimatedText <AnimatedText
key={topText} key={topText}
text={topText} text={topText}
className="text-center flex items-center justify-center sm:text-[100px] text-[48px] leading-[120%] text-[#E65E19]" className="text-center flex items-center justify-center md:text-[80px] sm:text-[56px] text-[24px] leading-[120%] text-[#E65E19]"
duration={0.4} duration={0.4}
/> />
) : ( ) : (
@ -175,8 +158,7 @@ const LotteryWinnersSection = ({
}, },
}, },
}} }}
className="flex flex-col items-center justify-center" className="flex flex-col items-center justify-center">
>
{/* <TextMaskReveal {/* <TextMaskReveal
text={topText} text={topText}
className="text-center text-[56px] leading-[64px] text-[#E65E19]" className="text-center text-[56px] leading-[64px] text-[#E65E19]"
@ -209,12 +191,10 @@ const LotteryWinnersSection = ({
</AnimatePresence> </AnimatePresence>
<div className="z-10"> <div className="z-10">
{currentNumber && ( {currentNumber && <LotterySlotCounter numberString={currentNumber} />}
<LotterySlotCounter numberString={currentNumber} />
)}
</div> </div>
<div className="flex gap-6 rounded-[12px] flex-1 w-full items-center justify-center sm:pb-[62px] pb-[32px] px-4"> <div className="flex gap-6 rounded-[12px] flex-1 w-full items-center justify-center sm:pb-[62px] pb-[32px] px-4">
<LotteryWinnersList winners={winners} /> {winners.length > 0 && <LotteryWinnersList winners={winners} />}
</div> </div>
</div> </div>
</div> </div>

52
components/lottery/slotCounter/LotterySlotCounter.tsx
View File

@ -1,8 +1,8 @@
"use client"; 'use client';
import Image from "next/image"; import Image from 'next/image';
import React, { useEffect, useState } from "react"; import React, { useEffect, useRef, useState } from 'react';
import SlotCounter from "react-slot-counter"; import SlotCounter, { SlotCounterRef } from 'react-slot-counter';
import { useMediaQuery } from "usehooks-ts"; import { useMediaQuery } from 'usehooks-ts';
interface LotterySlotCounterProps { interface LotterySlotCounterProps {
numberString: string; numberString: string;
@ -10,15 +10,27 @@ interface LotterySlotCounterProps {
const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => { const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => {
const [formattedNumber, setFormattedNumber] = useState(numberString); 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(() => { useEffect(() => {
const formatted = numberString.replace(/-/g, ","); const formatted = numberString.replace(/-/g, ',');
setFormattedNumber(formatted); setFormattedNumber(formatted);
}, [numberString]);
const tablet = useMediaQuery("(max-width: 769px)"); // Skip animation on the first render
const mobile = useMediaQuery("(max-width: 426px)"); if (isFirstRender.current) {
console.log(formattedNumber); 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 ( return (
<div className="relative w-fit"> <div className="relative w-fit">
@ -59,27 +71,25 @@ const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => {
)} )}
<div <div
className="flex items-center h-fit md:max-w-[1132px] sm:max-w-[640px] max-w-[400px] 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" 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={{ style={{
background: background:
"linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)", 'linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)',
boxShadow: "0px 4px 4px 0px #00000040", boxShadow: '0px 4px 4px 0px #00000040',
}} }}>
>
{/* Highlight */} {/* Highlight */}
<div <div
className="absolute top-[50%] -translate-y-1/2 left-0 w-full h-full" className="absolute top-[50%] -translate-y-1/2 left-0 w-full h-full"
style={{ style={{
background: background:
"linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)", 'linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)',
}} }}></div>
></div>
<div className="z-10"> <div className="z-10">
<SlotCounter <SlotCounter
ref={slotCounterRef}
value={formattedNumber} value={formattedNumber}
startValue={"00,00,00,00,00"} startValue={'00,00,00,00,00'}
// startValueOnce
charClassName="rolling-number" charClassName="rolling-number"
separatorClassName="slot-seperator" separatorClassName="slot-seperator"
duration={3} duration={3}
@ -87,8 +97,8 @@ const LotterySlotCounter = ({ numberString }: LotterySlotCounterProps) => {
delay={3} delay={3}
startFromLastDigit startFromLastDigit
animateUnchanged animateUnchanged
autoAnimationStart={false}
animateOnVisible={false} animateOnVisible={false}
// autoAnimationStart={false}
/> />
</div> </div>
</div> </div>

2
components/lottery/winners/LotteryWinner.tsx
View File

@ -21,7 +21,7 @@ const LotteryWinner = ({ phone, ticket, isNew, winnerNumber }: IProps) => {
<h4 className="md:font-heading-6-regular text-[20px] leading-[28px]"> <h4 className="md:font-heading-6-regular text-[20px] leading-[28px]">
{/* The winner of the {winnerNumber} stage: */} {/* The winner of the {winnerNumber} stage: */}
{winnerNumber} {winnerNumber}
{' - nji(y) ýeňiji'} {' - nji ýeňiji'}
</h4> </h4>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<p className="md:font-base-medium font-base-regular">{phone}</p> <p className="md:font-base-medium font-base-regular">{phone}</p>

5
components/lottery/winners/LotteryWinnersList.tsx
View File

@ -8,13 +8,10 @@ const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerDataSimplified[
<div className="flex flex-col gap-4 w-full max-w-[1028px]"> <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]"> <div className="flex flex-col gap-2 w-full pb-4 border-b border-[#CECCFF]">
<h4 className="md:font-heading-3-regular text-[28px]">Ýeňijiler</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>
</div> </div>
<motion.div <motion.div
layout layout
className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-x-2 gap-y-4 w-full "> className="grid min-[1025px]:grid-cols-3 min-[700px]:grid-cols-2 grid-cols-1 gap-x-2 gap-y-4 w-full lottery-winner-list">
{winners.map((item, index) => ( {winners.map((item, index) => (
<LotteryWinner <LotteryWinner
key={v4()} key={v4()}

3
tailwind.config.js
View File

@ -8,6 +8,9 @@ export const content = [
export const darkMode = 'class'; export const darkMode = 'class';
export const theme = { export const theme = {
extend: { extend: {
screens: {
// sm: '800px',
},
colors: { colors: {
mblue: '#121268', mblue: '#121268',
mred: '#E20000', mred: '#E20000',