Я реализовал приложение winwheel для одного браузера, теперь я хочу синхронизировать его вращения для любого доступа - PullRequest
0 голосов
/ 13 февраля 2019

Я реализовал приложение 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>

, пожалуйста, дайте мне идею ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...