mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-08 03:50:21 +00:00
fixing map timing errors and still trying to make leaderboard and clues pages.
Added two menus to the admin dashboard with a navbar at the bottom: Added navbar button for timer. Added navbar button to edit clues centrally. Added navbar button to view Admin version of leaderboard. To add: - the admin version of the leaderboard. has the same sort of initial view as the normal leaderboard however clicking on a team will create a drop down with their team stats. Grey = cant click Red = current Green = complete blue = skipped? Need to add Clue page Need to fix Leaderboard.
This commit is contained in:
bobbert committed
1 parent
30d88407a0
commit
c098ad40bf
9 files changed
+1217
-29
No files matched your search
@@ -0,0 +1,468 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function AdminCluesPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const [clues, setClues] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
// Form state for adding new clues - removed coordinates
|
||||
const [newClue, setNewClue] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
location: "",
|
||||
});
|
||||
|
||||
// Check if user is admin
|
||||
useEffect(() => {
|
||||
if (status === "authenticated") {
|
||||
if (session?.user?.role !== "admin") {
|
||||
router.push("/team-selection");
|
||||
} else {
|
||||
fetchClues();
|
||||
}
|
||||
} else if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [session, status, router]);
|
||||
|
||||
// Fetch all clues
|
||||
const fetchClues = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch("/api/admin/clues", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(
|
||||
errorData.error || `Failed to fetch clues (${response.status})`
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Validate the response data
|
||||
if (!Array.isArray(data)) {
|
||||
throw new Error("Invalid response format from server");
|
||||
}
|
||||
|
||||
setClues(data);
|
||||
setError("");
|
||||
} catch (err) {
|
||||
console.error("Error fetching clues:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle input change for new clue form
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setNewClue((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
// Handle form submission to add new clue
|
||||
const handleAddClue = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch("/api/admin/clues", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(newClue),
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to add clue");
|
||||
}
|
||||
|
||||
// Refresh the clue list
|
||||
fetchClues();
|
||||
|
||||
// Reset the form - removed coordinates
|
||||
setNewClue({
|
||||
title: "",
|
||||
description: "",
|
||||
location: "",
|
||||
});
|
||||
|
||||
setError("");
|
||||
} catch (err) {
|
||||
console.error("Error adding clue:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle deleting a clue
|
||||
const handleDeleteClue = async (clueId) => {
|
||||
if (!confirm("Are you sure you want to delete this clue?")) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`/api/admin/clues/${clueId}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete clue");
|
||||
}
|
||||
|
||||
// Refresh the clue list
|
||||
fetchClues();
|
||||
setError("");
|
||||
} catch (err) {
|
||||
console.error("Error deleting clue:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (status === "loading" || loading) {
|
||||
return <div className="admin-page loading">Loading...</div>;
|
||||
}
|
||||
|
||||
if (status === "unauthenticated") {
|
||||
return null; // Will redirect via useEffect
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="page-header">
|
||||
<div className="page-title">Manage Clues</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div className="admin-content">
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
|
||||
{/* Add New Clue Form - removed coordinate fields */}
|
||||
<div className="admin-card">
|
||||
<h2>Add New Clue</h2>
|
||||
<form onSubmit={handleAddClue}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="title">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
value={newClue.title}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="admin-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={newClue.description}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="admin-textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="location">Location Hint</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
name="location"
|
||||
value={newClue.location}
|
||||
onChange={handleInputChange}
|
||||
className="admin-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="admin-button">
|
||||
Add Clue
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Existing Clues List - updated to remove coordinates */}
|
||||
<div className="admin-card">
|
||||
<h2>Existing Clues</h2>
|
||||
{clues.length === 0 ? (
|
||||
<p className="no-clues">No clues found.</p>
|
||||
) : (
|
||||
<div className="clues-list">
|
||||
{clues.map((clue) => (
|
||||
<div key={clue.id} className="clue-item">
|
||||
<div className="clue-header">
|
||||
<h3>{clue.title}</h3>
|
||||
<button
|
||||
className="delete-button"
|
||||
onClick={() => handleDeleteClue(clue.id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<p className="clue-description">{clue.description}</p>
|
||||
{clue.location && (
|
||||
<p className="clue-location">
|
||||
<strong>Location:</strong> {clue.location}
|
||||
</p>
|
||||
)}
|
||||
<p className="clue-position">
|
||||
<strong>Position:</strong> Clue #{clue.id} in sequence
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Navigation Bar */}
|
||||
<div className="admin-nav-bar">
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin")}
|
||||
>
|
||||
<div className="admin-nav-icon">⏱️</div>
|
||||
<div className="admin-nav-label">Timer</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button active"
|
||||
onClick={() => router.push("/admin/clues")}
|
||||
>
|
||||
<div className="admin-nav-icon">📝</div>
|
||||
<div className="admin-nav-label">Clues</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin/leaderboard")}
|
||||
>
|
||||
<div className="admin-nav-icon">🏆</div>
|
||||
<div className="admin-nav-label">Leaderboard</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.admin-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 70px; /* Space for navbar */
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.half {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.admin-textarea {
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-button {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.clues-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.clue-item {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.clue-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.clue-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clue-description {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.clue-location,
|
||||
.clue-position {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
background-color: #ffebee;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-clues {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Admin Navigation Bar Styles */
|
||||
.admin-nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.admin-nav-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 0;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-nav-button.active {
|
||||
color: #68543c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.admin-nav-button:hover {
|
||||
background-color: rgba(104, 84, 60, 0.1);
|
||||
}
|
||||
|
||||
.admin-nav-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.admin-nav-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,360 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function AdminLeaderboardPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
// Check if user is admin
|
||||
useEffect(() => {
|
||||
if (status === "authenticated") {
|
||||
if (session?.user?.role !== "admin") {
|
||||
router.push("/team-selection");
|
||||
} else {
|
||||
fetchLeaderboardData();
|
||||
}
|
||||
} else if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [session, status, router]);
|
||||
|
||||
// Fetch leaderboard data
|
||||
const fetchLeaderboardData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
// This is a placeholder - you'll need to implement the actual API
|
||||
// For now, we'll just set dummy data
|
||||
const dummyTeams = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Team Alpha",
|
||||
code: "ALPHA1",
|
||||
memberCount: 4,
|
||||
cluesFound: 5,
|
||||
totalClues: 10,
|
||||
lastActivity: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Team Beta",
|
||||
code: "BETA12",
|
||||
memberCount: 3,
|
||||
cluesFound: 8,
|
||||
totalClues: 10,
|
||||
lastActivity: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Team Gamma",
|
||||
code: "GAMMA3",
|
||||
memberCount: 5,
|
||||
cluesFound: 2,
|
||||
totalClues: 10,
|
||||
lastActivity: new Date().toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
setTeams(dummyTeams);
|
||||
|
||||
// Uncomment this when API is ready
|
||||
/*
|
||||
const response = await fetch("/api/admin/leaderboard", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate"
|
||||
},
|
||||
credentials: "include"
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch leaderboard data");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setTeams(data);
|
||||
*/
|
||||
} catch (err) {
|
||||
console.error("Error fetching leaderboard data:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (status === "loading" || loading) {
|
||||
return <div className="admin-page loading">Loading...</div>;
|
||||
}
|
||||
|
||||
if (status === "unauthenticated") {
|
||||
return null; // Will redirect via useEffect
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="page-header">
|
||||
<div className="page-title">Admin Leaderboard</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div className="admin-content">
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
|
||||
<div className="admin-card">
|
||||
<h2>Team Progress</h2>
|
||||
|
||||
<button
|
||||
className="refresh-button"
|
||||
onClick={fetchLeaderboardData}
|
||||
disabled={loading}
|
||||
>
|
||||
🔄 Refresh Data
|
||||
</button>
|
||||
|
||||
{teams.length === 0 ? (
|
||||
<p className="no-data">No team data available.</p>
|
||||
) : (
|
||||
<div className="leaderboard-table-container">
|
||||
<table className="leaderboard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Team Name</th>
|
||||
<th>Members</th>
|
||||
<th>Progress</th>
|
||||
<th>Last Activity</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teams.map((team, index) => (
|
||||
<tr key={team.id}>
|
||||
<td>{index + 1}</td>
|
||||
<td>
|
||||
{team.name} ({team.code})
|
||||
</td>
|
||||
<td>{team.memberCount}</td>
|
||||
<td>
|
||||
{team.cluesFound} / {team.totalClues}
|
||||
</td>
|
||||
<td>
|
||||
{team.lastActivity
|
||||
? new Date(team.lastActivity).toLocaleString()
|
||||
: "Never"}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="reset-button"
|
||||
onClick={() =>
|
||||
alert(`Reset team ${team.name} progress`)
|
||||
}
|
||||
>
|
||||
Reset Progress
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Navigation Bar */}
|
||||
<div className="admin-nav-bar">
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin")}
|
||||
>
|
||||
<div className="admin-nav-icon">⏱️</div>
|
||||
<div className="admin-nav-label">Timer</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin/clues")}
|
||||
>
|
||||
<div className="admin-nav-icon">📝</div>
|
||||
<div className="admin-nav-label">Clues</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button active"
|
||||
onClick={() => router.push("/admin/leaderboard")}
|
||||
>
|
||||
<div className="admin-nav-icon">🏆</div>
|
||||
<div className="admin-nav-label">Leaderboard</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.admin-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 70px; /* Space for navbar */
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh-button:disabled {
|
||||
background-color: #a5d6a7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.leaderboard-table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.leaderboard-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.leaderboard-table th,
|
||||
.leaderboard-table td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.leaderboard-table th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.leaderboard-table tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
background-color: #ffebee;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Admin Navigation Bar Styles */
|
||||
.admin-nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.admin-nav-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 0;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-nav-button.active {
|
||||
color: #68543c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.admin-nav-button:hover {
|
||||
background-color: rgba(104, 84, 60, 0.1);
|
||||
}
|
||||
|
||||
.admin-nav-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.admin-nav-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -336,6 +336,31 @@ export default function AdminDashboard() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Navigation Bar */}
|
||||
<div className="admin-nav-bar">
|
||||
<button
|
||||
className="admin-nav-button active"
|
||||
onClick={() => router.push("/admin")}
|
||||
>
|
||||
<div className="admin-nav-icon">⏱️</div>
|
||||
<div className="admin-nav-label">Timer</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin/clues")}
|
||||
>
|
||||
<div className="admin-nav-icon">📝</div>
|
||||
<div className="admin-nav-label">Clues</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin/leaderboard")}
|
||||
>
|
||||
<div className="admin-nav-icon">🏆</div>
|
||||
<div className="admin-nav-label">Leaderboard</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.admin-page {
|
||||
display: flex;
|
||||
@@ -369,6 +394,7 @@ export default function AdminDashboard() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 70px; /* Add space for the navbar */
|
||||
}
|
||||
|
||||
.timer-display-container {
|
||||
@@ -441,6 +467,52 @@ export default function AdminDashboard() {
|
||||
color: red;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Admin Navigation Bar Styles */
|
||||
.admin-nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.admin-nav-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 0;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-nav-button.active {
|
||||
color: #68543c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.admin-nav-button:hover {
|
||||
background-color: rgba(104, 84, 60, 0.1);
|
||||
}
|
||||
|
||||
.admin-nav-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.admin-nav-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
|
||||
+28
-25
@@ -200,17 +200,20 @@ export default function MapPage() {
|
||||
|
||||
// Convert NodeList to Array for easier manipulation
|
||||
Array.from(circleSvgElements).forEach((circle, index) => {
|
||||
// Only process if we have a clue for this index
|
||||
if (clues[index]) {
|
||||
// Only process if we have a clue for this index and it's within bounds
|
||||
if (index < clues.length) {
|
||||
// Map SVG circle at position index to the clue at index
|
||||
// This uses sequential order rather than coordinates
|
||||
const clue = clues[index];
|
||||
|
||||
// Check if this clue is available (either found or next in sequence)
|
||||
const isAvailable =
|
||||
clues[index].found || index <= nextAvailableClueIndex;
|
||||
const isAvailable = clue.found || index <= nextAvailableClueIndex;
|
||||
|
||||
// Make circle interactive
|
||||
circle.style.cursor = isAvailable ? "pointer" : "not-allowed";
|
||||
|
||||
// Set appropriate colors
|
||||
if (clues[index].found) {
|
||||
if (clue.found) {
|
||||
// Found clues are green
|
||||
circle.style.fill = "#4caf50";
|
||||
circle.style.stroke = "#2e7d32";
|
||||
@@ -232,8 +235,8 @@ export default function MapPage() {
|
||||
e.stopPropagation();
|
||||
|
||||
if (isAvailable) {
|
||||
console.log(`Navigating to clue ${clues[index].id}`);
|
||||
router.push(`/clue/${clues[index].id}`);
|
||||
console.log(`Navigating to clue ${clue.id}`);
|
||||
router.push(`/clue/${clue.id}`);
|
||||
} else {
|
||||
alert("Complete previous clues first to unlock this one!");
|
||||
}
|
||||
@@ -247,7 +250,7 @@ export default function MapPage() {
|
||||
};
|
||||
|
||||
circle.onmouseleave = () => {
|
||||
if (clues[index].found) {
|
||||
if (clue.found) {
|
||||
circle.style.fill = "#4caf50"; // Back to green for found clues
|
||||
} else if (isAvailable) {
|
||||
circle.style.fill = "#ff9800"; // Back to orange for available clues
|
||||
@@ -256,13 +259,13 @@ export default function MapPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Add tooltip/title
|
||||
// Add tooltip/title with actual clue ID and position information
|
||||
const label = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"title"
|
||||
);
|
||||
label.textContent = `Clue #${index + 1}: ${
|
||||
clues[index].title || "Mystery clue"
|
||||
clue.title || "Mystery clue"
|
||||
}${!isAvailable ? " (Locked)" : ""}`;
|
||||
circle.appendChild(label);
|
||||
}
|
||||
@@ -409,26 +412,26 @@ export default function MapPage() {
|
||||
try {
|
||||
// First try to get timer data from the centralized service
|
||||
let timerData = getHuntTimer();
|
||||
|
||||
|
||||
// If no timer data yet, fetch it from API
|
||||
if (!timerData || !timerData.startTime) {
|
||||
console.log("No timer data found, fetching from API...");
|
||||
const startTimeStr = await fetchTeamHuntStartTime();
|
||||
console.log("Got start time:", startTimeStr);
|
||||
|
||||
|
||||
if (startTimeStr) {
|
||||
setHuntTimer(startTimeStr);
|
||||
timerData = getHuntTimer();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Set up interval for timer updates
|
||||
const timerInterval = setInterval(() => {
|
||||
if (!isMounted.current) {
|
||||
clearInterval(timerInterval);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const currentTimerData = getHuntTimer();
|
||||
if (currentTimerData && currentTimerData.startTime) {
|
||||
const formattedTime = formatElapsedTime(currentTimerData.startTime);
|
||||
@@ -438,12 +441,12 @@ export default function MapPage() {
|
||||
setElapsedTime("00:00:00");
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
|
||||
// Initial timer update
|
||||
if (timerData && timerData.startTime) {
|
||||
setElapsedTime(formatElapsedTime(timerData.startTime));
|
||||
}
|
||||
|
||||
|
||||
return () => {
|
||||
clearInterval(timerInterval);
|
||||
};
|
||||
@@ -451,7 +454,7 @@ export default function MapPage() {
|
||||
console.error("Error initializing timer:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
initializeTimer();
|
||||
}, []); // Empty dependency array since fetchTeamHuntStartTime is defined inside the component
|
||||
|
||||
@@ -459,7 +462,7 @@ export default function MapPage() {
|
||||
useEffect(() => {
|
||||
const checkHuntStatus = async () => {
|
||||
if (!isMounted.current) return;
|
||||
|
||||
|
||||
try {
|
||||
const timestamp = Date.now(); // Add cache-busting timestamp
|
||||
const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
|
||||
@@ -471,15 +474,15 @@ export default function MapPage() {
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Failed to fetch hunt status:", response.statusText);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Map page hunt status check:", data);
|
||||
|
||||
|
||||
// If hunt is not active, force redirect to waiting page
|
||||
if (!data.active) {
|
||||
console.log("Hunt not active, redirecting to waiting page");
|
||||
@@ -488,7 +491,7 @@ export default function MapPage() {
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// If timer endTime exists and has passed, redirect to leaderboard
|
||||
if (data.endTime && new Date(data.endTime) <= new Date()) {
|
||||
console.log("Timer expired, redirecting to leaderboard");
|
||||
@@ -497,7 +500,7 @@ export default function MapPage() {
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// Otherwise, hunt is active and timer is running
|
||||
if (isMounted.current) {
|
||||
setHuntActive(true);
|
||||
@@ -506,11 +509,11 @@ export default function MapPage() {
|
||||
console.error("Failed to check hunt status:", err);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Check immediately and every second
|
||||
checkHuntStatus();
|
||||
const intervalId = setInterval(checkHuntStatus, 1000);
|
||||
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [softRedirect]);
|
||||
|
||||
|
||||
Reference in new issue
Block a user