const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Game variables
let dots = [];
let clickedDots = [];
let animating = false;
let currentLine = {
  startX: 0,
  startY: 0,
  endX: 0,
  endY: 0,
  progress: 0
};

// Generate random dots
function generateDots(count) {
  dots = [];
  for (let i = 0; i < count; i++) {
    dots.push({
      x: Math.random() * (canvas.width - 100) + 50,
      y: Math.random() * (canvas.height - 100) + 50,
      radius: 15,
      index: i + 1,
      clicked: false
    });
  }
}

// Draw all dots
function drawDots() {
  dots.forEach(dot => {
    ctx.beginPath();
    ctx.arc(dot.x, dot.y, dot.radius, 0, Math.PI * 2);
    
    if (dot.clicked) {
      ctx.fillStyle = '#01ffaa';
    } else {
      ctx.fillStyle = '#b266ff';
    }
    
    ctx.fill();
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // Draw dot number
    ctx.fillStyle = 'white';
    ctx.font = 'bold 16px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(dot.index.toString(), dot.x, dot.y);
  });
}

// Draw lines between clicked dots
function drawLines() {
  if (clickedDots.length < 2) return;
  
  ctx.beginPath();
  ctx.moveTo(clickedDots[0].x, clickedDots[0].y);
  
  for (let i = 1; i < clickedDots.length; i++) {
    ctx.lineTo(clickedDots[i].x, clickedDots[i].y);
  }
  
  ctx.strokeStyle = '#18e6ff';
  ctx.lineWidth = 3;
  ctx.stroke();
}

// Animate line drawing
function animateLine() {
  if (!animating) return;
  
  // Clear only what we need to redraw
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw completed lines
  if (clickedDots.length >= 2) {
    ctx.beginPath();
    ctx.moveTo(clickedDots[0].x, clickedDots[0].y);
    
    for (let i = 1; i < clickedDots.length - 1; i++) {
      ctx.lineTo(clickedDots[i].x, clickedDots[i].y);
    }
    
    ctx.strokeStyle = '#18e6ff';
    ctx.lineWidth = 3;
    ctx.stroke();
  }
  
  // Draw current line animation
  if (clickedDots.length > 0 && currentLine.progress <= 1) {
    const startDot = clickedDots[clickedDots.length - 2] || clickedDots[0];
    const endDot = clickedDots[clickedDots.length - 1];
    
    ctx.beginPath();
    ctx.moveTo(startDot.x, startDot.y);
    
    // Calculate current point along the path
    const currentX = startDot.x + (endDot.x - startDot.x) * currentLine.progress;
    const currentY = startDot.y + (endDot.y - startDot.y) * currentLine.progress;
    
    ctx.lineTo(currentX, currentY);
    ctx.strokeStyle = '#18e6ff';
    ctx.lineWidth = 3;
    ctx.stroke();
    
    // Increase progress
    currentLine.progress += 0.05;
    
    if (currentLine.progress > 1) {
      currentLine.progress = 0;
      animating = false;
    }
  }
  
  // Draw all dots
  drawDots();
  
  if (animating) {
    requestAnimationFrame(animateLine);
  }
}

// Handle canvas clicks
canvas.addEventListener('click', function(event) {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  for (let dot of dots) {
    const dx = dot.x - x;
    const dy = dot.y - y;
    const distance = Math.sqrt(dx*dx + dy*dy);
    
    if (distance <= dot.radius && !dot.clicked) {
      dot.clicked = true;
      clickedDots.push(dot);
      
      if (clickedDots.length >= 2) {
        animating = true;
        currentLine.progress = 0;
        animateLine();
      } else {
        // First dot clicked, just redraw
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawDots();
      }
      
      break;
    }
  }
});

// Reset game button
document.getElementById('resetGame').addEventListener('click', function() {
  // Clear the entire canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Reset game state
  clickedDots = [];
  animating = false;
  currentLine.progress = 0;
  
  // Reset dots
  dots.forEach(dot => {
    dot.clicked = false;
  });
  
  // Redraw dots
  drawDots();
});