mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-08 03:50:21 +00:00
fixed a bit of stuff the current but API is broken again for logging in so will be fixing that with the next push
This commit is contained in:
bobbert committed
1 parent
6ad943a868
commit
ea38775a82
20 files changed
+1643
-1027
No files matched your search
+25
-69
@@ -194,8 +194,6 @@ export default function TeamPage({ params }) {
|
||||
) : (
|
||||
<div className="empty-state">No team members found</div>
|
||||
)}
|
||||
|
||||
{/* Remove the add member button - it was here before */}
|
||||
</div>
|
||||
|
||||
<div className="team-actions">
|
||||
@@ -243,61 +241,31 @@ export default function TeamPage({ params }) {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
if (!huntActive) {
|
||||
// If hunt is not active, redirect to the "not started" page
|
||||
// Use the dedicated start hunt API endpoint
|
||||
const response = await fetch("/api/hunt/start", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.active) {
|
||||
// Redirect to map page using window.location for a clean reload
|
||||
window.location.href = data.redirectUrl || "/map";
|
||||
} else if (!data.active) {
|
||||
// Hunt is not active
|
||||
router.push(`/hunt-not-started?teamId=${teamId}`);
|
||||
} else {
|
||||
// If hunt is active, try to start the hunt
|
||||
const response = await fetch(
|
||||
`/api/teams/${teamId}/start-hunt`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
fetchTeamData();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || "Failed to start hunt");
|
||||
}
|
||||
// Some other error
|
||||
throw new Error(data.error || "Failed to start hunt journey");
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Start Hunt
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Keep the admin start button which directly starts the hunt */}
|
||||
{session?.user?.role === "admin" && (
|
||||
<button
|
||||
className="action-button start-button"
|
||||
onClick={async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(
|
||||
`/api/teams/${teamId}/start-hunt`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
fetchTeamData();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || "Failed to start hunt");
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
console.error("Error starting hunt:", err);
|
||||
setError(`Failed to start hunt: ${err.message}`);
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
@@ -352,7 +320,7 @@ export default function TeamPage({ params }) {
|
||||
.team-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-between; /* This spreads items to opposite ends */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -360,13 +328,14 @@ export default function TeamPage({ params }) {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
color: white; /* Explicitly setting color to white */
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-left: auto;
|
||||
color: white; /* Ensuring team code is also white */
|
||||
margin-left: auto; /* Pushes the code to the right */
|
||||
}
|
||||
|
||||
.members-container {
|
||||
@@ -411,19 +380,6 @@ export default function TeamPage({ params }) {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.add-member-button {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
@@ -1,68 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useHuntStatusCheck } from "@/hooks/useHuntStatusCheck";
|
||||
import Link from "next/link";
|
||||
import { use } from "react"; // Add this import for React.use()
|
||||
|
||||
export default function CluePage({ params }) {
|
||||
const { clueId } = params;
|
||||
const { data: session, status } = useSession();
|
||||
// Unwrap the params Promise using React.use()
|
||||
const unwrappedParams = use(params);
|
||||
const { clueId } = unwrappedParams;
|
||||
|
||||
const [clue, setClue] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const router = useRouter();
|
||||
|
||||
// Add this line to use the hunt status hook
|
||||
const huntActive = useHuntStatusCheck();
|
||||
|
||||
useEffect(() => {
|
||||
async function checkHuntStatus() {
|
||||
try {
|
||||
const response = await fetch("/api/hunt-status", {
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
// If hunt is not active, redirect to the home page
|
||||
if (!data.active) {
|
||||
router.push("/");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
console.error("Failed to check hunt status");
|
||||
return false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error checking hunt status:", err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchClueDetails() {
|
||||
try {
|
||||
// First verify the hunt is active
|
||||
const huntIsActive = await checkHuntStatus();
|
||||
if (!huntIsActive) return;
|
||||
// Try to check hunt status first with robust error handling
|
||||
try {
|
||||
const statusResponse = await fetch("/api/hunt-status", {
|
||||
credentials: "include",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
|
||||
// Fetch the specific clue from the API with improved error handling
|
||||
const response = await fetch(`/api/clues/${clueId}`, {
|
||||
credentials: "include",
|
||||
});
|
||||
// Read as text first
|
||||
const statusText = await statusResponse.text();
|
||||
|
||||
// Better error handling for non-JSON responses
|
||||
if (!response.ok) {
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (contentType && contentType.includes("application/json")) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Failed to fetch clue details");
|
||||
} else {
|
||||
throw new Error(
|
||||
`Failed to fetch clue details: ${response.status} ${response.statusText}`
|
||||
);
|
||||
try {
|
||||
const statusData = JSON.parse(statusText);
|
||||
if (!statusData.active && statusData.authenticated) {
|
||||
router.push("/");
|
||||
return;
|
||||
}
|
||||
} catch (parseError) {
|
||||
console.error("Failed to parse hunt status response:", parseError);
|
||||
// Continue anyway to try fetching clue details
|
||||
}
|
||||
} catch (statusErr) {
|
||||
console.error("Error checking hunt status:", statusErr);
|
||||
// Continue anyway to try fetching clue details
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
// Now fetch clue details with robust error handling
|
||||
const response = await fetch(`/api/clues/${clueId}`, {
|
||||
credentials: "include",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
|
||||
// If we got back an error field, show it as an error
|
||||
// Read as text first
|
||||
const responseText = await response.text();
|
||||
|
||||
// Try to parse as JSON
|
||||
let data;
|
||||
try {
|
||||
data = JSON.parse(responseText);
|
||||
} catch (parseError) {
|
||||
console.error("Failed to parse clue details response:", parseError);
|
||||
console.log("Response received:", responseText.slice(0, 200));
|
||||
throw new Error("Invalid response from server. Please try again.");
|
||||
}
|
||||
|
||||
// Check for error in the response
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
// ...other imports
|
||||
|
||||
export default function LeaderboardPage() {
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const searchParams = useSearchParams();
|
||||
const huntJustEnded = searchParams.get("huntEnded") === "true";
|
||||
|
||||
// ...existing fetch logic
|
||||
|
||||
return (
|
||||
<div className="leaderboard-page">
|
||||
<div className="page-header">
|
||||
<div className="back-button"></div>
|
||||
<div className="page-title">Leaderboard</div>
|
||||
</div>
|
||||
|
||||
{huntJustEnded && (
|
||||
<div className="hunt-ended-alert">
|
||||
<div className="hunt-ended-icon">🎯</div>
|
||||
<h2>The Hunt Has Ended!</h2>
|
||||
<p>
|
||||
The timer has been stopped by an administrator. Here are the final
|
||||
results.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Rest of the leaderboard content */}
|
||||
{/* ...existing code */}
|
||||
|
||||
<style jsx>{`
|
||||
/* ...existing styles */
|
||||
|
||||
.hunt-ended-alert {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hunt-ended-icon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
.map-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100vh; /* Full viewport height */
|
||||
overflow: hidden; /* Hide overflow at page level */
|
||||
position: relative;
|
||||
background-color: #69b5a8;
|
||||
}
|
||||
|
||||
.map-banner {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #4a3c2a;
|
||||
z-index: 10;
|
||||
flex-shrink: 0; /* Prevent banner from shrinking */
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.elapsed-time {
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
flex: 0 0 auto; /* Don't grow or shrink */
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* Map container takes all available space */
|
||||
.map-container {
|
||||
flex: 1; /* Take all available space */
|
||||
overflow: auto; /* Enable scrolling */
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.treasure-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #68543c;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.map-error {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Navigation bar - now sticky at the bottom */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: sticky; /* Sticky positioning */
|
||||
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 */
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 22px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #68543c;
|
||||
}
|
||||
|
||||
/* Make sure the map is responsive */
|
||||
@media (max-width: 480px) {
|
||||
.team-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
+181
-316
@@ -1,358 +1,223 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import styles from "./map.module.css";
|
||||
import { useHuntStatusCheck } from "@/hooks/useHuntStatusCheck";
|
||||
|
||||
export default function MapPage() {
|
||||
const [clues, setClues] = useState([]);
|
||||
const { data: session, status } = useSession();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [mapError, setMapError] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [huntActive, setHuntActive] = useState(false);
|
||||
const [teamData, setTeamData] = useState(null);
|
||||
const [elapsedTime, setElapsedTime] = useState("00:00:00");
|
||||
const mapContainerRef = useRef(null);
|
||||
const router = useRouter();
|
||||
|
||||
// Use the custom hook to check if hunt is still active
|
||||
const huntActive = useHuntStatusCheck();
|
||||
|
||||
// Debug log for hunt status
|
||||
useEffect(() => {
|
||||
async function checkHuntStatus() {
|
||||
try {
|
||||
const response = await fetch("/api/hunt-status", {
|
||||
credentials: "include",
|
||||
});
|
||||
console.log("Hunt active status in map page:", huntActive);
|
||||
}, [huntActive]);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setHuntActive(data.active || false);
|
||||
|
||||
// If hunt is not active, redirect to the home page
|
||||
if (!data.active) {
|
||||
router.push("/");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
console.error("Failed to check hunt status");
|
||||
return false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error checking hunt status:", err);
|
||||
return false;
|
||||
}
|
||||
useEffect(() => {
|
||||
// Only redirect if explicitly not authenticated
|
||||
if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
async function fetchClues() {
|
||||
try {
|
||||
// First verify the hunt is active
|
||||
const huntIsActive = await checkHuntStatus();
|
||||
if (!huntIsActive) return;
|
||||
|
||||
// Fetch the clues from the API with proper error handling
|
||||
const response = await fetch("/api/clues", {
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
// Handle non-OK responses without throwing
|
||||
if (!response.ok) {
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (contentType && contentType.includes("application/json")) {
|
||||
// If it's JSON, parse it for the error message
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Failed to fetch clues");
|
||||
} else {
|
||||
// If it's not JSON, use the status text
|
||||
throw new Error(
|
||||
`Failed to fetch clues: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Parse the JSON response
|
||||
const data = await response.json();
|
||||
|
||||
// If we got back an error field, show it as an error
|
||||
if (data.error) {
|
||||
throw new Error(data.error);
|
||||
}
|
||||
|
||||
setClues(data.clues || []);
|
||||
} catch (err) {
|
||||
console.error("Error fetching clues:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
// If hunt is not active, redirect to waiting page
|
||||
if (huntActive === false) {
|
||||
console.log("Hunt is not active, redirecting to waiting page");
|
||||
router.push("/waiting");
|
||||
return;
|
||||
}
|
||||
|
||||
fetchClues();
|
||||
}, [router]);
|
||||
// Only fetch team data if authenticated and hunt is active or status unknown
|
||||
if (status === "authenticated" && huntActive !== false) {
|
||||
fetchTeamData();
|
||||
}
|
||||
}, [status, huntActive, router]);
|
||||
|
||||
// Generate random x positions and sort by descending y positions
|
||||
const generatePositions = (clues) => {
|
||||
const positions = [];
|
||||
const maxWidth = 800;
|
||||
const maxHeight = 500;
|
||||
const padding = 50;
|
||||
// Update elapsed time every second
|
||||
useEffect(() => {
|
||||
if (!teamData?.team) return;
|
||||
|
||||
for (let i = 0; i < clues.length; i++) {
|
||||
positions.push({
|
||||
id: clues[i].id,
|
||||
title: clues[i].title || `Clue ${i + 1}`,
|
||||
x: Math.random() * (maxWidth - 2 * padding) + padding,
|
||||
y: (i + 1) * (maxHeight / (clues.length + 1)),
|
||||
const startTime = new Date(teamData?.huntStartTime || Date.now()).getTime();
|
||||
|
||||
const timer = setInterval(() => {
|
||||
const now = Date.now();
|
||||
const elapsed = Math.floor((now - startTime) / 1000);
|
||||
|
||||
const hours = Math.floor(elapsed / 3600)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
const minutes = Math.floor((elapsed % 3600) / 60)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
const seconds = Math.floor(elapsed % 60)
|
||||
.toString()
|
||||
.padStart(2, "0");
|
||||
|
||||
setElapsedTime(`${hours}:${minutes}:${seconds}`);
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [teamData]);
|
||||
|
||||
const fetchTeamData = async () => {
|
||||
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",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
}
|
||||
|
||||
return positions;
|
||||
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(() => router.push("/team-selection"), 2000);
|
||||
return;
|
||||
} else {
|
||||
throw new Error(errorData.error || "Failed to fetch team data");
|
||||
}
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setTeamData(data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching team data:", err);
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const cluePositions = clues.length > 0 ? generatePositions(clues) : [];
|
||||
|
||||
if (loading) {
|
||||
if (status === "loading" || loading) {
|
||||
return (
|
||||
<div className="map-container">
|
||||
<div className="loading">Loading clues...</div>
|
||||
<div className={styles["loading-container"]}>
|
||||
<div className={styles["loading-spinner"]}></div>
|
||||
<div>Loading map...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// If hunt status is known to be inactive, show message
|
||||
if (huntActive === false) {
|
||||
return (
|
||||
<div className={styles["map-error"]}>
|
||||
<h2>Hunt Not Active</h2>
|
||||
<p>The treasure hunt has not started yet.</p>
|
||||
<button onClick={() => router.push("/waiting")}>
|
||||
Go to Waiting Room
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="map-container">
|
||||
<div className="error">Error: {error}</div>
|
||||
<button onClick={() => router.push("/")} className="back-button">
|
||||
Back to Home
|
||||
</button>
|
||||
<div className={styles["map-error"]}>
|
||||
<h2>Error</h2>
|
||||
<p>{error}</p>
|
||||
<button onClick={fetchTeamData}>Retry</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (clues.length === 0) {
|
||||
if (mapError) {
|
||||
return (
|
||||
<div className="map-container">
|
||||
<div className="no-clues">No clues available yet.</div>
|
||||
<button onClick={() => router.push("/")} className="back-button">
|
||||
Back to Home
|
||||
</button>
|
||||
<div className={styles["map-error"]}>
|
||||
<h2>Error Loading Map</h2>
|
||||
<p>We couldn't load the treasure map. Please try again.</p>
|
||||
<button onClick={fetchTeamData}>Retry</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="map-container">
|
||||
<h1>Treasure Map</h1>
|
||||
<div className="map-wrapper">
|
||||
<svg
|
||||
className="map-svg"
|
||||
viewBox="0 0 800 500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div className={styles["map-page"]}>
|
||||
{/* Map Banner with team info and timer */}
|
||||
<div className={styles["map-banner"]}>
|
||||
<div className={styles["team-name"]}>
|
||||
{teamData?.team?.name || "Your Team"}
|
||||
</div>
|
||||
<div className={styles["elapsed-time"]}>
|
||||
<span className={styles["time-value"]}>{elapsedTime}</span>
|
||||
</div>
|
||||
<div className={styles["team-code"]}>{teamData?.team?.code || ""}</div>
|
||||
</div>
|
||||
|
||||
{/* Main map content area */}
|
||||
<div className={styles["map-container"]} ref={mapContainerRef}>
|
||||
<div className={styles["treasure-map"]}>
|
||||
{/* Use Image component with fill layout for better SVG handling */}
|
||||
<Image
|
||||
src="/images/treasure-map.svg"
|
||||
alt="Treasure Map"
|
||||
className={styles["map-svg"]}
|
||||
width={1000}
|
||||
height={1000}
|
||||
priority
|
||||
onError={() => {
|
||||
// Fallback to a static image if SVG fails to load
|
||||
setMapError(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation bar - now sticky */}
|
||||
<nav className={styles["nav-bar"]}>
|
||||
<Link
|
||||
href={teamData?.teamId ? `/${teamData.teamId}` : "/"}
|
||||
className={styles["nav-item"]}
|
||||
>
|
||||
{/* Map background with a treasure map style */}
|
||||
<rect width="800" height="500" fill="#f5e6ca" />
|
||||
<path
|
||||
d="M0,0 L800,0 L800,500 L0,500 Z"
|
||||
fill="none"
|
||||
stroke="#9c6b30"
|
||||
strokeWidth="10"
|
||||
/>
|
||||
|
||||
{/* Decorative map elements */}
|
||||
<path
|
||||
d="M100,100 Q400,50 700,150"
|
||||
stroke="#9c6b30"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray="5,5"
|
||||
/>
|
||||
<path
|
||||
d="M150,400 Q400,450 650,350"
|
||||
stroke="#9c6b30"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray="5,5"
|
||||
/>
|
||||
<path
|
||||
d="M300,100 Q350,250 300,400"
|
||||
stroke="#9c6b30"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray="5,5"
|
||||
/>
|
||||
<path
|
||||
d="M500,100 Q450,250 500,400"
|
||||
stroke="#9c6b30"
|
||||
strokeWidth="2"
|
||||
fill="none"
|
||||
strokeDasharray="5,5"
|
||||
/>
|
||||
|
||||
{/* Connection lines between clue points */}
|
||||
{cluePositions.slice(0, -1).map((clue, index) => (
|
||||
<line
|
||||
key={`line-${index}`}
|
||||
x1={clue.x}
|
||||
y1={clue.y}
|
||||
x2={cluePositions[index + 1].x}
|
||||
y2={cluePositions[index + 1].y}
|
||||
stroke="#9c6b30"
|
||||
strokeWidth="2"
|
||||
strokeDasharray="5,5"
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Clue points */}
|
||||
{cluePositions.map((clue, index) => (
|
||||
<g key={`clue-${index}`} className="clue-point">
|
||||
<circle
|
||||
cx={clue.x}
|
||||
cy={clue.y}
|
||||
r="15"
|
||||
fill="#d4a76a"
|
||||
stroke="#9c6b30"
|
||||
strokeWidth="2"
|
||||
onClick={() => router.push(`/clue/${clue.id}`)}
|
||||
style={{ cursor: "pointer" }}
|
||||
/>
|
||||
<text
|
||||
x={clue.x}
|
||||
y={clue.y}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fill="#5d4037"
|
||||
fontSize="12"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{index + 1}
|
||||
</text>
|
||||
</g>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Clue list */}
|
||||
<div className="clue-list">
|
||||
<h2>Clues</h2>
|
||||
<ul>
|
||||
{cluePositions.map((clue, index) => (
|
||||
<li key={`clue-list-${index}`}>
|
||||
<Link href={`/clue/${clue.id}`}>
|
||||
{index + 1}. {clue.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button onClick={() => router.push("/")} className="back-button">
|
||||
Back to Home
|
||||
</button>
|
||||
|
||||
<style jsx>{`
|
||||
.map-container {
|
||||
padding: 20px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #5d4037;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Pirates", cursive, serif;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
border: 5px solid #9c6b30;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
background: #f5e6ca;
|
||||
}
|
||||
|
||||
.map-svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clue-list {
|
||||
margin-top: 30px;
|
||||
background: #f5e6ca;
|
||||
border: 2px solid #9c6b30;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.clue-list h2 {
|
||||
color: #5d4037;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
padding: 8px;
|
||||
border-bottom: 1px dashed #9c6b30;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #5d4037;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: rgba(156, 107, 48, 0.2);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
background-color: #9c6b30;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background-color: #7d562a;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.error,
|
||||
.no-clues {
|
||||
padding: 50px;
|
||||
border: 2px dashed #9c6b30;
|
||||
border-radius: 8px;
|
||||
margin: 30px 0;
|
||||
color: #5d4037;
|
||||
background: #f5e6ca;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-color: #d32f2f;
|
||||
color: #d32f2f;
|
||||
}
|
||||
`}</style>
|
||||
<div className={styles["nav-icon"]}>🏠</div>
|
||||
<div className={styles["nav-label"]}>Home</div>
|
||||
</Link>
|
||||
<Link href="/leaderboard" className={styles["nav-item"]}>
|
||||
<div className={styles["nav-icon"]}>📊</div>
|
||||
<div className={styles["nav-label"]}>Stats</div>
|
||||
</Link>
|
||||
<Link href="/team-selection" className={styles["nav-item"]}>
|
||||
<div className={styles["nav-icon"]}>👥</div>
|
||||
<div className={styles["nav-label"]}>Team</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="/map"
|
||||
className={`${styles["nav-item"]} ${styles["active"]}`}
|
||||
>
|
||||
<div className={styles["nav-icon"]}>🗺️</div>
|
||||
<div className={styles["nav-label"]}>Map</div>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -234,27 +234,39 @@ export default function TeamPage({ params }) {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Check hunt status first
|
||||
// Use try-catch with robust error handling
|
||||
const response = await fetch("/api/hunt-status", {
|
||||
method: "GET",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.active) {
|
||||
// If hunt is active, navigate to map page
|
||||
router.push("/map");
|
||||
} else {
|
||||
// If hunt is not active, show not started page
|
||||
router.push(`/hunt-not-started?teamId=${teamId}`);
|
||||
}
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
console.error("Hunt status error response:", errorText);
|
||||
throw new Error(
|
||||
`Failed to check hunt status: ${response.status}`
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Hunt status response:", data);
|
||||
|
||||
// If hunt is active, go directly to the map page using window.location
|
||||
if (data.active) {
|
||||
// Use window.location.href for a full page reload to avoid caching issues
|
||||
window.location.href = "/map";
|
||||
} else {
|
||||
throw new Error("Failed to check hunt status");
|
||||
// If hunt is not active, show the not started page
|
||||
router.push(`/hunt-not-started?teamId=${teamId}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
console.error("Error checking hunt status:", err);
|
||||
setError(`Failed to check hunt status: ${err.message}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}}
|
||||
@@ -483,6 +495,7 @@ export default function TeamPage({ params }) {
|
||||
.error-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
|
||||
Reference in new issue
Block a user