mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
all that's left is adding slightly better error handling for map to check if a hunt is active or not and to add the clues pages.
Grey = cant click Red = current Green = complete blue = skipped?
This commit is contained in:
bobbert committed
1 parent
95348df5a9
commit
0269fdfe68
8 files changed
+602
-23
No files matched your search
@@ -0,0 +1,210 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import styles from "./stats.module.css";
|
||||
|
||||
export default function StatsPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [teamStats, setTeamStats] = useState(null);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Redirect to login if not authenticated
|
||||
if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
if (status === "authenticated") {
|
||||
fetchTeamStats();
|
||||
}
|
||||
}, [status, router]);
|
||||
|
||||
const fetchTeamStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const response = await fetch("/api/team-stats", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
// Handle specific error cases
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
|
||||
if (response.status === 401) {
|
||||
throw new Error("Authentication error: Not logged in");
|
||||
} else if (
|
||||
response.status === 404 ||
|
||||
errorData.error?.includes("not part of a team")
|
||||
) {
|
||||
throw new Error("You need to join a team before viewing stats");
|
||||
} else {
|
||||
throw new Error(errorData.error || "Failed to fetch team stats");
|
||||
}
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setTeamStats(data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching team stats:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleExpanded = () => {
|
||||
setExpanded(!expanded);
|
||||
};
|
||||
|
||||
// Format timestamp to a more readable format
|
||||
const formatTimestamp = (timestamp) => {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString(undefined, {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.loadingSpinner}></div>
|
||||
<p className={styles.loadingText}>Loading team stats...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.errorContainer}>
|
||||
<h2 className={styles.errorTitle}>Error</h2>
|
||||
<p className={styles.errorMessage}>{error}</p>
|
||||
<div className={styles.buttonContainer}>
|
||||
<button onClick={fetchTeamStats} className={styles.retryButton}>
|
||||
Retry
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push("/team-selection")}
|
||||
className={styles.teamButton}
|
||||
>
|
||||
Join a Team
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!teamStats) {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<p className={styles.noData}>No team stats available.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.title}>Team Stats</h1>
|
||||
<h2 className={styles.teamName}>{teamStats.team.name}</h2>
|
||||
</div>
|
||||
|
||||
<div className={styles.statsCard}>
|
||||
<div className={styles.summaryStats}>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statLabel}>Total Clues:</span>
|
||||
<span className={styles.statValue}>{teamStats.totalClues}</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statLabel}>Clues Found:</span>
|
||||
<span className={styles.statValue}>
|
||||
{teamStats.foundClues.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statLabel}>Clues Remaining:</span>
|
||||
<span className={styles.statValue}>{teamStats.remainingClues}</span>
|
||||
</div>
|
||||
<div className={styles.statItem}>
|
||||
<span className={styles.statLabel}>Clues Skipped:</span>
|
||||
<span className={styles.statValue}>{teamStats.skippedClues}</span>
|
||||
</div>
|
||||
<div className={`${styles.statItem} ${styles.rankItem}`}>
|
||||
<span className={styles.statLabel}>Current Rank:</span>
|
||||
<span className={styles.statValue}>{teamStats.currentRank}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.collapsibleSection}>
|
||||
<button
|
||||
className={styles.collapsibleButton}
|
||||
onClick={toggleExpanded}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
<span className={styles.collapsibleTitle}>
|
||||
Clues Found: {teamStats.foundClues.length}
|
||||
</span>
|
||||
<span className={styles.collapsibleIcon}>
|
||||
{expanded ? "▼" : "►"}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{expanded && (
|
||||
<div className={styles.cluesList}>
|
||||
{teamStats.foundClues.length === 0 ? (
|
||||
<p className={styles.emptyMessage}>No clues found yet.</p>
|
||||
) : (
|
||||
teamStats.foundClues.map((clue) => (
|
||||
<div key={clue.id} className={styles.clueItem}>
|
||||
<span className={styles.clueTitle}>{clue.title}</span>
|
||||
<span className={styles.clueTimestamp}>
|
||||
{formatTimestamp(clue.found_at)}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user