script.js

const audio = new Audio("dreamy.mp3");
const bubbleSound = new Audio("bubble.mp3");
const doneSlotSound = new Audio("doneSlot.mp3");
const levelComplete = new Audio("levelComplete.mp3");
audio.play();
audio.loop = true;
let lockedTubes = new Set();

// Different ball sets for different levels
const levels = {
  1: {
    // Easy - 3 colors
    ballImages: {
      red: "img1.png",
      blue: "img2.png",
      green: "img3.png",
    },
    tubeCount: 5,
    ballsPerTube: 4,
  },
  2: {
    // Medium - 4 colors
    ballImages: {
      red: "img1.png",
      blue: "img2.png",
      green: "img3.png",
      orange: "img4.png",
    },
    tubeCount: 6,
    ballsPerTube: 4,
  },
  3: {
    // Hard - 6 colors
    ballImages: {
      red: "img1.png",
      blue: "img2.png",
      green: "img3.png",
      orange: "img4.png",
      yellow: "img5.png",
      purple: "img6.png",
    },
    tubeCount: 8,
    ballsPerTube: 4,
  },
};

let tubes = [];
let ballId = 0;
let currentLevel = null;

function shuffle(array) {
  let current = array.length;
  while (current !== 0) {
    let random = Math.floor(Math.random() * current--);
    [array[current], array[random]] = [array[random], array[current]];
  }
  return array;
}

function initGame(level) {
  lockedTubes.clear();
  currentLevel = level;
  ballId = 0;

  const { ballImages, tubeCount, ballsPerTube } = levels[level];
  const allBalls = [];

  Object.keys(ballImages).forEach((color) => {
    for (let i = 0; i < ballsPerTube; i++) {
      allBalls.push({ color, id: ballId++ });
    }
  });

  shuffle(allBalls);

  tubes = [];
  for (let i = 0; i < tubeCount; i++) {
    tubes[i] = [];
  }

  let fillIndex = 0;
  const colorKeys = Object.keys(ballImages);
  for (let i = 0; i < colorKeys.length; i++) {
    for (let j = 0; j < ballsPerTube; j++) {
      tubes[fillIndex % (tubeCount - 2)].push(allBalls.pop());
      fillIndex++;
    }
  }

  render();
}

function render() {
  const container = document.getElementById("game-container");
  container.innerHTML = "";

  tubes.forEach((tube, index) => {
    const tubeDiv = document.createElement("div");
    tubeDiv.classList.add("tube");
    tubeDiv.dataset.index = index;
    const isFull = tube.length === levels[currentLevel].ballsPerTube;
    const isSameColor = tube.every((ball) => ball.color === tube[0]?.color);

    if (isFull && isSameColor) {
      tubeDiv.classList.add("locked");

      if (!lockedTubes.has(index)) {
        doneSlotSound.currentTime = 0; // dubara start se bajao
        doneSlotSound.play(); // ✅ sound play
        lockedTubes.add(index); // yaad rakho ki ye tube complete ho gayi
      }
    }

    tubeDiv.addEventListener("dragover", (e) => e.preventDefault());
    tubeDiv.addEventListener("drop", handleDrop);

    tube.forEach((ball) => {
      const ballDiv = document.createElement("div");
      ballDiv.classList.add("ball");
      ballDiv.style.backgroundImage = `url(${
        levels[currentLevel].ballImages[ball.color]
      })`;

      ballDiv.setAttribute("draggable", "true");
      ballDiv.dataset.id = ball.id;
      ballDiv.dataset.color = ball.color;
      ballDiv.dataset.tube = index;
      ballDiv.addEventListener("dragstart", handleDragStart);
      tubeDiv.appendChild(ballDiv);
    });

    container.appendChild(tubeDiv);
  });
}

function handleDragStart(e) {
  const tubeIndex = e.target.dataset.tube;
  const ballId = e.target.dataset.id;
  const tube = tubes[tubeIndex];
  const topBall = tube[tube.length - 1];

  // Only top ball can be dragged
  if (topBall.id != ballId) {
    e.preventDefault();
    return;
  }
  // ✅ Play bubble sound
  bubbleSound.currentTime = 0; // reset to start
  bubbleSound.play();
  e.dataTransfer.setData(
    "text/plain",
    JSON.stringify({ id: ballId, from: tubeIndex })
  );
}

function handleDrop(e) {
  const toIndex = e.currentTarget.dataset.index;
  const data = JSON.parse(e.dataTransfer.getData("text/plain"));
  const fromIndex = data.from;

  if (fromIndex === toIndex) return;

  const fromTube = tubes[fromIndex];
  const toTube = tubes[toIndex];

  if (
    fromTube.length === 0 ||
    toTube.length >= levels[currentLevel].ballsPerTube
  )
    return;

  const movingBall = fromTube[fromTube.length - 1];
  const topTo = toTube[toTube.length - 1];

  const tubeDiv = document.querySelector(`.tube[data-index="${toIndex}"]`);
  const canDrop = !tubeDiv.classList.contains("locked");

  if (canDrop) {
    toTube.push(fromTube.pop());
    // ✅ Play bubble sound again on drop
    bubbleSound.currentTime = 0;
    bubbleSound.play();
    render();
    checkCompletion();
  }
}

function checkCompletion() {
  let allComplete = true;
  for (let tube of tubes) {
    if (tube.length === 0) continue;
    if (
      tube.length !== levels[currentLevel].ballsPerTube ||
      !tube.every((b) => b.color === tube[0].color)
    ) {
      allComplete = false;
    }
  }

  if (allComplete) {
    setTimeout(() => {
      audio.pause();
      levelComplete.play();
      alert("🎉 Level " + currentLevel + " completed! You win!");
      audio.play();

      showHomeScreen();
    }, 200);
  }
}

// Show home screen and hide game container
function showHomeScreen() {
  document.getElementById("home-screen").style.display = "flex";
  document.getElementById("game-container").style.display = "none";
  document.getElementById("title").textContent = "Bubble Sorting";
}

// Show game and hide home screen
function showGameScreen(level) {
  document.getElementById("home-screen").style.display = "none";
  document.getElementById("game-container").style.display = "flex";
  document.getElementById(
    "title"
  ).textContent = `Bubble Sorting - Level ${level}`;
  initGame(level);
}

// Add event listeners to level buttons
document.querySelectorAll(".level-btn").forEach((button) => {
  button.addEventListener("click", () => {
    const level = button.dataset.level;
    showGameScreen(level);
  });
});

// Start with home screen visible
showHomeScreen();