Я реализовал приложение winwheel для браузера на одной машине, теперь я хочу синхронизировать его вращения для браузера любой машины.
Я использовал ..
Winwheel.js TweenMax.min.js
отлично работает на одной машине, но теперь я хочу синхронизировать все это.
Я публикую некоторую часть кода .. Winwheel должен вращаться одновременно для всех .. должен стать уникальнымрезультаты
Часть моего кода:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/Winwheel.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script>
setTimeout(function(){ startSpin() }, 20000);
setTimeout(function(){ timecounting() }, 1000);
let theWheel = new Winwheel({
'outerRadius' : 200,
'responsive' : true,
'innerRadius' : 75,
'textFontSize' : 72,
'textOrientation' : 'vertical',
'textAlignment' : 'outer',
'numSegments' : 10,
'segments' :
[
{'fillStyle' : '#ee1c24', 'text' : '1'},
{'fillStyle' : '#3cb878', 'text' : '2'},
{'fillStyle' : '#f6989d', 'text' : '3'},
{'fillStyle' : '#00aef0', 'text' : '4'},
{'fillStyle' : '#f26522', 'text' : '5'},
{'fillStyle' : '#e70697', 'text' : '6'},
{'fillStyle' : '#fff200', 'text' : '7'},
{'fillStyle' : '#f6989d', 'text' : '8'},
{'fillStyle' : '#ee1c24', 'text' : '9'},
{'fillStyle' : '#3cb878', 'text' : '0'},
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 10,
'spins' : 10,
'callbackFinished' : alertPrize,
'callbackSound' : playSound,
'soundTrigger' : 'pin'
},
'pins' :
{
'number' : 10,
'fillStyle' : 'silver',
'outerRadius': 10,
'responsive' : true,
}
});
var timecounter = 20;
var winning_no = '';
let audio = new Audio('tick.mp3');
function timecounting()
{
if(timecounter>1){
timecounter=timecounter-1;
setTimeout(function(){ timecounting() }, 1000);
$('#timeCntPara').html(timecounter);
$('#timeCntPara').show();
}else{
$('#timeCntPara').hide();
}
}
function playSound()
{
audio.play();
}
let wheelSpinning = false;
function startSpin()
{
$('#timeCntPara').hide();
if (wheelSpinning == false) {
theWheel.animation.spins = 10;
theWheel.startAnimation();
wheelSpinning = true;
}
}
var delay=0;
function alertPrize(indicatedSegment)
{
if (indicatedSegment.text == 'LOOSE TURN') {
$('#spinres').html('Sorry but you loose a turn.');
$("#spinres").show().delay(2000).fadeOut();
} else if (indicatedSegment.text == 'BANKRUPT') {
$('#spinres').html('Oh no, you have gone BANKRUPT!');
$("#spinres").show().delay(2000).fadeOut();
} else {
$('#spinres').html('You have won '+indicatedSegment.text);
$("#spinres").show().delay(2000).fadeOut();
}
theWheel.stopAnimation(false);
theWheel.rotationAngle = 0;
wheelSpinning = false;
// save spin records in db - start
winning_no = indicatedSegment.text;
s = {winning_no:winning_no};
jQuery.ajax({
type: "post",
url: 'php/save.php',
data: s,
success: function(response) {
wait(5000);
setTimeout(function(){ startSpin() }, 20000);
timecounter=20;
setTimeout(function(){ timecounting() }, 1000);
}
})
// save spin records in db - end
}
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
</script>
, пожалуйста, дайте мне идею ..