bobbert/peworkshop
1
0 Fork 0
mirror of https://github.com/mudabbir-ahmad/peworkshop.git synced 2026-10-08 03:50:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixing navbar

Browse Source 
Adding Svg files and fixing appearance of navbar to look like the design pages
This commit is contained in:
bobbert committed 2025-03-23 12:54:05 +00:00
1 parent 5a20899808
commit c496b08d52
13 files changed
+673 -866
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/(main)/leaderboard/page.js
+2 -25
View File
@@ -4,6 +4,7 @@ import { useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import Link from "next/link"; import Link from "next/link";
import NavBar from "@/components/NavBar";
export default function LeaderboardPage() { export default function LeaderboardPage() {
const [teams, setTeams] = useState([]); const [teams, setTeams] = useState([]);
@@ -160,31 +161,7 @@ export default function LeaderboardPage() {
{/* Only show navigation bar when the hunt hasn't ended */} {/* Only show navigation bar when the hunt hasn't ended */}
{!huntJustEnded && ( {!huntJustEnded && (
<div className="nav-bar"> <NavBar activeLink="leaderboard" teamData={{ id: session?.user?.teamId }} />
<Link href="/map" className="nav-item">
<div className="nav-icon">🗺️</div>
<div className="nav-label">Map</div>
</Link>
<Link href="/stats" className="nav-item">
<div className="nav-icon">📊</div>
<div className="nav-label">Stats</div>
</Link>
<Link
href={
session?.user?.teamId
? `/${session.user.teamId}`
: "/team-selection"
}
className="nav-item"
>
<div className="nav-icon">👥</div>
<div className="nav-label">Team</div>
</Link>
<Link href="/leaderboard" className="nav-item active">
<div className="nav-icon">🏆</div>
<div className="nav-label">Leaderboard</div>
</Link>
</div>
)} )}
{/* Add a "back to home" button when the hunt has ended */} {/* Add a "back to home" button when the hunt has ended */}
app/(main)/map/page.js
+88 -393
View File
@@ -1,52 +1,68 @@
/* eslint-disable @next/next/no-img-element */
"use client"; "use client";
import { useState, useEffect, useRef, useCallback } from "react"; import { useState, useEffect, useRef } from "react";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
import styles from "./map.module.css"; import styles from "./map.module.css";
import { import NavBar from "@/components/NavBar";
getHuntTimer,
setHuntTimer,
clearHuntTimer,
formatElapsedTime,
syncTimerWithServer,
} from "@/utils/timerService";
export default function MapPage() { export default function MapPage() {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
const [loading, setLoading] = useState(true);
const [mapError, setMapError] = useState(false);
const [error, setError] = useState(null);
const [teamData, setTeamData] = useState(null); const [teamData, setTeamData] = useState(null);
const [elapsedTime, setElapsedTime] = useState("00:00:00"); const [loading, setLoading] = useState(true);
const [clues, setClues] = useState([]); const [error, setError] = useState(null);
const mapContainerRef = useRef(null); const [mapLoaded, setMapLoaded] = useState(false);
const router = useRouter();
const isMounted = useRef(true);
// Add local state for hunt active status
const [huntActive, setHuntActive] = useState(null); const [huntActive, setHuntActive] = useState(null);
// Add previous hunt state to detect when hunt ends const router = useRouter();
const [previousHuntState, setPreviousHuntState] = useState(null); const mapRef = useRef(null);
// Use useCallback for functions called in useEffect to avoid dependency issues useEffect(() => {
const softRedirect = useCallback( // Redirect to login if not authenticated
(url) => { if (status === "unauthenticated") {
if (isMounted.current) { router.push("/login");
router.push(url); return;
}
if (status === "authenticated") {
checkHuntStatus();
fetchTeamData();
}
}, [status, router]);
const checkHuntStatus = async () => {
try {
const timestamp = Date.now();
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 (response.ok) {
const data = await response.json();
setHuntActive(data.active);
// Redirect to waiting page if hunt is not active
if (!data.active) {
router.push("/waiting");
return;
}
} else {
throw new Error("Failed to check hunt status");
} }
}, } catch (err) {
[router] console.error("Failed to check hunt status:", err);
); setError("Failed to check if hunt is active. Please try again.");
setLoading(false);
}
};
// Hard redirect function (for when a full page reload is needed) const fetchTeamData = async () => {
const hardRedirect = useCallback((url) => {
window.location.href = url;
}, []);
// Enhanced fetchTeamData function
const fetchTeamData = useCallback(async () => {
try { try {
const response = await fetch("/api/user/team", { const response = await fetch("/api/user/team", {
method: "GET", method: "GET",
@@ -59,12 +75,12 @@ export default function MapPage() {
}); });
if (response.status === 401) { if (response.status === 401) {
softRedirect("/login"); router.push("/login");
return null; return null;
} }
if (response.status === 404) { if (response.status === 404) {
softRedirect("/team-selection"); router.push("/team-selection");
return null; return null;
} }
@@ -81,233 +97,17 @@ export default function MapPage() {
setError(err.message); setError(err.message);
return null; return null;
} }
}, [softRedirect]); };
// Fetch all clues with their status const handleMapLoad = () => {
const fetchClues = useCallback(async () => { setMapLoaded(true);
try { };
const response = await fetch("/api/clues", {
method: "GET",
headers: {
"Content-Type": "application/json",
"Cache-Control": "no-cache, no-store, must-revalidate",
Pragma: "no-cache",
},
credentials: "include",
});
if (!response.ok) { const handleMapError = () => {
// Extract the error message from the response if possible setError("Failed to load the map. Please try again.");
const errorData = await response.json().catch(() => ({})); };
console.error("API response details:", {
status: response.status,
statusText: response.statusText,
errorData,
});
throw new Error( if (loading) {
errorData.error ||
`Failed to fetch clues: ${response.status} ${response.statusText}`
);
}
const data = await response.json();
// Process the clues to determine which are available
// A clue is available if it's either found already or the next in sequence
const processedClues = data.map((clue) => {
// The API now returns clues with availability already determined
return {
...clue,
available: clue.available || clue.found || clue.skipped,
};
});
setClues(processedClues);
setLoading(false); // Set loading to false after clues are fetched
return processedClues;
} catch (err) {
console.error("Failed to fetch clues:", err);
setError(err.message); // Make sure we set the error state
setLoading(false);
return [];
}
}, []);
// Handle clue button click
const handleClueClick = useCallback(
(clueId, isAvailable, isFound) => {
if (isFound || isAvailable) {
router.push(`/clue/${clueId}`);
} else {
alert("Complete previous clues to unlock this one!");
}
},
[router]
);
// Size and position the overlay to match the map image
const setupOverlay = useCallback(() => {
const overlay = document.getElementById("map-overlay-container");
const mapImg = document.getElementById("treasure-map-img");
if (overlay && mapImg) {
// Wait for the image to load to get its dimensions
mapImg.onload = () => {
const mapRect = mapImg.getBoundingClientRect();
overlay.style.width = `${mapRect.width}px`;
overlay.style.height = `${mapRect.height}px`;
};
// Handle resize events
const resizeOverlay = () => {
const mapRect = mapImg.getBoundingClientRect();
overlay.style.width = `${mapRect.width}px`;
overlay.style.height = `${mapRect.height}px`;
};
// Initial resize and listen for window resize
setTimeout(resizeOverlay, 300);
window.addEventListener("resize", resizeOverlay);
return () => {
window.removeEventListener("resize", resizeOverlay);
};
}
}, []);
// Add this useEffect to coordinate loading the map and clues
useEffect(() => {
if (status === "authenticated") {
fetchClues();
fetchTeamData();
} else if (status === "unauthenticated") {
softRedirect("/login");
}
// Setup cleanup function for component unmount
return () => {
isMounted.current = false;
};
}, [status, fetchClues, fetchTeamData, softRedirect]);
// Setup the overlay when the component is mounted
useEffect(() => {
if (!loading && clues.length > 0) {
return setupOverlay();
}
}, [loading, clues.length, setupOverlay]);
// Function to check hunt status and timer
async function checkHuntAndTimer() {
try {
const response = await fetch("/api/hunt-status", {
method: "GET",
headers: {
"Content-Type": "application/json",
"Cache-Control": "no-cache, no-store, must-revalidate",
Pragma: "no-cache",
},
credentials: "include",
});
if (response.ok) {
const data = await response.json();
setHuntActive(data.active);
// If hunt is active, ensure we have timer data
if (data.active && data.startTime) {
setHuntTimer(data.startTime);
}
}
} catch (err) {
console.error("Failed to check hunt status:", err);
}
}
// Add this function before it's used in initializeTimer
async function fetchTeamHuntStartTime() {
try {
// First try to get any existing timer data
const timerData = getHuntTimer();
if (timerData && timerData.startTime) {
return true;
}
// If no timer data exists, sync with server
const result = await syncTimerWithServer();
return result.success;
} catch (err) {
console.error("Error fetching team hunt start time:", err);
return false;
}
}
// Use team hunt start time for elapsed time calculation
useEffect(() => {
let timerId;
// Initialize timer
async function initializeTimer() {
// First ensure we have timer data
await fetchTeamHuntStartTime();
// Set up timer updates
const updateTimer = () => {
const timerData = getHuntTimer();
if (timerData && timerData.startTime) {
setElapsedTime(formatElapsedTime(timerData.startTime));
}
};
// Initial update
updateTimer();
// Update every second
timerId = setInterval(updateTimer, 1000);
}
initializeTimer();
// Clean up interval on unmount
return () => {
if (timerId) clearInterval(timerId);
};
}, []);
// Check hunt status every 10 seconds to ensure immediate updates
useEffect(() => {
// Initial check
checkHuntAndTimer();
// Set up interval to check hunt status
const huntStatusInterval = setInterval(checkHuntAndTimer, 10000);
return () => {
clearInterval(huntStatusInterval);
};
}, [softRedirect, hardRedirect]);
// Add useEffect to load team data
useEffect(() => {
if (status === "authenticated") {
fetchTeamData();
}
}, [status, fetchTeamData]);
// Add this useEffect to detect when hunt ends
useEffect(() => {
// If previous state was active but current state is not active, the hunt just ended
if (previousHuntState === true && huntActive === false) {
console.log("Hunt has ended! Redirecting to leaderboard...");
router.push("/leaderboard?huntEnded=true");
}
// Update previous state after checking
setPreviousHuntState(huntActive);
}, [huntActive, previousHuntState, router]);
if (status === "loading" || loading) {
return ( return (
<div className={styles["loading-container"]}> <div className={styles["loading-container"]}>
<div className={styles["loading-spinner"]}></div> <div className={styles["loading-spinner"]}></div>
@@ -316,22 +116,6 @@ export default function MapPage() {
); );
} }
// Remove or modify this conditional block since we're now handling hunt ending differently
// Instead of showing an error message, we'll redirect in the useEffect
if (huntActive === false && previousHuntState === null) {
// Only show this if we just landed on the page and hunt is inactive
// (not when the hunt just ended)
return (
<div className={styles["map-error"]}>
<h2>Hunt Not Active</h2>
<p>The treasure hunt has not started yet.</p>
<button onClick={() => softRedirect("/waiting")}>
Go to Waiting Room
</button>
</div>
);
}
if (error) { if (error) {
return ( return (
<div className={styles["map-error"]}> <div className={styles["map-error"]}>
@@ -342,126 +126,37 @@ export default function MapPage() {
); );
} }
if (mapError) {
return (
<div className={styles["map-error"]}>
<h2>Error Loading Map</h2>
<p>We couldn't load the treasure map. Please try again.</p>
<button onClick={fetchClues}>Retry</button>
</div>
);
}
// Function to determine clue button class based on status
const getClueButtonClass = (clue) => {
if (clue.found) return `${styles["clue-button"]} ${styles["clue-found"]}`;
if (clue.skipped)
return `${styles["clue-button"]} ${styles["clue-skipped"]}`;
if (clue.available)
return `${styles["clue-button"]} ${styles["clue-available"]}`;
return `${styles["clue-button"]} ${styles["clue-locked"]}`;
};
// Get the first clue if it exists
const firstClue = clues.length > 0 ? clues[0] : null;
// Render a clue button only if the clue exists
const renderClueButton = (index, position) => {
if (index >= clues.length) return null; // Don't render if clue doesn't exist
const clue = clues[index];
return (
<button
key={clue.id}
className={getClueButtonClass(clue)}
onClick={() => handleClueClick(clue.id, clue.available, clue.found)}
style={{
left: position.left,
top: position.top,
}}
></button>
);
};
return ( return (
<div className={styles["map-page"]}> <div className={styles.mapPage}>
{/* Map Banner with team info and timer */} <div className={styles.mapHeader}>
<div className={styles["map-banner"]}> <div className={styles.teamInfo}>
<div className={styles["team-name"]}> <h1 className={styles.teamName}>
Team Name: {teamData?.team?.name || "Loading..."} {teamData?.team ? teamData.team.name : "Loading..."}
</div> </h1>
<div className={styles["elapsed-time"]}> <div className={styles.teamProgress}>
<span className={styles["time-value"]}>{elapsedTime}</span> {teamData?.progress !== undefined
</div> ? `${teamData.progress}% Complete`
<div className={styles["team-code"]}>{teamData?.team?.code || ""}</div> : "..."}
</div>
{/* Main map content area */}
<div className={styles["map-container"]} ref={mapContainerRef}>
<div className={styles["treasure-map"]}>
{/* Simpler map implementation using an img element */}
<div className={styles["map-image-container"]}>
<img
id="treasure-map-img"
src="/images/map.svg"
alt="Treasure Map"
className={styles["map-image"]}
/>
<div id="map-overlay-container" className={styles["map-overlay"]}>
{/* Render clue buttons conditionally */}
{renderClueButton(0, { left: "230px", top: "212px" })}
{renderClueButton(1, { left: "320px", top: "285px" })}
{renderClueButton(2, { left: "265px", top: "400px" })}
{renderClueButton(3, { left: "343px", top: "520px" })}
{renderClueButton(4, { left: "320px", top: "646px" })}
{renderClueButton(5, { left: "298px", top: "774px" })}
{renderClueButton(6, { left: "240px", top: "880px" })}
{renderClueButton(7, { left: "355px", top: "960px" })}
{renderClueButton(8, { left: "266px", top: "1037px" })}
{renderClueButton(9, { left: "280px", top: "1175px" })}
{renderClueButton(10, { left: "336px", top: "1303px" })}
{renderClueButton(11, { left: "250px", top: "1390px" })}
{renderClueButton(12, { left: "165px", top: "1485px" })}
{renderClueButton(13, { left: "305px", top: "1530px" })}
{renderClueButton(14, { left: "340px", top: "1650px" })}
{renderClueButton(15, { left: "225px", top: "1725px" })}
{renderClueButton(16, { left: "220px", top: "1820px" })}
{renderClueButton(17, { left: "275px", top: "1885px" })}
{renderClueButton(18, { left: "362px", top: "1917px" })}
{renderClueButton(19, { left: "300px", top: "2040px" })}
{/* Additional clue buttons can be added here when needed */}
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Navigation bar */} <div className={styles.mapContainer}>
<nav className={styles["nav-bar"]}> <div className={styles.treasureMap}>
<Link <Image
href="/map" src="/images/map.svg"
className={`${styles["nav-item"]} ${styles["active"]}`} alt="Treasure Map"
> layout="fill"
<div className={styles["nav-icon"]}>🗺️</div> objectFit="contain"
<div className={styles["nav-label"]}>Map</div> onLoad={handleMapLoad}
</Link> onError={handleMapError}
<Link href="/stats" className={styles["nav-item"]}> ref={mapRef}
<div className={styles["nav-icon"]}>📊</div> />
<div className={styles["nav-label"]}>Stats</div> </div>
</Link> </div>
<Link
href={teamData?.team ? `/${teamData.team.id}` : "/team-selection"} {/* Replace hardcoded navbar with NavBar component */}
className={styles["nav-item"]} <NavBar activeLink="map" teamData={teamData?.team} />
>
<div className={styles["nav-icon"]}>👥</div>
<div className={styles["nav-label"]}>Team</div>
</Link>
<Link href="/leaderboard" className={styles["nav-item"]}>
<div className={styles["nav-icon"]}>🏆</div>
<div className={styles["nav-label"]}>Leaderboard</div>
</Link>
</nav>
</div> </div>
); );
} }
app/(main)/stats/page.js
+45 -21
View File
@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import styles from "./stats.module.css"; import styles from "./stats.module.css";
import NavBar from "@/components/NavBar";
export default function StatsPage() { export default function StatsPage() {
const { data: session, status } = useSession(); const { data: session, status } = useSession();
@@ -11,6 +12,7 @@ export default function StatsPage() {
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [teamStats, setTeamStats] = useState(null); const [teamStats, setTeamStats] = useState(null);
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const [huntActive, setHuntActive] = useState(null);
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
@@ -22,9 +24,34 @@ export default function StatsPage() {
if (status === "authenticated") { if (status === "authenticated") {
fetchTeamStats(); fetchTeamStats();
checkHuntStatus();
} }
}, [status, router]); }, [status, router]);
// Check hunt status but don't redirect
const checkHuntStatus = async () => {
try {
const timestamp = Date.now();
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 (response.ok) {
const data = await response.json();
setHuntActive(data.active);
// We're just checking status, no redirect needed for stats page
}
} catch (err) {
console.error("Failed to check hunt status:", err);
}
};
const fetchTeamStats = async () => { const fetchTeamStats = async () => {
try { try {
setLoading(true); setLoading(true);
@@ -181,6 +208,12 @@ export default function StatsPage() {
<h2 className={styles.teamName}>{teamStats.team.name}</h2> <h2 className={styles.teamName}>{teamStats.team.name}</h2>
</div> </div>
{!huntActive && teamStats && (
<div className="hunt-inactive-banner">
<p>The treasure hunt is not currently active. Team progress will be visible here once the hunt begins.</p>
</div>
)}
<div className={styles.statsCard}> <div className={styles.statsCard}>
<div className={styles.summaryStats}> <div className={styles.summaryStats}>
<div className={styles.statItem}> <div className={styles.statItem}>
@@ -229,27 +262,8 @@ export default function StatsPage() {
</div> </div>
</div> </div>
<div className={styles.navBar}> {/* Replace hardcoded navbar with NavBar component */}
<Link href="/map" className={styles.navItem}> <NavBar activeLink="stats" teamData={teamStats.team} />
<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>
<style jsx>{` <style jsx>{`
.clue-icon.found { .clue-icon.found {
@@ -259,6 +273,16 @@ export default function StatsPage() {
.clue-icon.skipped { .clue-icon.skipped {
background-color: #1976d2; background-color: #1976d2;
} }
.hunt-inactive-banner {
background-color: #fff3cd;
color: #856404;
padding: 12px 15px;
margin: 15px 20px 0;
border-radius: 4px;
text-align: center;
font-size: 0.9rem;
}
`}</style> `}</style>
</div> </div>
); );
app/(main)/team/[teamId]/page.js
+77 -21
View File
@@ -135,6 +135,43 @@ export default function TeamPage({ params }) {
} }
}, [effectiveTeamId, status, fetchTeamData, router]); }, [effectiveTeamId, status, fetchTeamData, router]);
const continueTreasureHunt = async (e) => {
e.preventDefault();
setLoading(true);
try {
// Check if hunt is active first
const timestamp = Date.now();
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 (response.ok) {
const data = await response.json();
if (data.active) {
// Hunt is active, redirect to map
router.push("/map");
} else {
// Hunt is not active, redirect to waiting page
router.push("/waiting");
}
} else {
throw new Error("Failed to check hunt status");
}
} catch (err) {
console.error("Error checking hunt status:", err);
setError("Failed to check hunt status. Please try again.");
setLoading(false);
}
};
if (status === "loading" || loading) { if (status === "loading" || loading) {
return ( return (
<div className="loading-container"> <div className="loading-container">
@@ -341,27 +378,46 @@ export default function TeamPage({ params }) {
)} )}
</div> </div>
{/* Replace the outdated navbar with this consistent design */}av-bar"]}> {team && team.hasStarted && (
<div className="nav-bar">v-item"]}> <div className="button-container">
<Link href="/map" className="nav-item">>🗺️</div> <button
<div className="nav-icon">🗺️</div>>Map</div> className="continue-button"
<div className="nav-label">Map</div> onClick={continueTreasureHunt}
</Link>v-item"]}> disabled={loading}
<Link href="/stats" className="nav-item">}>📊</div> >
<div className="nav-icon">📊</div>tats</div> {loading ? "Loading..." : "Continue Hunt"}
<div className="nav-label">Stats</div> </button>
</Link> </div>
<Link )}
href={teamData ? `/${teamData.id}` : "/team-selection"} tem"]} ${styles["active"]}`}
className="nav-item active" <div className="nav-bar">
>}>👥</div> <div className="nav-item">
<div className="nav-icon">👥</div>Team</div> <Link href="/map" className="nav-item">
<div className="nav-label">Team</div> <div className="nav-icon">🗺️</div>
</Link>v-item"]}> <div className="nav-label">Map</div>
<Link href="/leaderboard" className="nav-item">}>🏆</div> </Link>
<div className="nav-icon">🏆</div>oard</div> </div>
<div className="nav-label">Leaderboard</div> <div className="nav-item">
</Link> <Link href="/stats" className="nav-item">
<div className="nav-icon">📊</div>
<div className="nav-label">Stats</div>
</Link>
</div>
<div className="nav-item">
<Link
href={teamData ? `/${teamData.id}` : "/team-selection"}
className="nav-item active"
>
<div className="nav-icon">👥</div>
<div className="nav-label">Team</div>
</Link>
</div>
<div className="nav-item">
<Link href="/leaderboard" className="nav-item">
<div className="nav-icon">🏆</div>
<div className="nav-label">Leaderboard</div>
</Link>
</div>
</div> </div>
<style jsx>{` <style jsx>{`
app/globals.css
+240 -217
View File
@@ -1,393 +1,416 @@
/* Global Styles */ /* Global Styles */
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f4e9dc; background-color: #f4e9dc;
color: #333; color: #333;
min-height: 100vh; min-height: 100vh;
} }
/* Typography */ /* Typography */
h1 { h1 {
color: #333; color: #333;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
} }
h2 { h2 {
color: #444; color: #444;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
font-size: 1.25rem; font-size: 1.25rem;
} }
p { p {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
/* Layout Components */ /* Layout Components */
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 1rem; padding: 1rem;
} }
/* Page Header */ /* Page Header */
.page-header { .page-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background-color: #f4e9dc; background-color: #f4e9dc;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid #e0dbd0; border-bottom: 1px solid #e0dbd0;
} }
.back-button { .back-button {
font-size: 1.2rem; font-size: 1.2rem;
width: 20px; width: 20px;
} }
.page-title { .page-title {
font-weight: bold; font-weight: bold;
font-size: 1.1rem; font-size: 1.1rem;
} }
.placeholder { .placeholder {
width: 20px; width: 20px;
} }
/* Auth Pages Styling */ /* Auth Pages Styling */
.auth-page { .auth-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #f4e9dc; background-color: #f4e9dc;
} }
.auth-container { .auth-container {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: 1rem;
} }
.auth-card { .auth-card {
background-color: #f4e9dc; background-color: #f4e9dc;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
.input-container { .input-container {
width: 100%; width: 100%;
} }
.auth-input { .auth-input {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
} }
.auth-button { .auth-button {
background-color: #63503d; background-color: #63503d;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 0.75rem; padding: 0.75rem;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
display: block; display: block;
} }
.auth-button:hover { .auth-button:hover {
background-color: #53402d; background-color: #53402d;
} }
.error-message { .error-message {
color: #e53935; color: #e53935;
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.5rem 0; padding: 0.5rem 0;
} }
/* Navigation Bar */ /* Navigation Bar */
.nav-bar { .nav-bar {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
background-color: #f8f8f8; background-image: url("/images/Bottom-Bar.svg");
border-top: 1px solid #ddd; background-repeat: no-repeat;
padding: 0.75rem 0; background-size: cover;
position: sticky; background-position: center;
bottom: 0; border-top: 1px solid #ddd;
width: 110%; padding: 0.75rem 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
z-index: 100;
} }
.nav-item { .nav-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: #777; color: #777;
text-decoration: none;
flex: 1;
max-width: 25%;
}
.nav-item.active {
color: #68543c;
font-weight: bold;
} }
.nav-icon { .nav-icon {
font-size: 1.5rem; font-size: 1.5rem;
margin-bottom: 4px;
}
.nav-label {
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-align: center;
} }
/* Team Selection Page */ /* Team Selection Page */
.team-selection-container { .team-selection-container {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1rem; padding: 1rem;
} }
.team-selection-card { .team-selection-card {
background-color: #f4e9dc; background-color: #f4e9dc;
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
} }
.team-input { .team-input {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
/* Clue Page */ /* Clue Page */
.clue-page { .clue-page {
background-color: #f3cf55; background-color: #f3cf55;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
} }
.clue-card { .clue-card {
background-color: #fff8dc; background-color: #fff8dc;
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: 8px;
margin: 1rem; margin: 1rem;
} }
.clue-content { .clue-content {
padding: 1rem 0; padding: 1rem 0;
} }
.clue-buttons { .clue-buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 1rem;
margin-top: 1rem; margin-top: 1rem;
} }
.clue-button { .clue-button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: #63503d; background-color: #63503d;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
flex: 1; flex: 1;
text-align: center; text-align: center;
} }
/* Admin Page */ /* Admin Page */
.admin-page { .admin-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #f4e9dc; background-color: #f4e9dc;
} }
.admin-card { .admin-card {
margin: 1rem; margin: 1rem;
background-color: #f4e9dc; background-color: #f4e9dc;
} }
.admin-controls { .admin-controls {
background-color: #fff; background-color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.admin-input-container { .admin-input-container {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.admin-input { .admin-input {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.admin-button { .admin-button {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background-color: #63503d; background-color: #63503d;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.green-button { .green-button {
background-color: #4caf50; background-color: #4caf50;
} }
.red-button { .red-button {
background-color: #f44336; background-color: #f44336;
} }
/* Map Progress Page */ /* Map Progress Page */
.progress-page { .progress-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #8fbc8f; background-color: #8fbc8f;
} }
.progress-map { .progress-map {
flex: 1; flex: 1;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.map-point { .map-point {
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 50%; border-radius: 50%;
background-color: #fff; background-color: #fff;
} }
.map-point.current { .map-point.current {
background-color: #e53935; background-color: #e53935;
} }
/* Stats Page */ /* Stats Page */
.stats-page { .stats-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #f4e9dc; background-color: #f4e9dc;
} }
.stats-card { .stats-card {
background-color: #ffecb3; background-color: #ffecb3;
border-radius: 8px; border-radius: 8px;
margin: 1rem; margin: 1rem;
padding: 1rem; padding: 1rem;
} }
.stats-row { .stats-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0.5rem 0; padding: 0.5rem 0;
border-bottom: 1px solid #f0e6ce; border-bottom: 1px solid #f0e6ce;
} }
/* Leaderboard Page */ /* Leaderboard Page */
.leaderboard-page { .leaderboard-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
background-color: #f4e9dc; background-color: #f4e9dc;
} }
.leaderboard-card { .leaderboard-card {
background-color: #d0c0a0; background-color: #d0c0a0;
border-radius: 8px; border-radius: 8px;
margin: 1rem; margin: 1rem;
padding: 0.5rem; padding: 0.5rem;
} }
.team-row { .team-row {
background-color: #f3cf55; background-color: #f3cf55;
padding: 0.75rem; padding: 0.75rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
/* QR Scanner */ /* QR Scanner */
.qr-scanner-container { .qr-scanner-container {
padding: 1rem; padding: 1rem;
background-color: #f4e9dc; background-color: #f4e9dc;
} }
.scanner-wrapper { .scanner-wrapper {
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
/* Team Header */ /* Team Header */
.team-header { .team-header {
position: sticky; position: sticky;
top: 0; top: 0;
background-color: #63503d; background-color: #63503d;
color: white; color: white;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
z-index: 100; z-index: 100;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.team-name { .team-name {
font-size: 1rem; font-size: 1rem;
} }
/* Adjust the main layout to account for sticky header */ /* Adjust the main layout to account for sticky header */
.main-layout { .main-layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
} }
.team-button { .team-button {
background-color: #63503d; background-color: #63503d;
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 0.75rem; padding: 0.75rem;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
} }
.create-team-link { .create-team-link {
background-color: #63503d; background-color: #63503d;
color: white; color: white;
border: none; border: none;
display: inline-block; display: inline-block;
padding: 10px 15px; padding: 10px 15px;
border-radius: 4px; border-radius: 4px;
margin-top: 0.50rem; margin-top: 0.5rem;
margin-bottom: 0.50rem; margin-bottom: 0.5rem;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
app/waiting/page.js
+164 -166
View File
@@ -1,207 +1,205 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import styles from "./waiting.module.css"; import { useRouter } from "next/navigation";
import { setHuntTimer, clearHuntTimer } from "@/utils/timerService"; import Link from "next/link";
export default function WaitingPage() { export default function WaitingPage() {
const router = useRouter(); const { data: session, status } = useSession();
const { status } = useSession();
const [huntActive, setHuntActive] = useState(false); const [huntActive, setHuntActive] = useState(false);
const [huntEnded, setHuntEnded] = useState(false);
const [loading, setLoading] = useState(true); 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(() => { useEffect(() => {
let redirectAttempted = false; const checkHuntStatus = async () => {
let lastKnownHuntStatus = false;
let lastHuntData = null;
async function checkHuntStatus() {
if (redirectAttempted) return;
try { 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 timestamp = Date.now();
const globalResponse = await fetch(`/api/hunt-status?_t=${timestamp}`, { const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"Cache-Control": "no-store, no-cache, must-revalidate", "Cache-Control": "no-store, no-cache, must-revalidate",
Pragma: "no-cache", Pragma: "no-cache",
}, },
credentials: "include",
}); });
if (globalResponse.ok) { if (response.ok) {
const data = await globalResponse.json(); const data = await response.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;
}
setHuntActive(data.active); setHuntActive(data.active);
// If hunt becomes active, redirect to map
if (data.active) {
router.push("/map");
}
} }
setLoading(false); setLoading(false);
} catch (err) { } catch (err) {
console.error("Error checking hunt status:", err); console.error("Failed to check hunt status:", err);
setLoading(false); setLoading(false);
} }
} };
// Check immediately and very frequently // Check status immediately
checkHuntStatus(); 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); return () => clearInterval(intervalId);
}, []); }, [router]);
// Redirect to login if not authenticated if (status === "unauthenticated") {
useEffect(() => { router.push("/login");
if (status === "unauthenticated") { return null;
router.push("/login"); }
}
}, [status, router]);
if (loading) { if (loading) {
return ( return (
<div className={styles.container}> <div className="loading-container">
<div className={styles.spinner}></div> <div className="loading-spinner"></div>
<h2>Loading...</h2> <p>Loading...</p>
</div> </div>
); );
} }
return ( return (
<div className={styles.container}> <div className="waiting-page">
{huntEnded ? ( <div className="waiting-card">
<> <div className="waiting-icon">⏳</div>
<h1>Hunt Has Ended</h1> <h1>Hunt Not Started Yet</h1>
<p> <p>The treasure hunt has not been activated by the organizers yet.</p>
The treasure hunt has ended. You can view the results on the <p>This page will automatically update when the hunt begins.</p>
leaderboard.
</p> <div className="waiting-animation">
<div className={styles.endedMessage}> <div className="pulse"></div>
<p>Hunt Complete!</p> </div>
<button onClick={() => router.push("/leaderboard?huntEnded=true")}>
View Results <div className="waiting-buttons">
</button> <Link
</div> href={`/${session?.user?.teamId || ""}`}
</> className="team-button"
) : ( >
<> Back to Team Page
<h1>Waiting for Hunt to Start</h1> </Link>
<p> </div>
The treasure hunt has not started yet. Please wait for the </div>
administrator to start the hunt.
</p> <style jsx>{`
<div className={styles.waitingAnimation}>⏳</div> .waiting-page {
{huntActive && ( display: flex;
<div className={styles.startedMessage}> flex-direction: column;
<p>The hunt has started!</p> align-items: center;
<button onClick={() => router.push("/map")}>Go to Map</button> justify-content: center;
</div> 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> </div>
); );
} }
clue_hunt.db
BIN
View File
Binary file not shown.
components/NavBar.js
+15 -23
View File
@@ -35,7 +35,7 @@ export default function NavBar({ activeLink, teamData }) {
checkHuntStatus(); checkHuntStatus();
}, []); }, []);
// Handle map link click // Handle map link click - only redirect for map page
const handleMapClick = (e) => { const handleMapClick = (e) => {
if (huntActive === false) { if (huntActive === false) {
e.preventDefault(); e.preventDefault();
@@ -44,46 +44,38 @@ export default function NavBar({ activeLink, teamData }) {
}; };
return ( return (
<nav className={styles["nav-bar"]}> <nav className="nav-bar">
<Link <Link
href="/map" href="/map"
className={`${styles["nav-item"]} ${ className={`nav-item ${activeLink === "map" ? "active" : ""}`}
activeLink === "map" ? styles["active"] : ""
}`}
onClick={handleMapClick} onClick={handleMapClick}
> >
<div className={styles["nav-icon"]}>🗺️</div> <div className="nav-icon">🗺️</div>
<div className={styles["nav-label"]}>Map</div> <div className="nav-label">Map</div>
</Link> </Link>
<Link <Link
href="/stats" href="/stats"
className={`${styles["nav-item"]} ${ className={`nav-item ${activeLink === "stats" ? "active" : ""}`}
activeLink === "stats" ? styles["active"] : ""
}`}
> >
<div className={styles["nav-icon"]}>📊</div> <div className="nav-icon">📊</div>
<div className={styles["nav-label"]}>Stats</div> <div className="nav-label">Stats</div>
</Link> </Link>
<Link <Link
href={teamData?.team ? `/${teamData.team.id}` : "/team-selection"} href={teamData?.id ? `/${teamData.id}` : "/team-selection"}
className={`${styles["nav-item"]} ${ className={`nav-item ${activeLink === "team" ? "active" : ""}`}
activeLink === "team" ? styles["active"] : ""
}`}
> >
<div className={styles["nav-icon"]}>👥</div> <div className="nav-icon">👥</div>
<div className={styles["nav-label"]}>Team</div> <div className="nav-label">Team</div>
</Link> </Link>
<Link <Link
href="/leaderboard" href="/leaderboard"
className={`${styles["nav-item"]} ${ className={`nav-item ${activeLink === "leaderboard" ? "active" : ""}`}
activeLink === "leaderboard" ? styles["active"] : ""
}`}
> >
<div className={styles["nav-icon"]}>🏆</div> <div className="nav-icon">🏆</div>
<div className={styles["nav-label"]}>Leaderboard</div> <div className="nav-label">Leaderboard</div>
</Link> </Link>
</nav> </nav>
); );
public/images/Bottom-Bar.svg
+6
View File
@@ -0,0 +1,6 @@
<svg width="402" height="89" viewBox="0 0 402 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H402V89H0V0Z" fill="#A1887F"/>
<line x1="97.5" y1="2" x2="97.5" y2="87" stroke="#917A72" stroke-width="3"/>
<line x1="200.5" y1="2" x2="200.5" y2="87" stroke="#917A72" stroke-width="3"/>
<line x1="302.5" y1="2" x2="302.5" y2="87" stroke="#917A72" stroke-width="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 384 B

public/images/home.svg
+9
View File
@@ -0,0 +1,9 @@
<svg width="43" height="42" viewBox="0 0 43 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="42.9618" height="42" fill="url(#pattern0_217_89)"/>
<defs>
<pattern id="pattern0_217_89" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_217_89" transform="matrix(0.01 0 0 0.010229 0 -0.0114504)"/>
</pattern>
<image id="image0_217_89" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

public/images/leaderboard.svg
+9
View File
@@ -0,0 +1,9 @@
<svg width="59" height="56" viewBox="0 0 59 56" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="0.923584" width="57.2824" height="56" fill="url(#pattern0_217_91)"/>
<defs>
<pattern id="pattern0_217_91" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_217_91" transform="matrix(0.01 0 0 0.010229 0 -0.0114504)"/>
</pattern>
<image id="image0_217_91" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABRBJREFUeAHtnFvIPVMYhx/kVI5/pwjlnKJIiQsixyhnIvkjolCKcqFcONyIC4WEC6VILiQhIYdyQyE55MYNkiiEnE/f72uP3j1m9jeHPfPNWn5T057D/uZ73+eZNbNmrTUbPJmACZiACZiACZiACZiACZiACZiACZiACZiACZiACZiACWRAYE/gAuCqic+KUbFmPV0N/Ar8ncj8C6CYs5z2B35LREQ8YRTzfjkauSxBGYWYS3MUclrCQk7NUcgWwLsJSnkH2DxHIcppA3Af8EkCYhSjYlXM2U9nJSBEMf5vJguZmGoLsZDWD6O+ZE3svmIhHYT8DDwMXAs8APzR4RjFw1/500Jawny2ovHv7pbHKEuI6xbSEKZKwTU198QzGh4jgq9btpCGMF8IMvQEvV1YVxNHHeC22y2kIcxPgUOBE2dNMUfnLGRT4ADgiIHnGxvCb3JWZyvkBODzJYJqAnMZ38lSyG7AtwnKkNAshVyUqIxshZxrIf+pna1rLWv7RO8f2ZYQ1RwPWalKvgH8nlhpyfIeEqrynGMhq5evH4BvBp4/Ax4H9ogCysu6di6jOjrWMY4PCZydWOwFo4+ArUIec4upCXkI2ATYDHgiUSESc/qchbCSmhAl8wXwZcIylMMlwcHcYopCiqKf6udPwN5zFsKKhYx7D1XlQQ/mtZOFjCfkZmCHWhOzHcsQ8tLM+oHAXsCRwC0rHUtfJX6dX/YlUazXnPoIUW/e5Qv+w67A25by72PF4ELuKsnQeN4tS9v2TfS1hGWXDh1vcCGHBfgXArphqdTcFLZr8RWXktVSMriQ4uFG7WLfB+hfl4Q8GfYNcealcszBhfwIvAh8VwL+eknI+6X9UweofDT+SyV940pn3vWzNijl2yf2wYVUBaeeyIOCkGN6JlH1P4ba9hdwB7BtiD8uqqf1uR75jC5EL02eHDJQYh/3SGAo8HXHvT/EXreoSsuHHXMaVYheljwzZKHAX+4YeB2wobfHlmQNO1KrrC5Tj5XeqrqhY16jCVEn1/lBhqq/z3QMemjoi46vN6i2AdTFrfam+N2TQn5XlPbF7y1aHkWIqrkXh2A1uvDpjgEvSmY99+m+GDuVHu2Y3yhC4ov2kvFUx2DXE3jV//4AuG5Wy9o9nHAqPX92zHFwIfeGQLWoS5WezOOsYaDqtqxKesrbTinlptXbe7Y6DC6kKuiKPFYHVEwZflVst1UlMhtyqw6yqr9Za9vgQp4H9BMaOy6Yde1VdXKtYKe4X01Bgq+Whp2DoPM65jO4kClC7BOTbt6v1vxgzj1BiAYodBk+ZSEtz+SjZtD1DKLX56Lccsu2Sk/c32TZQlpC2yeUAg3IUzPJe8CDgEZ7FtPhLY9byLKQluCaNJ2oJqnLWgG5zaeFdAD3CBBLSlEq9Hkw8FqHYxbSLKQjPLU+qFtBb/neCuh5601ArcEF3C6fFtITYBfoi/7GQiykX5FedHblsM8lJMUSok6lHM6+FHKIHXix9ja3fJyFjHZCHjtHvmZFo7BTOLtyiLHxL2enNkwnRTlqgmk8aXxuikmmFHPtCzpVlvR6mId7DndSavSNflem1bQT8JZLytKvFGpy6fxbwFsDavcv9wWkdGmYSqxieOeit23bFBe913Hl7Jee1X3puTkDNURq3NYubYD7uyZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAiZgAvME/gESCtM3G1YA3wAAAABJRU5ErkJggg=="/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

public/images/profile.svg
+9
View File
@@ -0,0 +1,9 @@
<svg width="59" height="57" viewBox="0 0 59 57" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="58.3053" height="57" fill="url(#pattern0_217_92)"/>
<defs>
<pattern id="pattern0_217_92" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_217_92" transform="matrix(0.01 0 0 0.010229 0 -0.0114504)"/>
</pattern>
<image id="image0_217_92" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABA1JREFUeAHtnE3I1EYchx+tH8UqfoCCh1o/oIoV7UGxKLSgvXjpyQoKoggqCFoUvOhJL9KrICJ6kKIiSmnVQ0Gpii0UReypolhRVPw4aKUHvwrV/WmGF8Our9nNZmd3fn8I2ewm2ZnnySSZyWTAYQImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYAImYALlEBgEjM4mfXZUSGAAMB/YDvwK3ANe5qa72W/bgHmAtnGUTGA4sAm4noOfl1FvWdtsBD4qOU1J7k5H9wrgQRMi8nLu14Qud4lp/jgaCRwtQURezHFgTPPJSnPLicDVNsgIcnQam5Im2uK5/gS400YZQcptYELx5KW1hU5TVyqQEaRcBkakhbhYbo9UKCNIOVQsiemsvbgDMoKUb9LB/H45HQLc7KAQXeQHv19S01hrVQdlhFKi+o4jI3AhAiF/2MYbAp9GICOUksmWAusiErLWQuBAREJ+sBC4GJGQ8xZS/5lGOKdXPVeTTfLxb0QlRGlJPh5HJORR8jaAWxEJUWtB8nEuIiFnkrcB7I5IyC4LgaURCVliITAWeBGBlOd+1t53OB6LQMhPfcnxp4URCPnSGt4m0Mm7LfWCdOQIzAT+60BJ0fXrs1xavJgR2NIBIZtNvzGBgcCPFUpRLxd3xm7s4/UvH9Z6uJ+qQMpJYGg/afHPGQGBOtxGKeqLpZ4ujgIEdCr5DnhaopgnwPoCafCqdQioU7Qqjv+3IEbbquLnTgx1ADf71efAPqDI85N/gL01GbOa/VNv1z8BXV++qtVZtgIHgd+AP7NJn/WdflPN29eJ/nl6DRMwARMwARMwARMwgagIjMpudzdk9RFVFs9mt7s3au+za9Ltr777Oat/qFau21+9u+hokYDGLdGTxJ3A3y3U0kN31GvZvhYAHhOlgJw5wP5am9PDEiQEGfm59q3/mF0gXUmtqucgXwMn2ighLyUs/w58C3yQFPF3ZFanpb86ICIICXOlQWlJNsbXWl/1gkwrrbgBZplzldLkRnhYUxtuKabXEPJClbbVKRQVPZ5Vc3geQKzLKsHDelXMx4BeGYsVfqN0XQIm9ZqUaYCG3muU6di/1wBqM3pFSrfLCAdLT0jpFRk9IWVcRQORBVhVzTXwmfLWVaFarzqiVQWp6v853W3tYd/3sIwgf0e3FJFFEda+A8Qy52phUF6jDnW7aedoomUCLWNfGvhMld1oY1kCp6q8yJXR2gB+SVCInlBGGXqmEXODYf7ILmv5WayvNahTdFmZ7Lb9TI+xiMxNWMgXMQqZmrAQjRsZZexJUIryHHXo9WaNUq2OA708KY/Kq8METMAETMAEoiDwCl6HggQTMLsEAAAAAElFTkSuQmCC"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

public/images/qr.svg
+9
View File
@@ -0,0 +1,9 @@
<svg width="47" height="45" viewBox="0 0 47 45" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="46.0305" height="45" fill="url(#pattern0_217_90)"/>
<defs>
<pattern id="pattern0_217_90" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_217_90" transform="matrix(0.01 0 0 0.010229 0 -0.0114504)"/>
</pattern>
<image id="image0_217_90" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB