Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

...

3 commits
6791e36401 ... d8894cd0eb

Author SHA1 Message Date
boragenel
d8894cd0eb reenabled phase pages 2025-01-23 12:18:49 +03:00
boragenel
505fb56df8 Fixed all the build errors and fixed participation 2025-01-23 12:00:07 +03:00
boragenel
74bc8014e9 Auto stash before merge of "main" and "origin/main" 2025-01-23 11:10:27 +03:00
10 changed files with 1217 additions and 745 deletions

441
src/app/create-game/page.tsx
View file

@ -1,9 +1,446 @@
"use client"; "use client";
import Editor from "@/components/editor";
import { getCookie, hasCookie } from "@/helpers/cookie";
import { Avatar, Button, Form, Input, Spacer } from "@nextui-org/react";
import { LoaderCircle } from "lucide-react";
import { redirect } from "next/navigation";
import { ReactNode, useEffect, useState } from "react";
import { toast } from "react-toastify";
import sanitizeHtml from "sanitize-html";
import Select, { MultiValue, StylesConfig } from "react-select";
import { useTheme } from "next-themes";
import Timers from "@/components/timers";
import Streams from "@/components/streams";
export default function CreateGamePage() { export default function CreateGamePage() {
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [errors, setErrors] = useState({});
const [waitingPost, setWaitingPost] = useState(false);
const [selectedTags, setSelectedTags] = useState<MultiValue<{
value: string;
label: ReactNode;
isFixed: boolean;
}> | null>(null);
const [mounted, setMounted] = useState<boolean>(false);
const [options, setOptions] = useState<
{
value: string;
label: ReactNode;
id: number;
isFixed: boolean;
}[]
>();
const { theme } = useTheme();
// Add these state variables after existing useState declarations
const [windowsLink, setWindowsLink] = useState("");
const [linuxLink, setLinuxLink] = useState("");
const [macLink, setMacLink] = useState("");
const [webGLLink, setWebGLLink] = useState("");
const [gameSlug, setGameSlug] = useState("");
const [thumbnailUrl, setThumbnailUrl] = useState("");
const [authorSearch, setAuthorSearch] = useState("");
const [selectedAuthors, setSelectedAuthors] = useState<Array<{id: number, name: string}>>([]);
const [searchResults, setSearchResults] = useState<Array<{ id: number; name: string }>>([]);
// Add this function to handle author search
const handleAuthorSearch = async (query: string) => {
if (query.length < 2) return;
const response = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD"
? `https://d2jam.com/api/v1/users/search?q=${query}`
: `http://localhost:3005/api/v1/users/search?q=${query}`,
{
headers: { authorization: `Bearer ${getCookie("token")}` },
credentials: "include",
}
);
if (response.ok) {
const data = await response.json();
setSearchResults(data);
}
};
useEffect(() => {
setMounted(true);
const load = async () => {
const response = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD"
? `https://d2jam.com/api/v1/self?username=${getCookie("user")}`
: `http://localhost:3005/api/v1/self?username=${getCookie("user")}`,
{
headers: { authorization: `Bearer ${getCookie("token")}` },
credentials: "include",
}
);
const user = await response.json();
const tagResponse = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD"
? `https://d2jam.com/api/v1/tags`
: `http://localhost:3005/api/v1/tags`
);
if (tagResponse.ok) {
const newoptions: {
value: string;
label: ReactNode;
id: number;
isFixed: boolean;
}[] = [];
for (const tag of await tagResponse.json()) {
if (tag.modOnly && !user.mod) {
continue;
}
newoptions.push({
value: tag.name,
id: tag.id,
label: (
<div className="flex gap-2 items-center">
{tag.icon && (
<Avatar
className="w-6 h-6 min-w-6 min-h-6"
size="sm"
src={tag.icon}
classNames={{ base: "bg-transparent" }}
/>
)}
<p>
{tag.name}
{tag.modOnly ? " (Mod Only)" : ""}
</p>
</div>
),
isFixed: tag.alwaysAdded,
});
}
setOptions(newoptions);
setSelectedTags(newoptions.filter((tag) => tag.isFixed));
}
};
load();
}, []);
const styles: StylesConfig<
{
value: string;
label: ReactNode;
isFixed: boolean;
},
true
> = {
multiValue: (base, state) => {
return {
...base,
backgroundColor: state.data.isFixed
? theme == "dark"
? "#222"
: "#ddd"
: theme == "dark"
? "#444"
: "#eee",
};
},
multiValueLabel: (base, state) => {
return {
...base,
color: state.data.isFixed
? theme == "dark"
? "#ddd"
: "#222"
: theme == "dark"
? "#fff"
: "#444",
fontWeight: state.data.isFixed ? "normal" : "bold",
paddingRight: state.data.isFixed ? "8px" : "2px",
};
},
multiValueRemove: (base, state) => {
return {
...base,
display: state.data.isFixed ? "none" : "flex",
color: theme == "dark" ? "#ddd" : "#222",
};
},
control: (styles) => ({
...styles,
backgroundColor: theme == "dark" ? "#181818" : "#fff",
minWidth: "300px",
}),
menu: (styles) => ({
...styles,
backgroundColor: theme == "dark" ? "#181818" : "#fff",
color: theme == "dark" ? "#fff" : "#444",
}),
option: (styles, { isFocused }) => ({
...styles,
backgroundColor: isFocused
? theme == "dark"
? "#333"
: "#ddd"
: undefined,
}),
};
return ( return (
<div className="absolute flex items-center justify-center top-0 left-0 w-screen h-screen"> <div className="static flex items-top mt-20 justify-center top-0 left-0">
<p>Game creation coming soon</p> <Form
className="w-full max-w-2xl flex flex-col gap-4"
validationErrors={errors}
onSubmit={async (e) => {
e.preventDefault();
if (!title && !content) {
setErrors({
title: "Please enter a valid title",
content: "Please enter valid content",
});
toast.error("Please enter valid content");
return;
}
if (!title) {
setErrors({ title: "Please enter a valid title" });
return;
}
if (!content) {
setErrors({ content: "Please enter valid content" });
toast.error("Please enter valid content");
return;
}
if (!hasCookie("token")) {
setErrors({ content: "You are not logged in" });
return;
}
const sanitizedHtml = sanitizeHtml(content);
setWaitingPost(true);
const tags = [];
if (selectedTags) {
for (const tag of selectedTags) {
tags.push(
options?.filter((option) => option.value == tag.value)[0].id
);
}
}
const response = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD"
? "https://d2jam.com/api/v1/post"
: "http://localhost:3005/api/v1/post",
{
body: JSON.stringify({
title: title,
content: sanitizedHtml,
username: getCookie("user"),
tags,
gameSlug,
thumbnailUrl,
windowsLink,
linuxLink,
macLink,
webGLLink,
authors: selectedAuthors.map(author => author.id)
}),
method: "POST",
headers: {
"Content-Type": "application/json",
authorization: `Bearer ${getCookie("token")}`,
},
credentials: "include",
}
);
if (response.status == 401) {
setErrors({ content: "Invalid user" });
setWaitingPost(false);
return;
}
if (response.ok) {
toast.success("Successfully created post");
setWaitingPost(false);
redirect("/");
} else {
toast.error("An error occured");
setWaitingPost(false);
}
}}
>
<Input
isRequired
label="Game Name"
labelPlacement="outside"
name="title"
placeholder="Enter your game name"
type="text"
value={title}
onValueChange={setTitle}
/>
<Input
label="Game Slug"
labelPlacement="outside"
placeholder="your-game-name"
value={gameSlug}
onValueChange={setGameSlug}
description="This will be used in the URL: d2jam.com/games/your-game-name"
/>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium">Add Authors</label>
<Input
placeholder="Search users..."
value={authorSearch}
onValueChange={(value) => {
setAuthorSearch(value);
handleAuthorSearch(value);
}}
/>
{searchResults.length > 0 && (
<div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-2">
{searchResults.map((user) => (
<div
key={user.id}
className="flex justify-between items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded cursor-pointer"
onClick={() => {
setSelectedAuthors([...selectedAuthors, user]);
setSearchResults([]);
setAuthorSearch("");
}}
>
<span>{user.name}</span>
</div>
))}
</div>
)}
<div className="flex flex-wrap gap-2 mt-2">
{selectedAuthors.map((author) => (
<div
key={author.id}
className="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-100 px-3 py-1 rounded-full flex items-center gap-2"
>
<span>{author.name}</span>
<button
onClick={() => setSelectedAuthors(selectedAuthors.filter(a => a.id !== author.id))}
className="text-sm hover:text-red-500"
>
×
</button>
</div>
))}
</div>
</div>
<label className="text-sm font-medium">Game Description</label>
<Editor content={content} setContent={setContent} gameEditor />
<Spacer />
{mounted && (
<Select
styles={styles}
isMulti
value={selectedTags}
onChange={(value) => setSelectedTags(value)}
options={options}
isClearable={false}
isOptionDisabled={() =>
selectedTags != null && selectedTags.length >= 5
}
/>
)}
<Spacer />
<div className="flex flex-col gap-4">
<Input
label="Thumbnail URL"
labelPlacement="outside"
placeholder="https://example.com/thumbnail.png"
value={thumbnailUrl}
onValueChange={setThumbnailUrl}
/>
<div className="grid grid-cols-2 gap-4">
<Input
label="Windows Download"
placeholder="https://example.com/game-windows.zip"
value={windowsLink}
onValueChange={setWindowsLink}
/>
<Input
label="Linux Download"
placeholder="https://example.com/game-linux.zip"
value={linuxLink}
onValueChange={setLinuxLink}
/>
<Input
label="Mac Download"
placeholder="https://example.com/game-mac.zip"
value={macLink}
onValueChange={setMacLink}
/>
<Input
label="WebGL Link"
placeholder="https://example.com/game-webgl"
value={webGLLink}
onValueChange={setWebGLLink}
/>
</div>
<div className="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
<h3 className="text-lg font-bold mb-4">Game Metrics</h3>
<div className="grid grid-cols-2 gap-4">
<div className="bg-white dark:bg-gray-900 p-3 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Views</p>
<p className="text-2xl font-bold">0</p>
</div>
<div className="bg-white dark:bg-gray-900 p-3 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Downloads</p>
<p className="text-2xl font-bold">0</p>
</div>
<div className="bg-white dark:bg-gray-900 p-3 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Rating</p>
<p className="text-2xl font-bold">N/A</p>
</div>
<div className="bg-white dark:bg-gray-900 p-3 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Comments</p>
<p className="text-2xl font-bold">0</p>
</div>
</div>
</div>
<div className="flex gap-2">
<Button color="primary" type="submit">
{waitingPost ? (
<LoaderCircle className="animate-spin" size={16} />
) : (
<p>Create</p>
)}
</Button>
</div>
</div>
</Form>
<div className="flex flex-col gap-4 px-8 items-end">
<Timers />
<Streams />
</div>
</div> </div>
); );
} }

