diff --git a/app/(main)/clue/[clueId]/page.js b/app/(main)/clue/[clueId]/page.js index 692e712..c919089 100644 --- a/app/(main)/clue/[clueId]/page.js +++ b/app/(main)/clue/[clueId]/page.js @@ -34,13 +34,17 @@ export default function CluePage({ params }) { const [clueFound, setClueFound] = useState(false); const [allClues, setAllClues] = useState([]); const [nextClueId, setNextClueId] = useState(null); + const [nextClueAvailable, setNextClueAvailable] = useState(false); const [huntActive, setHuntActive] = useState(true); const [previousHuntState, setPreviousHuntState] = useState(true); const [showSuccessNotification, setShowSuccessNotification] = useState(false); + const [showNavErrorNotification, setShowNavErrorNotification] = + useState(false); const [teamData, setTeamData] = useState(null); const router = useRouter(); const { data: session, status } = useSession(); const notificationTimeoutRef = useRef(null); + const navErrorTimeoutRef = useRef(null); // Check if user is admin const isAdmin = session?.user?.role === "admin"; @@ -78,7 +82,10 @@ export default function CluePage({ params }) { // Find next clue for navigation const currentIndex = data.findIndex((c) => c.id === parseInt(clueId)); if (currentIndex !== -1 && currentIndex < data.length - 1) { - setNextClueId(data[currentIndex + 1].id); + const nextClue = data[currentIndex + 1]; + setNextClueId(nextClue.id); + // Set if the next clue is available (already found or is the next unfound clue) + setNextClueAvailable(nextClue.found || nextClue.available); } } return data; @@ -340,19 +347,38 @@ export default function CluePage({ params }) { } }; - // Clear notification timeout on component unmount + // Clear notification timeouts on component unmount useEffect(() => { return () => { if (notificationTimeoutRef.current) { clearTimeout(notificationTimeoutRef.current); } + if (navErrorTimeoutRef.current) { + clearTimeout(navErrorTimeoutRef.current); + } }; }, []); // Navigate to the next clue const handleNextClue = () => { if (nextClueId) { - router.push(`/clue/${nextClueId}`); + // Check if next clue is available before navigating + if (nextClueAvailable || isAdmin) { + router.push(`/clue/${nextClueId}`); + } else { + // Show notification that the next clue is locked + setShowNavErrorNotification(true); + + // Clear previous timeout if it exists + if (navErrorTimeoutRef.current) { + clearTimeout(navErrorTimeoutRef.current); + } + + // Auto-hide the notification after 3 seconds + navErrorTimeoutRef.current = setTimeout(() => { + setShowNavErrorNotification(false); + }, 3000); + } } else { router.push("/map"); } @@ -461,7 +487,31 @@ export default function CluePage({ params }) { )} + {showNavErrorNotification && ( +
+ You need to find this clue first before moving to the next one. +
+