ch/Caps-Server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix grid display

Browse Source
This commit is contained in:
Christoph Hagen 2022-12-20 00:56:56 +01:00
parent bb3efbf6c5
commit 64094faa27
3 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Public/grid.css
View File

@ -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;

2
Public/grid.html
View File

@ -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."/>

4
Public/grid.js
View File

@ -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";