spin the wheel added

app/(main)/(lottery)/lottery/page.tsx

@@ -1,6 +1,7 @@
-import CountDown from '@/components/lottery/countDown/CountDown';
+import CountDown from "@/components/lottery/countDown/CountDown";
-import Image from 'next/image';
+import SpinWheel from "@/components/lottery/spinWheel/SpinWheel";
-import React from 'react';
+import Image from "next/image";
+import React from "react";
 
 const page = () => {
   return (
@@ -31,19 +32,25 @@ const page = () => {
             <div className="flex flex-col w-full p-8 gap-4">
               <div className="flex flex-col gap-2 pb-4 border-b border-lightOutlineVariant">
                 <h4 className="font-heading-3-regular">Results</h4>
-                <p className="font-base-medium">The results after each stage will be shown here.</p>
+                <p className="font-base-medium">
+                  The results after each stage will be shown here.
+                </p>
               </div>
 
               {[...Array(5)].map((item, index) => (
                 <div className="flex flex-col gap-2 pb-4 last:border-none border-b border-lightOutlineVariant">
-                  <h4 className="font-heading-5-regular">The winner of the {index + 1} stage:</h4>
+                  <h4 className="font-heading-5-regular">
+                    The winner of the {index + 1} stage:
+                  </h4>
                   <p className="font-base-medium">8 XX XX-XX-XX</p>
                 </div>
               ))}
             </div>
 
             {/* Sping the wheel */}
-            <div className="flex justify-center items-center w-full"></div>
+            <div className="flex justify-center items-center w-full h-full px-8 py-[29px]">
+              <SpinWheel />
+            </div>
           </div>
         </div>
       </section>
@@ -57,10 +64,11 @@ const page = () => {
                 <h3 className="font-heading-5-regular">Umumy düzgünler:</h3>
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(5)
-                    .fill(' ')
+                    .fill(" ")
                     .map((item) => (
                       <li className="font-small-regular">
-                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri eýelýär
+                        Ilkinji we dogry jogap beren sanawda ilkinji ýeri
+                        eýelýär
                       </li>
                     ))}
                 </ul>
@@ -70,7 +78,7 @@ const page = () => {
                 <h3 className="font-heading-5-regular">Üns beriň:</h3>
                 <ul className="list-disc flex flex-col gap-4 pl-[16px]">
                   {Array(1)
-                    .fill(' ')
+                    .fill(" ")
                     .map((item) => (
                       <li className="font-small-regular">SMS = 1 manat</li>
                     ))}

app/globals.css

@@ -93,7 +93,8 @@ html {
 }
 
 .text-stroke {
-  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
+  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
+    1px 1px 0 white;
 }
 
 .big-swiper .swiper-pagination-bullet {
@@ -121,20 +122,20 @@ html {
 
 .small-swiper .swiper-button-next:after {
   color: white;
-  content: url('/arrow-right-small.svg');
+  content: url("/arrow-right-small.svg");
 }
 .small-swiper .swiper-button-prev:after {
   color: white;
-  content: url('/arrow-left-small.svg');
+  content: url("/arrow-left-small.svg");
 }
 
 .big-swiper .swiper-button-next:after {
   color: white;
-  content: url('/arrow-right-big.svg');
+  content: url("/arrow-right-big.svg");
 }
 .big-swiper .swiper-button-prev:after {
   color: white;
-  content: url('/arrow-left-big.svg');
+  content: url("/arrow-left-big.svg");
 }
 
 video {
@@ -187,15 +188,15 @@ big {
     @apply bg-[#E6E6FA] rounded-xl py-3 px-4 placeholder:text-[#BCBCD6] outline-none;
   }
 
-  .calendar [aria-label='Go to next month'] {
+  .calendar [aria-label="Go to next month"] {
     @apply shadow-sm transition-all;
   }
 
-  .calendar [aria-label='Go to previous month'] {
+  .calendar [aria-label="Go to previous month"] {
     @apply shadow-sm transition-all;
   }
 
-  .day-styles [name='day'] {
+  .day-styles [name="day"] {
     @apply p-4 text-textDarkt leading-[140%] bg-purple-600 rounded-full;
   }
 
@@ -234,3 +235,7 @@ big {
 .font-small-regular {
   @apply -tracking-[1%] text-[14px] leading-[20px];
 }
+
+.text-countdown {
+  @apply font-roboto text-[60px] leading-[70px] -tracking-[1%];
+}

components/lottery/spinWheel/SpinWheel.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+// import React, { useRef, useState, useEffect } from "react";
+
+// const SpinWheel: React.FC = () => {
+//   const canvasRef = useRef<HTMLCanvasElement | null>(null);
+//   const [isSpinning, setIsSpinning] = useState<boolean>(false);
+//   const [countdown, setCountdown] = useState<number>(5);
+
+//   const totalSize = 554; // Total size including borders
+//   const outerBorderWidth = 12; // Outer border width
+//   const innerBorderWidth = 15; // Inner border width
+//   const wheelSize = totalSize - outerBorderWidth - innerBorderWidth; // Inner wheel size
+
+//   const drawWheel = (angleOffset: number = 0): void => {
+//     const canvas = canvasRef.current;
+//     if (!canvas) return;
+//     const ctx = canvas.getContext("2d");
+//     if (!ctx) return;
+
+//     const radius = wheelSize / 2;
+
+//     // Clear the canvas and set background color
+//     ctx.fillStyle = "#FFF";
+//     ctx.fillRect(0, 0, totalSize, totalSize);
+
+//     // Draw the outermost border
+//     ctx.beginPath();
+//     ctx.arc(totalSize / 2, totalSize / 2, totalSize / 2, 0, 2 * Math.PI);
+//     ctx.fillStyle = "#5D5D72"; // Outer border color
+//     ctx.fill();
+//     ctx.closePath();
+
+//     // Draw the inner border
+//     ctx.beginPath();
+//     ctx.arc(
+//       totalSize / 2,
+//       totalSize / 2,
+//       (totalSize - outerBorderWidth) / 2,
+//       0,
+//       2 * Math.PI
+//     );
+//     ctx.fillStyle = "#8589DE"; // Inner border color
+//     ctx.fill();
+//     ctx.closePath();
+
+//     // Draw the wheel
+//     const segmentAngle = (2 * Math.PI) / 24; // 24 segments
+//     for (let i = 0; i < 24; i++) {
+//       ctx.beginPath();
+//       ctx.moveTo(totalSize / 2, totalSize / 2);
+//       ctx.arc(
+//         totalSize / 2,
+//         totalSize / 2,
+//         radius,
+//         segmentAngle * i + angleOffset,
+//         segmentAngle * (i + 1) + angleOffset
+//       );
+//       ctx.fillStyle = i % 2 === 0 ? "#E1E0FF" : "#575992"; // Alternate colors
+//       ctx.fill();
+//       ctx.stroke();
+//       ctx.closePath();
+//     }
+
+//     // Draw central ellipse
+//     ctx.beginPath();
+//     ctx.ellipse(
+//       totalSize / 2,
+//       totalSize / 2,
+//       105 / 2,
+//       105 / 2,
+//       0,
+//       0,
+//       2 * Math.PI
+//     );
+//     ctx.fillStyle = "#FFF";
+//     ctx.fill();
+//     ctx.stroke();
+
+//     // Add countdown text in the ellipse
+//     ctx.fillStyle = "#79536A"; // Text color
+//     ctx.font = "60px Roboto";
+//     ctx.textAlign = "center";
+//     ctx.textBaseline = "middle";
+//     ctx.fillText(countdown.toString(), totalSize / 2, totalSize / 2);
+//   };
+
+//   const spinWheel = (): void => {
+//     if (isSpinning) return;
+
+//     setIsSpinning(true);
+//     setCountdown(5); // Reset countdown
+
+//     let currentAngle = 0;
+//     const spinDuration = 5000; // Spin for 5 seconds
+//     const spinStartTime = Date.now();
+
+//     // Countdown Timer Logic
+//     const countdownInterval = setInterval(() => {
+//       setCountdown((prev) => {
+//         if (prev === 0) {
+//           clearInterval(countdownInterval);
+//           return 0;
+//         }
+//         return prev - 1;
+//       });
+//     }, 1000);
+
+//     // Spinning Logic
+//     const spin = () => {
+//       const elapsedTime = Date.now() - spinStartTime;
+
+//       if (elapsedTime >= spinDuration) {
+//         setIsSpinning(false);
+//         return;
+//       }
+
+//       // Update angle
+//       const progress = elapsedTime / spinDuration;
+//       const easedProgress = easeOutCubic(progress); // Easing for smooth deceleration
+//       currentAngle = easedProgress * 10 * Math.PI; // Spin multiple times
+
+//       drawWheel(currentAngle);
+//       requestAnimationFrame(spin);
+//     };
+
+//     spin();
+//   };
+
+//   // Easing function for smooth deceleration
+//   const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3);
+
+//   // Initial draw
+//   useEffect(() => {
+//     drawWheel();
+//   }, [countdown]);
+
+//   return (
+//     <div className="flex flex-col items-center justify-center">
+//       <canvas
+//         ref={canvasRef}
+//         width={totalSize}
+//         height={totalSize}
+//         className="rounded-full shadow-lg"
+//       ></canvas>
+//       <button
+//         onClick={spinWheel}
+//         disabled={isSpinning}
+//         className={`mt-4 px-6 py-2 rounded-full text-white font-bold ${
+//           isSpinning
+//             ? "bg-gray-400 cursor-not-allowed"
+//             : "bg-blue-500 hover:bg-blue-700"
+//         }`}
+//       >
+//         {isSpinning ? "Spinning..." : "Spin the Wheel"}
+//       </button>
+//     </div>
+//   );
+// };
+
+// export default SpinWheel;
+
+import { useState } from "react";
+
+const SpinWheel: React.FC = () => {
+  const [isSpinning, setIsSpinning] = useState(false);
+  const [countdown, setCountdown] = useState(5);
+  const [rotation, setRotation] = useState(0);
+
+  const spinWheel = () => {
+    if (isSpinning) return;
+
+    setIsSpinning(true);
+    setCountdown(5); // Reset countdown
+    const totalSpin = rotation + 360 * 10 + Math.random() * 360; // 10 full rotations + random offset
+    setRotation(totalSpin); // Update rotation to a new value
+
+    // Countdown logic
+    const countdownInterval = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev === 1) {
+          clearInterval(countdownInterval);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    // Reset everything after the spin duration
+    setTimeout(() => {
+      setIsSpinning(false);
+      setRotation((prev) => prev % 360); // Normalize the rotation
+      setCountdown(5); // Reset countdown for the next spin
+    }, 5000); // Spin duration
+  };
+
+  return (
+    <div className="flex flex-col items-center">
+      {/* Outer Border */}
+      <div className="relative w-[554px] h-[554px] rounded-full border-[12px] border-[#5D5D72] flex items-center justify-center">
+        {/* Inner Border */}
+        <div
+          className="relative w-[530px] h-[530px] rounded-full border-[15px] border-[#8589DE] overflow-hidden"
+          style={{
+            transform: `rotate(${rotation}deg)`,
+            transition: isSpinning ? "transform 5s ease-out" : "",
+          }}
+        >
+          {/* Wheel Segments */}
+          <div
+            className="absolute inset-0 rounded-full bg-white"
+            style={{
+              background: `conic-gradient(
+                #E1E0FF 0% 4.166%,
+                #575992 4.166% 8.333%,
+                #E1E0FF 8.333% 12.5%,
+                #575992 12.5% 16.666%,
+                #E1E0FF 16.666% 20.833%,
+                #575992 20.833% 25%,
+                #E1E0FF 25% 29.166%,
+                #575992 29.166% 33.333%,
+                #E1E0FF 33.333% 37.5%,
+                #575992 37.5% 41.666%,
+                #E1E0FF 41.666% 45.833%,
+                #575992 45.833% 50%,
+                #E1E0FF 50% 54.166%,
+                #575992 54.166% 58.333%,
+                #E1E0FF 58.333% 62.5%,
+                #575992 62.5% 66.666%,
+                #E1E0FF 66.666% 70.833%,
+                #575992 70.833% 75%,
+                #E1E0FF 75% 79.166%,
+                #575992 79.166% 83.333%,
+                #E1E0FF 83.333% 87.5%,
+                #575992 87.5% 91.666%,
+                #E1E0FF 91.666% 95.833%,
+                #575992 95.833% 100%
+              )`,
+            }}
+          ></div>
+        </div>
+
+        {/* Countdown Display */}
+        <div className="absolute w-[105px] h-[105px] rounded-full bg-white flex items-center justify-center shadow-[0px_1px_3px_1px_rgba(0,0,0,0.5),_0px_1px_2px_0px_rgba(0,0,0,0.3)]">
+          <span className="text-[#79536A] font-roboto text-[60px] leading-[70px] tracking-[-1%]">
+            {countdown}
+          </span>
+        </div>
+      </div>
+
+      {/* Spin Button */}
+      <button
+        onClick={spinWheel}
+        disabled={isSpinning}
+        className={`mt-6 px-6 py-3 rounded-full text-white font-bold ${
+          isSpinning
+            ? "bg-gray-400 cursor-not-allowed"
+            : "bg-blue-500 hover:bg-blue-700"
+        }`}
+      >
+        {isSpinning ? "Spinning..." : "Spin the Wheel"}
+      </button>
+    </div>
+  );
+};
+
+export default SpinWheel;