<?php 
ob_start();
session_start();
if($_SESSION['frontuserid']=="")
{header("location:login");exit();
}

$userid = $_SESSION['frontuserid'];

?>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <?php 
  include 'head.php';
  
  $sql="select* FROM `gameOver` WHERE id='1'";
$query=mysqli_query($con,$sql);
$role=mysqli_fetch_array($query);
$easy = $role['easy'];
$medium = $role['medium'];
$hard = $role['hard'];
  ?>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/game.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
    }
    .home[data-v-432e6ed0]{   
        background:#161824;
        margin-top: 0px;
        padding-top:0px;
        padding-bottom:0px;
    height: 100vh;}
    /*body {*/
    /*    font-family: "Montserrat", sans-serif;*/
    /*  margin: 0;*/
    /*  overflow-x: hidden;*/
    /*  display: flex;*/
    /*  flex-direction: column;*/
    /*  align-items: center;*/
    /*  justify-content: center;*/
    /*  min-height: 100vh;*/
    /*  padding: 1rem;*/
    /*}*/

    .wrapper {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-behavior: smooth;
      width: 100%;
      max-width: 100%;
      padding-bottom: 1rem;
      position: relative;
      padding:0px;
    }

    .tile {
      flex: 0 0 auto;
      width: 35vw;
      height: 50vw;
    max-width: 121px;
    max-height: 346px;
    /*    max-width: 141px;*/
    /*max-height: 341px;*/
      margin: 0px;
      background-size: cover;
      background-position: center;
      /*border-left: 3px dashed #596290;*/
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color:white;
    }
.tile:nth-child(1)::before{display:none;}
.tile::before{
    content: "";
    width: 32%;
    position: absolute;
    height: 87%;
    border-left: 4px dashed #9ea6ca;
}
    .tile img {
      width: 100px;
      height: 100px;
      position: absolute;
      bottom:19px;
      object-fit: contain;
    }

    .chicken-fly {
      position: absolute;
      width: 80%;
      height: 80%;
      max-width: 100px;
      max-height: 100px;
      z-index: 10;
      will-change: transform;
      pointer-events: none;
    }

    .play-btn {
    width: 100%;
        height: 87px;
    padding: 11px 10px;
    background-color: #3dc55b;
    /* background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%); */
    border: none;
    color: white;
    font-size: 22px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px;
}

