<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <title>AI</title>
  <style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* Full viewport height */
      background-color: #f0f0f0; /* Light background for contrast */
      flex-direction: column;
    }

    #counter {
      font-size: 30vw; /* Large responsive font size */
      font-weight: bold;
      text-align: center;
      color: black; /* Default color during animation */
    }
  </style>
  <script>
    function getColor(value, min, max) {
      const center = (max + min) / 2
      if (value == center) {
        return `rgb(255, 165, 0)`
      } else if (value < center) {
        const norm = (value - min) / (center - min)
        const r = 255
        const g = Math.floor(165 * norm)
        const b = 0
        return `rgb(${r}, ${g}, ${b})`;
      } else if (value > center) {
        const norm = (value - center) / (max - center)
        const r = Math.floor(255 - 255 * norm)
        const g = 165
        const b = 0
        return `rgb(${r}, ${g}, ${b})`;
      }
    }

    function randomNumberAnimation(start, end, duration, rangeStart, rangeEnd) {
      const spinBtn = document.getElementById('spin-btn');
      spinBtn.setAttribute("disabled", true)

      const counter = document.getElementById('counter');
      const stepTime = 100; // Fixed time per increment (in ms) for uniform speed
      const totalIntermediateTargets = 10; // Number of intermediate random targets
      const totalSteps = Math.floor(duration / stepTime); // Total steps for the entire animation
      const stepsPerTarget = Math.floor(totalSteps / (totalIntermediateTargets + 1));

      const targets = [];
      for (let i = 0; i < totalIntermediateTargets; i++) {
        targets.push(Math.floor(Math.random() * (end - start + 1)) + start);
      }
      const finalTarget = Math.floor(Math.random() * (rangeEnd - rangeStart + 1)) + rangeStart;
      targets.push(finalTarget);

      let currentTargetIndex = 0;
      let currentNumber = start;

      function moveToNextTarget() {
        if (currentTargetIndex < targets.length) {
          const nextTarget = targets[currentTargetIndex];
          const stepDirection = nextTarget > currentNumber ? 1 : -1;

          function incrementTowardsTarget() {
            counter.style.color = getColor(currentNumber, start, end)
            if (currentNumber !== nextTarget) {
              currentNumber += stepDirection;
              counter.innerText = currentNumber;
              setTimeout(incrementTowardsTarget, stepTime);
            } else {
              currentTargetIndex++;
              // counter.style.color = getColor(currentNumber, start, end)
              if (currentTargetIndex === targets.length) {
                // Final step: Apply color when animation ends
                counter.style.color = getColor(currentNumber, start, end);
                const spinBtn = document.getElementById('spin-btn');
                spinBtn.removeAttribute("disabled")
              } else {
                moveToNextTarget();
              }
            }
          }

          incrementTowardsTarget();
        }
      }

      moveToNextTarget(); // Start the animation
    }
  </script>
</head>
<body>
  <div id="counter">0</div>
  <button id="spin-btn" type="button" class="btn btn-lg btn-primary" onclick="randomNumberAnimation(40, 100, 15000, 92, 99)">SPIN</button>
</body>
</html>
