mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
edit of teamID page
using a long-wave format to fix issue with repeating patterns not lining up.
This commit is contained in:
bobbert committed
1 parent
6ecbe78718
commit
4d67951956
10 files changed
+286
-219
No files matched your search
+131
-112
@@ -3,11 +3,9 @@ import { useState, useEffect, useCallback } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { use } from "react"; // Add this import for React.use()
|
||||
import { use } from "react";
|
||||
import NavBar from "@/components/NavBar";
|
||||
import { getHuntTimer } from "@/utils/timerService";
|
||||
// Remove the CSS module import
|
||||
// import styles from "./teamId.module.css";
|
||||
|
||||
export default function TeamPage({ params }) {
|
||||
const { status, data: session } = useSession();
|
||||
@@ -19,11 +17,9 @@ export default function TeamPage({ params }) {
|
||||
const [huntInProgress, setHuntInProgress] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
// Unwrap the params Promise using React.use()
|
||||
const unwrappedParams = use(params);
|
||||
const teamId = unwrappedParams.teamId;
|
||||
|
||||
// Add a function to check if the hunt has been activated by admin
|
||||
const checkHuntStatus = useCallback(async () => {
|
||||
try {
|
||||
const response = await fetch("/api/hunt-status", {
|
||||
@@ -47,7 +43,6 @@ export default function TeamPage({ params }) {
|
||||
throw new Error("Invalid team ID");
|
||||
}
|
||||
|
||||
// First check if the user is still part of this team by fetching current user data
|
||||
const userResponse = await fetch("/api/user", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
@@ -59,7 +54,6 @@ export default function TeamPage({ params }) {
|
||||
|
||||
const userData = await userResponse.json();
|
||||
|
||||
// If the user is not in this team anymore, redirect to team selection
|
||||
if (!userData.teamId || userData.teamId != teamId) {
|
||||
console.log("User no longer in team, redirecting to team selection");
|
||||
window.location.href = "/team-selection";
|
||||
@@ -68,7 +62,6 @@ export default function TeamPage({ params }) {
|
||||
|
||||
console.log("Fetching team data for team ID:", teamId);
|
||||
|
||||
// Add timestamp to URL to ensure fresh data on every request
|
||||
const timestamp = new Date().getTime();
|
||||
const response = await fetch(`/api/teams/${teamId}?_t=${timestamp}`, {
|
||||
method: "GET",
|
||||
@@ -106,12 +99,10 @@ export default function TeamPage({ params }) {
|
||||
setTeamMembers(data.members || []);
|
||||
setError("");
|
||||
|
||||
// Check hunt status whenever we fetch team data
|
||||
await checkHuntStatus();
|
||||
} catch (err) {
|
||||
console.error("Team page error:", err);
|
||||
setError(err.message);
|
||||
// If we get a 401 error, redirect to login
|
||||
if (err.message.includes("401")) {
|
||||
router.push("/login");
|
||||
}
|
||||
@@ -121,15 +112,12 @@ export default function TeamPage({ params }) {
|
||||
}, [teamId, router, checkHuntStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
// Only attempt to fetch data when session is ready and we have a teamId
|
||||
if (status === "authenticated" && teamId) {
|
||||
console.log("Session authenticated, fetching team data");
|
||||
fetchTeamData();
|
||||
|
||||
// Use a shorter interval (3 seconds) for more responsive updates
|
||||
const refreshInterval = setInterval(fetchTeamData, 3000);
|
||||
|
||||
// Clean up the interval when component unmounts
|
||||
return () => clearInterval(refreshInterval);
|
||||
} else if (status === "unauthenticated") {
|
||||
console.log("User not authenticated, redirecting to login");
|
||||
@@ -137,9 +125,7 @@ export default function TeamPage({ params }) {
|
||||
}
|
||||
}, [teamId, status, fetchTeamData, router]);
|
||||
|
||||
// Check if hunt is already in progress on component mount
|
||||
useEffect(() => {
|
||||
// Get timer data and check if a hunt has already been started
|
||||
const timerData = getHuntTimer();
|
||||
setHuntInProgress(timerData && timerData.startTime);
|
||||
}, []);
|
||||
@@ -190,26 +176,36 @@ export default function TeamPage({ params }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="members-container">
|
||||
<h2 className="members-title">Team Members</h2>
|
||||
<div className="content-wrapper">
|
||||
<div className="waves-container">
|
||||
<img src="/images/Waves.svg" alt="Waves" className="waves-image" />
|
||||
</div>
|
||||
|
||||
{teamMembers.length > 0 ? (
|
||||
<div className="members-list">
|
||||
{teamMembers.map((member) => (
|
||||
<div key={member.id} className="member-card">
|
||||
<div className="member-avatar">👤</div>
|
||||
<div className="member-details">
|
||||
<div className="member-name">
|
||||
{member.username}
|
||||
{member.id === session?.user?.id && " (You)"}
|
||||
</div>
|
||||
<div className="scroll-background">
|
||||
<div className="members-container">
|
||||
<h2 className="members-title">Team Members</h2>
|
||||
|
||||
<div className="members-content">
|
||||
{teamMembers.length > 0 ? (
|
||||
<div className="members-list">
|
||||
{teamMembers.map((member) => (
|
||||
<div key={member.id} className="member-card">
|
||||
<div className="member-avatar">👤</div>
|
||||
<div className="member-details">
|
||||
<div className="member-name">
|
||||
{member.username}
|
||||
{member.id === session?.user?.id && " (You)"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
) : (
|
||||
<div className="empty-state">No team members found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="empty-state">No team members found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="team-actions">
|
||||
@@ -226,14 +222,9 @@ export default function TeamPage({ params }) {
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Immediately remove team data from all storage
|
||||
localStorage.removeItem("teamData");
|
||||
sessionStorage.removeItem("teamData");
|
||||
|
||||
// Set a flag so we know the user has left this team
|
||||
localStorage.setItem("userLeftTeam", "true");
|
||||
|
||||
// Force redirect to team selection
|
||||
window.location.href = "/team-selection";
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
@@ -249,7 +240,6 @@ export default function TeamPage({ params }) {
|
||||
Leave Team
|
||||
</button>
|
||||
|
||||
{/* New Start Hunt button with conditional behavior */}
|
||||
<button
|
||||
className="action-button start-button"
|
||||
onClick={handleStartHunt}
|
||||
@@ -258,7 +248,6 @@ export default function TeamPage({ params }) {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Replace the outdated navbar with the correct one */}
|
||||
<NavBar activeLink="team" teamData={team} />
|
||||
|
||||
<style jsx>{`
|
||||
@@ -266,12 +255,43 @@ export default function TeamPage({ params }) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
background-color: #69b5a8;
|
||||
font-family: Arial, sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden; /* Prevent horizontal scroll */
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
padding-bottom: 70px; /* Add padding to accommodate fixed navbar */
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(100vh - 140px); /* Account for header and footer */
|
||||
}
|
||||
|
||||
.waves-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.waves-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
.team-banner {
|
||||
@@ -284,12 +304,13 @@ export default function TeamPage({ params }) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between; /* This spreads items to opposite ends */
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -297,62 +318,112 @@ export default function TeamPage({ params }) {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: white; /* Explicitly setting color to white */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.team-code {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: white; /* Ensuring team code is also white */
|
||||
margin-left: auto; /* Pushes the code to the right */
|
||||
color: white;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.scroll-background {
|
||||
background-image: url("/images/scroll.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
margin: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 60px 20px 80px 20px;
|
||||
height: calc(100% - 40px);
|
||||
max-height: 100%;
|
||||
width: 80vw;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.members-container {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.members-title {
|
||||
font-size: 18px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-top: -46px;
|
||||
}
|
||||
|
||||
.members-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.member-card {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 2px solid #68543c; /* Add 2px thick border with the same brown color as banner */
|
||||
border: 1px solid #68543c;
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
margin: 0 auto 8px auto;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
font-size: 24px;
|
||||
margin-right: 15px;
|
||||
font-size: 20px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
padding: 20px;
|
||||
color: #888;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 8px;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.team-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 3;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
@@ -362,6 +433,7 @@ export default function TeamPage({ params }) {
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.leave-button {
|
||||
@@ -374,60 +446,6 @@ export default function TeamPage({ params }) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: fixed; /* Fix the navbar at the bottom */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%; /* Use 100% instead of 100vw to prevent overflow issues */
|
||||
box-sizing: border-box; /* Include padding in width calculation */
|
||||
z-index: 100; /* Ensure navbar is above other content */
|
||||
margin: 0; /* Remove any margin that might be causing the gap */
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
max-width: 25%; /* Ensure each item takes up equal space */
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #68543c;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 22px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for smaller screens */
|
||||
@media (max-width: 375px) {
|
||||
.nav-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.nav-label {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-container,
|
||||
.error-container {
|
||||
display: flex;
|
||||
@@ -461,6 +479,7 @@ export default function TeamPage({ params }) {
|
||||
.error-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 20px;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
|
||||
Reference in new issue
Block a user