diff --git a/Public/grid.css b/Public/grid.css new file mode 100644 index 0000000..aa43cdf --- /dev/null +++ b/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; +} diff --git a/Public/grid.html b/Public/grid.html index 2a89871..f109660 100644 --- a/Public/grid.html +++ b/Public/grid.html @@ -12,2015 +12,16 @@ - + + Bottle Cap Grid | CH Maker Space -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- + diff --git a/Public/grid.js b/Public/grid.js new file mode 100644 index 0000000..643837e --- /dev/null +++ b/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 '' +}; + +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; +});