Lucky Wheel but i need to limit the number of spin-CodePudding

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 :

<form action="functions/check_step.php" method="post" >
  <div >
    <h1 >Spin The Wheel</h1>
    <h6 ><span  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 >
    <h4 >Step 1 : CHOOSE YOUR PACKAGE</h4>
  </div>
  <div >
    <input type="text" id="frm1_name"  />
    <label  for="frm1_name">Your Username</label>
  </div>
  <div >
    <select  name="frm1_nbspin">
      <option value="1">1 Spin</option>
      <option value="2">2 Spins</option>
      <option value="3">3 Spins</option>
    </select>
    <label >Choose your Package</label>
  </div>
  <div>
    <button type="submit" name="frm1_submit" >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.

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.

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
}

* {
  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;
  }
}

<body>
  <div id="mainbox" >
    <div id="box" >
      <div >
        <span ><b>Option1</b></span>
        <span ><b>Option2</b></span>
        <span ><b>Option3</b></span>
        <span ><b>Option4</b></span>
      </div>
      <div >
        <span ><b>Option5</b></span>
        <span ><b>Option6</b></span>
        <span ><b>Option7</b></span>
        <span ><b>Option8</b></span>
      </div>
    </div>

    <button  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 ...

CodePudding user response：

@Twisty

Is this good ?

check_step.php

<?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/wheel.js"></script>

and in my wheel.js

var spinCount = 0;

function myfunction() {
  if (spinCount > frm1_nbspin) {
    alert("No more Spins");
    return false;
  }
  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
  spinCount  ;
}

I used your code but i pass my variable where i retrieve the nb of spins selected from the first form to the wheel.js and have the spinCount > frm1_nbspin since i want the spinCount to be limited with the choice of the select box from form1 ?

CodePudding user response：

Consider the following example.

var spinCount = 0;

function myfunction() {
  if (spinCount > 3) {
    alert("No more Spins");
    return false;
  }
  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
  spinCount  ;
}

* {
  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;
  }
}

<body>
  <div id="mainbox" >
    <div id="box" >
      <div >
        <span ><b>Option1</b></span>
        <span ><b>Option2</b></span>
        <span ><b>Option3</b></span>
        <span ><b>Option4</b></span>
      </div>
      <div >
        <span ><b>Option5</b></span>
        <span ><b>Option6</b></span>
        <span ><b>Option7</b></span>
        <span ><b>Option8</b></span>
      </div>
    </div>

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

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

This creates a Global Variable, so regardless of how many times the User clicks to Spin, it will track the number of clicks. I set 3 for now in this example. Your code will have a variable number from the first page.

Update

Consider the following in your check_step.php file:

<?php 
include_once "secureStrings.php" ;

session_start();
if(!isset($_SESSION['step'])){
  $_SESSION['step'] = 0;
}

switch($_SESSION['step']){
  case 1:
    $_SESSION['spins'] = (int)$_POST['frm1_nbspin'];
    $dest = "spin-step2.php";
    break;
  case 2:
    $dest = "spin-step3.php";
    break;
  case 3:
    $dest = "spin.html";
    break;
  default:
    $_SESSION["error"] = "AN ERROR HAS OCCURED!\r\nPLEASE TRY AGAIN";
    $dest = "spin-step1.php";
    break;
}

header("location: ../" . $dest);
exit();
?>

You can see here that this collects the details from the form and places them in the Session. In the other pages, we can now collect that detail from the session when the page loads.

See More: