<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Slot Machine</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css"
    />
    <style>
      #animatedModal {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        background-color: rgba(
          0,
          0,
          0,
          0.5
        ); /* Optional: for a semi-transparent background */
      }
      .modal-content {
        align-content: center;
        align-items: center;
        align-self: center;
        width: 40%;
        height: 50%;
        background-color: white;
        padding: 20px; /* Optional: for spacing inside the modal */
        border-radius: 10px; /* Optional: for rounded corners */
        /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/ /* Optional: for a subtle shadow */
      }
      .close-animatedModal {
        position: absolute;
        top: 50px;
        right: 50%;
        transform: translateX(50%);
        cursor: pointer;
      }
      #start {
        position: absolute;
        bottom: 50px;
        right: 50%;
        transform: translateX(50%);
        cursor: pointer;
      }

      #pleaseWait {
        position: absolute;
        bottom: 50px;
        right: 50%;
        transform: translateX(50%);
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- Step-by-step tutorial for this pen at https://youtu.be/boI2B4Gpp34 -->

    <div class="slots">
      <div class="reel"></div>
      <div class="reel"></div>
      <div class="reel"></div>
    </div>

    <div id="debug" class="debug" style="display: none"></div>

    <!-- <img
      style="position: fixed; left: 0; top: 0; height: 100vh; width: auto"
      src="slotreel.png"
    /> -->

    <!--DEMO01-->
    <div id="animatedModal">
      <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->

      <div class="modal-content" align="center">
        <img src="prize.png" width="50%" />
        <div id="priceText" style="font-size: 20px; font-weight: bold"></div>
        <img class="close-animatedModal" src="close.png" width="100" />
      </div>
    </div>

    <a id="priceModal" href="#animatedModal" style="display: none"></a>

    <img id="start" src="start.png" width="300" />
    <img
      id="pleaseWait"
      src="please-wait.png"
      width="300"
      style="display: none"
    />

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="animatedModal.min.js"></script>

    <script>
      $("#priceModal").animatedModal({
        animatedIn: "bounceIn",
        animatedOut: "bounceOut",
        color: "transparent",
      });

      $("#start").click(function () {
        $("#start").hide();
        $("#pleaseWait").show();
        rollAll();
      });
      /**
       * Setup
       */
      const debugEl = document.getElementById("debug"),
        // Mapping of indexes to icons: start from banana in middle of initial position and then upwards

        iconMap = [
          "beerlao",
          "jingjai",
          "somersby",
          "tigerhead",
          "pepsi",
          "carlsberg",
          "jingjai",
          "tigerhead",
          "pepsi",
        ],
        // Width of the icons
        icon_width = 79,
        // Height of one icon in the strip
        icon_height = 79,
        // Number of icons in the strip
        num_icons = 9,
        // Max-speed in ms for animating one icon down
        time_per_icon = 100,
        // Holds icon indexes
        indexes = [0, 0, 0];

      /**
       * Roll one reel
       */
      const roll = (reel, offset = 0) => {
        // Minimum of 2 + the reel offset rounds
        const delta =
          (offset + 2) * num_icons + Math.round(Math.random() * num_icons);

        // Return promise so we can wait for all reels to finish
        return new Promise((resolve, reject) => {
          const style = getComputedStyle(reel),
            // Current background position
            backgroundPositionY = parseFloat(style["background-position-y"]),
            // Target background position
            targetBackgroundPositionY =
              backgroundPositionY + delta * icon_height,
            // Normalized background position, for reset
            normTargetBackgroundPositionY =
              targetBackgroundPositionY % (num_icons * icon_height);

          // Delay animation with timeout, for some reason a delay in the animation property causes stutter
          setTimeout(() => {
            // Set transition properties ==> https://cubic-bezier.com/#.41,-0.01,.63,1.09
            reel.style.transition = `background-position-y ${
              (8 + 1 * delta) * time_per_icon
            }ms cubic-bezier(.41,-0.01,.63,1.09)`;
            // Set background position
            reel.style.backgroundPositionY = `${
              backgroundPositionY + delta * icon_height
            }px`;
          }, offset * 150);

          // After animation
          setTimeout(() => {
            // Reset position, so that it doesn't get higher without limit
            reel.style.transition = `none`;
            reel.style.backgroundPositionY = `${normTargetBackgroundPositionY}px`;
            // Resolve this promise
            resolve(delta % num_icons);
          }, (8 + 1 * delta) * time_per_icon + offset * 150);
        });
      };

      /**
       * Roll all reels, when promise resolves roll again
       */
      function rollAll() {
        debugEl.textContent = "rolling...";

        const reelsList = document.querySelectorAll(".slots > .reel");

        Promise

          // Activate each reel, must convert NodeList to Array for this with spread operator
          .all([...reelsList].map((reel, i) => roll(reel, i)))

          // When all reels done animating (all promises solve)
          .then((deltas) => {
            // add up indexes
            deltas.forEach(
              (delta, i) => (indexes[i] = (indexes[i] + delta) % num_icons)
            );
            debugEl.textContent = indexes.map((i) => iconMap[i]).join(" - ");

            // 1st Prized
            if (
              iconMap[indexes[0]] == "jingjai" &&
              iconMap[indexes[1]] == "jingjai" &&
              iconMap[indexes[2]] == "jingjai"
            ) {
              $("#priceText").text("You win 100,000 JJ Points");
              $("#priceModal").click();
            }

            // 2nd Prized
            if (
              (iconMap[indexes[0]] == "beerlao" &&
                iconMap[indexes[1]] == "beerlao" &&
                iconMap[indexes[2]] == "beerlao") ||
              (iconMap[indexes[0]] == "somersby" &&
                iconMap[indexes[1]] == "somersby" &&
                iconMap[indexes[2]] == "somersby") ||
              (iconMap[indexes[0]] == "tigerhead" &&
                iconMap[indexes[1]] == "tigerhead" &&
                iconMap[indexes[2]] == "tigerhead") ||
              (iconMap[indexes[0]] == "carlsberg" &&
                iconMap[indexes[1]] == "carlsberg" &&
                iconMap[indexes[2]] == "carlsberg") ||
              (iconMap[indexes[0]] == "pepsi" &&
                iconMap[indexes[1]] == "pepsi" &&
                iconMap[indexes[2]] == "pepsi")
            ) {
              $("#priceText").text("You win 40,000 JJ Points");
              $("#priceModal").click();
            }

            // 3rd Prized
            if (
              iconMap[indexes[0]] == iconMap[indexes[1]] ||
              iconMap[indexes[1]] == iconMap[indexes[2]] ||
              iconMap[indexes[0]] == iconMap[indexes[2]]
            ) {
              $("#priceText").text("You win 20,000 JJ Points");
              $("#priceModal").click();
            }

            // 4th Prized
            if (
              iconMap[indexes[0]] !== iconMap[indexes[1]] &&
              iconMap[indexes[1]] !== iconMap[indexes[2]] &&
              iconMap[indexes[0]] !== iconMap[indexes[2]] &&
              iconMap[indexes[0]] !== "jingjai" &&
              iconMap[indexes[1]] !== "jingjai" &&
              iconMap[indexes[2]] !== "jingjai"
            ) {
              $("#priceText").text("You win 10,000 JJ Points");
              $("#priceModal").click();
            }

            $("#start").show();
            $("#pleaseWait").hide();
          });
      }

      // Kickoff
      //setTimeout(rollAll, 1000);
    </script>
  </body>
</html>
