* {
  box-sizing: border-box;
}

html,
body,
canvas {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

canvas {
  background-color: rgb(80, 80, 80);
}

.Display {
  position: fixed;
  bottom: 0;
  padding: 20px;
  background-color: white;
}

.Display__text {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  margin-bottom: 5px;
}

.Display__text--red {
  color: rgba(219, 26, 26, 0.842);
}

.Display__text--green {
  color: rgb(16, 223, 119);
}

.Display__text--blue {
  color: rgb(23, 23, 163);
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let width = window.innerWidth;
let height = window.innerHeight;
let theta = 1.57;
let mx = 0;
let my = 0;
let dx; // Adjacent
let dy; // Opposite

const dxEl = document.getElementById("dx");
const dyEl = document.getElementById("dy");
const thetaEl = document.getElementById("theta");
const degEl = document.getElementById("deg");

const draw = () => {
  const eye = {
    x: width / 2,
    y: height / 2,
    radius: 50
  };

  dx = mx - eye.x;
  dy = my - eye.y;
  theta = Math.atan2(dy, dx);

  dxEl.innerText = dx.toFixed(2);
  dyEl.innerText = dy.toFixed(2);
  thetaEl.innerText = theta.toFixed(2);
  degEl.innerText = (theta * (180 / Math.PI)).toFixed(2);

  const pupil = {
    x: eye.x + Math.cos(theta) * 20,
    y: eye.y + Math.sin(theta) * 20,
    radius: eye.radius / 2
  };

  ctx.clearRect(0, 0, width, height);

  /* Draw Eye */
  ctx.beginPath();
  ctx.arc(eye.x, eye.y, eye.radius, 0, Math.PI * 2, true);
  ctx.fillStyle = "rgb(255, 255, 255)";
  ctx.fill();
  ctx.closePath();

  /* Draw Pupil */
  ctx.beginPath();
  ctx.arc(pupil.x, pupil.y, pupil.radius, 0, Math.PI * 2, true);
  ctx.fillStyle = "rgb(0, 0, 0)";
  ctx.fill();
  ctx.closePath();

  /* Draw Debug Triangle */
  ctx.beginPath();
  ctx.moveTo(eye.x, eye.y);
  ctx.strokeStyle = "rgb(23, 23, 163)";
  ctx.lineTo(mx, my);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(mx, my);
  ctx.strokeStyle = "rgb(219, 26, 26, 0.842)";
  ctx.lineTo(mx, eye.y);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(mx, eye.y);
  ctx.strokeStyle = "rgb(16, 223, 119)";
  ctx.lineTo(eye.x, eye.y);
  ctx.stroke();
  ctx.closePath();

  /* Draw Debug Circle */
  ctx.beginPath();
  ctx.arc(eye.x, eye.y, Math.hypot(dx, dy), 0, Math.PI * 2, true);
  ctx.strokeStyle = "rgb(0, 0, 0)";
  ctx.stroke();
  ctx.closePath();

  window.requestAnimationFrame(draw);
};

const handleResize = () => {
  console.log("resize");
  width = window.innerWidth;
  height = window.innerHeight;

  /* Set the size on canvas instead of CSS to avoid strecthing */
  canvas.width = width;
  canvas.height = height;
};

const handleMousemove = e => {
  mx = e.clientX;
  my = e.clientY;
};

window.addEventListener("resize", handleResize);
window.addEventListener("mousemove", handleMousemove);
handleResize();
draw();