diff --git a/Public/grid.css b/Public/grid.css index 7669643..1059917 100644 --- a/Public/grid.css +++ b/Public/grid.css @@ -14,8 +14,7 @@ body { display: flex; flex-wrap: wrap; padding-left: 25px; - padding-top: 6px; - margin-top: 50px; + padding-top: 56px; } #image-canvas img { width: 50px; diff --git a/Public/grid.html b/Public/grid.html index 916fd12..7952922 100644 --- a/Public/grid.html +++ b/Public/grid.html @@ -13,7 +13,7 @@ - + Bottle Cap Grid | CH Maker Space diff --git a/Public/grid.js b/Public/grid.js index 7ec1e1e..5c4c73c 100644 --- a/Public/grid.js +++ b/Public/grid.js @@ -41,7 +41,7 @@ const selectedCapCircle = document.getElementById("selected-cap-circle"); imageCanvas.addEventListener("click", function(event) { const yOffset = 50; const xPosition = event.clientX - imageCanvas.getBoundingClientRect().left; - const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top + yOffset; + const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top - yOffset; var row = Math.floor(yPosition / effectiveHeight); @@ -81,7 +81,7 @@ imageCanvas.addEventListener("click", function(event) { if (selectedPosition === null) { selectedPosition = currentPosition; const circlePositionX = rowIsEven ? column * capImageSize + halfCapImageSize : column * capImageSize; - const circlePositionY = row * effectiveHeight; + const circlePositionY = row * effectiveHeight + yOffset; selectedCapCircle.style.left = circlePositionX + "px"; selectedCapCircle.style.top = circlePositionY + "px"; selectedCapCircle.style.display = "block";