Login

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





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

accompaniment159