const distanceTarget = document.getElementById("distance-target");
const distancePad = document.getElementById("distance-pad");
const distanceRound = document.getElementById("distance-round");

let distanceRect = distancePad.getBoundingClientRect();
let distanceWidth = distancePad.clientWidth;
let distanceHeight = distancePad.clientHeight;

control = false;

distancePad.addEventListener("mouseenter", () => {
	control = true;
});

distancePad.addEventListener("mouseleave", () => {
	control = false;
});

distancePad.addEventListener("mousemove", (e) => {
	if (control) {
		var x = e.clientX - distanceRect.left; //x position within the element.
		var y = e.clientY - distanceRect.top; //y position within the element.

		distanceTarget.style.borderRadius = `${
			(calculateDistance(distanceRound, x, y) / distanceWidth / 2) * 100
		}%`;
	}
});

function calculateDistance(elem, mouseX, mouseY) {
	return Math.floor(
		Math.sqrt(
			Math.pow(mouseX - (elem.offsetLeft + elem.clientWidth / 2), 2) +
				Math.pow(mouseY - (elem.offsetTop + elem.clientHeight / 2), 2)
		)
	);
}