Caps-Server/Public/grid.js

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 imageCanvas = document.getElementById("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");
const selectedCapCircle = document.getElementById("selected-cap-circle");

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 = null;
        return;
    }

    // Switch cap images
    const currentCapId = getCapIdAtPosition(currentPosition);
    const selectedCapId = getCapIdAtPosition(selectedPosition);

    setCapImageAtPosition(selectedCapId, currentPosition);
    setCapImageAtPosition(currentCapId, selectedPosition);

    selectedPosition = null;
});