As the topic says, I am doing a Wheel of Fortune / Lucky Wheel but I would like to limit the number of spins the guest can make. I am doing a little form at first for the player to enter his username and choose the number of spins.

First Form :

```html
<form action="functions/check_step.php" method="post" class="bg-light p-5">
  <div class="text-center mb-4 mt-n4">
    <h1 class="text-uppercase font-weight-bold">Spin The Wheel</h1>
    <h6 class="text-uppercase"><span class="iconify mr-1 mt-n1 ml-n2" data-icon="simple-icons:onlyfans" data-width="24" data-height="24" style="color: lightblue; padding-top:-10px;"></span>onlyfans.com/melibabies</h6>
  </div>
  <hr>
  <div class="text-center my-4">
    <h4 class="text-uppercase font-weight-bold">Step 1 : CHOOSE YOUR PACKAGE</h4>
  </div>
  <div class="form-outline mb-4">
    <input type="text" id="frm1_name" class="form-control" />
    <label class="form-label" for="frm1_name">Your Username</label>
  </div>
  <div class="mb-4">
    <select class="select" name="frm1_nbspin">
      <option value="1">1 Spin</option>
      <option value="2">2 Spins</option>
      <option value="3">3 Spins</option>
    </select>
    <label class="form-label select-label">Choose your Package</label>
  </div>
  <div>
    <button type="submit" name="frm1_submit" class="btn btn-primary btn-block">START</button>
  </div>
</form>

```

Here is the check\_step.php file where i take the frm1\_nbspin and send it in my js where my js function for limit spins is.

```
<?php 
    include_once "secureStrings.php" ;

    session_start();

    // CHECK STEP #1
    if (isset($_POST["frm1_submit"])){
        $_SESSION['step1'] == 1; //OPEN SESSION VAR FOR STEP#1
        $frm1_name = sanitizeString($_POST['frm1_name']); //SAVE & SANITIZE USERNAME
        $frm1_nbspin = (int)$_POST['frm1_nbspin']; //SAVE NUMBER OF SPINS AND MAKE SURE IT'S AN INT
    }

    // CHECK STEP #2
    if (isset($_POST["frm2_submit"])){
        $_SESSION['step2'] == 1;
    }

    // CHECK STEP #3
    if (isset($_POST["frm3_submit"])){
        $_SESSION['step3'] == 1;

     }

    if ($_SESSION['step1'] != 1) {
        # alert error and return to first step
    }

    if ($_SESSION['step2'] != 1) {
        # alert error and return to first step
    }

    if ($_SESSION['step3'] != 1) {
        # alert error and return to first step
    }

    ?>

    <script type="text/javascript">
        var frm1_nbspin = <?php echo json_encode($frm1_nbspin) ?>;
    </script>
    <script type="text/javascript" src="../js/limitspins.js"></script>

```

Here is my New limitspins.js (i created with the comment with code snippet but i really don't know if i did it good ..) And I would like that this function actually limit the spins to 3 if in the first form the guest choose the 3 spins in the select , limit to 2 if he chose the 2 spins , limit to 1 if he chose 1 spin ... For now i just think the code snippet someone gave me can limit only to 3 spins .. but i need it to change depending on the select in the first form.

```js
function limitspin(){
    if (frm1_nbspin > 3) {
        return; 
    }
    frm1_nbspin++
}
```

Here is the Jscript for the wheel and here is my HTML page for the wheel (I don't include the CSS but if it's required let me know I will post/add it.

```js
function myfunction() {
  var x = 1024; //min value
  var y = 9999; // max value

  var deg = Math.floor(Math.random() * (x - y)) + y;

  document.getElementById('box').style.transform = "rotate(" + deg + "deg)";

  var element = document.getElementById('mainbox');
  element.classList.remove('animate');

  setTimeout(function() {
    element.classList.add('animate');
  }, 5000); //5000 = 5 second
}
```

```css
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
}

body {
  font-family: Open Sans;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: rgb(60, 60, 242);
  background: linear-gradient(90deg, rgba(60, 60, 242, 1) 0%, rgba(98, 245, 230, 1) 52%, rgba(60, 60, 242, 1) 100%);
  background-size: cover;
}

.mainbox {
  position: relative;
  width: 500px;
  height: 500px;
}

.mainbox:after {
  position: absolute;
  content: '';
  width: 32px;
  height: 32px;
  background: url('../img/arrow-wheel.png') no-repeat;
  background-size: 32px;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
  border: 10px solid #fff;
  overflow: hidden;
  transition: all ease 5s;
}

span {
  width: 50%;
  height: 50%;
  display: inline-block;
  position: absolute;
}

.span1 {
  clip-path: polygon(0 92%, 100% 50%, 0 8%);
  background-color: #fffb00;
  top: 120px;
  left: 0;
}

.span2 {
  clip-path: polygon(100% 92%, 0 50%, 100% 8%);
  background-color: #ff4fa1;
  top: 120px;
  right: 0;
}

.span3 {
  clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
  background-color: #ffaa00;
  bottom: 0;
  left: 120px;
}

.span4 {
  clip-path: polygon(50% 100%, 92% 0, 8% 0);
  background-color: #22ff00;
  top: 0;
  left: 120px;
}

.box1 .span3 b {
  transform: translate(-50%, -50%) rotate(-270deg);
}

.box1 .span1 b,
.box2 .span1 b {
  transform: translate(-50%, -50%) rotate(185deg);
}

.box2 .span3 b {
  transform: translate(-50%, -50%) rotate(90deg);
}

.box1 .span4 b,
.box2 .span4 b {
  transform: translate(-50%, -50%) rotate(-85deg);
}

.box2 {
  width: 100%;
  height: 100%;
  transform: rotate(-135deg);
}

span b {
  font-size: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 4px solid #fff;
  background-color: #001aff;
  color: #fff;
  box-shadow: 0 5px 20px #000;
  font-weight: bold;
  font-size: 22px;
  cursor: pointer;
}

.spin:active {
  width: 70px;
  height: 70px;
  font-size: 20px;
}

.mainbox.animate:after {
  animation: animateArrow 0.7s ease infinite;
}

@keyframes animateArrow {
  50% {
    right: -40px;
  }
}
```

```html
<body>
  <div id="mainbox" class="mainbox">
    <div id="box" class="box">
      <div class="box1">
        <span class="span1"><b>Option1</b></span>
        <span class="span2"><b>Option2</b></span>
        <span class="span3"><b>Option3</b></span>
        <span class="span4"><b>Option4</b></span>
      </div>
      <div class="box2">
        <span class="span1"><b>Option5</b></span>
        <span class="span2"><b>Option6</b></span>
        <span class="span3"><b>Option7</b></span>
        <span class="span4"><b>Option8</b></span>
      </div>
    </div>

    <button class="spin" onclick="myfunction()">SPIN</button>
  </div>

  <script src="script.js"></script>
</body>
```

I am not really good with javascript I am really a beginner with it ...