mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
Fixed issue with map not loading, making SVG dynamically altered depending on the number of clues. then linking that to the clue pages
Grey = cant click Red = current Green = complete blue = skipped?
This commit is contained in:
bobbert committed
1 parent
0269fdfe68
commit
727555e70f
8 files changed
+645
-310
No files matched your search
@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { use } from "react"; // Add this import for React.use()
|
||||
import NavBar from "@/components/NavBar";
|
||||
|
||||
export default function TeamPage({ params }) {
|
||||
const { status, data: session } = useSession();
|
||||
@@ -276,27 +277,7 @@ export default function TeamPage({ params }) {
|
||||
</div>
|
||||
|
||||
{/* Replace the outdated navbar with the correct one */}
|
||||
<div className="nav-bar">
|
||||
<Link href="/map" className="nav-item">
|
||||
<div className="nav-icon">🗺️</div>
|
||||
<div className="nav-label">Map</div>
|
||||
</Link>
|
||||
<Link href="/stats" className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
<div className="nav-label">Stats</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={team ? `/${team.id}` : "/team-selection"}
|
||||
className="nav-item active"
|
||||
>
|
||||
<div className="nav-icon">👥</div>
|
||||
<div className="nav-label">Team</div>
|
||||
</Link>
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<div className="nav-icon">🏆</div>
|
||||
<div className="nav-label">Leaderboard</div>
|
||||
</Link>
|
||||
</div>
|
||||
<NavBar activeLink="team" teamData={team} />
|
||||
|
||||
<style jsx>{`
|
||||
.team-page {
|
||||
@@ -420,6 +401,7 @@ export default function TeamPage({ params }) {
|
||||
width: 100%; /* Use 100% instead of 100vw to prevent overflow issues */
|
||||
box-sizing: border-box; /* Include padding in width calculation */
|
||||
z-index: 100; /* Ensure navbar is above other content */
|
||||
margin: 0; /* Remove any margin that might be causing the gap */
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
@@ -168,13 +168,15 @@
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: sticky; /* Sticky positioning */
|
||||
position: fixed; /* Changed from sticky to fixed */
|
||||
bottom: 0; /* Stick to bottom */
|
||||
left: 0;
|
||||
width: 100%;
|
||||
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 */
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
+287
-246
@@ -10,6 +10,7 @@ import {
|
||||
clearHuntTimer,
|
||||
formatElapsedTime,
|
||||
} from "@/utils/timerService";
|
||||
import { populateMap, updateCluePointStatus } from "@/utils/map-populate";
|
||||
|
||||
export default function MapPage() {
|
||||
const { data: session, status } = useSession();
|
||||
@@ -39,300 +40,217 @@ export default function MapPage() {
|
||||
|
||||
// Hard redirect function (for when a full page reload is needed)
|
||||
const hardRedirect = useCallback((url) => {
|
||||
if (typeof window !== "undefined" && isMounted.current) {
|
||||
window.location.href = url;
|
||||
}
|
||||
window.location.href = url;
|
||||
}, []);
|
||||
|
||||
// Add function to fetch team hunt start time
|
||||
const fetchTeamHuntStartTime = useCallback(async () => {
|
||||
try {
|
||||
// First check localStorage for cached start time
|
||||
const cachedStartTime = localStorage.getItem("teamHuntStartTime");
|
||||
|
||||
// If we have a cached time, use it
|
||||
if (cachedStartTime) {
|
||||
return cachedStartTime;
|
||||
}
|
||||
|
||||
// Otherwise fetch from the server - use effectiveTeamId which is derived from session
|
||||
const effectiveTeamId = session?.user?.teamId;
|
||||
if (effectiveTeamId) {
|
||||
const response = await fetch(
|
||||
`/api/teams/${effectiveTeamId}/hunt-session`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
},
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.startTime) {
|
||||
// Cache the start time for future use
|
||||
localStorage.setItem("teamHuntStartTime", data.startTime);
|
||||
return data.startTime;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to current time if we couldn't get a start time
|
||||
return new Date().toISOString();
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch team hunt start time:", error);
|
||||
return new Date().toISOString();
|
||||
}
|
||||
}, []); // No dependencies to avoid re-creation - we'll handle session internally
|
||||
|
||||
// IMPORTANT: Move fetchTeamData up here, before it's referenced in useEffect dependencies
|
||||
// Fetch team data for the current user
|
||||
const fetchTeamData = useCallback(async () => {
|
||||
if (!isMounted.current) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await fetch("/api/user/team", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
softRedirect("/login");
|
||||
return null;
|
||||
}
|
||||
|
||||
if (response.status === 404) {
|
||||
softRedirect("/team-selection");
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch team data");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setTeamData(data);
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch team data:", err);
|
||||
setError(err.message);
|
||||
return null;
|
||||
}
|
||||
}, [softRedirect]);
|
||||
|
||||
// Fetch all clues with their status
|
||||
const fetchClues = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch("/api/clues", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
// Handle specific error cases without immediate redirect
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.status === 401) {
|
||||
// Set error but don't redirect immediately - let the session handling take care of it
|
||||
setError(
|
||||
"Authentication error: " + (errorData.error || "Not logged in")
|
||||
);
|
||||
setLoading(false);
|
||||
return;
|
||||
} else if (
|
||||
response.status === 404 ||
|
||||
errorData.error?.includes("not part of a team")
|
||||
) {
|
||||
setError("You need to join a team before viewing the map");
|
||||
setLoading(false);
|
||||
// Give user time to read the error message before redirect
|
||||
setTimeout(() => {
|
||||
if (isMounted.current) {
|
||||
softRedirect("/team-selection");
|
||||
}
|
||||
}, 2000);
|
||||
return;
|
||||
} else {
|
||||
throw new Error(errorData.error || "Failed to fetch team data");
|
||||
}
|
||||
throw new Error("Failed to fetch clues");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (isMounted.current) {
|
||||
setTeamData(data);
|
||||
setLoading(false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching team data:", err);
|
||||
if (isMounted.current) {
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, [softRedirect]);
|
||||
|
||||
// Function to fetch clues
|
||||
const fetchClues = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch("/api/clues", {
|
||||
headers: { "Cache-Control": "no-cache, no-store, must-revalidate" },
|
||||
credentials: "include",
|
||||
// Process the clues to determine which are available
|
||||
// A clue is available if it's either found already or the next in sequence
|
||||
const processedClues = data.map((clue, index, arr) => {
|
||||
// Find the first unfound clue's index
|
||||
const firstUnfoundIndex = arr.findIndex((c) => !c.found);
|
||||
|
||||
// A clue is available if:
|
||||
// 1. It's already found, OR
|
||||
// 2. It's the next unfound clue in the sequence
|
||||
const available = clue.found || index === firstUnfoundIndex;
|
||||
|
||||
return { ...clue, available };
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const cluesData = await response.json();
|
||||
setClues(cluesData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch clues:", error);
|
||||
setClues(processedClues);
|
||||
return processedClues;
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch clues:", err);
|
||||
setError(err.message);
|
||||
return [];
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Function to load and enhance the SVG map
|
||||
const loadAndEnhanceMap = useCallback(async () => {
|
||||
try {
|
||||
// Fetch the SVG file
|
||||
const response = await fetch("/images/map.svg");
|
||||
|
||||
if (!response.ok) {
|
||||
console.error(
|
||||
"Failed to load SVG:",
|
||||
response.status,
|
||||
response.statusText
|
||||
);
|
||||
setMapError(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const svgText = await response.text();
|
||||
setMapSvg(svgText);
|
||||
console.log("SVG loaded, length:", svgText.length);
|
||||
|
||||
// Ensure SVG has correct namespaces and viewBox
|
||||
let fixedSvg = svgText.replace(
|
||||
/<svg/,
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'
|
||||
);
|
||||
|
||||
// Ensure SVG has a proper viewBox attribute if missing
|
||||
if (!fixedSvg.includes('viewBox="')) {
|
||||
const widthMatch = fixedSvg.match(/width="([^"]+)"/);
|
||||
const heightMatch = fixedSvg.match(/height="([^"]+)"/);
|
||||
if (widthMatch && heightMatch) {
|
||||
const width = widthMatch[1];
|
||||
const height = heightMatch[1];
|
||||
fixedSvg = fixedSvg.replace(
|
||||
/<svg/,
|
||||
`<svg viewBox="0 0 ${width} ${height}"`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
setMapSvg(fixedSvg);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to load map SVG:", error);
|
||||
setMapError(true);
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Function to enhance SVG with clickable areas
|
||||
// Enhanced function to populate the map with clue points
|
||||
const enhanceSvgMap = useCallback(() => {
|
||||
if (!mapContainerRef.current || !clues.length) return;
|
||||
if (!mapContainerRef.current) return;
|
||||
|
||||
// Find all circles in the SVG
|
||||
const circleSvgElements =
|
||||
mapContainerRef.current.querySelectorAll("circle");
|
||||
console.log(`Found ${circleSvgElements.length} circles in SVG`);
|
||||
|
||||
// Find the highest available clue ID (first unfound clue)
|
||||
let nextAvailableClueIndex = clues.findIndex((clue) => !clue.found);
|
||||
if (nextAvailableClueIndex === -1) {
|
||||
// If all clues are found, allow access to all
|
||||
nextAvailableClueIndex = clues.length;
|
||||
// Find the SVG element inside the map container
|
||||
const svgElement = mapContainerRef.current.querySelector("svg");
|
||||
if (!svgElement) {
|
||||
console.error("No SVG element found in map container");
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert NodeList to Array for easier manipulation
|
||||
Array.from(circleSvgElements).forEach((circle, index) => {
|
||||
// Only process if we have a clue for this index and it's within bounds
|
||||
if (index < clues.length) {
|
||||
// Map SVG circle at position index to the clue at index
|
||||
// This uses sequential order rather than coordinates
|
||||
const clue = clues[index];
|
||||
console.log("SVG element found, starting enhancement");
|
||||
|
||||
// Check if this clue is available (either found or next in sequence)
|
||||
const isAvailable = clue.found || index <= nextAvailableClueIndex;
|
||||
// Use our utility to populate the map with clue points
|
||||
populateMap(svgElement)
|
||||
.then((success) => {
|
||||
if (success) {
|
||||
console.log("Map populated successfully");
|
||||
// After populating the map, update the status of each clue point
|
||||
updateCluePointStatus(svgElement, clues);
|
||||
|
||||
// Make circle interactive
|
||||
circle.style.cursor = isAvailable ? "pointer" : "not-allowed";
|
||||
// Add click handlers to each clue point
|
||||
const cluePoints = svgElement.querySelectorAll(".clue-point");
|
||||
cluePoints.forEach((circle, index) => {
|
||||
if (index < clues.length) {
|
||||
const clue = clues[index];
|
||||
const isAvailable = clue.available;
|
||||
|
||||
// Set appropriate colors
|
||||
if (clue.found) {
|
||||
// Found clues are green
|
||||
circle.style.fill = "#4caf50";
|
||||
circle.style.stroke = "#2e7d32";
|
||||
} else if (isAvailable) {
|
||||
// Next available clue is orange
|
||||
circle.style.fill = "#ff9800";
|
||||
circle.style.stroke = "#d87f00";
|
||||
// Make circle interactive
|
||||
circle.style.cursor = isAvailable ? "pointer" : "not-allowed";
|
||||
|
||||
// Add click handler
|
||||
circle.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (isAvailable) {
|
||||
console.log(`Navigating to clue ${clue.id}`);
|
||||
router.push(`/clue/${clue.id}`);
|
||||
} else {
|
||||
alert("Complete previous clues first to unlock this one!");
|
||||
}
|
||||
};
|
||||
|
||||
// Add hover effects
|
||||
circle.onmouseenter = () => {
|
||||
if (isAvailable) {
|
||||
circle.style.fill = "#ffb74d"; // Lighter orange for hover
|
||||
}
|
||||
};
|
||||
|
||||
circle.onmouseleave = () => {
|
||||
if (clue.found) {
|
||||
circle.style.fill = "#4caf50"; // Back to green for found clues
|
||||
} else if (isAvailable) {
|
||||
circle.style.fill = "#ff9800"; // Back to orange for available clues
|
||||
} else {
|
||||
circle.style.fill = "#9e9e9e"; // Back to grey for unavailable clues
|
||||
}
|
||||
};
|
||||
|
||||
// Add tooltip with clue information
|
||||
const label = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"title"
|
||||
);
|
||||
label.textContent = `Clue #${index + 1}: ${
|
||||
clue.title || "Mystery clue"
|
||||
}${!isAvailable ? " (Locked)" : ""}`;
|
||||
circle.appendChild(label);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Unavailable clues are grey
|
||||
circle.style.fill = "#9e9e9e";
|
||||
circle.style.stroke = "#757575";
|
||||
console.error("Failed to populate map");
|
||||
}
|
||||
|
||||
circle.style.strokeWidth = "2";
|
||||
|
||||
// Add click handler to navigate to the clue page, but only if available
|
||||
circle.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (isAvailable) {
|
||||
console.log(`Navigating to clue ${clue.id}`);
|
||||
router.push(`/clue/${clue.id}`);
|
||||
} else {
|
||||
alert("Complete previous clues first to unlock this one!");
|
||||
}
|
||||
};
|
||||
|
||||
// Add hover effects
|
||||
circle.onmouseenter = () => {
|
||||
if (isAvailable) {
|
||||
circle.style.fill = "#ffb74d"; // Lighter orange for hover
|
||||
}
|
||||
};
|
||||
|
||||
circle.onmouseleave = () => {
|
||||
if (clue.found) {
|
||||
circle.style.fill = "#4caf50"; // Back to green for found clues
|
||||
} else if (isAvailable) {
|
||||
circle.style.fill = "#ff9800"; // Back to orange for available clues
|
||||
} else {
|
||||
circle.style.fill = "#9e9e9e"; // Back to grey for unavailable clues
|
||||
}
|
||||
};
|
||||
|
||||
// Add tooltip/title with actual clue ID and position information
|
||||
const label = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"title"
|
||||
);
|
||||
label.textContent = `Clue #${index + 1}: ${
|
||||
clue.title || "Mystery clue"
|
||||
}${!isAvailable ? " (Locked)" : ""}`;
|
||||
circle.appendChild(label);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error enhancing SVG map:", error);
|
||||
setMapError(true);
|
||||
});
|
||||
}, [clues, router]);
|
||||
|
||||
// Clean up function for unmounting
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Initial hunt status check
|
||||
useEffect(() => {
|
||||
// Check if hunt is active
|
||||
checkHuntAndTimer();
|
||||
|
||||
// Set up periodic checks
|
||||
const interval = setInterval(checkHuntAndTimer, 3000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Handle authentication and hunt status
|
||||
useEffect(() => {
|
||||
// Only redirect if explicitly not authenticated
|
||||
if (status === "unauthenticated") {
|
||||
softRedirect("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
// If hunt is not active, redirect to waiting page
|
||||
if (huntActive === false) {
|
||||
console.log("Hunt is not active, redirecting to waiting page");
|
||||
softRedirect("/waiting");
|
||||
return;
|
||||
}
|
||||
|
||||
// Only fetch team data if authenticated and hunt is active or status unknown
|
||||
if (status === "authenticated" && huntActive !== false) {
|
||||
fetchTeamData();
|
||||
loadAndEnhanceMap();
|
||||
fetchClues();
|
||||
}
|
||||
}, [
|
||||
status,
|
||||
huntActive,
|
||||
softRedirect,
|
||||
fetchTeamData,
|
||||
loadAndEnhanceMap,
|
||||
fetchClues,
|
||||
]);
|
||||
|
||||
// Add effect to enhance SVG once it's loaded and clues are fetched
|
||||
useEffect(() => {
|
||||
if (mapSvg && clues.length > 0) {
|
||||
console.log("SVG and clues loaded, enhancing map...");
|
||||
|
||||
// Let the DOM update first with the SVG content
|
||||
const enhanceTimeout = setTimeout(() => {
|
||||
enhanceSvgMap();
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(enhanceTimeout);
|
||||
}
|
||||
}, [mapSvg, clues, enhanceSvgMap]);
|
||||
|
||||
// Function to check hunt status and timer
|
||||
async function checkHuntAndTimer() {
|
||||
if (!isMounted.current) return;
|
||||
@@ -404,6 +322,77 @@ export default function MapPage() {
|
||||
}
|
||||
}
|
||||
|
||||
// Add this function before it's used in initializeTimer
|
||||
async function fetchTeamHuntStartTime() {
|
||||
try {
|
||||
// First get the user's team ID
|
||||
const userResponse = await fetch("/api/user", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Cache-Control": "no-store, no-cache, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!userResponse.ok) {
|
||||
console.error("Failed to fetch user data:", userResponse.statusText);
|
||||
return null;
|
||||
}
|
||||
|
||||
const userData = await userResponse.json();
|
||||
const teamId = userData.teamId;
|
||||
|
||||
if (!teamId) {
|
||||
console.error("User does not belong to a team");
|
||||
return null;
|
||||
}
|
||||
|
||||
// Now fetch the team's hunt session using the team ID
|
||||
const teamHuntResponse = await fetch(
|
||||
`/api/teams/${teamId}/hunt-session`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Cache-Control": "no-store, no-cache, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (!teamHuntResponse.ok) {
|
||||
console.error(
|
||||
"Failed to fetch team hunt session:",
|
||||
teamHuntResponse.statusText
|
||||
);
|
||||
|
||||
// Try the global hunt timer as fallback
|
||||
const globalResponse = await fetch("/api/hunt/timer", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Cache-Control": "no-store, no-cache, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (globalResponse.ok) {
|
||||
const globalData = await globalResponse.json();
|
||||
return globalData.startTime || null;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const teamHuntData = await teamHuntResponse.json();
|
||||
return teamHuntData.startTime || null;
|
||||
} catch (error) {
|
||||
console.error("Error fetching team hunt start time:", error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Use team hunt start time for elapsed time calculation
|
||||
useEffect(() => {
|
||||
// Initialize the timer without waiting for teamData
|
||||
@@ -533,6 +522,57 @@ export default function MapPage() {
|
||||
return () => clearInterval(intervalId);
|
||||
}, [softRedirect, hardRedirect]);
|
||||
|
||||
// Add this useEffect to coordinate loading the map and clues
|
||||
useEffect(() => {
|
||||
// Only proceed if authenticated
|
||||
if (status === "authenticated") {
|
||||
const initMap = async () => {
|
||||
try {
|
||||
// Set loading state
|
||||
setLoading(true);
|
||||
|
||||
// Load both map and clues in parallel
|
||||
await Promise.all([fetchClues(), loadAndEnhanceMap()]);
|
||||
|
||||
// Data is loaded, we'll let the next effect handle enhancement
|
||||
} catch (error) {
|
||||
console.error("Error initializing map data:", error);
|
||||
setError("Failed to load map data");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
initMap();
|
||||
} else if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [status, fetchClues, loadAndEnhanceMap, router]);
|
||||
|
||||
// Modified useEffect to better handle SVG loading and enhancement
|
||||
useEffect(() => {
|
||||
// Only try to enhance the map if both the SVG and clues are loaded
|
||||
if (!mapSvg || !clues.length) return;
|
||||
|
||||
console.log("Both SVG and clues loaded, enhancing map");
|
||||
|
||||
// Use requestAnimationFrame to ensure the DOM has been updated with the SVG
|
||||
requestAnimationFrame(() => {
|
||||
// Short timeout to ensure the SVG is fully rendered in the DOM
|
||||
setTimeout(() => {
|
||||
if (
|
||||
mapContainerRef.current &&
|
||||
mapContainerRef.current.querySelector("svg")
|
||||
) {
|
||||
console.log("SVG found in DOM, enhancing map");
|
||||
enhanceSvgMap();
|
||||
} else {
|
||||
console.error("SVG not found in DOM after rendering");
|
||||
setMapError(true);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}, [mapSvg, clues, enhanceSvgMap]);
|
||||
|
||||
if (status === "loading" || loading) {
|
||||
return (
|
||||
<div className={styles["loading-container"]}>
|
||||
@@ -588,13 +628,14 @@ export default function MapPage() {
|
||||
<div className={styles["team-code"]}>{teamData?.team?.code || ""}</div>
|
||||
</div>
|
||||
|
||||
{/* Main map content area - now allows scrolling with right alignment */}
|
||||
{/* Main map content area */}
|
||||
<div className={styles["map-container"]} ref={mapContainerRef}>
|
||||
<div className={styles["treasure-map"]}>
|
||||
{mapSvg ? (
|
||||
<div
|
||||
className={styles["svg-container"]}
|
||||
dangerouslySetInnerHTML={{ __html: mapSvg }}
|
||||
onLoad={() => console.log("SVG container loaded")}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
@@ -606,7 +647,7 @@ export default function MapPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation bar at the bottom */}
|
||||
{/* Navigation bar */}
|
||||
<nav className={styles["nav-bar"]}>
|
||||
<Link
|
||||
href="/map"
|
||||
|
||||
@@ -369,8 +369,7 @@ export default function TeamPage({ params }) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
font-family: Arial, sans-serif;
|
||||
padding-bottom: 70px; /* Add space for the navbar */
|
||||
}
|
||||
|
||||
.team-banner {
|
||||
@@ -475,6 +474,11 @@ export default function TeamPage({ params }) {
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
|
||||
Binary file not shown.
@@ -0,0 +1,90 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import styles from "@/app/(main)/map/map.module.css";
|
||||
|
||||
export default function NavBar({ activeLink, teamData }) {
|
||||
const [huntActive, setHuntActive] = useState(null);
|
||||
const router = useRouter();
|
||||
|
||||
// Check if hunt is active
|
||||
useEffect(() => {
|
||||
const checkHuntStatus = async () => {
|
||||
try {
|
||||
const timestamp = Date.now();
|
||||
const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-store, no-cache, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setHuntActive(data.active);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to check hunt status:", err);
|
||||
}
|
||||
};
|
||||
|
||||
checkHuntStatus();
|
||||
}, []);
|
||||
|
||||
// Handle map link click
|
||||
const handleMapClick = (e) => {
|
||||
if (huntActive === false) {
|
||||
e.preventDefault();
|
||||
router.push("/waiting");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className={styles["nav-bar"]}>
|
||||
<Link
|
||||
href="/map"
|
||||
className={`${styles["nav-item"]} ${
|
||||
activeLink === "map" ? styles["active"] : ""
|
||||
}`}
|
||||
onClick={handleMapClick}
|
||||
>
|
||||
<div className={styles["nav-icon"]}>🗺️</div>
|
||||
<div className={styles["nav-label"]}>Map</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/stats"
|
||||
className={`${styles["nav-item"]} ${
|
||||
activeLink === "stats" ? styles["active"] : ""
|
||||
}`}
|
||||
>
|
||||
<div className={styles["nav-icon"]}>📊</div>
|
||||
<div className={styles["nav-label"]}>Stats</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={teamData?.team ? `/${teamData.team.id}` : "/team-selection"}
|
||||
className={`${styles["nav-item"]} ${
|
||||
activeLink === "team" ? styles["active"] : ""
|
||||
}`}
|
||||
>
|
||||
<div className={styles["nav-icon"]}>👥</div>
|
||||
<div className={styles["nav-label"]}>Team</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/leaderboard"
|
||||
className={`${styles["nav-item"]} ${
|
||||
activeLink === "leaderboard" ? styles["active"] : ""
|
||||
}`}
|
||||
>
|
||||
<div className={styles["nav-icon"]}>🏆</div>
|
||||
<div className={styles["nav-label"]}>Leaderboard</div>
|
||||
</Link>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
+40
-40
@@ -23,84 +23,84 @@
|
||||
<rect x="181" y="1974" width="88" height="88" fill="url(#pattern10_37_192)"/>
|
||||
<rect x="373" y="1512" width="88" height="88" fill="url(#pattern11_37_192)"/>
|
||||
<g filter="url(#filter0_d_37_192)">
|
||||
<circle cx="230" cy="211" r="25" fill="#A5D6A7"/>
|
||||
<circle cx="230" cy="211" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="230" cy="211" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="230" cy="211" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_37_192)">
|
||||
<circle cx="320" cy="284" r="25" fill="#A5D6A7"/>
|
||||
<circle cx="320" cy="284" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="320" cy="284" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="320" cy="284" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter2_d_37_192)">
|
||||
<circle cx="264" cy="397" r="25" fill="#A5D6A7"/>
|
||||
<circle cx="264" cy="397" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="264" cy="397" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="264" cy="397" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter3_d_37_192)">
|
||||
<circle cx="342" cy="517" r="25" fill="#A5D6A7"/>
|
||||
<circle cx="342" cy="517" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="342" cy="517" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="342" cy="517" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter4_d_37_192)">
|
||||
<circle cx="320" cy="645" r="25" fill="#A5D6A7"/>
|
||||
<circle cx="320" cy="645" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="320" cy="645" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="320" cy="645" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter5_d_37_192)">
|
||||
<circle cx="295" cy="773" r="25" fill="#E57373"/>
|
||||
<circle cx="295" cy="773" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="295" cy="773" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="295" cy="773" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter6_d_37_192)">
|
||||
<circle cx="239" cy="880" r="25" fill="#38809E"/>
|
||||
<circle cx="239" cy="880" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="239" cy="880" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="239" cy="880" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter7_d_37_192)">
|
||||
<circle cx="354" cy="959" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="354" cy="959" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="354" cy="959" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="354" cy="959" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter8_d_37_192)">
|
||||
<circle cx="270" cy="1036" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="270" cy="1036" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="270" cy="1036" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="270" cy="1036" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter9_d_37_192)">
|
||||
<circle cx="279" cy="1174" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="279" cy="1174" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="279" cy="1174" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="279" cy="1174" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter10_d_37_192)">
|
||||
<circle cx="337" cy="1302" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="337" cy="1302" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="337" cy="1302" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="337" cy="1302" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter11_d_37_192)">
|
||||
<circle cx="250" cy="1388" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="250" cy="1388" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="250" cy="1388" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="250" cy="1388" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter12_d_37_192)">
|
||||
<circle cx="162" cy="1487" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="162" cy="1487" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="162" cy="1487" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="162" cy="1487" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter13_d_37_192)">
|
||||
<circle cx="306" cy="1531" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="306" cy="1531" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="306" cy="1531" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="306" cy="1531" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter14_d_37_192)">
|
||||
<circle cx="342" cy="1649" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="342" cy="1649" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="342" cy="1649" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="342" cy="1649" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter15_d_37_192)">
|
||||
<circle cx="225" cy="1724" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="225" cy="1724" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="225" cy="1724" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="225" cy="1724" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter16_d_37_192)">
|
||||
<circle cx="216" cy="1822" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="216" cy="1822" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="216" cy="1822" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="216" cy="1822" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter17_d_37_192)">
|
||||
<circle cx="275" cy="1883" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="275" cy="1883" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="275" cy="1883" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="275" cy="1883" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter18_d_37_192)">
|
||||
<circle cx="362" cy="1917" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="362" cy="1917" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="362" cy="1917" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="362" cy="1917" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
<g filter="url(#filter19_d_37_192)">
|
||||
<circle cx="300" cy="2037" r="25" fill="#D9D9D9"/>
|
||||
<circle cx="300" cy="2037" r="25" stroke="black" stroke-width="2"/>
|
||||
<circle cx="300" cy="2037" r="25" fill="#9e9e9e"/>
|
||||
<circle cx="300" cy="2037" r="25" stroke="#757575" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
|
Before Width: | Height: | Size: 493 KiB After Width: | Height: | Size: 493 KiB |
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* Utility to dynamically populate the map SVG with clue points
|
||||
* based on the total number of clues in the database
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fetches the total number of clues from the API
|
||||
* @returns {Promise<number>} The total number of clues
|
||||
*/
|
||||
async function fetchTotalClues() {
|
||||
try {
|
||||
const response = await fetch("/api/clues", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-store, no-cache, must-revalidate",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch clues: ${response.status}`);
|
||||
}
|
||||
|
||||
const clues = await response.json();
|
||||
return clues.length;
|
||||
} catch (error) {
|
||||
console.error("Error fetching total clues:", error);
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows the specified number of clue points on the map
|
||||
* @param {SVGElement} svgElement - The SVG DOM element of the map
|
||||
* @param {number} numClues - Number of clues to display
|
||||
* @returns {boolean} Success status
|
||||
*/
|
||||
function showCluePoints(svgElement, numClues) {
|
||||
if (!svgElement || !numClues) {
|
||||
console.error("Invalid SVG element or number of clues");
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// Find all clue points in the SVG - improved selector for better compatibility
|
||||
const cluePoints = Array.from(svgElement.querySelectorAll("circle")).filter(
|
||||
(circle) =>
|
||||
circle.classList.contains("clue-point") ||
|
||||
circle.getAttribute("class")?.includes("clue-point")
|
||||
);
|
||||
|
||||
console.log(`Found ${cluePoints.length} clue points in SVG`);
|
||||
|
||||
// If no clue points are found, add them programmatically
|
||||
if (cluePoints.length === 0) {
|
||||
console.log("No clue points found, creating them dynamically");
|
||||
return createCluePoints(svgElement, numClues);
|
||||
}
|
||||
|
||||
// Hide all clue points first
|
||||
cluePoints.forEach((circle) => {
|
||||
circle.style.display = "none";
|
||||
});
|
||||
|
||||
// Show only the required number of clue points
|
||||
for (let i = 0; i < Math.min(numClues, cluePoints.length); i++) {
|
||||
const circle = cluePoints[i];
|
||||
circle.style.display = "";
|
||||
// Ensure the circle has the clue-point class and a data-clue-id
|
||||
circle.classList.add("clue-point");
|
||||
if (!circle.hasAttribute("data-clue-id")) {
|
||||
circle.setAttribute("data-clue-id", (i + 1).toString());
|
||||
}
|
||||
}
|
||||
|
||||
console.log(
|
||||
`Showing ${Math.min(numClues, cluePoints.length)} clue points on map`
|
||||
);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Error showing clue points:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates clue points dynamically if they don't exist in the SVG
|
||||
* @param {SVGElement} svgElement - The SVG DOM element of the map
|
||||
* @param {number} numClues - Number of clues to create
|
||||
* @returns {boolean} Success status
|
||||
*/
|
||||
function createCluePoints(svgElement, numClues) {
|
||||
try {
|
||||
const svgWidth = svgElement.viewBox.baseVal.width || 800;
|
||||
const svgHeight = svgElement.viewBox.baseVal.height || 600;
|
||||
|
||||
// Define positions for clue points - spread across the map
|
||||
const positions = [];
|
||||
|
||||
// Calculate positions in a grid pattern
|
||||
const cols = Math.ceil(Math.sqrt(numClues));
|
||||
const rows = Math.ceil(numClues / cols);
|
||||
|
||||
const marginX = svgWidth * 0.1;
|
||||
const marginY = svgHeight * 0.1;
|
||||
const spacingX = (svgWidth - 2 * marginX) / (cols - 1 || 1);
|
||||
const spacingY = (svgHeight - 2 * marginY) / (rows - 1 || 1);
|
||||
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < cols; col++) {
|
||||
const index = row * cols + col;
|
||||
if (index < numClues) {
|
||||
positions.push({
|
||||
x: marginX + col * spacingX,
|
||||
y: marginY + row * spacingY,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create circles for each clue
|
||||
positions.forEach((pos, index) => {
|
||||
const circle = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"circle"
|
||||
);
|
||||
circle.setAttribute("cx", pos.x);
|
||||
circle.setAttribute("cy", pos.y);
|
||||
circle.setAttribute("r", 10);
|
||||
circle.setAttribute("fill", "#9e9e9e");
|
||||
circle.setAttribute("stroke", "#757575");
|
||||
circle.setAttribute("stroke-width", "2");
|
||||
circle.setAttribute("class", "clue-point");
|
||||
circle.setAttribute("data-clue-id", (index + 1).toString());
|
||||
|
||||
svgElement.appendChild(circle);
|
||||
});
|
||||
|
||||
console.log(`Created ${numClues} clue points dynamically`);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Error creating clue points:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Main function to populate map with the correct number of clue points
|
||||
* @param {SVGElement} svgElement - The SVG DOM element of the map
|
||||
* @returns {Promise<boolean>} Success status
|
||||
*/
|
||||
export async function populateMap(svgElement) {
|
||||
if (!svgElement) {
|
||||
console.error("No SVG element provided");
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log("Starting to populate map");
|
||||
// Fetch total number of clues
|
||||
const totalClues = await fetchTotalClues();
|
||||
console.log("Total clues fetched:", totalClues);
|
||||
|
||||
if (totalClues > 0) {
|
||||
// Show the appropriate number of clue points
|
||||
return showCluePoints(svgElement, totalClues);
|
||||
} else {
|
||||
console.warn("No clues found in database");
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error populating map:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the styling of clue points based on their status
|
||||
* @param {SVGElement} svgElement - The SVG DOM element of the map
|
||||
* @param {Array} clues - Array of clue objects with status information
|
||||
*/
|
||||
export function updateCluePointStatus(svgElement, clues) {
|
||||
if (!svgElement || !clues || !clues.length) {
|
||||
console.error("Invalid SVG element or clues data");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
clues.forEach((clue, index) => {
|
||||
// Find the corresponding circle in the SVG
|
||||
const circle = svgElement.querySelector(
|
||||
`.clue-point[data-clue-id="${clue.id}"]`
|
||||
);
|
||||
|
||||
if (circle) {
|
||||
// Apply appropriate styling based on clue status
|
||||
if (clue.found) {
|
||||
// Found clues are green
|
||||
circle.style.fill = "#4caf50";
|
||||
circle.style.stroke = "#2e7d32";
|
||||
} else if (clue.available) {
|
||||
// Available clues are orange
|
||||
circle.style.fill = "#ff9800";
|
||||
circle.style.stroke = "#d87f00";
|
||||
} else {
|
||||
// Unavailable clues remain grey
|
||||
circle.style.fill = "#9e9e9e";
|
||||
circle.style.stroke = "#757575";
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error updating clue point status:", error);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user