const canvas = document.getElementById("creatureCanvas");
const ctx = canvas.getContext("2d");

let earBounce = 0;
let bounceDirection = 1;

function drawCreature() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const size = Number(document.getElementById("bodySize").value);
  const eyeSize = Number(document.getElementById("eyeSize").value);
  const eyeColor = document.getElementById("eyeColor").value;
  const earPos = document.getElementById("earPos").value; // "up" or "down"

  // Body
  ctx.fillStyle = "#888";
  ctx.beginPath();
  ctx.arc(200, 200, size, 0, Math.PI * 2);
  ctx.fill();

  // Eyes
  ctx.fillStyle = eyeColor;
  ctx.beginPath();
  ctx.arc(170, 180, eyeSize, 0, Math.PI * 2);
  ctx.arc(230, 180, eyeSize, 0, Math.PI * 2);
  ctx.fill();

  // Ears
  ctx.fillStyle = "#888";

  let earOffsetY = earPos === "up" ? -size * 0.7 : size * 0.4;
  earOffsetY += earBounce; // animation wiggle

  // Left ear
  ctx.beginPath();
  ctx.moveTo(200 - size * 0.7, 200 + earOffsetY);
  ctx.lineTo(200 - size * 0.4, 200 + earOffsetY + 40);
  ctx.lineTo(200 - size * 0.9, 200 + earOffsetY + 40);
  ctx.fill();

  // Right ear
  ctx.beginPath();
  ctx.moveTo(200 + size * 0.7, 200 + earOffsetY);
  ctx.lineTo(200 + size * 0.4, 200 + earOffsetY + 40);
  ctx.lineTo(200 + size * 0.9, 200 + earOffsetY + 40);
  ctx.fill();
}

function animate() {
  // Wiggle animation
  earBounce += bounceDirection * 0.5;
  if (earBounce > 5 || earBounce < -5) bounceDirection *= -1;

  drawCreature();
  requestAnimationFrame(animate);
}

document.querySelectorAll("input, select").forEach(el => {
  el.addEventListener("input", drawCreature);
});

animate();