<div class="slot-machine">
      <div class="header">
        <h1>Classic Slots</h1>
        <p class="balance">Balance: $1000</p>
      </div>
      <div class="reels-container">
        <div class="reel">
          <div class="symbol">🍒</div>
          <div class="symbol">🔔</div>
          <div class="symbol">🍋</div>
        </div>
        <div class="reel">
          <div class="symbol">🍒</div>
          <div class="symbol">🔔</div>
          <div class="symbol">🍋</div>
        </div>
        <div class="reel">
          <div class="symbol">🍒</div>
          <div class="symbol">🔔</div>
          <div class="symbol">🍋</div>
        </div>
      </div>
      <div class="controls">
        <button class="btn btn-primary spin_btn">SPIN</button>
        <p class="message">Good Luck!</p>
      </div>

      <audio id="reelSound" src="https://essykings.github.io/JavaScript/wheel.wav"></audio>
      <audio id="winSound" src="https://essykings.github.io/JavaScript/payout.mp3"></audio>
    </div>

 @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');

      body {
        background: #121212;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: "DM Mono", monospace;
      }

      .slot-machine {
        text-align: center;
      }
      .header {
        margin-bottom: 20px;
        padding: 10px;
      }
      .header h1 {
        font-family: "Ultra", serif;
        font-size: 6em;
        line-height: .9;
        margin: 0;
        color: #ebb701;
        max-width: 10ch;
      }
      .header p {
        font-size: 1.2em;
        margin-top: 10px;
        color: white;
      }
      .reels-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
      }
      .reel {
        display: block;
        width: 130px;
        height: 210px;
        background-color: #3a3a3a;
        border-radius: 15px;
        overflow: hidden;
        margin: 0 10px;
        box-shadow: 0px 14px 15px -5px rgba(0,0,0,0.3) inset,
          1px -14px 15px -5px rgba(0,0,0,0.3) inset;
        border: 2px solid rgba(255,255,255,0.2);
        position: relative;
      }

      .reel::before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        z-index: 100;
        width: 100%;
        height: 2px;
        background: rgba(255,255,255,0.2);
      }

      .symbol {
        font-size: 3em;
        height: 1.5em;
        opacity: 0.6;
      }


      .controls .btn {
        margin: 3em 0 1em 0;
      }

      .controls .message {
        font-size: 1.5em;
        color: #ebb701;
      }

const reels = document.querySelectorAll(".reel");
const spinButton = document.querySelector(".spin_btn");
const messageDisplay = document.querySelector(".message");
const reelSound = document.getElementById("reelSound");
const winSound = document.getElementById("winSound");

const symbols = ["🍒", "🔔", "🍋", "🍉", "⭐", "7️⃣", "🍊", "🍓", "🍈", "🍍"];

let reelStates = [
  ["🍒", "🍒", "🍒", "🍋", "🍋", "🍉"],
  ["🍒", "🍋", "🍋", "🍉", "🍒", "7️⃣"],
  ["🍒", "7️⃣", "🍋", "🍒", "🍓", "🍋"]
];

let spinning = false;
let balance = 1000;
let betAmount = 10;

function updateBalanceDisplay() {
  const balanceDisplay = document.querySelector(".balance");
  balanceDisplay.textContent = `Balance: $${balance}`;
}

function placeBet() {
  if (balance >= betAmount) {
    balance -= betAmount;
    updateBalanceDisplay();
    spinReels();
  } else {
    alert("Not enough balance to place a bet!");
  }
}

spinButton.addEventListener("click", placeBet);

function spinReels() {
  if (spinning) return;
  spinning = true;
  reelSound.play();
  messageDisplay.textContent = "Spinning.........";
  reels.forEach((reel, index) => {
    setTimeout(() => {
      spinReel(reel, index);
    }, index * 500);
  });
}

function spinReel(reel, index) {
  const spinCount = 10 + Math.floor(Math.random() * 5);
  let currentSpin = 0;
  console.log(spinCount);
  const interval = setInterval(() => {
    reelStates[index].unshift(reelStates[index].pop());
    reel.innerHTML = "";
    reelStates[index].forEach((symbol) => {
      const symbolDiv = document.createElement("div");
      symbolDiv.classList.add("symbol");
      symbolDiv.textContent = symbol;
      reel.appendChild(symbolDiv);
    });
    currentSpin++;
    if (currentSpin >= spinCount) {
      clearInterval(interval);
      if (index === reels.length - 1) {
        spinning = false;
        reelSound.pause();
        reelSound.currentTime = 0;
        checkWin();
      }
    }
  }, 50 + index * 50);
}

function checkWin() {
  const [reel1, reel2, reel3] = reelStates.map((reel) => reel[0]);
  const [reel4, reel5, reel6] = reelStates.map((reel) => reel[1]);

  if (
    (reel1 === reel2 && reel2 === reel3) ||
    (reel4 === reel5 && reel5 === reel6)
  ) {
    const payout = betAmount * 5;
    balance += payout;
    winSound.play();
    messageDisplay.textContent = " ";
  } else {
    messageDisplay.textContent = " Try Again";
  }
  updateBalanceDisplay();
}