script.js

const board = document.getElementById('board');
const cells = board.querySelectorAll('.cell');
const resetBtn = document.getElementById('reset');
const msgDiv = document.getElementById('msg');
const confettiCanvas = document.getElementById('confetti');
let current = "X";
let gameActive = true;
let boardState = Array(9).fill('');
const winPatterns = [
  [0,1,2],[3,4,5],[6,7,8],
  [0,3,6],[1,4,7],[2,5,8],
  [0,4,8],[2,4,6]
];

function showMessage(text) {
  msgDiv.textContent = text;
}

function switchPlayer() {
  current = current === 'X' ? 'O' : 'X';
  showMessage(`${current}'s turn`);
}

function checkWinner() {
  for(let pattern of winPatterns) {
    const [a,b,c] = pattern;
    if (boardState[a] && boardState[a] === boardState[b] && boardState[a] === boardState[c]) {
      pattern.forEach(i => cells[i].classList.add('winning'));
      showMessage(`${boardState[a]} Wins!`);
      gameActive = false;
      playConfetti();
      return true;
    }
  }
  if (boardState.every(cell => cell !== '')) {
    showMessage("It's a Draw!");
    gameActive = false;
    playConfetti();
    return true;
  }
  return false;
}

function cellClick(e) {
  const idx = parseInt(e.target.dataset.index);
  if (!gameActive || boardState[idx] !== '') return;
  boardState[idx] = current;
  e.target.textContent = current;
  e.target.classList.add('disabled');
  if (!checkWinner()) switchPlayer();
}

function resetGame() {
  boardState = Array(9).fill('');
  current = "X";
  gameActive = true;
  cells.forEach(cell => {
    cell.textContent = '';
    cell.classList.remove('winning','disabled');
  });
  showMessage(`${current}'s turn`);
  clearConfetti();
}

cells.forEach(cell=>cell.addEventListener('click', cellClick));
resetBtn.addEventListener('click', resetGame);
showMessage(`${current}'s turn`);

// Simple confetti animation
function playConfetti() {
  const ctx = confettiCanvas.getContext('2d');
  confettiCanvas.width = window.innerWidth;
  confettiCanvas.height = window.innerHeight;
  let particles = Array.from({length: 100}).map(()=>({
    x: Math.random()*window.innerWidth,
    y: Math.random()*-window.innerHeight,
    r: Math.random()*12+6,
    clr: `hsl(${Math.random()*360},85%,68%)`,
    vx: Math.random()*3-1.5,
    vy: Math.random()*3+2,
    spin: (Math.random()*360)
  }));

  let frame = 0, duration = 80;
  function draw() {
    ctx.clearRect(0,0,confettiCanvas.width,confettiCanvas.height);
    particles.forEach(p =>{
      ctx.save();
      ctx.beginPath();
      ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
      ctx.fillStyle = p.clr;
      ctx.shadowColor = p.clr;
      ctx.shadowBlur = 12;
      ctx.fill();
      ctx.restore();
      p.y += p.vy;
      p.x += p.vx;
      p.spin += 2;
      if (p.y > window.innerHeight) p.y = Math.random()*-140;
    });
    frame++;
    if (frame < duration) requestAnimationFrame(draw);
  }
  draw();
}

function clearConfetti() {
  const ctx = confettiCanvas.getContext('2d');
  ctx.clearRect(0,0,confettiCanvas.width,confettiCanvas.height);
}

// Responsive confetti
window.addEventListener('resize', ()=>{
  confettiCanvas.width = window.innerWidth;
  confettiCanvas.height = window.innerHeight;
  clearConfetti();
});