spin the wheel added
This commit is contained in:
Kakabay
parent
49464e0c2e
commit
8ae7b08a44
|
|
@ -1,6 +1,7 @@
|
|||
import CountDown from '@/components/lottery/countDown/CountDown';
|
||||
import Image from 'next/image';
|
||||
import React from 'react';
|
||||
import CountDown from "@/components/lottery/countDown/CountDown";
|
||||
import SpinWheel from "@/components/lottery/spinWheel/SpinWheel";
|
||||
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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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%];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue