bobbert/peworkshop
1
0 Fork 0
mirror of https://github.com/mudabbir-ahmad/peworkshop.git synced 2026-10-08 03:50:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed the map, made it so the map is scrollable and synced the timing between the admin page and map page. They now share the same elapsed time. need to fix map css for altering the svg.

Browse Source 
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:30:04 +00:00
1 parent e7ad53643c
commit 16319f1333
14 files changed
+791 -472
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(main)/map/map.module.css
+42 -13
View File
@@ -5,7 +5,7 @@
height: 100vh; /* Full viewport height */
overflow: hidden; /* Hide overflow at page level */
position: relative;
background-color: #69B5A8;
background-color: #69b5a8;
}
.map-banner {
@@ -59,40 +59,69 @@
/* Map container takes all available space */
.map-container {
flex: 1; /* Take all available space */
overflow: auto; /* Enable scrolling */
position: relative;
width: 100%;
height: 100%;
min-height: calc(100vh - 120px); /* Adjust for header and navbar height */
background-color: #69B5A8; /* Updated background color */
background-color: #69b5a8; /* Background color */
overflow: auto; /* Enable scrolling */
}
.treasure-map {
position: relative; /* Changed from absolute to relative */
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
}
/* SVG container for better scrolling and zooming */
.svg-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
/* New class for the background map image */
.map-background {
width: 100%;
height: 100%;
.svg-container svg {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
display: block;
transform-origin: center center;
}
/* Map background - display as full-page map */
.map-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("/images/map.svg"); /* Updated path to the correct SVG file */
background-size: contain;
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-position: center;
background-repeat: no-repeat;
z-index: 5; /* Ensure the map is above the background */
z-index: 5;
}
/* 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;
}
.svg-container circle:hover {
fill: #ffb74d !important;
transform: scale(1.1);
}
/* Remaining styles unchanged */
.map-svg {
width: 100% !important; /* Override Next.js Image default width */
height: auto !important; /* Override Next.js Image default height */