Separate grid files, load elements dynamically

Public/grid.css

@@ -0,0 +1,30 @@
+body {
+    margin: 0;
+}
+#image-canvas {
+    width: 2000px;
+    background-color: gray;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 25px;
+    padding-top: 6px;
+}
+#image-canvas img {
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    margin-top: -6px;
+}
+#image-canvas img:nth-child(80n+42) {
+    margin-left: -25px;
+}
+#selected-cap-circle {
+    width: 46px;
+    height: 46px;
+    border: 2px solid green;
+    border-radius: 25px;
+    position: absolute;
+    top: 0px;
+    left: 25px;
+    display: none;
+}

Public/grid.js

@@ -0,0 +1,105 @@
+const capImageSize = 50;
+const halfCapImageSize = capImageSize / 2;
+
+const numberOfCaps = 1875;
+const numberOfColumns = 40;
+
+const numberOfRows = Math.ceil(numberOfCaps / numberOfColumns);
+const effectiveHeight = Math.ceil(capImageSize*Math.cos(Math.PI/6));
+
+function sourcePath(capId) {
+    return "thumbnails/" +  `${capId}`.padStart(4, '0') + '.jpg'
+}
+
+function createImage(position) {
+    return '<img src="' + sourcePath(position) + '" loading="lazy"/>'
+};
+
+function setCapImageAtPosition(capId, position) {
+    elements[position].src = sourcePath(capId);
+    capPositions[position] = capId;
+}
+
+function getCapIdAtPosition(position) {
+    return capPositions[position];
+}
+
+const selectedCapCircle = document.querySelector("#selected-cap-circle");
+const imageCanvas = document.querySelector("#image-canvas");
+
+var capPositions = Array.from(
+  {length: numberOfCaps},
+  (_, index) => index + 1
+);
+
+imageCanvas.innerHTML += capPositions.map(createImage).join("");
+
+var selectedPosition = null;
+
+const elements = imageCanvas.getElementsByTagName("img");
+
+imageCanvas.addEventListener("click", function(event) {
+    const xPosition = event.clientX - imageCanvas.getBoundingClientRect().left;
+    const yPosition = event.clientY - imageCanvas.getBoundingClientRect().top;
+
+    var row = Math.floor(yPosition / effectiveHeight);
+
+    var rowIsEven = (row % 2 == 0)
+    const adjustedX = rowIsEven ? xPosition - halfCapImageSize : xPosition;
+
+    var column = Math.floor(adjustedX / capImageSize);
+
+    const rowRemainder = yPosition % effectiveHeight - halfCapImageSize;
+    const columnRemainder = adjustedX % capImageSize - halfCapImageSize;
+
+    const distanceToCenter = Math.sqrt(rowRemainder**2 + columnRemainder**2);
+    if (distanceToCenter > halfCapImageSize && rowRemainder < 6 - halfCapImageSize) {
+        // Move to the top left cap
+        row -= 1;
+
+        if (!rowIsEven && (columnRemainder < 0)) {
+            // Move to the top right cap
+            column -= 1;
+        }
+        if (rowIsEven && (columnRemainder > 0)) {
+            // Move to the top left cap
+            column += 1;
+        }
+        rowIsEven = !rowIsEven
+    }
+
+    if (row < 0 || row >= numberOfRows) {
+        return;
+    }
+    if (column < 0 || column >= numberOfColumns) {
+        return;
+    }
+
+    const currentPosition = row * numberOfColumns + column;
+
+    if (selectedPosition === null) {
+        selectedPosition = currentPosition;
+        const circlePositionX = rowIsEven ? column * capImageSize + halfCapImageSize : column * capImageSize;
+        const circlePositionY = row * effectiveHeight;
+        selectedCapCircle.style.left = circlePositionX + "px";
+        selectedCapCircle.style.top = circlePositionY + "px";
+        selectedCapCircle.style.display = "block";
+        return;
+    }
+
+    selectedCapCircle.style.display = "none";
+
+    if (currentPosition === selectedPosition) {
+        selectedPosition = -1;
+        return;
+    }
+
+    // Switch cap images
+    const currentCapId = getCapIdAtPosition(currentPosition);
+    const selectedCapId = getCapIdAtPosition(selectedPosition);
+
+    setCapImageAtPosition(selectedCapId, currentPosition);
+    setCapImageAtPosition(currentCapId, selectedPosition);
+
+    selectedPosition = null;
+});