Code:
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/webcode24h/libs@main/brizyplus/vongquaythuong/Winwheel.min_v0.1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/webcode24h/libs@main/brizyplus/vongquaythuong/TweenMax.min.js"></script>
<div id="vong-quay-may-man" align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="552" height="552" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="434" height="434">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
</div>
<script>
//tu dong mo popup
document.querySelector("div[vongquay=open]").classList.add("brz-popup2--opened");
document.querySelector(".brz-popup2__close").classList.remove("brz-hidden");
//Thong so vong quay
let duration = 5; //Thoi gian ket thuc vong quay
let spins = 10; //Quay nhanh hay cham 3, 8, 15
let theWheel = new Winwheel({
'numSegments': 8, // Chia 8 phan bang nhau
'outerRadius': 212, // Dat ban kinh vong quay
'textFontSize': 18, // Dat kich thuoc chu
'rotationAngle': 0, // Dat goc vong quay tu 0 đen 360 đo.
'segments':
[{
'fillStyle': '#eae56f',
'text': 'Voucher 50%',
'voucher': 'GDJERT1'
}, {
'fillStyle': '#89f26e',
'text': 'Voucher 30$',
'voucher': '5GHJLG2'
}, {
'fillStyle': '#7de6ef',
'text': 'Voucher 10$',
'voucher': 'ADGKGD3'
}, {
'fillStyle': '#e7706f',
'text': 'Voucher 15$',
'voucher': 'FJOFSS4'
}, {
'fillStyle': '#eae56f',
'text': 'Voucher 10$',
'voucher': 'WEYVDT5'
}, {
'fillStyle': '#89f26e',
'text': 'Voucher 15$',
'voucher': 'GDRKHT6'
}, {
'fillStyle': '#7de6ef',
'text': 'Voucher 10$',
'voucher': 'FSTIFY7'
}, {
'fillStyle': '#e7706f',
'text': 'Voucher 20$',
'voucher': 'JGFTUI8'
}], // Cac thanh phan bao gom mau sac va van ban.
'animation': {
'type': 'spinToStop',
'duration': duration,
'spins': spins,
'callbackSound': playSound, //Ham goi am thanh khi quay
'soundTrigger': 'pin', //Chi dinh chan la de kich hoat am thanh
'callbackFinished': alertPrize, //Ham hien thi ket qua trung giai thuong
},
'pins': {
'number': 32 //So luong chan. Chia deu xung quanh vong quay.
}
});
//Kiem tra vong quay
let wheelSpinning = false;
//Tao am thanh va tai tap tin tick.mp3.
let audio = new Audio('https://cdn.jsdelivr.net/gh/webcode24h/libs@main/brizyplus/vongquaythuong/tick.mp3');
function playSound() {
audio.pause();
audio.currentTime = 0;
audio.play();
}
//stopAngle
function stopAngle() {
//Ta co: 360 do chia 8 bằng 45 do cho moi giai thuong.
//VD: Giai 3 => Co goc do tu 91 den 135.
let start = 91;
let stop = Math.floor((Math.random() * 93)); //Gia tri cao nhat 44
let stopAt = start + stop;
theWheel.animation.stopAngle = stopAt;
}
//startSpin
document.addEventListener('change', (event) => {
if (document.querySelector("#quaythuong form div.brz-forms2__alert--success") != null) {
if (wheelSpinning == false) {
//dat ket qua mong muon
stopAngle();
//Ham bat dau quay
theWheel.startAnimation();
//Khoa vong quay
wheelSpinning = true;
}
}
});
//Result
function alertPrize(indicatedSegment) {
document.querySelector('#voucher-code strong').innerText = indicatedSegment.voucher;
//show code voucher
var showVoucher = document.querySelectorAll('.wtr-hidden');
Array.from(showVoucher).forEach(showHidden => {
showHidden.classList.toggle('wtr-true');
});
}
</script>
