mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-08 03:50:21 +00:00
FIXED CLUES! all that needs to be done is manually adding circle buttons and hiding/showing feature through API.. maybe fixing QR scanner
This commit is contained in:
bobbert committed
1 parent
2236dceac9
commit
726121e105
18 files changed
+1504
-1192
No files matched your search
+145
-141
@@ -5,36 +5,43 @@ import { useSession } from "next-auth/react";
|
||||
import { formatElapsedTime, getHuntTimer } from "@/utils/timerService";
|
||||
import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
import { use } from "react";
|
||||
import QRCodeHelper from "@/components/QRCodeHelper";
|
||||
|
||||
// Dynamically import QR scanner component with no SSR to avoid hydration issues
|
||||
const QRScanner = dynamic(() => import("@/components/QRScanner"), {
|
||||
ssr: false,
|
||||
});
|
||||
// Dynamically import the new QR scanner component with no SSR
|
||||
const EnhancedQRScanner = dynamic(
|
||||
() => import("@/components/EnhancedQRScanner"),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => <div className="scanner-loading">Loading scanner...</div>,
|
||||
}
|
||||
);
|
||||
|
||||
export default function CluePage({ params }) {
|
||||
// Unwrap params properly using use() from React
|
||||
const unwrappedParams = use(params);
|
||||
const clueId = unwrappedParams.clueId;
|
||||
|
||||
const [clue, setClue] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [foundNow, setFoundNow] = useState(false);
|
||||
const [elapsedTime, setElapsedTime] = useState("00:00:00");
|
||||
const [showScanner, setShowScanner] = useState(false);
|
||||
const [scanResult, setScanResult] = useState(null);
|
||||
const [scanMessage, setScanMessage] = useState(null);
|
||||
const [lastRefresh, setLastRefresh] = useState(0); // Track last refresh time
|
||||
const [lastRefresh, setLastRefresh] = useState(0);
|
||||
const [clueFound, setClueFound] = useState(false);
|
||||
const [allClues, setAllClues] = useState([]);
|
||||
const [nextClueId, setNextClueId] = useState(null);
|
||||
const router = useRouter();
|
||||
const { data: session, status } = useSession(); // Get session to check if user is admin
|
||||
const { clueId } = params;
|
||||
const { data: session, status } = useSession();
|
||||
|
||||
// Check if user is admin
|
||||
const isAdmin = session?.user?.role === "admin";
|
||||
|
||||
// This effect handles authentication and initial clue data fetch
|
||||
useEffect(() => {
|
||||
let isMounted = true; // Flag to prevent state updates after unmount
|
||||
let isMounted = true;
|
||||
const now = Date.now();
|
||||
|
||||
// Only allow refreshes every 10 seconds (more for admins)
|
||||
const minRefreshInterval = isAdmin ? 30000 : 10000; // 30 seconds for admins, 10 seconds for regular users
|
||||
const minRefreshInterval = isAdmin ? 30000 : 10000;
|
||||
|
||||
// Skip if we refreshed too recently and this isn't the first load
|
||||
if (loading === false && now - lastRefresh < minRefreshInterval) {
|
||||
@@ -50,10 +57,34 @@ export default function CluePage({ params }) {
|
||||
return;
|
||||
}
|
||||
|
||||
// One-time fetch clue data with debouncing
|
||||
// Fetch all clues to get navigation context
|
||||
const fetchAllClues = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/clues");
|
||||
if (!response.ok) return [];
|
||||
|
||||
const data = await response.json();
|
||||
if (isMounted) {
|
||||
setAllClues(data);
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.error("Error fetching all clues:", err);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch current clue details
|
||||
async function fetchClue() {
|
||||
try {
|
||||
setLoading(true);
|
||||
await fetchAllClues();
|
||||
|
||||
// Add timestamp to avoid browser caching
|
||||
const timestamp = Date.now();
|
||||
@@ -76,16 +107,11 @@ export default function CluePage({ params }) {
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Only update state if the component is still mounted
|
||||
if (isMounted) {
|
||||
setClue(data);
|
||||
// Only set foundNow on initial load or if it's actually newly found
|
||||
if (loading === true) {
|
||||
setFoundNow(data.foundNow);
|
||||
}
|
||||
setClueFound(data.found);
|
||||
setLoading(false);
|
||||
setLastRefresh(Date.now()); // Update last refresh timestamp
|
||||
setLastRefresh(Date.now());
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching clue:", err);
|
||||
@@ -98,17 +124,14 @@ export default function CluePage({ params }) {
|
||||
|
||||
fetchClue();
|
||||
|
||||
// Cleanup function to prevent state updates after unmount
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [clueId, router, status, lastRefresh, loading, isAdmin]); // Add isAdmin and lastRefresh to dependencies
|
||||
}, [clueId, router, status, lastRefresh, loading, isAdmin]);
|
||||
|
||||
// Separate effect to handle timer updates - doesn't re-fetch data
|
||||
// Separate effect to handle timer updates
|
||||
useEffect(() => {
|
||||
let timerId;
|
||||
|
||||
// Set up timer display updates
|
||||
const timerData = getHuntTimer();
|
||||
if (!timerData || !timerData.isActive) {
|
||||
return;
|
||||
@@ -125,42 +148,60 @@ export default function CluePage({ params }) {
|
||||
return () => {
|
||||
if (timerId) clearInterval(timerId);
|
||||
};
|
||||
}, []); // Empty dependency array so it only runs once
|
||||
}, []);
|
||||
|
||||
// Handle QR scan result
|
||||
const handleScan = (data) => {
|
||||
setScanResult(data);
|
||||
setScanMessage(`QR Code scanned: ${data}`);
|
||||
|
||||
try {
|
||||
// Handle both "QR123" format and just "123" format
|
||||
// Handle multiple QR code formats: "QR123", "123", or even "Clue 123"
|
||||
let scannedClueId;
|
||||
const match = data.match(/^QR(\d+)$/i);
|
||||
// Try regex patterns
|
||||
const qrPattern = /^QR[^0-9]*(\d+)$/i;
|
||||
const cluePattern = /^clue[^0-9]*(\d+)$/i;
|
||||
const numberPattern = /^(\d+)$/;
|
||||
|
||||
let match =
|
||||
data.match(qrPattern) ||
|
||||
data.match(cluePattern) ||
|
||||
data.match(numberPattern);
|
||||
|
||||
if (match) {
|
||||
// Extract the number from QR[number]
|
||||
scannedClueId = parseInt(match[1], 10);
|
||||
} else {
|
||||
// Try to parse the raw value
|
||||
// Try direct parsing as a last resort
|
||||
scannedClueId = parseInt(data, 10);
|
||||
}
|
||||
|
||||
if (!isNaN(scannedClueId) && scannedClueId === parseInt(clueId)) {
|
||||
// Correct QR code scanned, mark as found and move to next clue
|
||||
// Correct QR code scanned, mark as found
|
||||
setScanMessage("✓ Correct QR code found!");
|
||||
markClueAsFound(clueId);
|
||||
} else if (!isNaN(scannedClueId)) {
|
||||
setScanMessage(
|
||||
`QR code for clue ${scannedClueId} scanned, but you need clue ${clueId}. Please scan the correct code.`
|
||||
);
|
||||
} else {
|
||||
setScanMessage(
|
||||
"Incorrect QR code. Please scan the correct code for this clue."
|
||||
"Couldn't recognize this QR code. Please scan the correct code for this clue."
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error processing scan result:", err);
|
||||
setScanMessage("Invalid QR code format. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
// Function to mark clue as found and navigate to the next clue
|
||||
// Function to mark clue as found via API
|
||||
const markClueAsFound = async (currentClueId) => {
|
||||
try {
|
||||
// Only proceed if the clue isn't already found
|
||||
if (clueFound) {
|
||||
setScanMessage("You've already found this clue!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Mark the clue as found via API
|
||||
const response = await fetch("/api/mark-clue", {
|
||||
method: "POST",
|
||||
@@ -169,29 +210,11 @@ export default function CluePage({ params }) {
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Success message
|
||||
setScanMessage("Clue verified! Moving to the next clue...");
|
||||
|
||||
// Fetch all clues to find the next available one
|
||||
const allCluesResponse = await fetch("/api/clues");
|
||||
const allClues = await allCluesResponse.json();
|
||||
|
||||
// Find the current clue index
|
||||
const currentIndex = allClues.findIndex(
|
||||
(c) => c.id === parseInt(currentClueId)
|
||||
// Update local state to show clue is found
|
||||
setClueFound(true);
|
||||
setScanMessage(
|
||||
"✅ Clue verified! You can now proceed to the next clue."
|
||||
);
|
||||
|
||||
if (currentIndex !== -1 && currentIndex < allClues.length - 1) {
|
||||
// Navigate to the next clue after a brief delay
|
||||
setTimeout(() => {
|
||||
router.push(`/clue/${allClues[currentIndex + 1].id}`);
|
||||
}, 1500);
|
||||
} else {
|
||||
// This was the last clue
|
||||
setTimeout(() => {
|
||||
router.push("/map");
|
||||
}, 1500);
|
||||
}
|
||||
} else {
|
||||
setScanMessage("Error verifying clue. Please try again.");
|
||||
}
|
||||
@@ -201,35 +224,35 @@ export default function CluePage({ params }) {
|
||||
}
|
||||
};
|
||||
|
||||
// Function to handle skip button
|
||||
const handleSkip = async () => {
|
||||
// Fetch all clues to find the next one
|
||||
try {
|
||||
const response = await fetch("/api/clues");
|
||||
const allClues = await response.json();
|
||||
// Navigate to the next clue
|
||||
const handleNextClue = () => {
|
||||
if (nextClueId) {
|
||||
router.push(`/clue/${nextClueId}`);
|
||||
} else {
|
||||
router.push("/map");
|
||||
}
|
||||
};
|
||||
|
||||
// Find the current clue index
|
||||
// Navigate to the previous clue
|
||||
const handlePrevClue = () => {
|
||||
if (allClues.length > 0) {
|
||||
const currentIndex = allClues.findIndex((c) => c.id === parseInt(clueId));
|
||||
|
||||
if (currentIndex !== -1 && currentIndex < allClues.length - 1) {
|
||||
// Navigate to the next clue
|
||||
router.push(`/clue/${allClues[currentIndex + 1].id}`);
|
||||
if (currentIndex > 0) {
|
||||
router.push(`/clue/${allClues[currentIndex - 1].id}`);
|
||||
} else {
|
||||
// This was the last clue
|
||||
router.push("/map");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error skipping to next clue:", err);
|
||||
setError("Failed to skip to next clue");
|
||||
} else {
|
||||
router.push("/map");
|
||||
}
|
||||
};
|
||||
|
||||
// Function for manual refresh - for admins to test without waiting
|
||||
const handleManualRefresh = () => {
|
||||
// Force a refresh by setting lastRefresh to 0
|
||||
setLastRefresh(0);
|
||||
};
|
||||
|
||||
// Rendering states
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="clue-container">
|
||||
@@ -276,7 +299,6 @@ export default function CluePage({ params }) {
|
||||
return (
|
||||
<div className="clue-container">
|
||||
<div className="timer-display">{elapsedTime}</div>
|
||||
|
||||
<div className="clue-content-wrapper">
|
||||
{/* Admin tools section - only visible to admins */}
|
||||
{isAdmin && (
|
||||
@@ -291,29 +313,26 @@ export default function CluePage({ params }) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* QR Scanner Section */}
|
||||
{/* QR Scanner Section - Removed manual entry button */}
|
||||
<div className="scanner-section">
|
||||
<h2>Scan QR Code</h2>
|
||||
<QRScanner onScan={handleScan} width={280} height={280} />
|
||||
{scanMessage && <div className="scan-message">{scanMessage}</div>}
|
||||
<EnhancedQRScanner onScan={handleScan} width={280} height={280} />
|
||||
{scanMessage && (
|
||||
<div className={`scan-message ${clueFound ? "success" : ""}`}>
|
||||
{scanMessage}
|
||||
</div>
|
||||
)}
|
||||
{/* Add the QR Code helper component */}
|
||||
<QRCodeHelper clueId={clueId} />
|
||||
</div>
|
||||
|
||||
{/* Clue Information Section */}
|
||||
<div className="clue-scroll">
|
||||
{foundNow && (
|
||||
<div className="new-discovery">
|
||||
<div className="discovery-icon">🎉</div>
|
||||
<div className="discovery-text">New Clue Discovered!</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h1 className="clue-title">{clue.title}</h1>
|
||||
|
||||
<h1 className="clue-title">{clue?.title}</h1>
|
||||
<div className="clue-content">
|
||||
<h2>Description</h2>
|
||||
<p className="clue-description">{clue.description}</p>
|
||||
|
||||
{clue.location && (
|
||||
<p className="clue-description">{clue?.description}</p>
|
||||
{clue?.location && (
|
||||
<div className="clue-location">
|
||||
<h2>Location Hint</h2>
|
||||
<p>{clue.location}</p>
|
||||
@@ -322,13 +341,19 @@ export default function CluePage({ params }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="action-buttons">
|
||||
<button onClick={handleSkip} className="skip-button">
|
||||
Skip
|
||||
{/* Navigation Buttons */}
|
||||
<div className="navigation-buttons">
|
||||
<button onClick={handlePrevClue} className="nav-button prev-button">
|
||||
Previous Clue
|
||||
</button>
|
||||
<button onClick={() => setShowScanner(true)} className="scan-button">
|
||||
Scan Clue
|
||||
<button
|
||||
onClick={() => router.push("/map")}
|
||||
className="nav-button map-button"
|
||||
>
|
||||
Back to Map
|
||||
</button>
|
||||
<button onClick={handleNextClue} className="nav-button next-button">
|
||||
Next Clue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -414,6 +439,12 @@ export default function CluePage({ params }) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scan-message.success {
|
||||
background-color: #c8e6c9;
|
||||
color: #2e7d32;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.clue-scroll {
|
||||
background-color: #f8f3e3;
|
||||
border-radius: 10px;
|
||||
@@ -445,39 +476,46 @@ export default function CluePage({ params }) {
|
||||
border-top: 1px dashed #9c6b30;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
.navigation-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap; /* Allow buttons to wrap on small screens */
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.skip-button,
|
||||
.scan-button {
|
||||
padding: 12px 0;
|
||||
.nav-button {
|
||||
padding: 12px 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
width: 48%;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.skip-button {
|
||||
.prev-button {
|
||||
background-color: #a98467;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.scan-button {
|
||||
.map-button {
|
||||
background-color: #607d8b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.next-button {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.skip-button:hover,
|
||||
.scan-button:hover {
|
||||
.nav-button:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.loading,
|
||||
@@ -519,39 +557,6 @@ export default function CluePage({ params }) {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.new-discovery {
|
||||
background-color: #feefb3;
|
||||
border: 1px solid #9f6000;
|
||||
color: #9f6000;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.discovery-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.discovery-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
@@ -583,7 +588,6 @@ export default function CluePage({ params }) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Admin tools styling */
|
||||
.admin-tools {
|
||||
background-color: #f8d7da;
|
||||
border: 2px dashed #d9534f;
|
||||
|
||||
Reference in new issue
Block a user