.amounts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.amounts input {
  width: 50px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

.quick-buttons {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top:10px;
  font-family: "Montserrat", sans-serif;
}

.quick-buttons button {
  flex: 1;
  margin: 0 5px;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background-color:#606172;
  color: white;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px;
}
.quick-buttons button:nth-child(1){margin:0px;}
.quick-buttons button:nth-child(4){margin:0px;}
select {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  background-color:#606172;
  border: none;
  color: white;
  border-radius: 5px;
  font-family: "Montserrat", sans-serif;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px;
}

   
.minmax{  
    font-family: "Montserrat", sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(78, 80, 98);
    border-radius: 6px;
    padding:6px;
    width: 100%;
    border: 1px solid rgb(78, 80, 98);
    transition: border 0.2s ease-in-out;}
input:focus {
    outline: .01333rem solid #23273b00;
    -webkit-user-select: text;
    user-select: text;
}
.min,
.max{border: 0px;
     padding:4px 8px !important;
         box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px;
    border-radius: 4px;
        padding: 6px;
    background:#606172;
     font-family: "Montserrat", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    color: rgb(255, 255, 255);
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    gap: 5px;}
.cashout{ background: #f2b819;
   padding: 7px 10px;
       height: 87px;
    width: 146px;
    border: none;
    border-radius: 6px;
    margin: 0 11px 0 0;
    color: #000;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px;
    text-align: center;}
.cashout span{padding-left: 11px;}
.btngap{    display: flex;
    justify-content: space-between;
    align-item:center;
}
    
    
.header{     width: 100%;
    position: absolute;
    background-color: rgb(58, 61, 81);
    box-shadow: rgba(0, 0, 0, 0.02) 0px 4px 10px;
    margin-top: 0px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(255, 255, 255);
    z-index: 99;}
    
    
.logo{    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    height: 42px;
    transition: 0.2s;}
.logo img{    width: 100%;
    height: 100%;
    object-fit: scale-down;
    pointer-events: none;
    user-select: none;}
.balance{display: flex;
    justify-content: center;
   min-width: 125px;
    align-items: center;
        padding: 6px 16px;
    font-size: 14px;
    margin: 0 13px;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    height: auto;}
.balance span{color: #3a3d51;
    padding: 2px 9px;
        font-size: 13px;
    font-weight: 500;
    border-radius: 50%;
    background: #b2b2b2;}
.tile h5{     color:#bec2dc;
    font-size: 20px;
    margin-top: -37px;
    margin-left: 4px;
    line-height: 24px;
    font-weight: bold;}
.controls {
    margin:0px;
    width:100%;
    border-radius: 16px;
    border: 2px solid rgb(64, 75, 79);
    background: rgb(58, 61, 81);
    padding: 14px;
    gap: 20px;
}
.amnt{box-shadow: none;
    background: none;
    border: none;
    text-align:center;
    color: #fff;}
.cng{display: flex;
    justify-content: stretch;
        padding: 15px;
    align-items: center;}
    
    #fire {
      position: absolute;
      width: 120px;
      height: auto;
      bottom: 0px;
      left: calc(50% - 660px);
      z-index: 1;
      display: none;
      pointer-events: none;
    }
    
    
    @media (max-width: 600px) {
        body{padding:0px;}
        .home[data-v-432e6ed0]{
            margin-top:0px;   
        height: 50vh;}
        .tile h5{        
            font-size: 18px;
        margin-top: -33px;}
      .tile {
          max-width: 113px;
        width: 60vw;
        height: 100vw;
        max-height: 310px;
        margin: 57px 0px 0 0;
      }

      .tile img,
      .chicken-fly {
        width: 80%;
        height: 80%;
        bottom:16px;
      }
      .tile::before {
    content: "";
    width: 30%;
    position: absolute;
            height: 78%;
        margin-top: -20px;
    border-left: 4px dashed #9ea6ca;
}
.controls {
    padding: 12px 16px;
        /*margin: 25px 16px;*/
}
    }
  </style>
  <style>
.small-swal {
    font-size: 14px !important;
    padding: 15px 10px !important;
    min-height: 50px !important;
}
</style>

</head>
<body>
    
    <div data-v-432e6ed0="" class="home mian game">
        
        <div class="header">
            
            <div class="logo">
               <a href="myaccount" style="color:white"> <img src="images/h5setting_20240328192808nppu.png"></a>
            </div>
            
            <div>
                <div class="balance" id="balance"><a href="recharge" style="color:white"><?php echo number_format(wallet($con,'amount',$userid), 2);?> </a><span>₹</span></div>
            </div>
            
        </div>
        
        <input type="hidden" name="wallet" id="wallet" value="<?php echo wallet($con,'amount',$userid);?>">
        

  <div class="wrapper" id="container">
    <div class="tile" style="background-image: url('assets/img/box1.png');" id="tile0"><h5 style="display:none;">12</h5></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile1"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile2"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile3"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile4"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile5"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile6"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile7"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile8"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile9"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile10"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile11"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile12"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile13"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile14"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile15"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile16"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile17"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile18"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile19"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile20"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile21"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile22"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_blank.png');" id="tile23"></div>
    <div class="tile" style="background-image: url('assets/img/image/box_final.png');" id="tile24"></div>
  </div>
  <div id="fire" style="display: none; background: url('assets/img/fireanim.gif') no-repeat center center;"></div>

  <!--<img src="assets/img/Animation - 1750065771948.gif" id="fire" />-->
  <div class="cng">
      <div class="controls">
     <div class="minmax">
        <button class="min" onclick="amountButoon(10)">MIN</button>
        <input type="text" class="amnt" id="amount" name="amount" value="10"  oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
        <button class="max" onclick="amountButoon(1000)">MAX</button>
      </div>
      <div class="quick-buttons">
        <button onclick="amountButoon(20)">₹20</button>
        <button onclick="amountButoon(50)">₹50</button>
        <button onclick="amountButoon(100)">₹100</button>
        <button onclick="amountButoon(500)">₹500</button>
      </div>
      <select name="gameType" id="gameType" onchange="gAMETYPE(this.value)">
        <option value="Easy" selected>Easy</option>
        <option value="Medium">Medium</option>
        <option value="Hard">Hard</option>
      </select>
      
  <div class="btngap">
      <div id="cashOut"></div>
      <button class="play-btn" onclick="go()">GO</button>
  
  </div>
  
  </div>
  
  </div>
 
  
  
  </div>
  
  
<div id="popup-message" style="
    display: none;
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d4edda;
    color: #155724;
    padding: 15px 25px;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    font-size: 16px;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
"></div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
  
  
  function reEnableUI() {
      document.querySelector('.amnt').disabled = true;
  document.querySelector('.min').disabled = true;
  document.querySelector('.max').disabled = true;
  document.querySelectorAll('.quick-buttons button').forEach(btn => btn.disabled = true);
  document.getElementById('gameType').disabled = true;
      
  }

    
    var position = 0;
    let currentIndex = 0;
    let maxPosition = 23; // declare globally
     let multipliers = [];
     let result= '';
    const tiles = document.querySelectorAll('.tile');
    const chickenImg = document.createElement('img');
    chickenImg.src = 'assets/img/chickengif.gif';
    chickenImg.alt = 'Chicken';
    chickenImg.style.width = '100px';
    chickenImg.style.height = '100px';
    chickenImg.style.objectFit = 'contain';
    tiles[currentIndex].appendChild(chickenImg);

    let isAnimating = false;


function gAMETYPE(val)
   {
       if(val == 'Easy')
       {
           var easyre = parseInt("<?php echo $easy; ?>");
           result = Math.floor(Math.random() * (easyre - 2 + 1)) + 2;
           multipliers = [1.03, 1.07, 1.12, 1.17, 1.23, 1.29, 1.36, 1.44, 1.53, 1.63, 1.75, 1.88, 2.04, 2.22, 2.45, 2.72, 3.06, 3.50, 4.08, 4.90, 6.13, 6.61, 9.81, 19.44];
           for(var i=0; i<24; i++)
           {
               document.getElementById('tile' + parseInt(i + 1)).innerHTML = '<h5>' + multipliers[i] + 'x</h5>';

           }
       }
       if(val == 'Medium')
       {
           
             var mediumre = parseInt("<?php echo $medium; ?>");
             result = Math.floor(Math.random() * (mediumre - 2 + 1)) + 2;
             multipliers = [1.12, 1.28, 1.47, 1.70, 1.98, 2.33, 2.76, 3.32, 4.03, 4.96, 5.75, 6.20, 6.91, 7.22, 8.45, 8.90, 10.06, 11.50, 13.08, 15.90, 21.61,25.07,30.21, 50.21];
             for(var i=0; i<24; i++)
           {
               document.getElementById('tile' + parseInt(i + 1)).innerHTML = '<h5>' + multipliers[i] + 'x</h5>';

           }
           
       }
       if(val == 'Hard')
       {
         var hardre = parseInt("<?php echo $hard; ?>");
             result = Math.floor(Math.random() * hardre) + 1;


        multipliers = [1.23, 1.55, 1.98, 2.56, 3.36, 4.49, 5.49, 7.53, 10.56, 15.21, 18.23, 22.59, 34.79, 55.97, 94.99, 95.45, 97.72, 103.06, 112.50, 120.08, 122.18, 124.12,126.01, 150.45];
            for(var i=0; i<24; i++)
           {
               document.getElementById('tile' + parseInt(i + 1)).innerHTML = '<h5>' + multipliers[i] + 'x</h5>';

           }
         
       }
   }
   $(document).ready(function() {
    var gameType = document.getElementById('gameType').value;
    gAMETYPE(gameType);
    });


var fireSound = new Audio('assets/fire.mp3');

//////////////// Game Over /////////////
function easyover(position) {
  if (result === parseInt(position + 1)) {
    const fire = document.getElementById('fire');
    let tile;

    if (result == 1) {
        tile = tiles[position + 1];
    } else {
        tile = tiles[position];
    }

    // 🔥 Play fire sound
    fireSound.play();
    
    

        
    
    // Show fire effect
    fire.style.display = 'block';
    fire.style.position = 'absolute';
    const tileRect = tile.getBoundingClientRect();
    const containerRect = document.getElementById('container').getBoundingClientRect();

    fire.style.left = `${tileRect.left - containerRect.left}px`;
    fire.style.top = `${tileRect.top - containerRect.top}px`;
    fire.style.width = `100px`;
    fire.style.height = `${tile.offsetHeight}px`;
    fire.style.backgroundSize = 'cover';

    document.getElementById('cashOut').style.pointerEvents = 'none';
    document.getElementById('cashOut').style.opacity = '0.5';

    const goButton = document.querySelector('.play-btn');
    goButton.disabled = true;
    goButton.style.opacity = '0.5';
    goButton.style.cursor = 'not-allowed';

    tile.style.backgroundImage = "url('assets/img/image/box_gameovera.png')";
     
     
    setTimeout(() => {
        chickenImg.src ='';
        chickenImg.src = 'assets/img/image/box_failA.png';
        chickenImg.style.width = '200px';   
         chickenImg.style.height = '250px';
        resetGame();
    }, 1000);
}
}
//////////////// reset game /////////
    function resetGame() {
        document.getElementById('fire').style.display = 'none';
        window.location.reload();
        return;
        
      
  }
//////////// Go button ////////////////
var clickSound = new Audio('assets/background_music.mp3');
var pos = 0;
    function go()
    
    {
        // Play sound
    clickSound.play();
        
    var betamount = parseFloat(document.getElementById('amount').value);
    var gameType = document.getElementById('gameType').value;
    var wallet = parseFloat(document.getElementById('wallet').value);

if(pos == 0)
{
       ///alert(betamount); alert(wallet);
       if(wallet>=betamount)
       {
            $.ajax({
                  url: 'betNow.php', // your server-side script
                  type: 'POST',
                  data: {
                         betamount: betamount,
                         gameType: gameType
                        },
                      success: function(response) {
                     if(response != 'fail')
                     {
                         pos ++;
                        document.getElementById('balance').innerHTML = response + '<span>₹</span>' ;
                        moveChicken();
                     }else{
                        Swal.fire({
                         icon: 'error',
                         title: 'Error',
                         text: 'Insufficient Balance',
                         width: '300px',
                         customClass: {
                             popup: 'small-swal'
                         }
    
                        }); 
                     }
                  },
                error: function() {
                     Swal.fire({
                         icon: 'error',
                         title: 'Error',
                         text: 'Something Went Wrong',
                         width: '300px',
                         customClass: {
                             popup: 'small-swal'
                         }
    
                        });
                }
               });
       }else{
           Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Insufficient Balance',
            width: '300px',
            customClass: {
                popup: 'small-swal'
            }
    
        });
        return;
       }
}else{
    moveChicken();
}
    }
