mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-08 03:50:21 +00:00
FIXED CLUES! all that needs to be done is manually adding circle buttons and hiding/showing feature through API.. maybe fixing QR scanner
This commit is contained in:
bobbert committed
1 parent
2236dceac9
commit
726121e105
18 files changed
+1504
-1192
No files matched your search
+81
-138
@@ -64,162 +64,45 @@
|
||||
height: 100%;
|
||||
background-color: #69b5a8; /* Background color */
|
||||
overflow: auto; /* Enable scrolling */
|
||||
display: block; /* Change from flex to block for proper scrolling */
|
||||
display: block; /* Use block for proper scrolling */
|
||||
}
|
||||
|
||||
.treasure-map {
|
||||
position: relative;
|
||||
width: fit-content; /* Change from 100% to fit-content to allow natural svg size */
|
||||
width: fit-content; /* Allow natural width */
|
||||
min-width: 100%; /* Ensure it's at least full width */
|
||||
height: fit-content;
|
||||
min-height: 100%;
|
||||
display: flex; /* Keep flex for alignment */
|
||||
display: flex;
|
||||
justify-content: flex-end; /* Align to the right */
|
||||
align-items: flex-start; /* Align to the top */
|
||||
}
|
||||
|
||||
/* SVG container for better scrolling and zooming */
|
||||
.svg-container {
|
||||
/* Map image container for positioning */
|
||||
.map-image-container {
|
||||
position: relative;
|
||||
width: fit-content; /* Allow natural width */
|
||||
height: fit-content; /* Allow natural height */
|
||||
display: block; /* Change to block for proper scrolling */
|
||||
overflow: visible; /* Show content beyond boundaries */
|
||||
z-index: 5; /* Ensure it's above the background */
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.svg-container svg {
|
||||
max-width: none; /* Remove max-width limitation */
|
||||
/* Map image styling */
|
||||
.map-image {
|
||||
display: block;
|
||||
max-width: none; /* Don't constrain the image */
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block;
|
||||
object-fit: none; /* Don't constrain the SVG */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Force SVG elements to show properly with z-index */
|
||||
.svg-container svg * {
|
||||
transform-box: fill-box;
|
||||
}
|
||||
|
||||
/* Ensure the clue points overlay is always on top */
|
||||
.svg-container svg .clue-points-overlay {
|
||||
position: relative !important;
|
||||
z-index: 9999 !important;
|
||||
pointer-events: all !important;
|
||||
}
|
||||
|
||||
/* Make clue points very visible with stronger styling */
|
||||
.svg-container .clue-point {
|
||||
fill-opacity: 1 !important;
|
||||
stroke-opacity: 1 !important;
|
||||
pointer-events: all !important;
|
||||
cursor: pointer !important;
|
||||
stroke-width: 3px !important;
|
||||
r: 14px !important;
|
||||
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.7)) !important;
|
||||
}
|
||||
|
||||
/* Remove the default map background when we have the processed SVG */
|
||||
.svg-container + .map-background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map background - only shown when SVG is loading */
|
||||
.map-background {
|
||||
/* Map overlay positioned absolutely over the map image */
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0; /* Align to the right */
|
||||
width: 100vw; /* Full viewport width */
|
||||
height: auto;
|
||||
background-image: url("/images/map.svg");
|
||||
background-size: auto; /* Don't resize the background */
|
||||
background-position: top right; /* Position at top right */
|
||||
background-repeat: no-repeat;
|
||||
z-index: 3; /* Lower z-index than the processed SVG */
|
||||
}
|
||||
|
||||
/* Circle elements in the SVG map - attach to a container class */
|
||||
.svg-container circle {
|
||||
cursor: pointer;
|
||||
transition: fill 0.3s ease; /* Only transition the fill color, not size */
|
||||
}
|
||||
|
||||
.svg-container circle:hover {
|
||||
fill: #ffb74d !important; /* Only change color on hover, no movement */
|
||||
}
|
||||
|
||||
/* Circle elements in the SVG map - attach to a container class */
|
||||
.svg-container circle.clue-point {
|
||||
cursor: pointer;
|
||||
transition: fill 0.3s ease, stroke-width 0.3s ease;
|
||||
pointer-events: all; /* Ensure clicks are detected */
|
||||
stroke-width: 2px;
|
||||
r: 8; /* Set a minimum radius for all clue points */
|
||||
}
|
||||
|
||||
/* Improve circle visibility and interactivity */
|
||||
.svg-container circle.clue-point {
|
||||
cursor: pointer !important;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: all !important;
|
||||
stroke-width: 2px;
|
||||
r: 12px; /* Larger radius for better visibility and easier clicks */
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Enhance hover effect */
|
||||
.svg-container circle.clue-point:hover {
|
||||
fill: #ffb74d !important; /* Orange hover color */
|
||||
stroke: #ff6d00 !important;
|
||||
stroke-width: 4px !important;
|
||||
transform: scale(1.2);
|
||||
z-index: 20;
|
||||
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
|
||||
/* Invisible click areas for easier interaction */
|
||||
.svg-container circle.clue-point-click-area {
|
||||
pointer-events: all !important;
|
||||
cursor: pointer !important;
|
||||
opacity: 0.01; /* Nearly invisible but still interactive */
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
/* Create custom animation for the current clue */
|
||||
@keyframes clue-point-pulse {
|
||||
0% {
|
||||
stroke-width: 3px;
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0px 0px 2px rgba(255, 152, 0, 0.7));
|
||||
}
|
||||
50% {
|
||||
stroke-width: 5px;
|
||||
transform: scale(1.2);
|
||||
filter: drop-shadow(0px 0px 8px rgba(255, 152, 0, 0.9));
|
||||
}
|
||||
100% {
|
||||
stroke-width: 3px;
|
||||
transform: scale(1);
|
||||
filter: drop-shadow(0px 0px 2px rgba(255, 152, 0, 0.7));
|
||||
}
|
||||
}
|
||||
|
||||
.svg-container circle.clue-point:hover {
|
||||
fill: #ffb74d !important; /* Orange hover color */
|
||||
stroke: #ff6d00;
|
||||
stroke-width: 3px;
|
||||
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 */
|
||||
max-width: none; /* Allow image to grow beyond container */
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: auto; /* Allow interaction with buttons */
|
||||
z-index: 20; /* Ensure overlay is above map */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
@@ -274,8 +157,8 @@
|
||||
box-sizing: border-box;
|
||||
z-index: 100; /* Ensure it stays on top */
|
||||
flex-shrink: 0; /* Prevent navbar from shrinking */
|
||||
margin: 0; /* Added margin property */
|
||||
height: auto; /* Added height property */
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -343,3 +226,63 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Clue button styling */
|
||||
.clue-button {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: #9e9e9e; /* Default grey background */
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: 3px solid #757575;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 30;
|
||||
transform: translate(-50%, -50%); /* Center the button on its position */
|
||||
}
|
||||
|
||||
.clue-button:hover {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Clue status styles */
|
||||
.clue-found {
|
||||
background-color: #2e7d32; /* Green for found clues */
|
||||
border-color: #1b5e20;
|
||||
}
|
||||
|
||||
.clue-available {
|
||||
background-color: #ff9800; /* Orange for available clues */
|
||||
border-color: #e65100;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.clue-locked {
|
||||
background-color: #9e9e9e; /* Grey for locked clues */
|
||||
border-color: #757575;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Pulse animation for available clues */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
box-shadow: 0 4px 8px rgba(255, 152, 0, 0.6);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user