
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?php 

header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1.
header("Pragma: no-cache"); // HTTP 1.0.
header("Expires: 0 "); // Proxies.

// Include and instantiate the class.
require_once '../game/Mobile-Detect-2.8.37/Mobile_Detect.php';
$detect = new Mobile_Detect;

include "../login/landing_api.php";

is_active_session();

$last_win_date = $_SESSION['last_win_date'];
$cst_id = $_SESSION['cst_id'];
$unredeem_wins = check_unredeem_win($cst_id);
$cur_date = date('Y-m-d');

$date1 = new DateTime($cur_date);
$date2 = new DateTime($last_win_date);
$period =  $date1->diff($date2)->days;

if($last_win_date == '' || $unredeem_wins == 0){

//$newURL = 'https://funlandksa.com/luckywheel/game/';

//header('Location: '.$newURL);      
    
}else{

if($period >= '15'){

//$newURL = 'https://funlandksa.com/luckywheel/game/';

//header('Location: '.$newURL);    
    
}else{

$newURL = 'https://funlandksa.com/luckywheel/wait/';

header('Location: '.$newURL);      
    
}

}


?>

<html>
    <head>
        <title>Funland | Everyone is winner</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="main.css<?php echo "?id=".rand(); ?>" type="text/css" />
        <script type="text/javascript" src="Winwheel.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>        

<style>
body{
 background-image: url("../login/images/bg.jpg");
 background-color: #cccccc; 
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}  
html, body { overflow-x: hidden; }
    
</style>
        
    </head>
    <body>

<div class="container">
    <!--
<div style="
    top: 15px;
    left: 201px;
    position: absolute;
">
<img src="../login/images/funland-logo.png" style="height: 57px;" >    
</div> -->

<div style="
    top: 15px;
    right: 201px;
    position: absolute;
">
<img src="../login/images/hashtag.png" style="height: 57px;" >    
</div>  

<div style="height:64px;"></div> 
    
                <div  class="the_wheel wheel-back-kd" align="center" >
                    <canvas id="canvas" width="400" height="400" class="canvas-kd">
                        <p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
                    </canvas>
</div>
<div class="d-none d-sm-block" style="
    top: 350px;
    left: 201px;
    position: absolute;
">
<img src="../login/images/spin-en.png" onClick="startSpin();playAudio();" style="height: 86px;" >    
</div>

<div class="d-none d-sm-block" style="
    top: 350px;
    right: 201px;
    position: absolute;
">
<img src="../login/images/spin.png" onClick="startSpin();playAudio();" style="height: 86px;" >    
</div>

<div class="d-block d-sm-none" style="
    top: 509px;
    right: 56px;
    position: absolute;
">
<img src="../login/images/spin.png" onClick="startSpin();playAudio();" style="height: 86px;" >    
</div>
                    
                


<audio id="myAudio">
  <source src="wheel.ogg" type="audio/ogg">
  <source src="wheel.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</div>