///////// Cash Out //////
function showPopup(message) {
    const popup = document.getElementById('popup-message');
    popup.innerHTML = message;
    popup.style.display = 'block';

    setTimeout(() => {
        popup.style.display = 'none';
    }, 3000); // Hide after 3 seconds
}

function cashOUT(amount, index) {
    $.ajax({
        url: 'cashout.php',
        type: 'POST',
        data: {
            amount: amount,
            index: index
        },
        success: function(response) {
            const msg = `
                Multiplier: <strong style="color:green">${index}x</strong><br>
                Amount Won: <strong>₹${amount}</strong>
            `;
            showPopup(msg);
            document.getElementById('balance').innerHTML = '<span>₹</span>' + response;

            document.getElementById('cashOut').style.pointerEvents = 'none';
            document.getElementById('cashOut').style.opacity = '0.5';

            const goButton = document.querySelector('.play-btn');
            goButton.disabled = true;
            goButton.style.opacity = '0.5';
            goButton.style.cursor = 'not-allowed';

            // Optional: reload after popup
            setTimeout(() => {
                window.location.reload();
            }, 3000);
        },
        error: function() {
            showPopup(`<strong style="color:red">Something Went Wrong</strong>`);
        }
    });
}


/////////////// Move Function //////////
    async function moveChicken() {
      if (isAnimating) return;
      isAnimating = true;

const fire = document.getElementById('fire');

if (currentIndex >= maxPosition) {
        // Reset to start
        currentIndex = 0;
        // track.style.transform = `translateX(0px)`;
        // chicken.style.left = `calc(50% - ${boxWidth * 4.5}px + ${position * boxWidth}px)`;
        window.location.reload();
        return;
        
      }
reEnableUI();
var amount = parseFloat(document.getElementById('amount').value);
var cashOutDiv = document.getElementById('cashOut');


if (currentIndex >= 0 && currentIndex < multipliers.length) {
  let cashAmount = (amount * multipliers[currentIndex]).toFixed(2);
  let emultiplier = multipliers[currentIndex];
  cashOutDiv.innerHTML = '<button class="cashout" onclick="cashOUT(' + cashAmount + ', ' + emultiplier + ')">Cash Out ' + cashAmount + '</button>';
}


easyover(currentIndex);

      const container = document.getElementById('container');
      const currentTile = tiles[currentIndex];
      const nextIndex = (currentIndex + 1) % tiles.length;
      const nextTile = tiles[nextIndex];

      // First scroll into view
      nextTile.scrollIntoView({ behavior: "smooth", inline: "center" });

      // Wait for scroll to finish using a small delay
      await new Promise(resolve => setTimeout(resolve, 300));

      const containerRect = container.getBoundingClientRect();
      const fromRect = currentTile.getBoundingClientRect();
      const toRect = nextTile.getBoundingClientRect();

      const deltaX = toRect.left - fromRect.left;
      const deltaY = toRect.top - fromRect.top;

      const flyingChicken = chickenImg.cloneNode(true);
      flyingChicken.classList.add('chicken-fly');
      flyingChicken.style.left = `${fromRect.left - containerRect.left}px`;
      flyingChicken.style.top = `${fromRect.top - containerRect.top}px`;

      const animationName = `chickenJump${Date.now()}`;
      const styleSheet = document.querySelector('style');
      styleSheet.textContent += `
        @keyframes ${animationName} {
          0%   { transform: translate(0, 0); }
          50%  { transform: translate(${deltaX / 2}px, ${deltaY - 30}px); }
          100% { transform: translate(${deltaX}px, ${deltaY}px); }
        }
      `;
      flyingChicken.style.animation = `${animationName} 0.1s ease forwards`;

      container.appendChild(flyingChicken);
      chickenImg.style.visibility = 'hidden';
      
if(position < currentIndex)
{
    tiles[currentIndex].style.backgroundImage = "url('assets/img/image/box_previous.png')";
}
      setTimeout(() => {
        container.removeChild(flyingChicken);
        currentTile.innerHTML = '';
        nextTile.appendChild(chickenImg);
        if(currentIndex==23)
        {
           nextTile.style.backgroundImage = "url('assets/img/image/box_final.png')"; 
        }else{
         nextTile.style.backgroundImage = "url('assets/img/image/box_result.png')";   
        }
        
        chickenImg.style.visibility = 'visible';
        currentIndex = nextIndex;
        isAnimating = false;
      }, 5);
    }
    
    
    function amountButoon(val) {
    document.getElementById("amount").value = val;
    
    
}

  </script>
<script>
             $('html body').on('contextmenu',function(){
            //alert("This function is not allowed here");
            return false;
                 
             });
        </script>
</body>

</html>
