LuckyWheel – Show the Reward in a Div when the wheel lands on it

I am creating a little website/project for a friend. It’s a Lucky Wheel / Wheel of Fortune. I tried some premade script but none of them were like I needed and I thought that creating my own would be better.

I have made the actual Wheel in HTML / CSS. I already posted on Stack Overflow , got some help , advance the jscript part a bit but now i am missing only 1 thing. So my To Do list is as follows:

Have the wheel’s panel/li text (content) showed in my message box (where I have written “YOU JUST WON : XXXXXX”) once it lands on it.

FILENAME : wheel.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Material Design for Bootstrap</title>
  <!-- Favicon -->
  <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
  <!-- Font Awesome 6 PRO -->
  <link rel="stylesheet" href="css/fontawesome/css/all.min.css" />
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
  <!-- MDB -->
  <link rel="stylesheet" href="css/mdb.min.css" />
  <!-- Custom styles -->
  <link rel="stylesheet" href="css/wheel.css">
  <!-- jQuery -->
  <script src="./js/jquery-3.6.0.min.js"></script>

</head>

<body class="bg-dark">

  <div class="container">
    <div class="row">
      <ul class="circle">
        <li>
          <div class="text">1</div>
        </li>
        <li>
          <div class="text">2</div>
        </li>
        <li>
          <div class="text">3</div>
        </li>
        <li>
          <div class="text">4</div>
        </li>
        <li>
          <div class="text">5</div>
        </li>
        <li>
          <div class="text">6</div>
        </li>
        <li>
          <div class="text">7</div>
        </li>
        <li>
          <div class="text">8</div>
        </li>
        <li>
          <div class="text">9</div>
        </li>
        <li>
          <div class="text">10</div>
        </li>
        <li>
          <div class="text">11</div>
        </li>
        <li>
          <div class="text">12</div>
        </li>
      </ul>
    </div>
    <div class="row justify-content-center mt-n4">
      <span class="spin_arrow"></span>
    </div>

    <!-- ### START ### MESSAGE BOX FOR REWARD : WILL SHOW ONLY WHEN A REWARD IS WON. -->
    <div class="message">
      <div class="row justify-content-center mt-4">
        <div class="col-md-8 bg-success text-white p-4 text-center">
          <h4>YOU JUST WON : XXXXXX</h4>
        </div>
      </div>
    </div>
    <!-- ### END ### MESSAGE BOX FOR REWARD : WILL SHOW ONLY WHEN A REWARD IS WON. -->

    <!-- ### START ### FORM FOR NUMBER OF SPINS + SUBMIT/SPIN BUTTON -->
    <div class="row justify-content-center mt-4">
      <div class="col-md-8 justify-content-center">
        <form action="#" method="POST" class="bg-light p-5">
          <div class="row justify-content-center">
            <div class="col-md-4 mb-4">
              <select class="select w-25" 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 Number of Spins</label>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col-md-4 justify-content-center">
              <button type="submit" name="frm1_submit" id="frm1_submit" class="btn btn-block btn-primary">SPIN THE WHEEL</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- ### END ### FORM FOR NUMBER OF SPINS + SUBMIT/SPIN BUTTON -->

  </div>

</body>

<!-- MDB -->
<script type="text/javascript" src="./js/mdb.min.js"></script>
<!-- WHEEL SPIN -->
<script type="text/javascript" src="./js/spinwheel.js"></script>

</html>

FILENAME : wheel.css

body {
  background: #2f2f2f;
}

.circle {
  position: relative;
  border: 1px solid black;
  padding: 0;
  margin: 1em auto;
  width: 25em;
  height: 25em;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}

li {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}

.text {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  text-align: center;
  -webkit-transform: skewY(60deg) rotate(15deg);
  -ms-transform: skewY(60deg) rotate(15deg);
  transform: skewY(60deg) rotate(15deg);
  padding-top: 20px;
  color: white;
  text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
  font-size: 2em;
}

li:first-child {
  -webkit-transform: rotate(0deg) skewY(-60deg);
  -ms-transform: rotate(0deg) skewY(-60deg);
  transform: rotate(0deg) skewY(-60deg);
}

li:nth-child(2) {
  -webkit-transform: rotate(30deg) skewY(-60deg);
  -ms-transform: rotate(30deg) skewY(-60deg);
  transform: rotate(30deg) skewY(-60deg);
}

li:nth-child(3) {
  -webkit-transform: rotate(60deg) skewY(-60deg);
  -ms-transform: rotate(60deg) skewY(-60deg);
  transform: rotate(60deg) skewY(-60deg);
}

li:nth-child(4) {
  -webkit-transform: rotate(90deg) skewY(-60deg);
  -ms-transform: rotate(90deg) skewY(-60deg);
  transform: rotate(90deg) skewY(-60deg);
}

li:nth-child(5) {
  -webkit-transform: rotate(120deg) skewY(-60deg);
  -ms-transform: rotate(120deg) skewY(-60deg);
  transform: rotate(120deg) skewY(-60deg);
}

