mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
fixing navbar
Adding Svg files and fixing appearance of navbar to look like the design pages
This commit is contained in:
bobbert committed
1 parent
5a20899808
commit
c496b08d52
13 files changed
+674
-867
No files matched your search
@@ -4,6 +4,7 @@ import { useSearchParams } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import NavBar from "@/components/NavBar";
|
||||
|
||||
export default function LeaderboardPage() {
|
||||
const [teams, setTeams] = useState([]);
|
||||
@@ -160,31 +161,7 @@ export default function LeaderboardPage() {
|
||||
|
||||
{/* Only show navigation bar when the hunt hasn't ended */}
|
||||
{!huntJustEnded && (
|
||||
<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={
|
||||
session?.user?.teamId
|
||||
? `/${session.user.teamId}`
|
||||
: "/team-selection"
|
||||
}
|
||||
className="nav-item"
|
||||
>
|
||||
<div className="nav-icon">👥</div>
|
||||
<div className="nav-label">Team</div>
|
||||
</Link>
|
||||
<Link href="/leaderboard" className="nav-item active">
|
||||
<div className="nav-icon">🏆</div>
|
||||
<div className="nav-label">Leaderboard</div>
|
||||
</Link>
|
||||
</div>
|
||||
<NavBar activeLink="leaderboard" teamData={{ id: session?.user?.teamId }} />
|
||||
)}
|
||||
|
||||
{/* Add a "back to home" button when the hunt has ended */}
|
||||
|
||||
+88
-393
@@ -1,52 +1,68 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
"use client";
|
||||
import { useState, useEffect, useRef, useCallback } 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 {
|
||||
getHuntTimer,
|
||||
setHuntTimer,
|
||||
clearHuntTimer,
|
||||
formatElapsedTime,
|
||||
syncTimerWithServer,
|
||||
} from "@/utils/timerService";
|
||||
import NavBar from "@/components/NavBar";
|
||||
|
||||
export default function MapPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [mapError, setMapError] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [teamData, setTeamData] = useState(null);
|
||||
const [elapsedTime, setElapsedTime] = useState("00:00:00");
|
||||
const [clues, setClues] = useState([]);
|
||||
const mapContainerRef = useRef(null);
|
||||
const router = useRouter();
|
||||
const isMounted = useRef(true);
|
||||
|
||||
// Add local state for hunt active status
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [mapLoaded, setMapLoaded] = useState(false);
|
||||
const [huntActive, setHuntActive] = useState(null);
|
||||
// Add previous hunt state to detect when hunt ends
|
||||
const [previousHuntState, setPreviousHuntState] = useState(null);
|
||||
const router = useRouter();
|
||||
const mapRef = useRef(null);
|
||||
|
||||
// Use useCallback for functions called in useEffect to avoid dependency issues
|
||||
const softRedirect = useCallback(
|
||||
(url) => {
|
||||
if (isMounted.current) {
|
||||
router.push(url);
|
||||
useEffect(() => {
|
||||
// Redirect to login if not authenticated
|
||||
if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
if (status === "authenticated") {
|
||||
checkHuntStatus();
|
||||
fetchTeamData();
|
||||
}
|
||||
}, [status, router]);
|
||||
|
||||
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);
|
||||
|
||||
// Redirect to waiting page if hunt is not active
|
||||
if (!data.active) {
|
||||
router.push("/waiting");
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
throw new Error("Failed to check hunt status");
|
||||
}
|
||||
},
|
||||
[router]
|
||||
);
|
||||
} catch (err) {
|
||||
console.error("Failed to check hunt status:", err);
|
||||
setError("Failed to check if hunt is active. Please try again.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Hard redirect function (for when a full page reload is needed)
|
||||
const hardRedirect = useCallback((url) => {
|
||||
window.location.href = url;
|
||||
}, []);
|
||||
|
||||
// Enhanced fetchTeamData function
|
||||
const fetchTeamData = useCallback(async () => {
|
||||
const fetchTeamData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/user/team", {
|
||||
method: "GET",
|
||||
@@ -59,12 +75,12 @@ export default function MapPage() {
|
||||
});
|
||||
|
||||
if (response.status === 401) {
|
||||
softRedirect("/login");
|
||||
router.push("/login");
|
||||
return null;
|
||||
}
|
||||
|
||||
if (response.status === 404) {
|
||||
softRedirect("/team-selection");
|
||||
router.push("/team-selection");
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -81,233 +97,17 @@ export default function MapPage() {
|
||||
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",
|
||||
});
|
||||
const handleMapLoad = () => {
|
||||
setMapLoaded(true);
|
||||
};
|
||||
|
||||
if (!response.ok) {
|
||||
// Extract the error message from the response if possible
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
console.error("API response details:", {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
errorData,
|
||||
});
|
||||
const handleMapError = () => {
|
||||
setError("Failed to load the map. Please try again.");
|
||||
};
|
||||
|
||||
throw new Error(
|
||||
errorData.error ||
|
||||
`Failed to fetch clues: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// 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) => {
|
||||
// The API now returns clues with availability already determined
|
||||
return {
|
||||
...clue,
|
||||
available: clue.available || clue.found || clue.skipped,
|
||||
};
|
||||
});
|
||||
|
||||
setClues(processedClues);
|
||||
setLoading(false); // Set loading to false after clues are fetched
|
||||
return processedClues;
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch clues:", err);
|
||||
setError(err.message); // Make sure we set the error state
|
||||
setLoading(false);
|
||||
return [];
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Handle clue button click
|
||||
const handleClueClick = useCallback(
|
||||
(clueId, isAvailable, isFound) => {
|
||||
if (isFound || isAvailable) {
|
||||
router.push(`/clue/${clueId}`);
|
||||
} else {
|
||||
alert("Complete previous clues to unlock this one!");
|
||||
}
|
||||
},
|
||||
[router]
|
||||
);
|
||||
|
||||
// Size and position the overlay to match the map image
|
||||
const setupOverlay = useCallback(() => {
|
||||
const overlay = document.getElementById("map-overlay-container");
|
||||
const mapImg = document.getElementById("treasure-map-img");
|
||||
|
||||
if (overlay && mapImg) {
|
||||
// Wait for the image to load to get its dimensions
|
||||
mapImg.onload = () => {
|
||||
const mapRect = mapImg.getBoundingClientRect();
|
||||
overlay.style.width = `${mapRect.width}px`;
|
||||
overlay.style.height = `${mapRect.height}px`;
|
||||
};
|
||||
|
||||
// Handle resize events
|
||||
const resizeOverlay = () => {
|
||||
const mapRect = mapImg.getBoundingClientRect();
|
||||
overlay.style.width = `${mapRect.width}px`;
|
||||
overlay.style.height = `${mapRect.height}px`;
|
||||
};
|
||||
|
||||
// Initial resize and listen for window resize
|
||||
setTimeout(resizeOverlay, 300);
|
||||
window.addEventListener("resize", resizeOverlay);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", resizeOverlay);
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Add this useEffect to coordinate loading the map and clues
|
||||
useEffect(() => {
|
||||
if (status === "authenticated") {
|
||||
fetchClues();
|
||||
fetchTeamData();
|
||||
} else if (status === "unauthenticated") {
|
||||
softRedirect("/login");
|
||||
}
|
||||
|
||||
// Setup cleanup function for component unmount
|
||||
return () => {
|
||||
isMounted.current = false;
|
||||
};
|
||||
}, [status, fetchClues, fetchTeamData, softRedirect]);
|
||||
|
||||
// Setup the overlay when the component is mounted
|
||||
useEffect(() => {
|
||||
if (!loading && clues.length > 0) {
|
||||
return setupOverlay();
|
||||
}
|
||||
}, [loading, clues.length, setupOverlay]);
|
||||
|
||||
// Function to check hunt status and timer
|
||||
async function checkHuntAndTimer() {
|
||||
try {
|
||||
const response = await fetch("/api/hunt-status", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setHuntActive(data.active);
|
||||
|
||||
// If hunt is active, ensure we have timer data
|
||||
if (data.active && data.startTime) {
|
||||
setHuntTimer(data.startTime);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to check hunt status:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// Add this function before it's used in initializeTimer
|
||||
async function fetchTeamHuntStartTime() {
|
||||
try {
|
||||
// First try to get any existing timer data
|
||||
const timerData = getHuntTimer();
|
||||
if (timerData && timerData.startTime) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// If no timer data exists, sync with server
|
||||
const result = await syncTimerWithServer();
|
||||
return result.success;
|
||||
} catch (err) {
|
||||
console.error("Error fetching team hunt start time:", err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Use team hunt start time for elapsed time calculation
|
||||
useEffect(() => {
|
||||
let timerId;
|
||||
|
||||
// Initialize timer
|
||||
async function initializeTimer() {
|
||||
// First ensure we have timer data
|
||||
await fetchTeamHuntStartTime();
|
||||
|
||||
// Set up timer updates
|
||||
const updateTimer = () => {
|
||||
const timerData = getHuntTimer();
|
||||
if (timerData && timerData.startTime) {
|
||||
setElapsedTime(formatElapsedTime(timerData.startTime));
|
||||
}
|
||||
};
|
||||
|
||||
// Initial update
|
||||
updateTimer();
|
||||
|
||||
// Update every second
|
||||
timerId = setInterval(updateTimer, 1000);
|
||||
}
|
||||
|
||||
initializeTimer();
|
||||
|
||||
// Clean up interval on unmount
|
||||
return () => {
|
||||
if (timerId) clearInterval(timerId);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Check hunt status every 10 seconds to ensure immediate updates
|
||||
useEffect(() => {
|
||||
// Initial check
|
||||
checkHuntAndTimer();
|
||||
|
||||
// Set up interval to check hunt status
|
||||
const huntStatusInterval = setInterval(checkHuntAndTimer, 10000);
|
||||
|
||||
return () => {
|
||||
clearInterval(huntStatusInterval);
|
||||
};
|
||||
}, [softRedirect, hardRedirect]);
|
||||
|
||||
// Add useEffect to load team data
|
||||
useEffect(() => {
|
||||
if (status === "authenticated") {
|
||||
fetchTeamData();
|
||||
}
|
||||
}, [status, fetchTeamData]);
|
||||
|
||||
// Add this useEffect to detect when hunt ends
|
||||
useEffect(() => {
|
||||
// If previous state was active but current state is not active, the hunt just ended
|
||||
if (previousHuntState === true && huntActive === false) {
|
||||
console.log("Hunt has ended! Redirecting to leaderboard...");
|
||||
router.push("/leaderboard?huntEnded=true");
|
||||
}
|
||||
|
||||
// Update previous state after checking
|
||||
setPreviousHuntState(huntActive);
|
||||
}, [huntActive, previousHuntState, router]);
|
||||
|
||||
if (status === "loading" || loading) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={styles["loading-container"]}>
|
||||
<div className={styles["loading-spinner"]}></div>
|
||||
@@ -316,22 +116,6 @@ export default function MapPage() {
|
||||
);
|
||||
}
|
||||
|
||||
// Remove or modify this conditional block since we're now handling hunt ending differently
|
||||
// Instead of showing an error message, we'll redirect in the useEffect
|
||||
if (huntActive === false && previousHuntState === null) {
|
||||
// Only show this if we just landed on the page and hunt is inactive
|
||||
// (not when the hunt just ended)
|
||||
return (
|
||||
<div className={styles["map-error"]}>
|
||||
<h2>Hunt Not Active</h2>
|
||||
<p>The treasure hunt has not started yet.</p>
|
||||
<button onClick={() => softRedirect("/waiting")}>
|
||||
Go to Waiting Room
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className={styles["map-error"]}>
|
||||
@@ -342,126 +126,37 @@ export default function MapPage() {
|
||||
);
|
||||
}
|
||||
|
||||
if (mapError) {
|
||||
return (
|
||||
<div className={styles["map-error"]}>
|
||||
<h2>Error Loading Map</h2>
|
||||
<p>We couldn't load the treasure map. Please try again.</p>
|
||||
<button onClick={fetchClues}>Retry</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Function to determine clue button class based on status
|
||||
const getClueButtonClass = (clue) => {
|
||||
if (clue.found) return `${styles["clue-button"]} ${styles["clue-found"]}`;
|
||||
if (clue.skipped)
|
||||
return `${styles["clue-button"]} ${styles["clue-skipped"]}`;
|
||||
if (clue.available)
|
||||
return `${styles["clue-button"]} ${styles["clue-available"]}`;
|
||||
return `${styles["clue-button"]} ${styles["clue-locked"]}`;
|
||||
};
|
||||
|
||||
// Get the first clue if it exists
|
||||
const firstClue = clues.length > 0 ? clues[0] : null;
|
||||
|
||||
// Render a clue button only if the clue exists
|
||||
const renderClueButton = (index, position) => {
|
||||
if (index >= clues.length) return null; // Don't render if clue doesn't exist
|
||||
|
||||
const clue = clues[index];
|
||||
return (
|
||||
<button
|
||||
key={clue.id}
|
||||
className={getClueButtonClass(clue)}
|
||||
onClick={() => handleClueClick(clue.id, clue.available, clue.found)}
|
||||
style={{
|
||||
left: position.left,
|
||||
top: position.top,
|
||||
}}
|
||||
></button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles["map-page"]}>
|
||||
{/* Map Banner with team info and timer */}
|
||||
<div className={styles["map-banner"]}>
|
||||
<div className={styles["team-name"]}>
|
||||
Team Name: {teamData?.team?.name || "Loading..."}
|
||||
</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"]}>
|
||||
{/* Simpler map implementation using an img element */}
|
||||
<div className={styles["map-image-container"]}>
|
||||
<img
|
||||
id="treasure-map-img"
|
||||
src="/images/map.svg"
|
||||
alt="Treasure Map"
|
||||
className={styles["map-image"]}
|
||||
/>
|
||||
|
||||
<div id="map-overlay-container" className={styles["map-overlay"]}>
|
||||
{/* Render clue buttons conditionally */}
|
||||
{renderClueButton(0, { left: "230px", top: "212px" })}
|
||||
{renderClueButton(1, { left: "320px", top: "285px" })}
|
||||
{renderClueButton(2, { left: "265px", top: "400px" })}
|
||||
{renderClueButton(3, { left: "343px", top: "520px" })}
|
||||
{renderClueButton(4, { left: "320px", top: "646px" })}
|
||||
{renderClueButton(5, { left: "298px", top: "774px" })}
|
||||
{renderClueButton(6, { left: "240px", top: "880px" })}
|
||||
{renderClueButton(7, { left: "355px", top: "960px" })}
|
||||
{renderClueButton(8, { left: "266px", top: "1037px" })}
|
||||
{renderClueButton(9, { left: "280px", top: "1175px" })}
|
||||
{renderClueButton(10, { left: "336px", top: "1303px" })}
|
||||
{renderClueButton(11, { left: "250px", top: "1390px" })}
|
||||
{renderClueButton(12, { left: "165px", top: "1485px" })}
|
||||
{renderClueButton(13, { left: "305px", top: "1530px" })}
|
||||
{renderClueButton(14, { left: "340px", top: "1650px" })}
|
||||
{renderClueButton(15, { left: "225px", top: "1725px" })}
|
||||
{renderClueButton(16, { left: "220px", top: "1820px" })}
|
||||
{renderClueButton(17, { left: "275px", top: "1885px" })}
|
||||
{renderClueButton(18, { left: "362px", top: "1917px" })}
|
||||
{renderClueButton(19, { left: "300px", top: "2040px" })}
|
||||
|
||||
{/* Additional clue buttons can be added here when needed */}
|
||||
</div>
|
||||
<div className={styles.mapPage}>
|
||||
<div className={styles.mapHeader}>
|
||||
<div className={styles.teamInfo}>
|
||||
<h1 className={styles.teamName}>
|
||||
{teamData?.team ? teamData.team.name : "Loading..."}
|
||||
</h1>
|
||||
<div className={styles.teamProgress}>
|
||||
{teamData?.progress !== undefined
|
||||
? `${teamData.progress}% Complete`
|
||||
: "..."}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation bar */}
|
||||
<nav className={styles["nav-bar"]}>
|
||||
<Link
|
||||
href="/map"
|
||||
className={`${styles["nav-item"]} ${styles["active"]}`}
|
||||
>
|
||||
<div className={styles["nav-icon"]}>🗺️</div>
|
||||
<div className={styles["nav-label"]}>Map</div>
|
||||
</Link>
|
||||
<Link href="/stats" className={styles["nav-item"]}>
|
||||
<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"]}
|
||||
>
|
||||
<div className={styles["nav-icon"]}>👥</div>
|
||||
<div className={styles["nav-label"]}>Team</div>
|
||||
</Link>
|
||||
<Link href="/leaderboard" className={styles["nav-item"]}>
|
||||
<div className={styles["nav-icon"]}>🏆</div>
|
||||
<div className={styles["nav-label"]}>Leaderboard</div>
|
||||
</Link>
|
||||
</nav>
|
||||
<div className={styles.mapContainer}>
|
||||
<div className={styles.treasureMap}>
|
||||
<Image
|
||||
src="/images/map.svg"
|
||||
alt="Treasure Map"
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
onLoad={handleMapLoad}
|
||||
onError={handleMapError}
|
||||
ref={mapRef}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Replace hardcoded navbar with NavBar component */}
|
||||
<NavBar activeLink="map" teamData={teamData?.team} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+45
-21
@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import styles from "./stats.module.css";
|
||||
import NavBar from "@/components/NavBar";
|
||||
|
||||
export default function StatsPage() {
|
||||
const { data: session, status } = useSession();
|
||||
@@ -11,6 +12,7 @@ export default function StatsPage() {
|
||||
const [error, setError] = useState(null);
|
||||
const [teamStats, setTeamStats] = useState(null);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [huntActive, setHuntActive] = useState(null);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -22,9 +24,34 @@ export default function StatsPage() {
|
||||
|
||||
if (status === "authenticated") {
|
||||
fetchTeamStats();
|
||||
checkHuntStatus();
|
||||
}
|
||||
}, [status, router]);
|
||||
|
||||
// Check hunt status but don't redirect
|
||||
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);
|
||||
// We're just checking status, no redirect needed for stats page
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to check hunt status:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTeamStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
@@ -181,6 +208,12 @@ export default function StatsPage() {
|
||||
<h2 className={styles.teamName}>{teamStats.team.name}</h2>
|
||||
</div>
|
||||
|
||||
{!huntActive && teamStats && (
|
||||
<div className="hunt-inactive-banner">
|
||||
<p>The treasure hunt is not currently active. Team progress will be visible here once the hunt begins.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.statsCard}>
|
||||
<div className={styles.summaryStats}>
|
||||
<div className={styles.statItem}>
|
||||
@@ -229,27 +262,8 @@ export default function StatsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.navBar}>
|
||||
<Link href="/map" className={styles.navItem}>
|
||||
<div className={styles.navIcon}>🗺️</div>
|
||||
<div className={styles.navLabel}>Map</div>
|
||||
</Link>
|
||||
<Link href="/stats" className={`${styles.navItem} ${styles.active}`}>
|
||||
<div className={styles.navIcon}>📊</div>
|
||||
<div className={styles.navLabel}>Stats</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={teamStats?.team ? `/${teamStats.team.id}` : "/team-selection"}
|
||||
className={styles.navItem}
|
||||
>
|
||||
<div className={styles.navIcon}>👥</div>
|
||||
<div className={styles.navLabel}>Team</div>
|
||||
</Link>
|
||||
<Link href="/leaderboard" className={styles.navItem}>
|
||||
<div className={styles.navIcon}>🏆</div>
|
||||
<div className={styles.navLabel}>Leaderboard</div>
|
||||
</Link>
|
||||
</div>
|
||||
{/* Replace hardcoded navbar with NavBar component */}
|
||||
<NavBar activeLink="stats" teamData={teamStats.team} />
|
||||
|
||||
<style jsx>{`
|
||||
.clue-icon.found {
|
||||
@@ -259,6 +273,16 @@ export default function StatsPage() {
|
||||
.clue-icon.skipped {
|
||||
background-color: #1976d2;
|
||||
}
|
||||
|
||||
.hunt-inactive-banner {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
padding: 12px 15px;
|
||||
margin: 15px 20px 0;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -135,6 +135,43 @@ export default function TeamPage({ params }) {
|
||||
}
|
||||
}, [effectiveTeamId, status, fetchTeamData, router]);
|
||||
|
||||
const continueTreasureHunt = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
// Check if hunt is active first
|
||||
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();
|
||||
|
||||
if (data.active) {
|
||||
// Hunt is active, redirect to map
|
||||
router.push("/map");
|
||||
} else {
|
||||
// Hunt is not active, redirect to waiting page
|
||||
router.push("/waiting");
|
||||
}
|
||||
} else {
|
||||
throw new Error("Failed to check hunt status");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error checking hunt status:", err);
|
||||
setError("Failed to check hunt status. Please try again.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (status === "loading" || loading) {
|
||||
return (
|
||||
<div className="loading-container">
|
||||
@@ -341,27 +378,46 @@ export default function TeamPage({ params }) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Replace the outdated navbar with this consistent design */}av-bar"]}>
|
||||
<div className="nav-bar">v-item"]}>
|
||||
<Link href="/map" className="nav-item">>🗺️</div>
|
||||
<div className="nav-icon">🗺️</div>>Map</div>
|
||||
<div className="nav-label">Map</div>
|
||||
</Link>v-item"]}>
|
||||
<Link href="/stats" className="nav-item">}>📊</div>
|
||||
<div className="nav-icon">📊</div>tats</div>
|
||||
<div className="nav-label">Stats</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={teamData ? `/${teamData.id}` : "/team-selection"} tem"]} ${styles["active"]}`}
|
||||
className="nav-item active"
|
||||
>}>👥</div>
|
||||
<div className="nav-icon">👥</div>Team</div>
|
||||
<div className="nav-label">Team</div>
|
||||
</Link>v-item"]}>
|
||||
<Link href="/leaderboard" className="nav-item">}>🏆</div>
|
||||
<div className="nav-icon">🏆</div>oard</div>
|
||||
<div className="nav-label">Leaderboard</div>
|
||||
</Link>
|
||||
{team && team.hasStarted && (
|
||||
<div className="button-container">
|
||||
<button
|
||||
className="continue-button"
|
||||
onClick={continueTreasureHunt}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Loading..." : "Continue Hunt"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="nav-bar">
|
||||
<div className="nav-item">
|
||||
<Link href="/map" className="nav-item">
|
||||
<div className="nav-icon">🗺️</div>
|
||||
<div className="nav-label">Map</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<Link href="/stats" className="nav-item">
|
||||
<div className="nav-icon">📊</div>
|
||||
<div className="nav-label">Stats</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<Link
|
||||
href={teamData ? `/${teamData.id}` : "/team-selection"}
|
||||
className="nav-item active"
|
||||
>
|
||||
<div className="nav-icon">👥</div>
|
||||
<div className="nav-label">Team</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<div className="nav-icon">🏆</div>
|
||||
<div className="nav-label">Leaderboard</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
|
||||
+241
-218
@@ -1,393 +1,416 @@
|
||||
/* Global Styles */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4e9dc;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4e9dc;
|
||||
color: #333;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #444;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
color: #444;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Layout Components */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f4e9dc;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e0dbd0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f4e9dc;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e0dbd0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
font-size: 1.2rem;
|
||||
width: 20px;
|
||||
font-size: 1.2rem;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
/* Auth Pages Styling */
|
||||
.auth-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.auth-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background-color: #f4e9dc;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
background-color: #f4e9dc;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.auth-button:hover {
|
||||
background-color: #53402d;
|
||||
background-color: #53402d;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #e53935;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 0;
|
||||
color: #e53935;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
/* Navigation Bar */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #f8f8f8;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 0.75rem 0;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
width: 110%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-image: url("/images/Bottom-Bar.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 0.75rem 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #777;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
flex: 1;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #68543c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Team Selection Page */
|
||||
.team-selection-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.team-selection-card {
|
||||
background-color: #f4e9dc;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background-color: #f4e9dc;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.team-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Clue Page */
|
||||
.clue-page {
|
||||
background-color: #f3cf55;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f3cf55;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.clue-card {
|
||||
background-color: #fff8dc;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
background-color: #fff8dc;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.clue-content {
|
||||
padding: 1rem 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.clue-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.clue-button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Admin Page */
|
||||
.admin-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
margin: 1rem;
|
||||
background-color: #f4e9dc;
|
||||
margin: 1rem;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.admin-controls {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.admin-input-container {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-button {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.green-button {
|
||||
background-color: #4caf50;
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.red-button {
|
||||
background-color: #f44336;
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
/* Map Progress Page */
|
||||
.progress-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #8fbc8f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #8fbc8f;
|
||||
}
|
||||
|
||||
.progress-map {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-point {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.map-point.current {
|
||||
background-color: #e53935;
|
||||
background-color: #e53935;
|
||||
}
|
||||
|
||||
/* Stats Page */
|
||||
.stats-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background-color: #ffecb3;
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: #ffecb3;
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f0e6ce;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f0e6ce;
|
||||
}
|
||||
|
||||
/* Leaderboard Page */
|
||||
.leaderboard-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.leaderboard-card {
|
||||
background-color: #d0c0a0;
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
background-color: #d0c0a0;
|
||||
border-radius: 8px;
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.team-row {
|
||||
background-color: #f3cf55;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #f3cf55;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* QR Scanner */
|
||||
.qr-scanner-container {
|
||||
padding: 1rem;
|
||||
background-color: #f4e9dc;
|
||||
padding: 1rem;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.scanner-wrapper {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
/* Team Header */
|
||||
.team-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Adjust the main layout to account for sticky header */
|
||||
.main-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.team-button {
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.create-team-link {
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
margin-top: 0.50rem;
|
||||
margin-bottom: 0.50rem;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
background-color: #63503d;
|
||||
color: white;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
+164
-166
@@ -1,207 +1,205 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import styles from "./waiting.module.css";
|
||||
import { setHuntTimer, clearHuntTimer } from "@/utils/timerService";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function WaitingPage() {
|
||||
const router = useRouter();
|
||||
const { status } = useSession();
|
||||
const { data: session, status } = useSession();
|
||||
const [huntActive, setHuntActive] = useState(false);
|
||||
const [huntEnded, setHuntEnded] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastHuntData, setLastHuntData] = useState(null);
|
||||
const router = useRouter();
|
||||
|
||||
// Check hunt status VERY aggressively
|
||||
// Check hunt status at regular intervals
|
||||
useEffect(() => {
|
||||
let redirectAttempted = false;
|
||||
let lastKnownHuntStatus = false;
|
||||
let lastHuntData = null;
|
||||
|
||||
async function checkHuntStatus() {
|
||||
if (redirectAttempted) return;
|
||||
|
||||
const checkHuntStatus = async () => {
|
||||
try {
|
||||
// First check if we have a team ID from the session
|
||||
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) {
|
||||
const userData = await userResponse.json();
|
||||
|
||||
// If user has a team, check if that team has an active hunt session
|
||||
if (userData.teamId) {
|
||||
const teamHuntResponse = await fetch(
|
||||
`/api/teams/${userData.teamId}/hunt-session`,
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Cache-Control": "no-store, no-cache, must-revalidate",
|
||||
Pragma: "no-cache",
|
||||
},
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
// If team has an active hunt session, redirect to map
|
||||
if (teamHuntResponse.ok) {
|
||||
const teamHuntData = await teamHuntResponse.json();
|
||||
if (teamHuntData.startTime) {
|
||||
// Store the start time in the centralized timer service
|
||||
setHuntTimer(teamHuntData.startTime);
|
||||
|
||||
console.log("Team hunt is active! Redirecting to map...");
|
||||
redirectAttempted = true;
|
||||
lastKnownHuntStatus = true;
|
||||
|
||||
// Show loading screen and redirect
|
||||
document.body.innerHTML =
|
||||
'<div style="display:flex;justify-content:center;align-items:center;height:100vh;font-family:sans-serif;"><div style="text-align:center"><div style="font-size:24px">Loading Map...</div><div style="margin-top:20px">Please wait...</div></div></div>';
|
||||
window.location.href = "/map";
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fall back to checking the global hunt status
|
||||
const timestamp = Date.now();
|
||||
const globalResponse = await fetch(`/api/hunt-status?_t=${timestamp}`, {
|
||||
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 (globalResponse.ok) {
|
||||
const data = await globalResponse.json();
|
||||
console.log("Hunt status check result:", data);
|
||||
|
||||
// Store the most recent hunt data to determine if hunt ended
|
||||
if (lastHuntData && lastHuntData.active && !data.active) {
|
||||
// Hunt was active before but now it's not - it has ended
|
||||
console.log("Hunt has ended! Showing leaderboard...");
|
||||
setHuntEnded(true);
|
||||
|
||||
// Clear any timer data
|
||||
clearHuntTimer();
|
||||
|
||||
// Redirect to leaderboard after a brief delay
|
||||
setTimeout(() => {
|
||||
window.location.href = "/leaderboard?huntEnded=true";
|
||||
}, 2000);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// If this is a new session but we detect signs of a hunt that ended
|
||||
if (!lastHuntData && !data.active && data.startTime && data.endTime) {
|
||||
// Handle case where user lands directly on waiting page after hunt ended
|
||||
console.log("Hunt appears to have already ended");
|
||||
setHuntEnded(true);
|
||||
|
||||
// Redirect to leaderboard after a brief delay
|
||||
setTimeout(() => {
|
||||
window.location.href = "/leaderboard?huntEnded=true";
|
||||
}, 2000);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Save the current hunt data for next comparison
|
||||
lastHuntData = data;
|
||||
|
||||
if (data.active) {
|
||||
// Store the global start time in the centralized timer service
|
||||
if (data.startTime) {
|
||||
setHuntTimer(data.startTime, data.endTime);
|
||||
}
|
||||
|
||||
console.log("Hunt is active! Redirecting immediately...");
|
||||
redirectAttempted = true;
|
||||
lastKnownHuntStatus = true;
|
||||
|
||||
// Show loading screen during redirect
|
||||
document.body.innerHTML =
|
||||
'<div style="display:flex;justify-content:center;align-items:center;height:100vh;font-family:sans-serif;"><div style="text-align:center"><div style="font-size:24px">Loading Map...</div><div style="margin-top:20px">Please wait...</div></div></div>';
|
||||
window.location.href = "/map";
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setHuntActive(data.active);
|
||||
|
||||
// If hunt becomes active, redirect to map
|
||||
if (data.active) {
|
||||
router.push("/map");
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error checking hunt status:", err);
|
||||
console.error("Failed to check hunt status:", err);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Check immediately and very frequently
|
||||
// Check status immediately
|
||||
checkHuntStatus();
|
||||
const intervalId = setInterval(checkHuntStatus, 500); // Check every 500ms
|
||||
|
||||
// Set up regular polling
|
||||
const intervalId = setInterval(checkHuntStatus, 5000);
|
||||
|
||||
// Clean up on unmount
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
}, [router]);
|
||||
|
||||
// Redirect to login if not authenticated
|
||||
useEffect(() => {
|
||||
if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [status, router]);
|
||||
if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
return null;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.spinner}></div>
|
||||
<h2>Loading...</h2>
|
||||
<div className="loading-container">
|
||||
<div className="loading-spinner"></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{huntEnded ? (
|
||||
<>
|
||||
<h1>Hunt Has Ended</h1>
|
||||
<p>
|
||||
The treasure hunt has ended. You can view the results on the
|
||||
leaderboard.
|
||||
</p>
|
||||
<div className={styles.endedMessage}>
|
||||
<p>Hunt Complete!</p>
|
||||
<button onClick={() => router.push("/leaderboard?huntEnded=true")}>
|
||||
View Results
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h1>Waiting for Hunt to Start</h1>
|
||||
<p>
|
||||
The treasure hunt has not started yet. Please wait for the
|
||||
administrator to start the hunt.
|
||||
</p>
|
||||
<div className={styles.waitingAnimation}>⏳</div>
|
||||
{huntActive && (
|
||||
<div className={styles.startedMessage}>
|
||||
<p>The hunt has started!</p>
|
||||
<button onClick={() => router.push("/map")}>Go to Map</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="waiting-page">
|
||||
<div className="waiting-card">
|
||||
<div className="waiting-icon">⏳</div>
|
||||
<h1>Hunt Not Started Yet</h1>
|
||||
<p>The treasure hunt has not been activated by the organizers yet.</p>
|
||||
<p>This page will automatically update when the hunt begins.</p>
|
||||
|
||||
<div className="waiting-animation">
|
||||
<div className="pulse"></div>
|
||||
</div>
|
||||
|
||||
<div className="waiting-buttons">
|
||||
<Link
|
||||
href={`/${session?.user?.teamId || ""}`}
|
||||
className="team-button"
|
||||
>
|
||||
Back to Team Page
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.waiting-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.waiting-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.waiting-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #68543c;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #555;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.waiting-animation {
|
||||
margin: 2rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: rgba(104, 84, 60, 0.3);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.waiting-buttons {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.team-button {
|
||||
display: inline-block;
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.team-button:hover {
|
||||
background-color: #53402d;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user