just need to fix the map to clue function.

This commit is contained in:
bobbert committed 2025-03-16 20:52:51 +00:00
1 parent 727555e70f
commit ea836179d6
6 files changed
+108 -27

No files matched your search

+55 -15
View File
@@ -4,13 +4,12 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";
// Removed the styles object for navbar
export default function CreateTeam() {
const { data: session, status } = useSession();
const { data: session, status, update: updateSession } = useSession();
const [teamName, setTeamName] = useState("");
const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [success, setSuccess] = useState(false);
const router = useRouter();
useEffect(() => {
@@ -31,6 +30,11 @@ export default function CreateTeam() {
setError("");
try {
// Validate team name
if (!teamName || teamName.trim() === "") {
throw new Error("Team name is required");
}
// Check session status before proceeding
if (status !== "authenticated") {
throw new Error("You must be logged in to create a team");
@@ -42,7 +46,7 @@ export default function CreateTeam() {
"Content-Type": "application/json",
},
credentials: "include", // Important: include credentials with the request
body: JSON.stringify({ name: teamName }),
body: JSON.stringify({ name: teamName.trim() }),
});
const data = await response.json();
@@ -52,23 +56,33 @@ export default function CreateTeam() {
}
console.log("Team created successfully with ID:", data.teamId);
setSuccess(true);
// Force a session refresh to update the session with the new teamId
await fetch("/api/auth/session", {
method: "GET",
credentials: "include",
});
// Try to update the session with the new team ID
try {
// Wait briefly to ensure DB changes are reflected
await new Promise((resolve) => setTimeout(resolve, 500));
await updateSession(); // Update the NextAuth session if possible
} catch (sessionErr) {
console.warn(
"Session update failed, using redirect instead:",
sessionErr
);
}
// Use window.location for a hard navigation to ensure session is fully updated
setTimeout(() => {
window.location.href = `/${data.teamId}`;
}, 1000);
} catch (err) {
console.error("Team creation error:", err);
setError(err.message);
} finally {
setIsLoading(false);
}
};
if (isLoading) {
if (isLoading && !success) {
return <div className="loading">Loading...</div>;
}
@@ -82,6 +96,14 @@ export default function CreateTeam() {
<div className="auth-container">
<div className="auth-card">
{success ? (
<div className="success-message">
<div className="success-icon">✅</div>
<h2>Team Created Successfully!</h2>
<p>Redirecting to your new team page...</p>
</div>
) : (
<>
<h1>Create a New Team</h1>
<form onSubmit={handleCreateTeam}>
<div className="form-group">
@@ -92,23 +114,30 @@ export default function CreateTeam() {
onChange={(e) => setTeamName(e.target.value)}
required
className="auth-input"
maxLength={50}
/>
</div>
<button type="submit" className="auth-button" disabled={isLoading}>
<button
type="submit"
className="auth-button"
disabled={isLoading}
>
{isLoading ? "Creating..." : "Create Team"}
</button>
</form>
{error && <p className="error-message">{error}</p>}
</>
)}
<div className="team-options">
<Link href="/team-selection">
<button className="auth-button">Back to Team Selection</button>
<button className="auth-button secondary-button">
Back to Team Selection
</button>
</Link>
</div>
</div>
</div>
{/* Navbar removed from here */}
<style jsx>{`
.auth-page {
display: flex;
@@ -159,7 +188,18 @@ export default function CreateTeam() {
color: red;
margin-top: 10px;
}
/* Navbar styles removed from here */
.success-message {
text-align: center;
padding: 20px 0;
}
.success-icon {
font-size: 48px;
margin-bottom: 10px;
color: #4caf50;
}
.secondary-button {
background-color: #a98467;
}
`}</style>
</div>
);
+12 -5
View File
@@ -162,17 +162,24 @@ export default function LeaderboardPage() {
<div className="nav-icon">🗺️</div>
<div className="nav-label">Map</div>
</Link>
<Link href="/leaderboard" className="nav-item active">
<Link href="/stats" className="nav-item">
<div className="nav-icon">📊</div>
<div className="nav-label">Stats</div>
</Link>
<Link href="/team-selection" className="nav-item">
<Link
href={
teams.length > 0 && 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="/profile" className="nav-item">
<div className="nav-icon">👤</div>
<div className="nav-label">Profile</div>
<Link href="/leaderboard" className="nav-item active">
<div className="nav-icon">🏆</div>
<div className="nav-label">Leaderboard</div>
</Link>
</div>
+13 -5
View File
@@ -43,7 +43,7 @@ export default function MapPage() {
window.location.href = url;
}, []);
// Fetch team data for the current user
// Enhanced fetchTeamData function
const fetchTeamData = useCallback(async () => {
try {
const response = await fetch("/api/user/team", {
@@ -71,6 +71,7 @@ export default function MapPage() {
}
const data = await response.json();
console.log("Team data loaded:", data);
setTeamData(data);
return data;
} catch (err) {
@@ -573,6 +574,13 @@ export default function MapPage() {
});
}, [mapSvg, clues, enhanceSvgMap]);
// Add useEffect to load team data
useEffect(() => {
if (status === "authenticated") {
fetchTeamData();
}
}, [status, fetchTeamData]);
if (status === "loading" || loading) {
return (
<div className={styles["loading-container"]}>
@@ -620,7 +628,7 @@ export default function MapPage() {
{/* Map Banner with team info and timer */}
<div className={styles["map-banner"]}>
<div className={styles["team-name"]}>
{teamData?.team?.name || "Your Team"}
{teamData?.team?.name || "Loading..."}
</div>
<div className={styles["elapsed-time"]}>
<span className={styles["time-value"]}>{elapsedTime}</span>
@@ -667,9 +675,9 @@ export default function MapPage() {
<div className={styles["nav-icon"]}>👥</div>
<div className={styles["nav-label"]}>Team</div>
</Link>
<Link href="/team-selection" className={styles["nav-item"]}>
<div className={styles["nav-icon"]}>🔙</div>
<div className={styles["nav-label"]}>Back</div>
<Link href="/leaderboard" className={styles["nav-item"]}>
<div className={styles["nav-icon"]}>🏆</div>
<div className={styles["nav-label"]}>Leaderboard</div>
</Link>
</nav>
</div>
+6 -1
View File
@@ -81,13 +81,18 @@ export async function GET(request) {
const teamRankings = await query(`
SELECT
t.id,
COUNT(DISTINCT tc.clue_id) as cluesFound
COUNT(DISTINCT tc.clue_id) as cluesFound,
COUNT(DISTINCT u.id) as memberCount
FROM
teams t
LEFT JOIN
team_clues tc ON t.id = tc.team_id
LEFT JOIN
users u ON t.id = u.team_id
GROUP BY
t.id
HAVING
memberCount > 0
ORDER BY
cluesFound DESC
`);
+22 -1
View File
@@ -46,6 +46,17 @@ export async function POST(request) {
)
`);
// Check if team name already exists
const existingTeam = await queryOne("SELECT id FROM teams WHERE name = ?", [
name,
]);
if (existingTeam) {
return Response.json(
{ error: "Team name already exists" },
{ status: 409 }
);
}
// Insert team without created_by field
const result = await run("INSERT INTO teams (name, code) VALUES (?, ?)", [
name,
@@ -53,11 +64,21 @@ export async function POST(request) {
]);
const teamId = result.lastID;
if (!teamId) {
throw new Error("Failed to create team - no ID returned");
}
// Update the user's team_id
await run("UPDATE users SET team_id = ? WHERE id = ?", [teamId, userId]);
return Response.json({ success: true, teamId, code });
// Return a more complete response with all needed data
return Response.json({
success: true,
teamId,
teamName: name,
code,
message: "Team created successfully",
});
} catch (error) {
console.error("Create team error:", error);
return Response.json(
BIN
View File
Binary file not shown.