From 64094faa27b274e863541e6135bedbf7356ca0a7 Mon Sep 17 00:00:00 2001
From: Christoph Hagen <github@christophhagen.de>
Date: Tue, 20 Dec 2022 00:56:56 +0100
Subject: [PATCH] Fix grid display

---
 Public/grid.css  | 3 +--
 Public/grid.html | 2 +-
 Public/grid.js   | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

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 @@
         <meta name="msapplication-TileColor" content="#da532c">
         <meta name="msapplication-config" content="/assets/icons/browserconfig.xml?v=1"/>
         <meta name="theme-color" content="#ffffff"/>
-        <link href="grid.css" rel="stylesheet"/>
+        <link href="grid.css?v=1" rel="stylesheet"/>
         <meta name="author" content="Christoph Hagen"/>
         <title>Bottle Cap Grid | CH Maker Space</title>
         <meta name="description" content="A grid view of all bottle caps in my collection. Try to create an image with them."/>
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";