first commit

public/games/spin_the_wheel/script.js

@@ -0,0 +1,98 @@
+function shuffle(array) {
+  var currentIndex = array.length,
+    randomIndex;
+
+  // While there remain elements to shuffle...
+  while (0 !== currentIndex) {
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
+
+  return array;
+}
+
+function spin() {
+  // Play the sound
+  wheel.play();
+  // Inisialisasi variabel
+  const box = document.getElementById("box");
+  const element = document.getElementById("mainbox");
+  let SelectedItem = "";
+
+  // Shuffle 450 karena class box1 sudah ditambah 90 derajat diawal. minus 40 per item agar posisi panah pas ditengah.
+  // Setiap item memiliki 12.5% kemenangan kecuali item sepeda yang hanya memiliki sekitar 4% peluang untuk menang.
+  // Item berupa ipad dan samsung tab tidak akan pernah menang.
+  // let Sepeda = shuffle([2210]); //Kemungkinan : 33% atau 1/3
+  let MagicRoaster = shuffle([1890, 2250, 2610]);
+  let Sepeda = shuffle([1850, 2210, 2570]); //Kemungkinan : 100%
+  let RiceCooker = shuffle([1810, 2170, 2530]);
+  let LunchBox = shuffle([1770, 2130, 2490]);
+  let Sanken = shuffle([1750, 2110, 2470]);
+  let Electrolux = shuffle([1630, 1990, 2350]);
+  let JblSpeaker = shuffle([1570, 1930, 2290]);
+
+  // Bentuk acak
+  let Hasil = shuffle([
+    MagicRoaster[0],
+    Sepeda[0],
+    RiceCooker[0],
+    LunchBox[0],
+    Sanken[0],
+    Electrolux[0],
+    JblSpeaker[0],
+  ]);
+  // console.log(Hasil[0]);
+
+  // Ambil value item yang terpilih
+  if (MagicRoaster.includes(Hasil[0])) SelectedItem = "Magic Roaster";
+  if (Sepeda.includes(Hasil[0])) SelectedItem = "Sepeda Aviator";
+  if (RiceCooker.includes(Hasil[0])) SelectedItem = "Rice Cooker Philips";
+  if (LunchBox.includes(Hasil[0])) SelectedItem = "Lunch Box Lock&Lock";
+  if (Sanken.includes(Hasil[0])) SelectedItem = "Air Cooler Sanken";
+  if (Electrolux.includes(Hasil[0])) SelectedItem = "Electrolux Blender";
+  if (JblSpeaker.includes(Hasil[0])) SelectedItem = "JBL Speaker";
+
+  // Proses
+  box.style.setProperty("transition", "all ease 5s");
+  box.style.transform = "rotate(" + Hasil[0] + "deg)";
+  element.classList.remove("animate");
+  setTimeout(function () {
+    element.classList.add("animate");
+  }, 5000);
+
+  // Munculkan Alert
+  $.ajax({
+    type: 'POST',
+    url: 'your_server_endpoint.php', // Replace with your server-side endpoint
+    data: ["registration_id"],
+    success: function(response) {
+        // Handle success
+        console.log(response);
+    },
+    error: function(error) {
+        // Handle error
+        console.log(error);
+    }
+});
+  setTimeout(function () {
+    applause.play();
+    swal(
+      "Congratulations",
+      "You Won The " + SelectedItem + ".",
+      "success"
+    );
+  }, 5500);
+
+  // Delay and set to normal state
+  setTimeout(function () {
+    box.style.setProperty("transition", "initial");
+    box.style.transform = "rotate(90deg)";
+  }, 6000);
+}

public/games/spin_the_wheel/style.css

@@ -0,0 +1,215 @@
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  outline: none;
+}
+
+body {
+  font-family: Open Sans;
+  /* justify-content: center; */
+  /* align-items: center; */
+  /* height: 100vh; */
+  /* overflow: hidden; */
+  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+    url(nepcoms_bg.jpg);
+  background-size: cover;
+}
+
+.mainbox {
+  position: relative;
+  width: 500px;
+  height: 500px;
+}
+
+.mainbox:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: url(./arrow-bottom.png) no-repeat;
+  background-size: 5%;
+  left: 5%;
+  top: 48%;
+  transform: rotate(90deg);
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-radius: 50%;
+  border: 10px solid #949090;
+  overflow: hidden;
+  transition: all ease-in-out 5s;
+  transform: rotate(90deg);
+}
+
+span {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  position: absolute;
+}
+
+.span1 {
+  clip-path: polygon(0 17%, 0 50%, 50% 50%);
+  background-color: #45776e;
+}
+
+.span2 {
+  clip-path: polygon(0 17%, 30% 0, 50% 50%);
+  background-color: #c3242a;
+}
+
+.span3 {
+  clip-path: polygon(30% 0, 71% 0, 50% 50%);
+  background-color: #6e98cc;
+}
+
+.span4 {
+  clip-path: polygon(71% 0, 100% 18%, 50% 50%);
+  background-color: #bf216a;
+}
+
+.span5 {
+  clip-path: polygon(100% 18%, 100% 50%, 50% 50%);
+  background: #ff8300;
+}
+
+.box2 .span3 {
+  background-color: #00ff04;
+}
+
+.box2 {
+  width: 100%;
+  height: 100%;
+  transform: rotate(180deg);
+}
+
+.font {
+  color: white;
+  font-size: 20px;
+}
+
+.box1 .span1 b {
+  position: absolute;
+  top: 34%;
+  right: 69%;
+  transform: rotate(200deg);
+  text-align: center;
+}
+
+.box1 .span2 b {
+  position: absolute;
+  top: 20%;
+  right: 60%;
+  transform: rotate(-130deg);
+}
+
+.box1 .span3 b {
+  position: absolute;
+  top: 20%;
+  right: 36%;
+  transform: rotate(-90deg);
+}
+
+.box1 .span4 b {
+  position: absolute;
+  top: 25%;
+  right: 15%;
+  transform: rotate(-45deg);
+}
+
+.box1 .span5 b {
+  position: absolute;
+  top: 38%;
+  right: 10%;
+  transform: rotate(-15deg);
+  text-align: center;
+}
+
+.box2 .span1 b {
+  position: absolute;
+  top: 34%;
+  right: 70%;
+  transform: rotate(200deg);
+}
+
+.box2 .span2 b {
+  position: absolute;
+  top: 20%;
+  right: 60%;
+  transform: rotate(-130deg);
+  text-align: center;
+}
+
+.box2 .span3 b {
+  position: absolute;
+  top: 15%;
+  right: 40%;
+  transform: rotate(270deg);
+}
+
+.box2 .span4 b {
+  position: absolute;
+  top: 24%;
+  right: 13%;
+  transform: rotate(310deg);
+}
+
+.box2 .span5 b {
+  position: absolute;
+  top: 32%;
+  right: 3%;
+  transform: rotate(-20deg);
+  text-align: center;
+}
+
+.spin {
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 0px solid white;
+  /* background-color: #ff5722; */
+  color: #fff;
+  box-shadow: 0 5px 20px #d7d5d5;
+  font-weight: bold;
+  font-size: 22px;
+  cursor: pointer;
+  z-index: 1000;
+  background: url(nepcoms_game_star.png) center center;
+  background-size: cover;
+}
+
+.spin:active {
+  width: 70px;
+  height: 70px;
+  font-size: 20px;
+}
+
+.mainbox.animate:after {
+  animation: animateArrow 0.7s ease infinite;
+}
+
+audio {
+  display: none;
+}
+
+@keyframes animateArrow {
+  50% {
+    right: -50px;
+  }
+}
+
+@media (max-width: 576px) {
+  .mainbox {
+    width: 100%;
+    height: 50%;
+  }
+}