li:nth-child(6) {
  -webkit-transform: rotate(150deg) skewY(-60deg);
  -ms-transform: rotate(150deg) skewY(-60deg);
  transform: rotate(150deg) skewY(-60deg);
}

li:nth-child(7) {
  -webkit-transform: rotate(180deg) skewY(-60deg);
  -ms-transform: rotate(180deg) skewY(-60deg);
  transform: rotate(180deg) skewY(-60deg);
}

li:nth-child(8) {
  -webkit-transform: rotate(210deg) skewY(-60deg);
  -ms-transform: rotate(210deg) skewY(-60deg);
  transform: rotate(210deg) skewY(-60deg);
}

li:nth-child(9) {
  -webkit-transform: rotate(240deg) skewY(-60deg);
  -ms-transform: rotate(240deg) skewY(-60deg);
  transform: rotate(240deg) skewY(-60deg);
}

li:nth-child(10) {
  -webkit-transform: rotate(270deg) skewY(-60deg);
  -ms-transform: rotate(270deg) skewY(-60deg);
  transform: rotate(270deg) skewY(-60deg);
}

li:nth-child(11) {
  -webkit-transform: rotate(300deg) skewY(-60deg);
  -ms-transform: rotate(300deg) skewY(-60deg);
  transform: rotate(300deg) skewY(-60deg);
}

li:nth-child(12) {
  -webkit-transform: rotate(330deg) skewY(-60deg);
  -ms-transform: rotate(330deg) skewY(-60deg);
  transform: rotate(330deg) skewY(-60deg);
}

li:first-child .text {
  background: #FF3C38;
}

li:nth-child(2) .text {
  background: #ECC30B;
}

li:nth-child(3) .text {
  background: #E980FC;
}

li:nth-child(4) .text {
  background: #B96AC9;
}

li:nth-child(5) .text {
  background: #371E30;
}

li:nth-child(6) .text {
  background: #902D41;
}

li:nth-child(7) .text {
  background: #E57A44;
}

li:nth-child(8) .text {
  background: #8F5C38;
}

li:nth-child(9) .text {
  background: #7209B7;
}

li:nth-child(10) .text {
  background: #3A0CA3;
}

li:nth-child(11) .text {
  background: darkred;
}

li:nth-child(12) .text {
  background: gold;
}

.spin_arrow {
  color: #fff;
  font-size: 48px;
  text-align:center;
}

.spin_arrow::before {
  content: "2191";
}

FILENAME : spinwheel.js

$(function() {
  // Spin Counter, init as 0
  var spinCount = 0;
  var slices = [{
    label: "1",
    start: 0,
    end: 29
  }, {
    label: "2",
    start: 30,
    end: 59
  }, {
    label: "3",
    start: 60,
    end: 89
  }, {
    label: "4",
    start: 90,
    end: 119
  }, {
    label: "5",
    start: 120,
    end: 149
  }, {
    label: "6",
    start: 150,
    end: 179
  }, {
    label: "7",
    start: 180,
    end: 209
  }, {
    label: "8",
    start: 210,
    end: 239
  }, {
    label: "9",
    start: 240,
    end: 269
  }, {
    label: "10",
    start: 270,
    end: 299
  }, {
    label: "11",
    start: 300,
    end: 329
  }, {
    label: "12",
    start: 330,
    end: 359
  }]

  function spin(el) {
    var i = 0;
    // Select random Degree between 0 and 360
    var d = Math.floor(Math.random() * 360);
    // Reset Transform if already rotated
    if ($(el).css("transform") != "none") {
      console.log($(el).css("transform"), "Resetting to 0");
      $(el).css("transform", "rotate(0deg)");
    }
    console.log("Spin 720 + " + d + " degrees");
    // Animate Rotation of Element
    // Two full spins and then land on Random Degree
    $(el).animate({
      deg: 720 + d
    }, {
      duration: 3600,
      step: function(now, tween) {
        $(this).css({
          transform: 'rotate(' + now + 'deg)'
        });
      }
    }, function() {
      console.log("Complete Spin.", $(el).css("transform"));
    });
    // Calculate Slice Index (1 - 12)
    $.each(slices, function(k, o) {
      if (d >= o.start && d <= o.end) {
        i = k;
      }
    })
    console.log("Deg: " + d, "Index: " + i);
    return i;
  }

  function spinWheel() {
    //MAXIMUM SPINS CODE
    if (spinCount >= $("select[name='frm1_nbspin']").val()) {
      alert("No more Spins left");
      $("#frm1_submit").attr("disabled", true);
      return false;
    }
    spinCount++;
    //CODE FOR SPINNING THE WHEEL HERE...
    console.log("Spin #" + spinCount);
    console.log(spin(".circle"));
  }

  $("form").submit(function(event) {
    event.preventDefault();
    spinWheel();
  });
});