wheel Spinning

<?php
// Exit if accessed directly
if( ! defined ( 'ABSPATH' ) )
    exit;

/**
 * Template Name: Dev Template
 *
 * @package WordPress
 * @subpackage divi-child
 * @since divi
 */
get_header ();
?>
<link rel="stylesheet" href="https://acea1.admaiora.com/wheel/main.css" type="text/css" />
<script type="text/javascript" src="https://acea1.admaiora.com/wheel/Winwheel.js"></script>
<style type="text/css">
    .sc_container{
        display:inline-block;
        padding-top:150px;
    }
    .power_controls{
        width:auto;
        margin:0px !important;
        text-align:center;
        margin-top:30px !important;
    }
    .power_controls .play_btn_wrapper{
        margin-bottom:15px;
    }
    .custom_play_bg{
        position:relative;
    }
    .custom_play_bg::after {
        content: "";
        width: 33px;
        height: 53px;
        background-image: url(https://acea1.admaiora.com/wheel/custom_pointer.png);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        left: calc(50% - 2px);
        transform: translateX(-50%);
        top: 37px;
        z-index: 2;
    }
    .custom_play_bg #canvas{
        position:relative;
        z-index:2;
    }
    .custom_play_bg::before {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 242px;
        height: 8px;
        border-radius: 21px;
        background-color: #ba5f5f;
        filter: blur(8px);
        z-index: -1;
    }
    .custom_play_bg .fixed_wheel_center_point {
        position: absolute;
        top: calc(50% + 2px);
        right: unset;
        left: 50%;
        z-index: 2;
        transform: translate(-50%,-50%);
    }
</style>
<div class="sc_container">
    <div class="custom_play_bg" style="background-image: url(https://acea1.admaiora.com/wheel//wheel_back.png);display:inline-block;">
        <canvas id="canvas" width="315" height="418">
            <p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
        </canvas>
        <img src="https://acea1.admaiora.com/wheel/fixed_wheel_center_point.png" class="fixed_wheel_center_point" alt="no-img" />
    </div>
    <div class="power_controls">
        <div class="play_btn_wrapper">
            <?php echo do_shortcode ( '[custom_wheel_button]' ); ?>
        </div>
    </div>
</div>
<script>
    const positive_angle = ["0-21", "69-111", "159-201", "250-292", "339-360"];
    var positive_array = [];
    const negative_angle = ["24-66", "114-156", "204-247", "295-336"];
    var negative_array = [];

    positive_angle.forEach(function (item, index) {
        if (item) {
            var indi_item = item.split("-");
            for (let i = parseInt(indi_item[0]); i <= parseInt(indi_item[1]); i++) {
                positive_array.push(i);
            }
        }
    });
    negative_angle.forEach(function (item, index) {
        if (item) {
            var indi_item = item.split("-");
            for (let i = parseInt(indi_item[0]); i <= parseInt(indi_item[1]); i++) {
                negative_array.push(i);
            }
        }
    });
    let theWheel = new Winwheel({
        'numSegments': 4, // Specify number of segments.
        'outerRadius': 150, // Set outer radius so wheel fits inside the background.
        'drawMode': 'image', // drawMode must be set to image.
        'drawText': true, // Need to set this true if want code-drawn text on image wheels.
        'textFontSize': 12, // Set text options as desired.
        'textOrientation': 'curved',
        'textDirection': 'reversed',
        'textAlignment': 'outer',
        'textMargin': 5,
        'textFontFamily': 'monospace',
        'textStrokeStyle': 'black',
        'textLineWidth': 2,
        'textFillStyle': 'white',
        'animation': // Specify the animation to use.
                {
                    'type': 'spinToStop',
                    'duration': 5, // Duration in seconds.
                    'spins': 8, // Number of complete spins.
                    'stopAngle':50,
                    'callbackFinished': alertPrize,
                }
    });

    let loadedImg = new Image();

    loadedImg.onload = function ()
    {
        theWheel.wheelImage = loadedImg;    // Make wheelImage equal the loaded image object.
        theWheel.draw();                    // Also call draw function to render the wheel.
//        theWheel.animation.stopAngle = 20;
    }

    loadedImg.src = "https://acea1.admaiora.com/wheel/planes1.png";
    let wheelPower = 0;
    let wheelSpinning = false;

    function powerSelected(powerLevel)
    {
        if (wheelSpinning == false) {
            document.getElementById('pw1').className = "";
            document.getElementById('pw2').className = "";
            document.getElementById('pw3').className = "";

            if (powerLevel >= 1) {
                document.getElementById('pw1').className = "pw1";
            }

            if (powerLevel >= 2) {
                document.getElementById('pw2').className = "pw2";
            }

            if (powerLevel >= 3) {
                document.getElementById('pw3').className = "pw3";
            }

            wheelPower = powerLevel;
        }
    }
    function startSpin(flag)
    {
        if (wheelSpinning == false) {
            var stopAt = 0;
            if (flag == true) {
                const positive_array_random = Math.floor(Math.random() * positive_array.length);
                stopAt = positive_array[positive_array_random];
            } else {
                const negative_array_random = Math.floor(Math.random() * negative_array.length);
                stopAt = negative_array[negative_array_random];
            }
            theWheel.animation.stopAngle = stopAt;
            theWheel.startAnimation();
            wheelSpinning = true;
        }
    }
    function alertPrize(indicatedSegment)
    {
//        alert("The wheel stopped on " + indicatedSegment.text);
    }
</script>

<?php get_footer (); ?>