фзш фтв куы ыефкеув

2024-12-09 18:35:43 +05:00 · 2024-12-09 18:35:43 +05:00 · 66680e51e6
parent 8b0eb41a30
commit 66680e51e6
9 changed files with 177 additions and 62 deletions
--- 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<IAllVotes> {
+  public static async getLottery(): Promise<ILottery> {
    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<IVote> {
+  public static async getLotteryById(lottery_id: string): Promise<ILottery> {
    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));
  }

  // ============================================================================================
--- a/app/(main)/lottery/[lottery_id]/page.tsx
+++ b/app/(main)/lottery/[lottery_id]/page.tsx
@ -55,8 +55,10 @@ const page = ({ params }: IParams) => {
                <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                  {Array(1)
                    .fill(' ')
-                    .map((item) => (
-                      <li className="font-small-regular">SMS = 1 manat</li>
+                    .map((item, i) => (
+                      <li className="font-small-regular" key={i}>
+                        SMS = 1 manat
+                      </li>
                    ))}
                </ul>
              </div>
--- 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<ILottery>();
+  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 (
-    <div className="flex flex-col gap-[128px] font-roboto pt-[64px] pb-[128px] text-lightOnSurface">
-      <section className="">
-        <div className="container">
-          <div className="flex flex-col gap-[32px]">
-            <h1 className="font-display-1-regular text-center">Bije</h1>
-            <div className="mb-8">
-              <Image
-                src="/banner-lottery.jpg"
-                width={1416}
-                height={177}
-                alt="banner"
-                className="rounded-[12px]"
-              />
+    <div className="flex flex-col gap-[128px] font-roboto md:pt-[64px] sm:pt-[48px] pt-[40px] pb-[128px] text-lightOnSurface">
+      {data && (
+        <section className="">
+          <div className="container">
+            <div className="flex flex-col md:gap-[32px] gap-[24px]">
+              <div className="flex flex-col gap-[24px] items-center ">
+                <h1 className="sm:font-display-1-regular text-[32px] leading-[40px] text-center">
+                  {data.data.title}
+                </h1>
+                <p className="max-w-[600px] w-full font-base-regular text-center">
+                  {data.data.description}
+                </p>
+                <p className="p-2 font-heading-5-medium bg-lightTertiaryContainer text-lightOnTertiaryContainer">
+                  SMS-kod: {data.data.sms_code}
+                </p>
+              </div>
+              <div className="md:mb-8 sm:mb-[40px] mb-[16px]">
+                <Image
+                  src="/banner-lottery.jpg"
+                  width={1416}
+                  height={177}
+                  alt="banner"
+                  className="rounded-[12px] object-cover h-[177px]"
+                />
+              </div>
+
+              {/* {lotteryStatus === 'started' ||
+                (lotteryStatus === 'not-started' && (
+                  <LotteryCountDown
+                    startDate={data.data.start_time}
+                    endDate={data.data.end_time}
+                    lotteryStatus={lotteryStatus}
+                    setLotteryStatus={setLotteryStatus}
+                  />
+                ))} */}
+
+              {lotteryStatus === 'not-started' || lotteryStatus === 'started' ? (
+                <LotteryCountDown
+                  // startDate={data.data.start_time}
+                  // endDate={data.data.end_time}
+                  startDate={'2024-12-10 16:15:00'}
+                  endDate={'2024-12-11 16:00:00'}
+                  lotteryStatus={lotteryStatus}
+                  setLotteryStatus={setLotteryStatus}
+                />
+              ) : null}
            </div>
-
-            <LotteryCountDown startDate="2024-11-25" />
          </div>
-        </div>
-      </section>
+        </section>
+      )}

-      <LotteryWinnersSection />
+      {lotteryStatus === 'started' || (lotteryStatus === 'ended' && <LotteryWinnersSection />)}

      <section>
        <div className="container">
@ -49,8 +102,10 @@ const page = () => {
                <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                  {Array(1)
                    .fill(' ')
-                    .map((item) => (
-                      <li className="font-small-regular">SMS = 1 manat</li>
+                    .map((item, i) => (
+                      <li className="font-small-regular" key={i}>
+                        SMS = 1 manat
+                      </li>
                    ))}
                </ul>
              </div>
--- 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];
 }
--- 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<SetStateAction<'not-started' | 'started' | 'ended'>>;
 }

-const LotteryCountDown: React.FC<LotteryCountDownProps> = ({ startDate }) => {
+const LotteryCountDown: React.FC<LotteryCountDownProps> = ({
+  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 (
-    <div className="bg-lightSurfaceContainer pb-8 flex flex-col w-full gap-2 rounded-[12px]">
+    <div className="bg-lightPrimaryContainer sm:pb-4 pb-2 flex flex-col w-full gap-2 rounded-[12px] text-lightOnPrimaryContainer">
      {/* LotteryCountDown */}
-      <div className="flex items-center gap-6">
+      <div className="flex items-center sm:gap-6 gap-2 justify-between">
        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
            {timeLeft.hours}
          </h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
            hours
          </h4>
        </div>

        <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
        </div>

-        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+        <div className="flex flex-col items-center justify-center flex-1 sm:p-6 p-4 pb-3">
+          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
            {timeLeft.minutes}
          </h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
            minutes
          </h4>
        </div>

        <div className="flex flex-col gap-3">
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
-          <div className="w-3 h-3 rounded-full bg-lightOutlineVariant"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
+          <div className="w-3 h-3 rounded-full bg-lightPrimaryOutline"></div>
        </div>

        <div className="flex flex-col items-center justify-center flex-1 p-6">
-          <h3 className="text-[80px] leading-[88px] -tracking-[1%]">
+          <h3 className="md:text-[80px] sm:text-[56px] text-[28px] md:leading-[88px] sm:leading-[64px] leading-[36px] -tracking-[1%]">
            {timeLeft.seconds}
          </h3>
-          <h4 className="font-medium text-[20px] leading-[28px] -tracking-[1%]">
+          <h4 className="font-medium md:text-[20px] sm:text-[18px] text-[14px] sm:leading-[28px] leading-[20px] -tracking-[1%] text-lightOnSurfaceVariant">
            seconds
          </h4>
        </div>
      </div>

      {/* Separator */}
-      <div className="w-full bg-lightOutlineVariant h-[1px]"></div>
+      <div className="w-full bg-lightPrimaryOutline h-[1px]"></div>

-      <div className="flex items-center justify-center text-lightOnSurface font-heading-1-regular">
-        <span>-dan başlar</span>
+      <div className="flex items-center justify-center text-lightOnSurfaceVariant md:font-heading-1-regular md:text-[20px] sm:text-[18px] sm:leading-[28px] text-[14px] leading-[20px]">
+        <span>
+          {lotteryStatus === 'not-started'
+            ? '- den başlar'
+            : lotteryStatus === 'started'
+            ? '- den gutatar'
+            : 'gutardy'}
+        </span>
      </div>
    </div>
  );
--- a/components/lottery/spinWheel/SpinWheel.tsx
+++ b/components/lottery/spinWheel/SpinWheel.tsx
@ -82,14 +82,14 @@ const SpinWheel = ({ setWinners }: IProps) => {
          />
        </div>
      )}
-      <div className="relative rounded-full w-[554px] h-[554px]">
+      <div className="relative rounded-full max-w-[554px] max-h-[554px] w-full h-full">
        {/* Wheel triangle */}
        <Image
          src={'/wheel-triangle.svg'}
          alt="wheel"
          height={34}
          width={35}
-          className="absolute z-10 left-[50%] -translate-x-[50%] top-7"
+          className="absolute z-10 left-[50%] -translate-x-[50%] lg:top-7 top-[17px]"
        />

        {/* 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">
-          <div className="p-[15px] bg-[#8589DE] rounded-full ">
+          className="lg:p-3 p-2 bg-[#5D5D72] rounded-full overflow-hidden">
+          <div className="lg:p-[15px] p-[10px] bg-[#8589DE] rounded-full ">
            <Image
              src={'/wheel-circle-inner.png'}
              alt="wheel"
@ -111,8 +111,8 @@ const SpinWheel = ({ setWinners }: IProps) => {
        </div>

        {/* Countdown */}
-        <div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] w-[105px] h-[105px] rounded-full z-10 bg-white flex items-center justify-center ">
-          <span className="text-[#79536A] font-roboto text-[60px] leading-[70px] tracking-[-1%]">
+        <div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] lg:w-[105px] lg:h-[105px] h-[75px] w-[75px] rounded-full z-10 bg-white flex items-center justify-center ">
+          <span className="text-[#79536A] font-roboto lg:text-[60px] text-[45px]  leading-[70px] tracking-[-1%]">
            {countdown}
          </span>
        </div>
--- 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;
+}
--- a/package.json
+++ b/package.json
@ -58,3 +58,4 @@
    "eslint-config-next": "^14.1.0"
  }
 }
+
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -82,6 +82,7 @@ export const theme = {
      // Outline
      lightOutline: '#777680',
      lightOutlineVariant: '#C7C5D0',
+      lightPrimaryOutline: '#D8D6FF',
    },
    fontSize: {
      // Display