<div style="height:64px;"></div>
<div style="height:64px;"></div>
<div style="height:64px;"></div>

    </body>

        <script>
            // Create new wheel object specifying the parameters at creation time.
            let theWheel = new Winwheel({
                'outerRadius'     : <?php if ( $detect->isMobile() ) { echo '100';}else{ echo '145';} ?>,        // Set outer radius so wheel fits inside the background.

                'numSegments'     : 8,         // Specify number of segments.
				'drawMode'       : 'segmentImage',
                'imageDirection' : 'E', 
                'segments'        :             // Define segments including colour and text.
                [                               // font size and test colour overridden on backrupt segments.
                
                <?php 
if ( $detect->isMobile() ) {
 
?>
                
                   {'image' : 'price-tags-01-min-m.png', 'text' : '120'},
				   {'image' : 'price-tags-03-min-m.png', 'text' : '100'},
				   {'image' : 'price-tags-05-min-m.png', 'text' : '85'},
				   {'image' : 'price-tags-07-min-m.png', 'text' : '75'},
				   {'image' : 'price-tags-02-min-m.png', 'text' : '50'},
				   {'image' : 'price-tags-04-min-m.png', 'text' : '35'},
				   {'image' : 'price-tags-06-min-m.png', 'text' : '25'},
				   {'image' : 'price-tags-08-min-m.png', 'text' : '150'}
<?php }else{ ?>
    
     {'image' : 'price-tags-01.png', 'text' : '120'},
				   {'image' : 'price-tags-03.png', 'text' : '100'},
				   {'image' : 'price-tags-05.png', 'text' : '85'},
				   {'image' : 'price-tags-07.png', 'text' : '75'},
				   {'image' : 'price-tags-02.png', 'text' : '50'},
				   {'image' : 'price-tags-04.png', 'text' : '35'},
				   {'image' : 'price-tags-06.png', 'text' : '25'},
				   {'image' : 'price-tags-08.png', 'text' : '150'}
    
<?php }?>	
                ],
                'animation' :           // Specify the animation to use.
                {
                    'type'     : 'spinToStop',
                    'duration' : 6,    // Duration in seconds.
                    'spins'    : 5,     // Default number of complete spins.
                    'callbackFinished' : alertPrize,
                    'callbackSound'    : playSound,   // Function to call when the tick sound is to be triggered.
                    'soundTrigger'     : 'pin'        // Specify pins are to trigger the sound, the other option is 'segment'.
                },
                'pins' :				// Turn pins on.
                {
                    'number'     : 8,
                    'fillStyle'  : 'silver',
                    'outerRadius': 4,
                }
            });
			
			
		

            // Loads the tick audio sound in to an audio object.
            let audio = new Audio('tick.ogg');

            // This function is called when the sound is to be played.
            function playSound()
            {
                // Stop and rewind the sound if it already happens to be playing.
                audio.pause();
                audio.currentTime = 0;

                // Play the sound.
                audio.play();
            }

            // Vars used by the code in this page to do power controls.
            let wheelPower    = 0;
            let wheelSpinning = false;

            // -------------------------------------------------------
            // Function to handle the onClick on the power buttons.
            // -------------------------------------------------------
            function powerSelected(powerLevel)
            {
                // Ensure that power can't be changed while wheel is spinning.
                if (wheelSpinning == false) {
                    // Reset all to grey incase this is not the first time the user has selected the power.
                    document.getElementById('pw1').className = "";
                    document.getElementById('pw2').className = "";
                    document.getElementById('pw3').className = "";

                    // Now light up all cells below-and-including the one selected by changing the class.
                    if (powerLevel >= 1) {
                        document.getElementById('pw1').className = "pw1";
                    }

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

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

                    // Set wheelPower var used when spin button is clicked.
                    wheelPower = powerLevel;

                    // Light up the spin button by changing it's source image and adding a clickable class to it.
                    document.getElementById('spin_button').src = "spin_on.png";
                    document.getElementById('spin_button').className = "clickable";
                }
            }

            // -------------------------------------------------------
            // Click handler for spin button.
            // -------------------------------------------------------
            function startSpin()
            {
               // This formula always makes the wheel stop somewhere inside prize 3 at least
        // 1 degree away from the start and end edges of the segment.
        let stopAt = (<?php echo get_rand_gift(); ?> + Math.floor((Math.random() * 43)))
 
        // Important thing is to set the stopAngle of the animation before stating the spin.
        theWheel.animation.stopAngle = stopAt;
 
        // May as well start the spin from here.
        theWheel.startAnimation();
            }

            // -------------------------------------------------------
            // Function for reset button.
            // -------------------------------------------------------
            function resetWheel()
            {
                theWheel.stopAnimation(false);  // Stop the animation, false as param so does not call callback function.
                theWheel.rotationAngle = 0;     // Re-set the wheel angle to 0 degrees.
                theWheel.draw();                // Call draw to render changes to the wheel.

                document.getElementById('pw1').className = "";  // Remove all colours from the power level indicators.
                document.getElementById('pw2').className = "";
                document.getElementById('pw3').className = "";

                wheelSpinning = false;          // Reset to false to power buttons and spin can be clicked again.
            }

            // -------------------------------------------------------
            // Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
            // -------------------------------------------------------
            function alertPrize(indicatedSegment)
            {
                // Just alert to the user what happened.
                // In a real project probably want to do something more interesting than this with the result.
                if (indicatedSegment.text == 'LOOSE TURN') {
                    alert('Sorry but you loose a turn.');
                } else if (indicatedSegment.text == 'BANKRUPT') {
                    alert('Oh no, you have gone BANKRUPT!');
                } else {
                   // alert("You have won " + indicatedSegment.text
				   
				   location.href = 'http://funlandksa.com/luckywheel/thank-you/?prize=' + indicatedSegment.text;
                }
            }
        </script> 
<script>
var x = document.getElementById("myAudio"); 

function playAudio() { 
  x.play(); 
} 
</script>

</html>
