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
+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