From 66680e51e6952fa86392585a278fb0d401f1c1dc Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Mon, 9 Dec 2024 18:35:43 +0500 Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B7=D1=88=20=D1=84=D1=82=D0=B2=20?= =?UTF-8?q?=D0=BA=D1=83=D1=8B=20=D1=8B=D0=B5=D1=84=D0=BA=D0=B5=D1=83=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/queries.ts | 9 +- app/(main)/lottery/[lottery_id]/page.tsx | 6 +- app/(main)/lottery/active/page.tsx | 95 +++++++++++++++---- app/globals.css | 11 ++- .../lottery/countDown/LotteryCountDown.tsx | 83 ++++++++++------ components/lottery/spinWheel/SpinWheel.tsx | 12 +-- models/lottery/lottery.model.ts | 21 ++++ package.json | 1 + tailwind.config.js | 1 + 9 files changed, 177 insertions(+), 62 deletions(-) diff --git a/api/queries.ts b/api/queries.ts index 39394fa..1050706 100644 --- a/api/queries.ts +++ b/api/queries.ts @@ -6,6 +6,7 @@ import { CategoriesModel } from '@/models/categories.model'; import { ChannelsModel } from '@/models/channels.model'; import { HomeModel } from '@/models/home.model'; import { LiveDescriptionModel } from '@/models/liveDescription.model'; +import { ILottery } from '@/models/lottery/lottery.model'; import { MarqueeModel } from '@/models/marquee.model'; import { NewsModel, NewsType } from '@/models/news.model'; import { NewsItemModel } from '@/models/newsItem.model'; @@ -233,16 +234,16 @@ export class Queries { } // Lottery ================================================================================ - public static async getLottery(): Promise { + public static async getLottery(): Promise { return await fetch(`${baseUrl.QUIZ_SRC}${routes.lotteryActive}`, { next: { revalidate: 3600 }, - }).then((res) => res.json().then((res) => res as IAllVotes)); + }).then((res) => res.json().then((res) => res as ILottery)); } - public static async getLotteryById(lottery_id: string): Promise { + public static async getLotteryById(lottery_id: string): Promise { return await fetch(`${baseUrl.QUIZ_SRC}${routes.lotteryId(lottery_id)}`, { next: { revalidate: 3600 }, - }).then((res) => res.json().then((res) => res as IVote)); + }).then((res) => res.json().then((res) => res as ILottery)); } // ============================================================================================ diff --git a/app/(main)/lottery/[lottery_id]/page.tsx b/app/(main)/lottery/[lottery_id]/page.tsx index a8cc261..bec613e 100644 --- a/app/(main)/lottery/[lottery_id]/page.tsx +++ b/app/(main)/lottery/[lottery_id]/page.tsx @@ -55,8 +55,10 @@ const page = ({ params }: IParams) => {
    {Array(1) .fill(' ') - .map((item) => ( -
  • SMS = 1 manat
    • + .map((item, i) => ( +
  • + SMS = 1 manat +
    • ))}
diff --git a/app/(main)/lottery/active/page.tsx b/app/(main)/lottery/active/page.tsx index 1d236a7..37b57bb 100644 --- a/app/(main)/lottery/active/page.tsx +++ b/app/(main)/lottery/active/page.tsx @@ -1,30 +1,83 @@ +'use client'; + +import { Queries } from '@/api/queries'; import LotteryWinnersSection from '@/components/lottery/LotteryWinnersSection'; import LotteryCountDown from '@/components/lottery/countDown/LotteryCountDown'; +import { ILottery } from '@/models/lottery/lottery.model'; import Image from 'next/image'; +import { useEffect, useState } from 'react'; const page = () => { + const [isLoading, setIsLoading] = useState(false); + const [data, setData] = useState(); + const [lotteryStatus, setLotteryStatus] = useState<'not-started' | 'started' | 'ended'>( + 'not-started', + ); + + useEffect(() => { + Queries.getLottery() + .then((res) => { + setIsLoading(true); + setData(res); + }) + .finally(() => setIsLoading(false)); + }, []); + + console.log(lotteryStatus); + return ( -
-
-
-
-

Bije

-
- banner +
+ {data && ( +
+
+
+
+

+ {data.data.title} +

+

+ {data.data.description} +

+

+ SMS-kod: {data.data.sms_code} +

+
+
+ banner +
+ + {/* {lotteryStatus === 'started' || + (lotteryStatus === 'not-started' && ( + + ))} */} + + {lotteryStatus === 'not-started' || lotteryStatus === 'started' ? ( + + ) : null}
- -
-
-
+ + )} - + {lotteryStatus === 'started' || (lotteryStatus === 'ended' && )}
@@ -49,8 +102,10 @@ const page = () => {
    {Array(1) .fill(' ') - .map((item) => ( -
  • SMS = 1 manat
    • + .map((item, i) => ( +
  • + SMS = 1 manat +
    • ))}
diff --git a/app/globals.css b/app/globals.css index 42df8b0..f57f9af 100644 --- a/app/globals.css +++ b/app/globals.css @@ -86,7 +86,7 @@ html { .container { max-width: 1316px; - padding: 0 30px; + padding: 0 16px; width: 100%; margin: 0 auto; /* overflow-x: hidden; */ @@ -228,9 +228,18 @@ big { @apply -tracking-[1%] text-[24px] leading-[32px]; } +.font-heading-5-medium { + @apply font-medium -tracking-[1%] text-[24px] leading-[32px]; +} + +.font-base-regular { + @apply font-normal -tracking-[1%] text-[16px] leading-[24px]; +} + .font-base-medium { @apply font-medium -tracking-[1%] text-[16px] leading-[24px]; } + .font-small-regular { @apply -tracking-[1%] text-[14px] leading-[20px]; } diff --git a/components/lottery/countDown/LotteryCountDown.tsx b/components/lottery/countDown/LotteryCountDown.tsx index 1839558..22d1bf4 100644 --- a/components/lottery/countDown/LotteryCountDown.tsx +++ b/components/lottery/countDown/LotteryCountDown.tsx @@ -1,92 +1,117 @@ -"use client"; +'use client'; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, Dispatch, SetStateAction } from 'react'; interface LotteryCountDownProps { - startDate: string; // Event start date in "YYYY-MM-DD" format + startDate: string; // Event start date in "YYYY-MM-DD HH:mm:ss" format + endDate: string; // Event end date in "YYYY-MM-DD HH:mm:ss" format + lotteryStatus: string; + setLotteryStatus: Dispatch>; } -const LotteryCountDown: React.FC = ({ startDate }) => { +const LotteryCountDown: React.FC = ({ + startDate, + endDate, + lotteryStatus, + setLotteryStatus, +}) => { const [timeLeft, setTimeLeft] = useState({ hours: 0, minutes: 0, seconds: 0, }); - const calculateTimeLeft = () => { + const calculateTimeLeft = (targetDate: string) => { const now = new Date(); - const eventDate = new Date(`${startDate}T00:00:00+05:00`); // Set the time to midnight UTC+5 + const eventDate = new Date(targetDate); // Parse target date directly const timeDifference = eventDate.getTime() - now.getTime(); if (timeDifference <= 0) { - return { hours: 0, minutes: 0, seconds: 0 }; // Event has started or passed + return { hours: 0, minutes: 0, seconds: 0 }; // Countdown finished } const hours = Math.floor(timeDifference / (1000 * 60 * 60)); - const minutes = Math.floor( - (timeDifference % (1000 * 60 * 60)) / (1000 * 60) - ); + const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000); return { hours, minutes, seconds }; }; useEffect(() => { - // Update time left every second const timer = setInterval(() => { - setTimeLeft(calculateTimeLeft()); + if (lotteryStatus === 'not-started') { + const timeToStart = calculateTimeLeft(startDate); + setTimeLeft(timeToStart); + + if (timeToStart.hours === 0 && timeToStart.minutes === 0 && timeToStart.seconds === 0) { + setLotteryStatus('started'); // Update status to "started" + } + } else if (lotteryStatus === 'started') { + const timeToEnd = calculateTimeLeft(endDate); + setTimeLeft(timeToEnd); + + if (timeToEnd.hours === 0 && timeToEnd.minutes === 0 && timeToEnd.seconds === 0) { + setLotteryStatus('ended'); // Update status to "finished" + } + } }, 1000); return () => clearInterval(timer); // Clean up interval on component unmount - }, [startDate]); + }, [startDate, endDate, lotteryStatus, setLotteryStatus]); return ( -
+
{/* LotteryCountDown */} -
+
-

+

{timeLeft.hours}

-

+

hours

-
-
+
+
-
-

+
+

{timeLeft.minutes}

-

+

minutes

-
-
+
+
-

+

{timeLeft.seconds}

-

+

seconds

{/* Separator */} -
+
-
- -dan başlar +
+ + {lotteryStatus === 'not-started' + ? '- den başlar' + : lotteryStatus === 'started' + ? '- den gutatar' + : 'gutardy'} +
); diff --git a/components/lottery/spinWheel/SpinWheel.tsx b/components/lottery/spinWheel/SpinWheel.tsx index 2bf0c17..b96ae75 100644 --- a/components/lottery/spinWheel/SpinWheel.tsx +++ b/components/lottery/spinWheel/SpinWheel.tsx @@ -82,14 +82,14 @@ const SpinWheel = ({ setWinners }: IProps) => { />
)} -
+
{/* Wheel triangle */} wheel {/* Wheel */} @@ -98,8 +98,8 @@ const SpinWheel = ({ setWinners }: IProps) => { transform: `rotate(${rotation}deg)`, transition: isSpinning ? 'transform 5s ease-out' : '', }} - className="p-3 bg-[#5D5D72] rounded-full overflow-hidden"> -
+ className="lg:p-3 p-2 bg-[#5D5D72] rounded-full overflow-hidden"> +
wheel {
{/* Countdown */} -
- +
+ {countdown}
diff --git a/models/lottery/lottery.model.ts b/models/lottery/lottery.model.ts index e69de29..e260c11 100644 --- a/models/lottery/lottery.model.ts +++ b/models/lottery/lottery.model.ts @@ -0,0 +1,21 @@ +export interface ILottery { + data: Data; +} + +export interface Data { + id: number; + title: string; + description: string; + image: string; + start_time: string; + end_time: string; + sms_code: string; + winners: Winner[]; +} + +export interface Winner { + no: number; + client: string; + dt: string; + winner_no: number; +} diff --git a/package.json b/package.json index 419d61c..2a06cf9 100644 --- a/package.json +++ b/package.json @@ -58,3 +58,4 @@ "eslint-config-next": "^14.1.0" } } + diff --git a/tailwind.config.js b/tailwind.config.js index 4276783..791418e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -82,6 +82,7 @@ export const theme = { // Outline lightOutline: '#777680', lightOutlineVariant: '#C7C5D0', + lightPrimaryOutline: '#D8D6FF', }, fontSize: { // Display