8
src/app/create-post/page.tsx
View file

@ -17,6 +17,8 @@ import { toast } from "react-toastify";
import sanitizeHtml from "sanitize-html"; import sanitizeHtml from "sanitize-html";
import Select, { MultiValue, StylesConfig } from "react-select"; import Select, { MultiValue, StylesConfig } from "react-select";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import Timers from "@/components/timers";
import Streams from "@/components/streams";
import { UserType } from "@/types/UserType"; import { UserType } from "@/types/UserType";
export default function CreatePostPage() { export default function CreatePostPage() {
@ -168,7 +170,7 @@ export default function CreatePostPage() {
}; };
return ( return (
<div className="absolute flex items-center justify-center top-0 left-0 w-screen h-screen"> <div className="absolute flex items-top mt-40 justify-center top-0 left-0 w-screen h-screen">
<Form <Form
className="w-full max-w-2xl flex flex-col gap-4" className="w-full max-w-2xl flex flex-col gap-4"
validationErrors={errors} validationErrors={errors}
@ -305,6 +307,10 @@ export default function CreatePostPage() {
</Button> </Button>
</div> </div>
</Form> </Form>
<div className="flex flex-col gap-4 px-8 items-end">
<Timers />
<Streams />
</div>
</div> </div>
); );
} }

9
src/components/editor/index.tsx
View file

