Das Rad drehen und in einem bestimmten Sektor anhalten? ⇐ JavaScript

[Guest]

Ich versuche, eine Wheelspin-Komponente in Vue.js zu erstellen, habe aber überhaupt keine Ahnung, wie ich erkennen kann, auf welchen Sektor der Indikator gerade zeigt.
Und wie ich aufhören kann an einem bestimmten Index, nachdem der Spin gestartet wurde?
WheelSpin-Komponentencode https://playcode.io/2211878:

Code: Select all

{{ item.code }}




SPIN!





import { ref } from 'vue';

/* prettier-ignore */
const sectors = ref([
{ code: 'product1' },
{ code: 'product2' },
{ code: 'product3' },
{ code: 'product4' },
{ code: 'product5' },
{ code: 'product6' },
{ code: 'product7' },
{ code: 'product8' },
{ code: 'product9' },
{ code: 'product10' },
{ code: 'product11' },
{ code: 'product12' },
]);

const spinning = ref(false);

const onBtnSpin = () => {
console.log('Start spinning the wheel');
const randomRotation = Math.floor(Math.random() * (10 - 3 + 1) + 5);

spinning.value = true;

const totalRotation = randomRotation * 360;
let currentRotation = 0;
const sectorElement = document.querySelector('.wof-sectors') as HTMLElement;

const rotateWheel = () => {
if (currentRotation <  totalRotation) {
currentRotation += 360;
sectorElement.style.transform = `rotate(${currentRotation}deg)`;
requestAnimationFrame(rotateWheel);
} else {
spinning.value = false;
}
};

rotateWheel();
};



.wof-container {
width: 400px;
height: 400px;
border: 2px solid #000;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.wof-sectors {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform 3s cubic-bezier(0.33, 1, 0.68, 1);
}

.wof-sectors .sector {
width: 200px;
height: 200px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #555;
color: #fff;
font-weight: bold;
padding: 10px;
transform: rotate(calc(360deg / 12 * var(--i))) skew(60deg);
transform-origin: 100% 100%;
position: absolute;
top: 0;
left: 0;
position: absolute;
display: flex;
align-items: flex-end;
justify-content: flex-end;
border: 1px solid white;
}

.content {
width: 65%;
transform: skew(-60deg);
position: relative;
left: 20px;
}

.inner {
rotate: 196deg;
bottom: 8px;
position: relative;
display: flex;
align-items: center;
transform-origin: 35%;
}
.title {
pointer-events: none;
font-size: 14px;
text-align: right;
text-transform: uppercase;
}
.q-img {
position: absolute;
width: 30px;
height: auto;
}
.wof-center {
width: 100px;
height: 100px;
color: #fff;
background-color: #000;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
border-radius: 50%;
transition: 0.4s;
position: relative;
transition: 300ms all;
box-shadow: 0 0 0 4px #fff;
display: flex;
align-items: center;
justify-content: center;
}

.wof-center:hover {
box-shadow: 0 0 0 4px #fff, 0 0px 15px 5px rgba(255, 255, 255, 0.6);
cursor: pointer;
}
.wof-center::after {
content: '';
position: absolute;
top: -13px;
border: 10px solid transparent;
border-bottom-color: #fff;
border-top: none;
left: 50%;
margin-left: -10px;
}

Ich habe versucht, mit dem CSS-Ansatz zu drehen, bin mir aber nicht sicher, ob das eine gute Idee ist.
Ich habe auch keine Ahnung, wie ich das Rad in einem bestimmten Sektor anhalten kann.