Öncelikle merhabalar , web siteme çarkı felek sistemi tasarladım ama çarkın durduğu anda gösterdiği ödül ile "Kazandınız" diye tasarladığım modaldaki ödüller birbirini tutmuyor
yardımcı olabilecek varmı ? açı hesaplama sorunu yaşıyorum...
<g class="sectors">
<path id="Prize_1" d="M365,365V35.9A328.1,328.1,0,0,0,200.5,80Z" transform="translate(0)"/>
<path id="Prize_2" d="M365,365,529.5,80A328.1,328.1,0,0,0,365,35.9Z" transform="translate(0)"/>
<path id="Prize_3" d="M365,365,650,200.5A328.5,328.5,0,0,0,529.5,80Z" transform="translate(0)"/>
<path id="Prize_4" d="M365,365H694.1A328.1,328.1,0,0,0,650,200.5Z" transform="translate(0)"/>
<path id="Prize_5" d="M365,365,650,529.5A328.1,328.1,0,0,0,694.1,365Z" transform="translate(0)"/>
<path id="Prize_6" d="M365,365,529.5,650A328.5,328.5,0,0,0,650,529.5Z" transform="translate(0)"/>
<path id="Prize_7" d="M365,365V694.1A328.1,328.1,0,0,0,529.5,650Z" transform="translate(0)"/>
<path id="Prize_8" d="M365,365,200.5,650A328.1,328.1,0,0,0,365,694.1Z" transform="translate(0)"/>
<path id="Prize_9" d="M365,365,80,529.5A328.5,328.5,0,0,0,200.5,650Z" transform="translate(0)"/>
<path id="Prize_10" d="M365,365H35.9A328.1,328.1,0,0,0,80,529.5Z" transform="translate(0)"/>
<path id="Prize_11" d="M365,365,80,200.5A328.1,328.1,0,0,0,35.9,365Z" transform="translate(0)"/>
<path id="Prize_12" d="M365,365,200.5,80A328.5,328.5,0,0,0,80,200.5Z" transform="translate(0)"/>
<g class="sector-texts">
<text transform="translate(365,365) rotate(15) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">İstanbul</text>
<text transform="translate(365,365) rotate(45) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Zonguldak</text>
<text transform="translate(365,365) rotate(75) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Diyarbakır</text>
<text transform="translate(365,365) rotate(105) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Çaycuma</text>
<text transform="translate(365,365) rotate(135) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Ankara</text>
<text transform="translate(365,365) rotate(165) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Silivri</text>
<text transform="translate(365,365) rotate(195) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Edirne</text>
<text transform="translate(365,365) rotate(225) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Kars</text>
<text transform="translate(365,365) rotate(255) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Kıyıköy</text>
<text transform="translate(365,365) rotate(285) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Maltepe</text>
<text transform="translate(365,365) rotate(315) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">İzmir</text>
<text transform="translate(365,365) rotate(345) translate(0,-250)" text-anchor="middle" fill="white" font-size="15" font-family="Arial" font-weight="bold">Çanakkale</text>
</g>
</g>deg = getRandomInt(360, 1080);
var spinWheel = gsap.timeline({
onUpdate: function() {
currentRotation = Math.round(gsap.getProperty(wheel[0], "rotation"));
tolerance = currentRotation - lastRotation;
if (Math.round(currentRotation) % (360 / 12) <= tolerance) {
if (indicator.progress() > 0.2 || indicator.progress() === 0) {
indicator.play(0);
}
}
lastRotation = currentRotation;
},
onComplete: function() {
// Pointer offset değerini SVG'ye göre ayarla (ok 15° sağa kaymış)
const pointerOffset = 15;
// Dönüş yönü saat yönünün tersine (GSAP pozitif rotation)
const effectiveRotation = (deg % 360 + pointerOffset) % 360;
// Sektör indeksi hesaplama
const sectorIndex = Math.floor(effectiveRotation / 30) % 12;
// Ödül dizisi SVG metinleriyle aynı sırada
const prizes = [
'İstanbul', // 15° (0. indeks)
'Zonguldak', // 45° (1)
'Diyarbakır', // 75° (2)
'Çaycuma', // 105° (3)
'Ankara', // 135° (4)
'Silivri', // 165° (5)
'Edirne', // 195° (6)
'Kars', // 225° (7)
'Kıyıköy', // 255° (8)
'Maltepe', // 285° (9)
'İzmir', // 315° (10)
'Çanakkale' // 345° (11)
];yada diğer bir fikrim path id üzerinden ilerlemek pointer hangisinin üstündeyse onu belirlemek