fixing map timing errors and still trying to make leaderboard and clues pages.

Grey = cant click
Red = current
Green = complete
blue = skipped?

Need to add Clue page Need to fix Leaderboard.
This commit is contained in:
bobbert committed 2025-03-15 16:52:50 +00:00
1 parent 16319f1333
commit 30d88407a0
8 files changed
+597 -169

No files matched your search

+14 -13
View File
@@ -64,14 +64,18 @@
height: 100%;
background-color: #69b5a8; /* Background color */
overflow: auto; /* Enable scrolling */
display: flex; /* Add flexbox to center content */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
}
.treasure-map {
position: relative; /* Changed from absolute to relative */
position: relative;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
display: flex; /* Add flexbox for centering */
justify-content: center;
align-items: center;
}
/* SVG container for better scrolling and zooming */
@@ -82,16 +86,16 @@
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
overflow: visible; /* Change from auto to visible */
}
.svg-container svg {
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 90vh; /* Limit height to 90% of viewport height */
width: auto;
height: auto;
display: block;
transform-origin: center center;
object-fit: contain; /* Ensure the entire SVG is visible */
}
/* Map background - display as full-page map */
@@ -101,10 +105,8 @@
left: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
background-image: url("/images/map.svg");
background-size: contain; /* Change back to contain for proper aspect ratio */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 5;
@@ -113,12 +115,11 @@
/* Circle elements in the SVG map - attach to a container class */
.svg-container circle {
cursor: pointer;
transition: fill 0.3s ease, transform 0.3s ease;
transition: fill 0.3s ease; /* Only transition the fill color, not size */
}
.svg-container circle:hover {
fill: #ffb74d !important;
transform: scale(1.1);
fill: #ffb74d !important; /* Only change color on hover, no movement */
}
/* Remaining styles unchanged */