@ -40,11 +40,12 @@ import { useTheme } from "next-themes";
type EditorProps = { type EditorProps = {
content: string; content: string;
setContent: (content: string) => void; setContent: (content: string) => void;
gameEditor?: boolean;
}; };
const limit = 32767; const limit = 32767;
export default function Editor({ content, setContent }: EditorProps) { export default function Editor({ content, setContent,gameEditor }: EditorProps) {
const { theme } = useTheme(); const { theme } = useTheme();
const editor = useEditor({ const editor = useEditor({
@ -97,7 +98,11 @@ export default function Editor({ content, setContent }: EditorProps) {
editorProps: { editorProps: {
attributes: { attributes: {
class: class:
"prose dark:prose-invert min-h-[150px] max-h-[400px] overflow-y-auto cursor-text rounded-md border p-5 focus-within:outline-none focus-within:border-blue-500 !duration-250 !ease-linear !transition-all", "prose dark:prose-invert " +
(gameEditor
? "min-h-[600px] max-h-[600px]"
: "min-h-[150px] max-h-[400px]") +
" overflow-y-auto cursor-text rounded-md border p-5 focus-within:outline-none focus-within:border-blue-500 !duration-250 !ease-linear !transition-all",
}, },
}, },
}); });

7
src/components/jam-header/index.tsx
View file

@ -111,11 +111,10 @@ export default function JamHeader() {
</div> </div>
</div> </div>
{/* Phase-Specific Display */}
{activeJamResponse?.phase === "Suggestion" && ( {activeJamResponse?.phase === "Suggestion" && (
<div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x"> <div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x">
<a <a
// href="/theme-suggestions" href="/theme-suggestions"
className="text-blue-300 dark:text-blue-500 hover:underline font-semibold" className="text-blue-300 dark:text-blue-500 hover:underline font-semibold"
> >
Go to Theme Suggestion Go to Theme Suggestion
@ -126,7 +125,7 @@ export default function JamHeader() {
{activeJamResponse?.phase === "Survival" && ( {activeJamResponse?.phase === "Survival" && (
<div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x"> <div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x">
<a <a
// href="/theme-slaughter" href="/theme-slaughter"
className="text-blue-300 dark:text-blue-500 hover:underline font-semibold" className="text-blue-300 dark:text-blue-500 hover:underline font-semibold"
> >
Go to Theme Survival Go to Theme Survival
@ -137,7 +136,7 @@ export default function JamHeader() {
{activeJamResponse?.phase === "Voting" && ( {activeJamResponse?.phase === "Voting" && (
<div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x"> <div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x">
<a <a
// href="/theme-voting" href="/theme-voting"
className="text-blue-300 dark:text-blue-500 hover:underline font-semibold" className="text-blue-300 dark:text-blue-500 hover:underline font-semibold"
> >
Go to Theme Voting Go to Theme Voting

528
src/components/themes/theme-slaughter.tsx
View file

@ -1,286 +1,296 @@
"use client"; "use client";
// import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
// import { getCookie } from "@/helpers/cookie"; import { getCookie } from "@/helpers/cookie";
// import { import {
// getCurrentJam, getCurrentJam,
// hasJoinedCurrentJam, hasJoinedCurrentJam,
// ActiveJamResponse, ActiveJamResponse,
// } from "@/helpers/jam"; joinJam
} from "@/helpers/jam";
import {ThemeType} from "@/types/ThemeType";
export default function ThemeSlaughter() { export default function ThemeSlaughter() {
// const [randomTheme, setRandomTheme] = useState(null); const [randomTheme, setRandomTheme] = useState<ThemeType | null>(null);
// const [votedThemes, setVotedThemes] = useState([]); const [votedThemes, setVotedThemes] = useState<ThemeType[]>([]);
// const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// const [token, setToken] = useState<string | null>(null); const [token, setToken] = useState<string | null>(null);
// const [hasJoined, setHasJoined] = useState<boolean>(false); const [hasJoined, setHasJoined] = useState<boolean>(false);
// const [activeJamResponse, setActiveJam] = useState<ActiveJamResponse | null>( const [activeJamResponse, setActiveJam] = useState<ActiveJamResponse | null>(
// null null
// ); );
// const [phaseLoading, setPhaseLoading] = useState(true); const [phaseLoading, setPhaseLoading] = useState(true);
// // Fetch token on the client side // Fetch token on the client side
// useEffect(() => { useEffect(() => {
// const fetchedToken = getCookie("token"); const fetchedToken = getCookie("token");
// setToken(fetchedToken); setToken(fetchedToken);
// }, []); }, []);
// // Fetch the current jam phase using helpers/jam // Fetch the current jam phase using helpers/jam
// useEffect(() => { useEffect(() => {
// const fetchCurrentJamPhase = async () => { const fetchCurrentJamPhase = async () => {
// try { try {
// const activeJam = await getCurrentJam(); const activeJam = await getCurrentJam();
// setActiveJam(activeJam); // Set active jam details setActiveJam(activeJam); // Set active jam details
// } catch (error) { } catch (error) {
// console.error("Error fetching current jam:", error); console.error("Error fetching current jam:", error);
// } finally { } finally {
// setPhaseLoading(false); // Stop loading when phase is fetched setPhaseLoading(false); // Stop loading when phase is fetched
// } }
// }; };
// fetchCurrentJamPhase(); fetchCurrentJamPhase();
// }, []); }, []);
// // Fetch a random theme // Fetch a random theme
// const fetchRandomTheme = useCallback(async () => { const fetchRandomTheme = useCallback(async () => {
// if (!token) return; // Wait until token is available if (!token) return; // Wait until token is available
// if (!activeJamResponse) return; if (!activeJamResponse) return;
// if ( if (
// activeJamResponse && activeJamResponse &&
// activeJamResponse.jam && activeJamResponse.jam &&
// activeJamResponse.phase != "Survival" activeJamResponse.phase != "Survival"
// ) { ) {
// return ( return (
// <div> <div>
// <h1>It&apos;s not Theme Survival phase.</h1> <h1>It&apos;s not Theme Survival phase.</h1>
// </div> </div>
// ); );
// } }
// try { try {
// const response = await fetch( const response = await fetch(
// process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
// ? "https://d2jam.com/api/v1/themes/random" ? "https://d2jam.com/api/v1/themes/random"
// : "http://localhost:3005/api/v1/themes/random", : "http://localhost:3005/api/v1/themes/random",
// { {
// headers: { Authorization: `Bearer ${token}` }, headers: { Authorization: `Bearer ${token}` },
// credentials: "include", credentials: "include",
// } }
// ); );
// if (response.ok) { if (response.ok) {
// const data = await response.json(); const data = await response.json();
// setRandomTheme(data); setRandomTheme(data);
// } else { } else {
// console.error("Failed to fetch random theme."); console.error("Failed to fetch random theme.");
// } }
// } catch (error) { } catch (error) {
// console.error("Error fetching random theme:", error); console.error("Error fetching random theme:", error);
// } }
// }, [activeJamResponse, token]); }, [activeJamResponse, token]);
// // Fetch voted themes // Fetch voted themes
// const fetchVotedThemes = useCallback(async () => { const fetchVotedThemes = useCallback(async () => {
// if (!token) return; // Wait until token is available if (!token) return; // Wait until token is available
// try { try {
// const response = await fetch( const response = await fetch(
// process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
// ? "https://d2jam.com/api/v1/themes/voteSlaughter" ? "https://d2jam.com/api/v1/themes/voteSlaughter"
// : "http://localhost:3005/api/v1/themes/voteSlaughter", : "http://localhost:3005/api/v1/themes/voteSlaughter",
// { {
// headers: { Authorization: `Bearer ${token}` }, headers: { Authorization: `Bearer ${token}` },
// credentials: "include", credentials: "include",
// } }
// ); );
// if (response.ok) { if (response.ok) {
// const data = await response.json(); const data = await response.json();
// setVotedThemes(data); setVotedThemes(data);
// } else { } else {
// console.error("Failed to fetch voted themes."); console.error("Failed to fetch voted themes.");
// } }
// } catch (error) { } catch (error) {
// console.error("Error fetching voted themes:", error); console.error("Error fetching voted themes:", error);
// } }
// }, [token]); }, [token]);
// // Handle voting // Handle voting
// const handleVote = async (voteType: string) => { const handleVote = async (voteType: string) => {
// if (!randomTheme) return; if (!randomTheme) return;
// setLoading(true); setLoading(true);
// try { try {
// const response = await fetch( const response = await fetch(
// process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
// ? "https://d2jam.com/api/v1/themes/voteSlaughter" ? "https://d2jam.com/api/v1/themes/voteSlaughter"
// : "http://localhost:3005/api/v1/themes/voteSlaughter", : "http://localhost:3005/api/v1/themes/voteSlaughter",
// { {
// method: "POST", method: "POST",
// headers: { headers: {
// "Content-Type": "application/json", "Content-Type": "application/json",
// Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
// }, },
// credentials: "include", credentials: "include",
// body: JSON.stringify({ body: JSON.stringify({
// suggestionId: randomTheme.id, suggestionId: randomTheme.id,
// voteType, voteType,
// }), }),
// } }
// ); );
// if (response.ok) { if (response.ok) {
// // Refresh data after voting // Refresh data after voting
// fetchRandomTheme(); fetchRandomTheme();
// fetchVotedThemes(); fetchVotedThemes();
// } else { } else {
// console.error("Failed to submit vote."); console.error("Failed to submit vote.");
// } }
// } catch (error) { } catch (error) {
// console.error("Error submitting vote:", error); console.error("Error submitting vote:", error);
// } finally { } finally {
// setLoading(false); setLoading(false);
// } }
// }; };
// // Handle resetting a vote from the grid // Handle resetting a vote from the grid
// const handleResetVote = async (themeId: number) => { const handleResetVote = async (themeId: number) => {
// try { try {
// setRandomTheme(votedThemes.find((theme) => theme.id === themeId)); const theme = votedThemes.find((theme) => theme.id === themeId);
// setVotedThemes((prev) => if (theme) {
// prev.map((theme) => setRandomTheme(theme);
// theme.id === themeId ? { ...theme, slaughterScore: 0 } : theme setVotedThemes((prev) =>
// ) prev.map((t) =>
// ); t.id === themeId ? { ...t, slaughterScore: 0 } : t
// } catch (error) { )
// console.error("Error resetting vote:", error); );
// } }
// }; } catch (error) {
console.error("Error resetting vote:", error);
}
};
// useEffect(() => { useEffect(() => {
// if (token && activeJamResponse?.phase === "Survival") { if (token && activeJamResponse?.phase === "Survival") {
// fetchRandomTheme(); fetchRandomTheme();
// fetchVotedThemes(); fetchVotedThemes();
// } }
// }, [token, activeJamResponse, fetchRandomTheme, fetchVotedThemes]); }, [token, activeJamResponse, fetchRandomTheme, fetchVotedThemes]);
// useEffect(() => { useEffect(() => {
// const init = async () => { const init = async () => {
// const joined = await hasJoinedCurrentJam(); const joined = await hasJoinedCurrentJam();
// setHasJoined(joined); setHasJoined(joined);
// setLoading(false); setLoading(false);
// }; };
// init(); init();
// }, []); }, []);
// if (phaseLoading || loading) { if (phaseLoading || loading) {
// return <div>Loading...</div>; return <div>Loading...</div>;
// } }
// if (!hasJoined) {
// return (
// <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
// <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
// Join the Jam First
// </h1>
// <p className="text-gray-600 dark:text-gray-400">
// You need to join the current jam before you can join Theme Survival.
// </p>
// <button
// onClick={() => joinJam(activeJamResponse?.jam?.id)}
// className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
// >
// Join Jam
// </button>
// </div>
// );
// }
// // Render message if not in Theme Slaughter phase
// if (activeJamResponse?.phase !== "Survival") {
// return (
// <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
// <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
// Not in Theme Slaughter Phase
// </h1>
// <p className="text-gray-600 dark:text-gray-400">
// The current phase is{" "}
// <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come
// back during the Theme Slaughter phase.
// </p>
// </div>
// );
// }
// const loggedIn = getCookie("token"); // Render message if not in Theme Slaughter phase
if (activeJamResponse?.phase !== "Survival") {
return (
<div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
<h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
Not in Theme Slaughter Phase
</h1>
<p className="text-gray-600 dark:text-gray-400">
The current phase is{" "}
<strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come
back during the Theme Slaughter phase.
</p>
</div>
);
}
// if (!loggedIn) { const loggedIn = getCookie("token");
// return <div>Sign in to be able to join the Theme Survival</div>; if (!loggedIn) {
// } return <div>Sign in to be able to join the Theme Survival</div>;
}
// return ( if (!hasJoined) {
// <div className="flex h-screen"> return (
// {/* Left Side */} <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
// <div className="w-1/2 p-6 bg-gray-100 dark:bg-gray-800 flex flex-col justify-start items-center"> <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
// {randomTheme ? ( Join the Jam First
// <> </h1>
// <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4"> <p className="text-gray-600 dark:text-gray-400">
// {randomTheme.suggestion} You need to join the current jam before you can join Theme Survival.
// </h2> </p>
// <div className="flex gap-4"> <button
// <button onClick={() => {
// onClick={() => handleVote("YES")} if (activeJamResponse?.jam?.id !== undefined) {
// className="px-6 py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600" joinJam(activeJamResponse.jam.id);
// disabled={loading} }
// > }}
// YES className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
// </button> >
// <button Join Jam
// onClick={() => handleVote("NO")} </button>
// className="px-6 py-3 bg-red-500 text-white font-bold rounded-lg hover:bg-red-600" </div>
// disabled={loading} );
// > }
// NO
// </button>
// <button
// onClick={() => handleVote("SKIP")}
// className="px-6 py-3 bg-gray-500 text-white font-bold rounded-lg hover:bg-gray-600"
// disabled={loading}
// >
// SKIP
// </button>
// </div>
// </>
// ) : (
// <p className="text-gray-600 dark:text-gray-400">
// No themes available.
// </p>
// )}
// </div>
// {/* Right Side */} return (
// <div className="w-1/2 p-6 bg-white dark:bg-gray-900 overflow-y-auto"> <div className="flex h-screen">
// <h3 className="text-xl font-bold text-gray-800 dark:text-white mb-4"> {/* Left Side */}
// Your Votes <div className="w-1/2 p-6 bg-gray-100 dark:bg-gray-800 flex flex-col justify-start items-center">
// </h3> {randomTheme ? (
// <div className="grid grid-cols-4 gap-4"> <>
// {votedThemes.map((theme) => ( <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
// <div {randomTheme.suggestion}
// key={theme.id} </h2>
// onClick={() => handleResetVote(theme.id)} <div className="flex gap-4">
// className={`p-4 rounded-lg cursor-pointer ${ <button
// theme.slaughterScore > 0 onClick={() => handleVote("YES")}
// ? "bg-green-500 text-white" className="px-6 py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600"
// : theme.slaughterScore < 0 disabled={loading}
// ? "bg-red-500 text-white" >
// : "bg-gray-300 text-black" YES
// }`} </button>
// > <button
// {theme.suggestion} onClick={() => handleVote("NO")}
// </div> className="px-6 py-3 bg-red-500 text-white font-bold rounded-lg hover:bg-red-600"
// ))} disabled={loading}
// </div> >
// </div> NO
// </div> </button>
// ); <button
onClick={() => handleVote("SKIP")}
className="px-6 py-3 bg-gray-500 text-white font-bold rounded-lg hover:bg-gray-600"
disabled={loading}
>
SKIP
</button>
</div>
</>
) : (
<p className="text-gray-600 dark:text-gray-400">
No themes available.
</p>
)}
</div>
{/* Right Side */}
<div className="w-1/2 p-6 bg-white dark:bg-gray-900 overflow-y-auto">
<h3 className="text-xl font-bold text-gray-800 dark:text-white mb-4">
Your Votes
</h3>
<div className="grid grid-cols-4 gap-4">
{votedThemes.map((theme) => (
<div
key={theme.id}
onClick={() => 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}
</div>
))}
</div>
</div>
</div>
);
return <></>; return <></>;
} }

557
src/components/themes/theme-suggest.tsx
View file

@ -1,282 +1,287 @@
"use client"; "use client";
// import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
// import { getCookie } from "@/helpers/cookie"; import { getCookie } from "@/helpers/cookie";
// import { import {
// getCurrentJam, getCurrentJam,
// hasJoinedCurrentJam, hasJoinedCurrentJam,
// ActiveJamResponse, ActiveJamResponse,
// } from "@/helpers/jam"; } from "@/helpers/jam";
import { ThemeType } from "@/types/ThemeType";
import { joinJam } from "@/helpers/jam";
export default function ThemeSuggestions() { export default function ThemeSuggestions() {
// const [suggestion, setSuggestion] = useState(""); const [suggestion, setSuggestion] = useState("");
// const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// const [successMessage, setSuccessMessage] = useState(""); const [successMessage, setSuccessMessage] = useState("");
// const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
// const [userSuggestions, setUserSuggestions] = useState([]); const [userSuggestions, setUserSuggestions] = useState<ThemeType[]>([]);
// const [themeLimit, setThemeLimit] = useState(0); const [themeLimit, setThemeLimit] = useState(0);
// const [hasJoined, setHasJoined] = useState<boolean>(false); const [hasJoined, setHasJoined] = useState<boolean>(false);
// const [activeJamResponse, setActiveJamResponse] = const [activeJamResponse, setActiveJamResponse] =
// useState<ActiveJamResponse | null>(null); useState<ActiveJamResponse | null>(null);
// const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
// // Fetch the current jam phase using helpers/jam // Fetch the current jam phase using helpers/jam
// useEffect(() => { useEffect(() => {
// const fetchCurrentJamPhase = async () => { const fetchCurrentJamPhase = async () => {
// try { try {
// const activeJam = await getCurrentJam(); const activeJam = await getCurrentJam();
// setActiveJamResponse(activeJam); // Set active jam details setActiveJamResponse(activeJam); // Set active jam details
// if (activeJam?.jam) { if (activeJam?.jam) {
// setThemeLimit(activeJam.jam.themePerUser || Infinity); // Set theme limit setThemeLimit(activeJam.jam.themePerUser || Infinity); // Set theme limit
// } }
// } catch (error) { } catch (error) {
// console.error("Error fetching current jam:", error); console.error("Error fetching current jam:", error);
// } finally { } finally {
// setPhaseLoading(false); // Stop loading when phase is fetched setPhaseLoading(false); // Stop loading when phase is fetched
// } }
// }; };
// fetchCurrentJamPhase(); fetchCurrentJamPhase();
// }, []); }, []);
// // Fetch all suggestions for the logged-in user // Fetch all suggestions for the logged-in user
// const fetchSuggestions = async () => { const fetchSuggestions = async () => {
// try { try {
// const response = await fetch( const response = await fetch(
// process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
// ? "https://d2jam.com/api/v1/themes/suggestion" ? "https://d2jam.com/api/v1/themes/suggestion"
// : "http://localhost:3005/api/v1/themes/suggestion", : "http://localhost:3005/api/v1/themes/suggestion",
// { {
// headers: { Authorization: `Bearer ${getCookie("token")}` }, headers: { Authorization: `Bearer ${getCookie("token")}` },
// credentials: "include", credentials: "include",
// } }
// ); );
// if (response.ok) { if (response.ok) {
// const data = await response.json(); const data = await response.json();
// setUserSuggestions(data); setUserSuggestions(data);
// } }
// } catch (error) { } catch (error) {
// console.error("Error fetching suggestions:", error); console.error("Error fetching suggestions:", error);
// } }
// }; };
// // Fetch suggestions only when phase is "Suggestion" // Fetch suggestions only when phase is "Suggestion"
// useEffect(() => { useEffect(() => {
// if (activeJamResponse?.phase === "Suggestion") { if (activeJamResponse?.phase === "Suggestion") {
// fetchSuggestions(); fetchSuggestions();
// } }
// }, [activeJamResponse]); }, [activeJamResponse]);
// // Handle form submission to add a new suggestion // Handle form submission to add a new suggestion
// const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
// e.preventDefault(); e.preventDefault();
// setLoading(true); setLoading(true);
// setSuccessMessage(""); setSuccessMessage("");
// setErrorMessage(""); setErrorMessage("");
// if (!suggestion.trim()) { if (!suggestion.trim()) {
// setErrorMessage("Suggestion cannot be empty."); setErrorMessage("Suggestion cannot be empty.");
// setLoading(false); setLoading(false);
// return; return;
// } }
// try { try {
// const token = getCookie("token"); const token = getCookie("token");
// if (!token) { if (!token) {
// throw new Error("User is not authenticated. Please log in."); throw new Error("User is not authenticated. Please log in.");
// } }
// const response = await fetch( const response = await fetch(
// process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
// ? "https://d2jam.com/api/v1/themes/suggestion" ? "https://d2jam.com/api/v1/themes/suggestion"
// : "http://localhost:3005/api/v1/themes/suggestion", : "http://localhost:3005/api/v1/themes/suggestion",
// { {
// method: "POST", method: "POST",
// headers: { headers: {
// "Content-Type": "application/json", "Content-Type": "application/json",
// Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
// }, },
// credentials: "include", credentials: "include",
// body: JSON.stringify({ suggestionText: suggestion }), body: JSON.stringify({ suggestionText: suggestion }),
// } }
// ); );
// if (!response.ok) { if (!response.ok) {
// const errorData = await response.json(); const errorData = await response.json();
// throw new Error(errorData.error || "Failed to submit suggestion."); throw new Error(errorData.error || "Failed to submit suggestion.");
// } }
// setSuccessMessage("Suggestion added successfully!"); setSuccessMessage("Suggestion added successfully!");
// setSuggestion(""); // Clear input field setSuggestion(""); // Clear input field
// fetchSuggestions(); // Refresh suggestions list fetchSuggestions(); // Refresh suggestions list
// } catch (error) { } catch (error) {
// if (error instanceof Error) { if (error instanceof Error) {
// console.error("Error submitting suggestion:", error.message); console.error("Error submitting suggestion:", error.message);
// setErrorMessage(error.message || "An unexpected error occurred."); setErrorMessage(error.message || "An unexpected error occurred.");
// } else { } else {
// console.error("Unknown error:", error); console.error("Unknown error:", error);
// setErrorMessage("An unexpected error occurred."); setErrorMessage("An unexpected error occurred.");
// } }
// } finally { } finally {
// setLoading(false); setLoading(false);
// } }
// }; };
// // Handle deleting a suggestion // Handle deleting a suggestion
// const handleDelete = async (id: number) => { const handleDelete = async (id: number) => {
// try { try {
// const token = getCookie("token"); const token = getCookie("token");
// const response = await fetch( const response = await fetch(
// process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
// ? `https://d2jam.com/api/v1/themes/suggestion/${id}` ? `https://d2jam.com/api/v1/themes/suggestion/${id}`
// : `http://localhost:3005/api/v1/themes/suggestion/${id}`, : `http://localhost:3005/api/v1/themes/suggestion/${id}`,
// { {
// method: "DELETE", method: "DELETE",
// headers: { Authorization: `Bearer ${token}` }, headers: { Authorization: `Bearer ${token}` },
// credentials: "include", credentials: "include",
// } }
// ); );
// if (!response.ok) { if (!response.ok) {
// throw new Error("Failed to delete suggestion."); throw new Error("Failed to delete suggestion.");
// } }
// fetchSuggestions(); // Refresh suggestions list fetchSuggestions(); // Refresh suggestions list
// } catch (error) { } catch (error) {
// console.error("Error deleting suggestion:", error); console.error("Error deleting suggestion:", error);
// } }
// }; };
// useEffect(() => { useEffect(() => {
// const init = async () => { const init = async () => {
// const joined = await hasJoinedCurrentJam(); const joined = await hasJoinedCurrentJam();
// setHasJoined(joined); setHasJoined(joined);
// setLoading(false); setLoading(false);
// }; };
// init(); init();
// }, []); }, []);
// // Render loading state while fetching phase // Render loading state while fetching phase
// if (phaseLoading || loading) { if (phaseLoading || loading) {
// return <div>Loading...</div>; return <div>Loading...</div>;
// } }
// if (!hasJoined) { const token = getCookie("token");
// return (
// <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen"> if (!token) {
// <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6"> return <div>Sign in to be able to suggest themes</div>;
// Join the Jam First }
// </h1>
// <p className="text-gray-600 dark:text-gray-400"> if (!hasJoined) {
// You need to join the current jam before you can suggest themes. return (
// </p> <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
// <button <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
// onClick={() => joinJam(activeJamResponse?.jam?.id)} Join the Jam First
// className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600" </h1>
// > <p className="text-gray-600 dark:text-gray-400">
// Join Jam You need to join the current jam before you can suggest themes.
// </button> </p>
// </div> <button
// ); onClick={() => {
// } if (activeJamResponse?.jam?.id !== undefined) {
joinJam(activeJamResponse.jam.id);
// const token = getCookie("token"); }
}}
// if (!token) { className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
// return <div>Sign in to be able to suggest themes</div>; >
// } Join Jam
</button>
// // Render message if not in Suggestion phase </div>
// if (activeJamResponse?.phase !== "Suggestion") { );
// return ( }
// <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
// <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6"> // Render message if not in Suggestion phase
// Not in Suggestion Phase if (activeJamResponse?.phase !== "Suggestion") {
// </h1> return (
// <p className="text-gray-600 dark:text-gray-400"> <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
// The current phase is{" "} <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
// <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come Not in Suggestion Phase
// back during the Suggestion phase. </h1>
// </p> <p className="text-gray-600 dark:text-gray-400">
// </div> The current phase is{" "}
// ); <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come
// } back during the Suggestion phase.
</p>
// return ( </div>
// <div className="max-w-md mx-auto mt-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"> );
// <h2 className="text-xl font-bold text-gray-800 dark:text-white mb-4"> }
// Submit Your Theme Suggestion
// </h2> return (
<div className="max-w-md mx-auto mt-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
// {/* Hide form if user has reached their limit */} <h2 className="text-xl font-bold text-gray-800 dark:text-white mb-4">
// {userSuggestions.length < themeLimit ? ( Submit Your Theme Suggestion
// <form onSubmit={handleSubmit} className="flex flex-col gap-4"> </h2>
// <textarea
// className="w-full p-3 border rounded-lg focus:outline-none text-gray-600 focus:ring focus:ring-blue-300 dark:bg-gray-700 dark:text-white" {/* Hide form if user has reached their limit */}
// placeholder="Enter your theme suggestion..." {userSuggestions.length < themeLimit ? (
// value={suggestion} <form onSubmit={handleSubmit} className="flex flex-col gap-4">
// onChange={(e) => { <textarea
// if (e.target.value.length <= 32) { className="w-full p-3 border rounded-lg focus:outline-none text-gray-600 focus:ring focus:ring-blue-300 dark:bg-gray-700 dark:text-white"
// setSuggestion(e.target.value); placeholder="Enter your theme suggestion..."
// } value={suggestion}
// }} onChange={(e) => {
// rows={1} if (e.target.value.length <= 32) {
// maxLength={32} setSuggestion(e.target.value);
// ></textarea> }
// {errorMessage && ( }}
// <p className="text-red-500 text-sm">{errorMessage}</p> rows={1}
// )} maxLength={32}
// {successMessage && ( ></textarea>
// <p className="text-green-500 text-sm">{successMessage}</p> {errorMessage && (
// )} <p className="text-red-500 text-sm">{errorMessage}</p>
// <button )}
// type="submit" {successMessage && (
// className={`w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 ${ <p className="text-green-500 text-sm">{successMessage}</p>
// loading ? "opacity-50 cursor-not-allowed" : "" )}
// }`} <button
// disabled={loading} type="submit"
// > className={`w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 ${
// {loading ? "Submitting..." : "Submit Suggestion"} loading ? "opacity-50 cursor-not-allowed" : ""
// </button> }`}
// </form> disabled={loading}
// ) : ( >
// <p className="text-yellow-500 text-sm"> {loading ? "Submitting..." : "Submit Suggestion"}
// You&apos;ve reached your theme suggestion limit for this jam! </button>
// </p> </form>
// )} ) : (
<p className="text-yellow-500 text-sm">
// {/* List of user's suggestions */} You&apos;ve reached your theme suggestion limit for this jam!
// <div className="mt-6"> </p>
// <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-4"> )}
// Your Suggestions
// </h3> {/* List of user's suggestions */}
// {userSuggestions.length > 0 ? ( <div className="mt-6">
// <ul className="space-y-4"> <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">
// {userSuggestions.map((suggestion) => ( Your Suggestions
// <li </h3>
// key={suggestion.id} {userSuggestions.length > 0 ? (
// className="flex justify-between items-center text-gray-400 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-sm" <ul className="space-y-4">
// > {userSuggestions.map((suggestion) => (
// <span>{suggestion.suggestion}</span> <li
// <button key={suggestion.id}
// onClick={() => handleDelete(suggestion.id)} className="flex justify-between items-center text-gray-400 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-sm"
// className="text-red-500 hover:text-red-700 font-semibold" >
// > <span>{suggestion.suggestion}</span>
// Delete <button
// </button> onClick={() => handleDelete(suggestion.id)}
// </li> className="text-red-500 hover:text-red-700 font-semibold"
// ))} >
// </ul> Delete
// ) : ( </button>
// <p className="text-gray-600 dark:text-gray-400"> </li>
// You haven&apos;t submitted any suggestions yet. ))}
// </p> </ul>
// )} ) : (
// </div> <p className="text-gray-600 dark:text-gray-400">
// </div> You haven&apos;t submitted any suggestions yet.
// ); </p>
return <></>; )}
</div>
</div>
);
} }

481
src/components/themes/theme-vote.tsx
View file

@ -1,245 +1,248 @@
"use client"; "use client";
// import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
// import { getCookie } from "@/helpers/cookie"; import { getCookie } from "@/helpers/cookie";
// import { import {
// getCurrentJam, getCurrentJam,
// hasJoinedCurrentJam, hasJoinedCurrentJam,
// ActiveJamResponse, ActiveJamResponse,
// } from "@/helpers/jam"; } from "@/helpers/jam";
import { ThemeType } from "@/types/ThemeType";
import { joinJam } from "@/helpers/jam";
interface VoteType {
themeSuggestionId: number;
votingScore: number;
}
export default function VotingPage() { export default function VotingPage() {
return <></>; const [themes, setThemes] = useState<ThemeType[]>([]);
// const [themes, setThemes] = useState([]); const [loading, setLoading] = useState(false);
// const [loading, setLoading] = useState(false); const [activeJamResponse, setActiveJamResponse] = useState<ActiveJamResponse | null>(null);
// const [activeJamResponse, setActiveJamResponse] = const [hasJoined, setHasJoined] = useState<boolean>(false);
// useState<ActiveJamResponse | null>(null); const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
// const [hasJoined, setHasJoined] = useState<boolean>(false); const token = getCookie("token");
// const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
// const token = getCookie("token");
// // Fetch the current jam phase using helpers/jam // Fetch the current jam phase using helpers/jam
// useEffect(() => { useEffect(() => {
// const fetchCurrentJamPhase = async () => { const fetchCurrentJamPhase = async () => {
// try { try {
// const activeJam = await getCurrentJam(); const activeJam = await getCurrentJam();
// setActiveJamResponse(activeJam); // Set active jam details setActiveJamResponse(activeJam); // Set active jam details
// } catch (error) { } catch (error) {
// console.error("Error fetching current jam:", error); console.error("Error fetching current jam:", error);
// } finally { } finally {
// setPhaseLoading(false); // Stop loading when phase is fetched setPhaseLoading(false); // Stop loading when phase is fetched
// } }
// }; };
// fetchCurrentJamPhase(); fetchCurrentJamPhase();
// }, []); }, []);
// // Fetch themes only when phase is "Voting" // Fetch themes only when phase is "Voting"
// useEffect(() => { useEffect(() => {
// // Fetch top N themes with voting scores // Fetch top N themes with voting scores
// async function fetchThemes() { async function fetchThemes() {
// if (!token || !activeJamResponse) return; if (!token || !activeJamResponse) return;
// try { try {
// const response = await fetch( const response = await fetch(
// process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
// ? "https://d2jam.com/api/v1/themes/top-themes" ? "https://d2jam.com/api/v1/themes/top-themes"
// : "http://localhost:3005/api/v1/themes/top-themes", : "http://localhost:3005/api/v1/themes/top-themes",
// { {
// headers: { Authorization: `Bearer ${token}` }, headers: { Authorization: `Bearer ${token}` },
// credentials: "include", credentials: "include",
// } }
// ); );
// if (response.ok) { if (response.ok) {
// const themes = await response.json(); const themes = await response.json();
// console.log("Fetched themes:", themes); // Debug log
// Fetch user's votes for these themes
// // Fetch user's votes for these themes const votesResponse = await fetch(
// const votesResponse = await fetch( process.env.NEXT_PUBLIC_MODE === "PROD"
// process.env.NEXT_PUBLIC_MODE === "PROD" ? "https://d2jam.com/api/v1/themes/votes"
// ? "https://d2jam.com/api/v1/themes/votes" : "http://localhost:3005/api/v1/themes/votes",
// : "http://localhost:3005/api/v1/themes/votes", {
// { headers: { Authorization: `Bearer ${token}` },
// headers: { Authorization: `Bearer ${token}` }, credentials: "include",
// credentials: "include", }
// } );
// );
if (votesResponse.ok) {
// if (votesResponse.ok) { const votes = await votesResponse.json();
// const votes = await votesResponse.json(); // Merge themes with user's votes
// console.log("Fetched votes:", votes); // Debug log const themesWithVotes = themes.map((theme: ThemeType) => {
const vote = votes.find((v: VoteType) => v.themeSuggestionId === theme.id);
// // Merge themes with user's votes return {
// const themesWithVotes = themes.map((theme) => { ...theme,
// const vote = votes.find((v) => v.themeSuggestionId === theme.id); votingScore: vote ? vote.votingScore : null,
// console.log(`Theme ${theme.id} vote:`, vote); // Debug log };
// return { });
// ...theme, setThemes(themesWithVotes);
// votingScore: vote ? vote.votingScore : null, }
// }; } else {
// }); console.error("Failed to fetch themes.");
}
// console.log("Themes with votes:", themesWithVotes); // Debug log } catch (error) {
// setThemes(themesWithVotes); console.error("Error fetching themes:", error);
// } }
// } else { }
// console.error("Failed to fetch themes.");
// } if (activeJamResponse?.phase === "Voting") {
// } catch (error) { fetchThemes();
// console.error("Error fetching themes:", error); }
// } }, [activeJamResponse, token]);
// }
// Handle voting
// if (activeJamResponse?.phase === "Voting") { const handleVote = async (themeId: number, votingScore: number) => {
// fetchThemes(); setLoading(true);
// } try {
// }, [activeJamResponse, token]); const response = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD"
// // Handle voting ? "https://d2jam.com/api/v1/themes/vote"
// const handleVote = async (themeId, votingScore) => { : "http://localhost:3005/api/v1/themes/vote",
// setLoading(true); {
// try { method: "POST",
// const response = await fetch( headers: {
// process.env.NEXT_PUBLIC_MODE === "PROD" "Content-Type": "application/json",
// ? "https://d2jam.com/api/v1/themes/vote" Authorization: `Bearer ${token}`,
// : "http://localhost:3005/api/v1/themes/vote", },
// { credentials: "include",
// method: "POST", body: JSON.stringify({ suggestionId: themeId, votingScore }),
// headers: { }
// "Content-Type": "application/json", );
// Authorization: `Bearer ${token}`,
// }, if (response.ok) {
// credentials: "include", // Just update the local state instead of re-fetching all themes
// body: JSON.stringify({ suggestionId: themeId, votingScore }), setThemes((prevThemes) =>
// } prevThemes.map((theme) =>
// ); theme.id === themeId ? { ...theme, votingScore } : theme
)
// if (response.ok) { );
// // Just update the local state instead of re-fetching all themes } else {
// setThemes((prevThemes) => console.error("Failed to submit vote.");
// prevThemes.map((theme) => }
// theme.id === themeId ? { ...theme, votingScore } : theme } catch (error) {
// ) console.error("Error submitting vote:", error);
// ); } finally {
// } else { setLoading(false);
// console.error("Failed to submit vote."); }
// } };
// } catch (error) {
// console.error("Error submitting vote:", error); useEffect(() => {
// } finally { const init = async () => {
// setLoading(false); const joined = await hasJoinedCurrentJam();
// } setHasJoined(joined);
// }; setLoading(false);
};
// useEffect(() => {
// const init = async () => { init();
// const joined = await hasJoinedCurrentJam(); }, []);
// setHasJoined(joined);
// setLoading(false); if (phaseLoading || loading) {
// }; return <div>Loading...</div>;
}
// init();
// }, []); if (activeJamResponse?.phase !== "Voting") {
return (
// if (phaseLoading || loading) { <div className="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen">
// return <div>Loading...</div>; <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
// } Not in Voting Phase
</h1>
// if (!hasJoined) { <p className="text-gray-600 dark:text-gray-400">
// return ( The current phase is{" "}
// <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen"> <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come
// <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6"> back during the Voting phase.
// Join the Jam First </p>
// </h1> </div>
// <p className="text-gray-600 dark:text-gray-400"> );
// You need to join the current jam before you can vote themes. }
// </p>
// <button const loggedIn = getCookie("token");
// onClick={() => joinJam(activeJamResponse?.jam?.id)}
// className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600" if (!loggedIn) {
// > return <div>Sign in to be able to vote</div>;
// Join Jam }
// </button>
// </div> if (!hasJoined) {
// ); return (
// } <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
<h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
// if (activeJamResponse?.phase !== "Voting") { Join the Jam First
// return ( </h1>
// <div className="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen"> <p className="text-gray-600 dark:text-gray-400">
// <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4"> You need to join the current jam before you can vote themes.
// Not in Voting Phase </p>
// </h1> <button
// <p className="text-gray-600 dark:text-gray-400"> onClick={() => {
// The current phase is{" "} if (activeJamResponse?.jam?.id !== undefined) {
// <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come joinJam(activeJamResponse.jam.id);
// back during the Voting phase. }
// </p> }}
// </div> className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
// ); >
// } Join Jam
</button>
// const loggedIn = getCookie("token"); </div>
);
// if (!loggedIn) { }
// return <div>Sign in to be able to vote</div>;
// } return (
<div className="p-3 bg-gray-100 dark:bg-gray-800 min-h-screen">
// return ( <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
// <div className="p-3 bg-gray-100 dark:bg-gray-800 min-h-screen"> Voting Phase
// <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4"> </h1>
// Voting Phase <div className="space-y-2">
// </h1> {themes.map((theme) => (
// <div className="space-y-2"> <div
// {themes.map((theme) => ( key={theme.id}
// <div className="p-3 bg-white dark:bg-gray-900 rounded-lg shadow-md flex items-center"
// key={theme.id} >
// className="p-3 bg-white dark:bg-gray-900 rounded-lg shadow-md flex items-center" {/* Voting Buttons */}
// > <div className="flex gap-1 mr-4">
// {/* Voting Buttons */} <button
// <div className="flex gap-1 mr-4"> onClick={() => handleVote(theme.id, -1)}
// <button className={`px-3 py-2 rounded-lg ${
// onClick={() => handleVote(theme.id, -1)} theme.votingScore === -1
// className={`px-3 py-2 rounded-lg ${ ? "bg-red-500 text-white"
// theme.votingScore === -1 : "bg-gray-300 text-black hover:bg-red-500 hover:text-white"
// ? "bg-red-500 text-white" }`}
// : "bg-gray-300 text-black hover:bg-red-500 hover:text-white" disabled={loading}
// }`} >
// disabled={loading} -1
// > </button>
// -1 <button
// </button> onClick={() => handleVote(theme.id, 0)}
// <button className={`px-3 py-2 rounded-lg ${
// onClick={() => handleVote(theme.id, 0)} theme.votingScore === 0
// className={`px-3 py-2 rounded-lg ${ ? "bg-gray-500 text-white"
// theme.votingScore === 0 : "bg-gray-300 text-black hover:bg-gray-500 hover:text-white"
// ? "bg-gray-500 text-white" }`}
// : "bg-gray-300 text-black hover:bg-gray-500 hover:text-white" disabled={loading}
// }`} >
// disabled={loading} 0
// > </button>
// 0 <button
// </button> onClick={() => handleVote(theme.id, +1)}
// <button className={`px-3 py-2 rounded-lg ${
// onClick={() => handleVote(theme.id, +1)} theme.votingScore === +1
// className={`px-3 py-2 rounded-lg ${ ? "bg-green-500 text-white"
// theme.votingScore === +1 : "bg-gray-300 text-black hover:bg-green-500 hover:text-white"
// ? "bg-green-500 text-white" }`}
// : "bg-gray-300 text-black hover:bg-green-500 hover:text-white" disabled={loading}
// }`} >
// disabled={loading} +1
// > </button>
// +1 </div>
// </button>
// </div> {/* Theme Suggestion */}
<div className="text-gray-800 dark:text-white">
// {/* Theme Suggestion */} {theme.suggestion}
// <div className="text-gray-800 dark:text-white"> </div>
// {theme.suggestion} </div>
// </div> ))}
// </div> </div>
// ))} </div>
// </div> );
// </div>
// );
} }

4
src/helpers/jam.ts
View file

@ -74,8 +74,8 @@ export async function hasJoinedCurrentJam(): Promise<boolean> {
try { try {
const response = await fetch( const response = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
? "https://d2jam.com/api/v1/participation" ? "https://d2jam.com/api/v1/jams/participation"
: "http://localhost:3005/api/v1/participation", : "http://localhost:3005/api/v1/jams/participation",
{ {
credentials: "include", credentials: "include",
headers: { headers: {

1
src/types/JamType.ts
View file

@ -9,4 +9,5 @@ export interface JamType {
startTime: Date; startTime: Date;
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
themePerUser: number;
} }

6
src/types/ThemeType.ts Normal file
View file

@ -0,0 +1,6 @@
export interface ThemeType {
id: number;
suggestion: string;
slaughterScore: number;
votingScore: number;
}