(null);
-
+ // Fetch active jam details
useEffect(() => {
- const fetchActiveJam = async () => {
+ const fetchData = async () => {
const jamData = await getCurrentJam();
- setActiveJam(jamData);
+ setActiveJamResponse(jamData);
+
+ // If we're in Jamming phase, fetch top themes and pick the first one
+ if (jamData?.phase === "Jamming" && jamData.jam) {
+ try {
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/top-themes"
+ : "http://localhost:3005/api/v1/themes/top-themes"
+ );
+
+ if (response.ok) {
+ const themes = await response.json();
+ if (themes.length > 0) {
+ setTopTheme(themes[0].suggestion);
+ }
+ } else {
+ console.error("Failed to fetch top themes.", response.status);
+ }
+ } catch (error) {
+ console.error("Error fetching top themes:", error);
+ }
+ }
};
- fetchActiveJam();
+ fetchData();
}, []);
+ // Helper function to get ordinal suffix
+ const getOrdinalSuffix = (day: number): string => {
+ if (day > 3 && day < 21) return "th";
+ switch (day % 10) {
+ case 1: return "st";
+ case 2: return "nd";
+ case 3: return "rd";
+ default: return "th";
+ }
+ };
+
return (
{/* Jam Header */}
@@ -27,7 +61,7 @@ export default function JamHeader() {
{activeJamResponse?.jam && activeJamResponse.phase ? (
- {activeJamResponse?.jam.name} - {activeJamResponse.phase} Phase
+ {activeJamResponse.jam.name} - {activeJamResponse.phase} Phase
) : (
(No Active Jams)
@@ -35,22 +69,82 @@ export default function JamHeader() {
+ {activeJamResponse?.jam ? (
+ <>
+ {new Date(activeJamResponse.jam.startTime).toLocaleDateString('en-US', {
+ month: 'long',
+ })} {new Date(activeJamResponse.jam.startTime).getDate()}
+ {getOrdinalSuffix(new Date(activeJamResponse.jam.startTime).getDate())}
+ {" - "}
+ {new Date(new Date(activeJamResponse.jam.startTime).getTime() +
+ (activeJamResponse.jam.jammingHours * 60 * 60 * 1000)).toLocaleDateString('en-US', {
+ month: 'long',
+ })} {new Date(new Date(activeJamResponse.jam.startTime).getTime() +
+ (activeJamResponse.jam.jammingHours * 60 * 60 * 1000)).getDate()}
+ {getOrdinalSuffix(new Date(new Date(activeJamResponse.jam.startTime).getTime() +
+ (activeJamResponse.jam.jammingHours * 60 * 60 * 1000)).getDate())}
+
+ ) : (
+ "Dates TBA"
+ )}
+
-
- {/* Conditional Link for Suggestion Phase */}
+
+
+ {/* Phase-Specific Display */}
{activeJamResponse?.phase === "Suggestion" && (
-
+
+ )}
+
+ {activeJamResponse?.phase === "Survival" && (
+
+ )}
+
+ {activeJamResponse?.phase === "Voting" && (
+
+ )}
+
+ {activeJamResponse?.phase === "Jamming" && (
+
+ {topTheme ? (
+
THEME: {topTheme}
+ ) : (
+
No top-scoring theme available.
+ )}
+
+ )}
+
+ {activeJamResponse?.phase === "Rating" && (
+
+ {topTheme ? (
+
THEME: {topTheme} RESULTS
+ ) : (
+
No top-scoring theme available.
+ )}
)}
-
- Submit Your Theme Suggestion
-
-
-
(null);
+ const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+
+ // Fetch token on the client side
+ useEffect(() => {
+ const fetchedToken = getCookie("token");
+ setToken(fetchedToken);
+ }, []);
+
+ // Fetch the current jam phase using helpers/jam
+ useEffect(() => {
+ const fetchCurrentJamPhase = async () => {
+ try {
+ const activeJam = await getCurrentJam();
+ setActiveJam(activeJam); // Set active jam details
+ } catch (error) {
+ console.error("Error fetching current jam:", error);
+ } finally {
+ setPhaseLoading(false); // Stop loading when phase is fetched
+ }
+ };
+
+ fetchCurrentJamPhase();
+ }, []);
+
+
+ // Fetch a random theme
+ const fetchRandomTheme = async () => {
+ if (!token) return; // Wait until token is available
+ if( !activeJamResponse) return;
+ if(activeJamResponse && activeJamResponse.jam && activeJamResponse.phase != "Survival")
+ {
+ return (
+
+
It's not Theme Survival phase.
+
+ );
+ }
+
+ try {
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/random"
+ : "http://localhost:3005/api/v1/themes/random",
+ {
+ headers: { Authorization: `Bearer ${token}` },
+ credentials: "include",
+ }
+ );
+ if (response.ok) {
+ const data = await response.json();
+ setRandomTheme(data);
+ } else {
+ console.error("Failed to fetch random theme.");
+ }
+ } catch (error) {
+ console.error("Error fetching random theme:", error);
+ }
+ };
+
+ // Fetch voted themes
+ const fetchVotedThemes = async () => {
+ if (!token) return; // Wait until token is available
+
+ try {
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/voteSlaughter"
+ : "http://localhost:3005/api/v1/themes/voteSlaughter",
+ {
+ headers: { Authorization: `Bearer ${token}` },
+ credentials: "include",
+ }
+ );
+ if (response.ok) {
+ const data = await response.json();
+ setVotedThemes(data);
+ } else {
+ console.error("Failed to fetch voted themes.");
+ }
+ } catch (error) {
+ console.error("Error fetching voted themes:", error);
+ }
+ };
+
+ // Handle voting
+ const handleVote = async (voteType) => {
+ if (!randomTheme) return;
+
+ setLoading(true);
+ try {
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/voteSlaughter"
+ : "http://localhost:3005/api/v1/themes/voteSlaughter",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ credentials: "include",
+ body: JSON.stringify({
+ suggestionId: randomTheme.id,
+ voteType,
+ }),
+ }
+ );
+
+ if (response.ok) {
+ // Refresh data after voting
+ fetchRandomTheme();
+ fetchVotedThemes();
+ } else {
+ console.error("Failed to submit vote.");
+ }
+ } catch (error) {
+ console.error("Error submitting vote:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Handle resetting a vote from the grid
+ const handleResetVote = async (themeId) => {
+ try {
+ setRandomTheme(votedThemes.find((theme) => theme.id === themeId));
+ setVotedThemes((prev) =>
+ prev.map((theme) =>
+ theme.id === themeId ? { ...theme, slaughterScore: 0 } : theme
+ )
+ );
+ } catch (error) {
+ console.error("Error resetting vote:", error);
+ }
+ };
+
+
+ useEffect(() => {
+ if (token && activeJamResponse?.phase === "Survival") {
+ fetchRandomTheme();
+ fetchVotedThemes();
+ }
+ }, [token, activeJamResponse]);
+
+ // Render loading state while fetching phase
+ if (phaseLoading) {
+ return Loading...
;
+ }
+
+ // Render message if not in Theme Slaughter phase
+ if (activeJamResponse?.phase !== "Survival") {
+ return (
+
+
+ Not in Theme Slaughter Phase
+
+
+ The current phase is {activeJamResponse?.phase || "Unknown"} . Please come back during the Theme Slaughter phase.
+
+
Sign in to be able to join the Theme Survival
+ );
+ }
+
+
+ return (
+
+ {/* Left Side */}
+
+ {randomTheme ? (
+ <>
+
+ {randomTheme.suggestion}
+
+
+ handleVote("YES")}
+ className="px-6 py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600"
+ disabled={loading}
+ >
+ YES
+
+ handleVote("NO")}
+ className="px-6 py-3 bg-red-500 text-white font-bold rounded-lg hover:bg-red-600"
+ disabled={loading}
+ >
+ NO
+
+ handleVote("SKIP")}
+ className="px-6 py-3 bg-gray-500 text-white font-bold rounded-lg hover:bg-gray-600"
+ disabled={loading}
+ >
+ SKIP
+
+
+
+ ) : (
+
No themes available.
+ )}
+
+
+ {/* Right Side */}
+
+
+ Your Votes
+
+
+ {votedThemes.map((theme) => (
+
handleResetVote(theme.id)}
+ className={`p-4 rounded-lg cursor-pointer ${
+ theme.slaughterScore > 0
+ ? "bg-green-500 text-white"
+ : theme.slaughterScore < 0
+ ? "bg-red-500 text-white"
+ : "bg-gray-300 text-black"
+ }`}
+ >
+ {theme.suggestion}
+
+ ))}
+
+
+
(null);
+ const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+
+ // Fetch the current jam phase using helpers/jam
+ useEffect(() => {
+ const fetchCurrentJamPhase = async () => {
+ try {
+ const activeJam = await getCurrentJam();
+ setActiveJamResponse(activeJam); // Set active jam details
+ if (activeJam?.jam) {
+ setThemeLimit(activeJam.jam.themePerUser || Infinity); // Set theme limit
+ }
+ } catch (error) {
+ console.error("Error fetching current jam:", error);
+ } finally {
+ setPhaseLoading(false); // Stop loading when phase is fetched
+ }
+ };
+
+ fetchCurrentJamPhase();
+ }, []);
+
+ // Fetch all suggestions for the logged-in user
+ const fetchSuggestions = async () => {
+ try {
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/suggestion"
+ : "http://localhost:3005/api/v1/themes/suggestion",
+ {
+ headers: { Authorization: `Bearer ${getCookie("token")}` },
+ credentials: "include",
+ }
+ );
+ if (response.ok) {
+ const data = await response.json();
+ setUserSuggestions(data);
+ }
+ } catch (error) {
+ console.error("Error fetching suggestions:", error);
+ }
+ };
+
+ // Fetch suggestions only when phase is "Suggestion"
+ useEffect(() => {
+ if (activeJamResponse?.phase === "Suggestion") {
+ fetchSuggestions();
+ }
+ }, [activeJamResponse]);
+
+ // Handle form submission to add a new suggestion
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setLoading(true);
+ setSuccessMessage("");
+ setErrorMessage("");
+
+ if (!suggestion.trim()) {
+ setErrorMessage("Suggestion cannot be empty.");
+ setLoading(false);
+ return;
+ }
+
+ try {
+ const token = getCookie("token");
+
+ if (!token) {
+ throw new Error("User is not authenticated. Please log in.");
+ }
+
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/suggestion"
+ : "http://localhost:3005/api/v1/themes/suggestion",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ credentials: "include",
+ body: JSON.stringify({ suggestionText: suggestion }),
+ }
+ );
+
+ if (!response.ok) {
+ const errorData = await response.json();
+ throw new Error(errorData.error || "Failed to submit suggestion.");
+ }
+
+ setSuccessMessage("Suggestion added successfully!");
+ setSuggestion(""); // Clear input field
+ fetchSuggestions(); // Refresh suggestions list
+ } catch (error: any) {
+ console.error("Error submitting suggestion:", error.message);
+ setErrorMessage(error.message || "An unexpected error occurred.");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Handle deleting a suggestion
+ const handleDelete = async (id: number) => {
+ try {
+ const token = getCookie("token");
+
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? `https://d2jam.com/api/v1/themes/suggestion/${id}`
+ : `http://localhost:3005/api/v1/themes/suggestion/${id}`,
+ {
+ method: "DELETE",
+ headers: { Authorization: `Bearer ${token}` },
+ credentials: "include",
+ }
+ );
+
+ if (!response.ok) {
+ throw new Error("Failed to delete suggestion.");
+ }
+
+ fetchSuggestions(); // Refresh suggestions list
+ } catch (error) {
+ console.error("Error deleting suggestion:", error);
+ }
+ };
+
+ // Render loading state while fetching phase
+ if (phaseLoading) {
+ return Loading...
;
+ }
+
+ const token = getCookie("token");
+
+ if (!token) {
+ return (
+ Sign in to be able to suggest themes
+ );
+ }
+
+ // Render message if not in Suggestion phase
+ if (activeJamResponse?.phase !== "Suggestion") {
+ return (
+
+
+ Not in Suggestion Phase
+
+
+ The current phase is {activeJamResponse?.phase || "Unknown"} . Please come back during the Suggestion phase.
+
+
+
+ Submit Your Theme Suggestion
+
+
+ {/* Hide form if user has reached their limit */}
+ {userSuggestions.length < themeLimit ? (
+
+ ) : (
+
+ You've reached your theme suggestion limit for this jam!
+
+ )}
+
+ {/* List of user's suggestions */}
+
+
+ Your Suggestions
+
+ {userSuggestions.length > 0 ? (
+
+ {userSuggestions.map((suggestion) => (
+
+ {suggestion.suggestion}
+ handleDelete(suggestion.id)}
+ className="text-red-500 hover:text-red-700 font-semibold"
+ >
+ Delete
+
+
+ ))}
+
+ ) : (
+
+ You haven't submitted any suggestions yet.
+
+ )}
+
+
(null);
+ const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+ const token = getCookie("token");
+
+ // Fetch the current jam phase using helpers/jam
+ useEffect(() => {
+ const fetchCurrentJamPhase = async () => {
+ try {
+ const activeJam = await getCurrentJam();
+ setActiveJamResponse(activeJam); // Set active jam details
+ } catch (error) {
+ console.error("Error fetching current jam:", error);
+ } finally {
+ setPhaseLoading(false); // Stop loading when phase is fetched
+ }
+ };
+
+ fetchCurrentJamPhase();
+ }, []);
+
+ // Fetch top N themes with voting scores
+ const fetchThemes = async () => {
+ if (!token || !activeJamResponse) return;
+
+ try {
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/top-themes"
+ : "http://localhost:3005/api/v1/themes/top-themes",
+ {
+ headers: { Authorization: `Bearer ${token}` },
+ credentials: "include",
+ }
+ );
+ if (response.ok) {
+ const themes = await response.json();
+ console.log("Fetched themes:", themes); // Debug log
+
+ // Fetch user's votes for these themes
+ const votesResponse = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/votes"
+ : "http://localhost:3005/api/v1/themes/votes",
+ {
+ headers: { Authorization: `Bearer ${token}` },
+ credentials: "include",
+ }
+ );
+
+ if (votesResponse.ok) {
+ const votes = await votesResponse.json();
+ console.log("Fetched votes:", votes); // Debug log
+
+ // Merge themes with user's votes
+ const themesWithVotes = themes.map(theme => {
+ const vote = votes.find(v => v.themeSuggestionId === theme.id);
+ console.log(`Theme ${theme.id} vote:`, vote); // Debug log
+ return {
+ ...theme,
+ votingScore: vote ? vote.votingScore : null
+ };
+ });
+
+ console.log("Themes with votes:", themesWithVotes); // Debug log
+ setThemes(themesWithVotes);
+ }
+ } else {
+ console.error("Failed to fetch themes.");
+ }
+ } catch (error) {
+ console.error("Error fetching themes:", error);
+ }
+ };
+
+
+ // Fetch themes only when phase is "Voting"
+ useEffect(() => {
+ if (activeJamResponse?.phase === "Voting") {
+ fetchThemes();
+ }
+ }, [activeJamResponse]);
+
+ // Handle voting
+ const handleVote = async (themeId, votingScore) => {
+ setLoading(true);
+ try {
+ const response = await fetch(
+ process.env.NEXT_PUBLIC_MODE === "PROD"
+ ? "https://d2jam.com/api/v1/themes/vote"
+ : "http://localhost:3005/api/v1/themes/vote",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ credentials: "include",
+ body: JSON.stringify({ suggestionId: themeId, votingScore }),
+ }
+ );
+
+ if (response.ok) {
+ // Just update the local state instead of re-fetching all themes
+ setThemes((prevThemes) =>
+ prevThemes.map((theme) =>
+ theme.id === themeId
+ ? { ...theme, votingScore }
+ : theme
+ )
+ );
+ } else {
+ console.error("Failed to submit vote.");
+ }
+ } catch (error) {
+ console.error("Error submitting vote:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ // Render loading state while fetching phase
+ if (phaseLoading) {
+ return Loading...
;
+ }
+
+ // Render message if not in Voting phase
+ if (activeJamResponse?.phase !== "Voting") {
+ return (
+
+
+ Not in Voting Phase
+
+
+ The current phase is {activeJamResponse?.phase || "Unknown"} . Please come back during the Voting phase.
+
+
Sign in to be able to vote
+ );
+ }
+
+ return (
+
+
+ Voting Phase
+
+
+ {themes.map((theme) => (
+
+ {/* Voting Buttons */}
+
+ handleVote(theme.id, -1)}
+ className={`px-3 py-2 rounded-lg ${
+ theme.votingScore === -1
+ ? "bg-red-500 text-white"
+ : "bg-gray-300 text-black hover:bg-red-500 hover:text-white"
+ }`}
+ disabled={loading}
+ >
+ -1
+
+ handleVote(theme.id, 0)}
+ className={`px-3 py-2 rounded-lg ${
+ theme.votingScore === 0
+ ? "bg-gray-500 text-white"
+ : "bg-gray-300 text-black hover:bg-gray-500 hover:text-white"
+ }`}
+ disabled={loading}
+ >
+ 0
+
+ handleVote(theme.id, +1)}
+ className={`px-3 py-2 rounded-lg ${
+ theme.votingScore === +1
+ ? "bg-green-500 text-white"
+ : "bg-gray-300 text-black hover:bg-green-500 hover:text-white"
+ }`}
+ disabled={loading}
+ >
+ +1
+
+
+
+ {/* Theme Suggestion */}
+
{theme.suggestion}
+
+ ))}
+
+
-
-
-
Site under construction
-
(null);
+ const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+
+ // Fetch the current jam phase using helpers/jam
+ useEffect(() => {
+ const fetchCurrentJamPhase = async () => {
+ try {
+ const activeJam = await getCurrentJam();
+ setActiveJamResponse(activeJam); // Set active jam details
+ } catch (error) {
+ console.error("Error fetching current jam:", error);
+ } finally {
+ setPhaseLoading(false); // Stop loading when phase is fetched
+ }
+ };
+
+ fetchCurrentJamPhase();
+ }, []);
+
+ if(activeJamResponse && activeJamResponse.jam)
+ {
+ return (
+
+
+
+
Site under construction
+
+ No upcoming jams
+
+
Site under construction
+