Separate grid files, load elements dynamically
This commit is contained in:
parent
4823bce190
commit
351939e492
30
Public/grid.css
Normal file
30
Public/grid.css
Normal file
@ -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;
|
||||||
|
}
|
2005
Public/grid.html
2005
Public/grid.html
File diff suppressed because it is too large
Load Diff
105
Public/grid.js
Normal file
105
Public/grid.js
Normal file
@ -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;
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user