mirror of
https://github.com/Ategon/Jamjar.git
synced 2025-02-12 06:16:21 +00:00
game creation page
theme suggestion
This commit is contained in:
parent
3ca54b39a1
commit
0cb2a40eba
13 changed files with 808 additions and 357 deletions
|
|
@ -1,28 +1,41 @@
|
|||
"use client";
|
||||
|
||||
import Editor from "@/components/editor";
|
||||
import { getCookie, hasCookie } from "@/helpers/cookie";
|
||||
import { getCookie } 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 ReactSelect, { MultiValue, StylesConfig } from "react-select";
|
||||
import { Select, SelectItem } from "@nextui-org/react";
|
||||
import { useTheme } from "next-themes";
|
||||
import Timers from "@/components/timers";
|
||||
import Streams from "@/components/streams";
|
||||
import { UserType } from "@/types/UserType";
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { GameType } from "@/types/GameType";
|
||||
import { PlatformType, DownloadLinkType } from "@/types/DownloadLinkType";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default function CreateGamePage() {
|
||||
const router = useRouter();
|
||||
|
||||
const [title, setTitle] = useState("");
|
||||
const [content, setContent] = useState("");
|
||||
const [errors, setErrors] = useState({});
|
||||
const [waitingPost, setWaitingPost] = useState(false);
|
||||
const [editGame, setEditGame] = 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<
|
||||
{
|
||||
|
|
@ -33,40 +46,59 @@ export default function CreateGamePage() {
|
|||
}[]
|
||||
>();
|
||||
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 }>>([]);
|
||||
const [gameSlug, setGameSlug] = useState("");
|
||||
const [prevSlug, setPrevGameSlug] = useState("");
|
||||
const [game, setGame] = useState<GameType>();
|
||||
const [thumbnailUrl, setThumbnailUrl] = useState("");
|
||||
const [authorSearch, setAuthorSearch] = useState("");
|
||||
const [selectedAuthors, setSelectedAuthors] = useState<Array<UserType>>([]);
|
||||
const [searchResults, setSearchResults] = useState<Array<UserType>>([]);
|
||||
const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
|
||||
const [user, setUser] = useState<UserType>();
|
||||
const [downloadLinks, setDownloadLinks] = useState<DownloadLinkType[]>([]);
|
||||
const [editorKey, setEditorKey] = useState(0);
|
||||
const [isMobile, setIsMobile] = useState<boolean>(false);
|
||||
const urlRegex = /^(https?:\/\/)/;
|
||||
|
||||
// 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",
|
||||
const sanitizeSlug = (value: string): string => {
|
||||
return value
|
||||
.toLowerCase() // Convert to lowercase
|
||||
.replace(/\s+/g, '-') // Replace whitespace with hyphens
|
||||
.replace(/[^a-z0-9-]/g, '') // Only allow lowercase letters, numbers, and hyphens
|
||||
.substring(0, 50); // Limit length to 50 characters
|
||||
};
|
||||
|
||||
const handleAuthorSearch = async (query: string) => {
|
||||
if (query.length < 3) return;
|
||||
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
? `https://d2jam.com/api/v1/user/search?q=${query}`
|
||||
: `http://localhost:3005/api/v1/user/search?q=${query}`,
|
||||
{
|
||||
headers: { authorization: `Bearer ${getCookie("token")}` },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setSearchResults(data);
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setSearchResults(data);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
||||
|
||||
const load = async () => {
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
|
|
@ -77,9 +109,10 @@ const handleAuthorSearch = async (query: string) => {
|
|||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
const user = await response.json();
|
||||
|
||||
const localuser = await response.json();
|
||||
setUser(localuser);
|
||||
|
||||
/*
|
||||
const tagResponse = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
? `https://d2jam.com/api/v1/tags`
|
||||
|
|
@ -95,7 +128,7 @@ const handleAuthorSearch = async (query: string) => {
|
|||
}[] = [];
|
||||
|
||||
for (const tag of await tagResponse.json()) {
|
||||
if (tag.modOnly && !user.mod) {
|
||||
if (tag.modOnly && localuser && !localuser.mod) {
|
||||
continue;
|
||||
}
|
||||
newoptions.push({
|
||||
|
|
@ -124,9 +157,69 @@ const handleAuthorSearch = async (query: string) => {
|
|||
setOptions(newoptions);
|
||||
setSelectedTags(newoptions.filter((tag) => tag.isFixed));
|
||||
}
|
||||
*/
|
||||
};
|
||||
load();
|
||||
}, []);
|
||||
},[]);
|
||||
|
||||
useEffect(() => {
|
||||
const checkExistingGame = async () => {
|
||||
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
? `https://d2jam.com/api/v1/self/current-game?username=${getCookie("user")}`
|
||||
: `http://localhost:3005/api/v1/self/current-game?username=${getCookie("user")}`,
|
||||
{
|
||||
headers: { authorization: `Bearer ${getCookie("token")}` },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
console.log("say");
|
||||
if (response.ok) {
|
||||
const gameData = await response.json();
|
||||
if (gameData) {
|
||||
setEditGame(true);
|
||||
setTitle(gameData.name);
|
||||
setGameSlug(gameData.slug);
|
||||
setPrevGameSlug(gameData.slug);
|
||||
setContent(gameData.description);
|
||||
setEditorKey((prev) => prev + 1);
|
||||
setThumbnailUrl(gameData.thumbnail);
|
||||
setDownloadLinks(gameData.downloadLinks);
|
||||
setGame(gameData);
|
||||
const uniqueAuthors = [gameData.author, ...gameData.contributors]
|
||||
.filter((author, index, self) =>
|
||||
index === self.findIndex((a) => a.id === author.id)
|
||||
);
|
||||
setSelectedAuthors(uniqueAuthors);
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
setSelectedAuthors(user ? [user] : []);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
setEditGame(false);
|
||||
setTitle("");
|
||||
setGameSlug("");
|
||||
setContent("");
|
||||
setEditorKey((prev) => prev + 1);
|
||||
setThumbnailUrl("");
|
||||
setDownloadLinks([]);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
if (mounted && user) {
|
||||
checkExistingGame();
|
||||
}
|
||||
|
||||
},[user,mounted]);
|
||||
|
||||
|
||||
|
||||
const styles: StylesConfig<
|
||||
{
|
||||
|
|
@ -191,69 +284,64 @@ const handleAuthorSearch = async (query: string) => {
|
|||
|
||||
return (
|
||||
<div className="static flex items-top mt-20 justify-center top-0 left-0">
|
||||
<Form
|
||||
className="w-full max-w-2xl flex flex-col gap-4"
|
||||
validationErrors={errors}
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
<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 && !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 (!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 (!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 userSlug = getCookie("user"); // Retrieve user slug from cookies
|
||||
if (!userSlug) {
|
||||
toast.error("You are not logged in.");
|
||||
return;
|
||||
}
|
||||
|
||||
const sanitizedHtml = sanitizeHtml(content);
|
||||
setWaitingPost(true);
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
try {
|
||||
const requestMethod = editGame ? "PUT" : "POST";
|
||||
const endpoint = editGame ? `/games/${prevSlug}` : "/games/create";
|
||||
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
? "https://d2jam.com/api/v1/post"
|
||||
: "http://localhost:3005/api/v1/post",
|
||||
? `https://d2jam.com/api/v1${endpoint}`
|
||||
: `http://localhost:3005/api/v1${endpoint}`,
|
||||
{
|
||||
body: JSON.stringify({
|
||||
title: title,
|
||||
content: sanitizedHtml,
|
||||
username: getCookie("user"),
|
||||
tags,
|
||||
gameSlug,
|
||||
thumbnailUrl,
|
||||
windowsLink,
|
||||
linuxLink,
|
||||
macLink,
|
||||
webGLLink,
|
||||
authors: selectedAuthors.map(author => author.id)
|
||||
name: title,
|
||||
slug: gameSlug,
|
||||
description: sanitizedHtml,
|
||||
thumbnail: thumbnailUrl,
|
||||
downloadLinks: downloadLinks.map((link) => ({
|
||||
url: link.url,
|
||||
platform: link.platform,
|
||||
})),
|
||||
userSlug,
|
||||
contributors: selectedAuthors.map((author) => author.id),
|
||||
}),
|
||||
method: "POST",
|
||||
method: requestMethod,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
authorization: `Bearer ${getCookie("token")}`,
|
||||
|
|
@ -262,41 +350,59 @@ const handleAuthorSearch = async (query: string) => {
|
|||
}
|
||||
);
|
||||
|
||||
if (response.status == 401) {
|
||||
if (response.status === 401) {
|
||||
setErrors({ content: "Invalid user" });
|
||||
setWaitingPost(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Successfully created post");
|
||||
toast.success(gameSlug ? "Game updated successfully!" : "Game created successfully!");
|
||||
setWaitingPost(false);
|
||||
redirect("/");
|
||||
router.push(`/games/${gameSlug || sanitizeSlug(title)}`);
|
||||
} else {
|
||||
toast.error("An error occured");
|
||||
const error = await response.text();
|
||||
toast.error(error || "Failed to create game");
|
||||
setWaitingPost(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating game:", error);
|
||||
toast.error("Failed to create game.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-4 flex">
|
||||
{gameSlug ? "Edit Game" : "Create New Game"}
|
||||
</h1>
|
||||
</div>
|
||||
<Input
|
||||
isRequired
|
||||
label="Game Name"
|
||||
labelPlacement="outside"
|
||||
name="title"
|
||||
placeholder="Enter your game name"
|
||||
type="text"
|
||||
value={title}
|
||||
onValueChange={(value) => {
|
||||
setTitle(value);
|
||||
if (!isSlugManuallyEdited) {
|
||||
setGameSlug(sanitizeSlug(value));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<Input
|
||||
label="Game Slug"
|
||||
labelPlacement="outside"
|
||||
placeholder="your-game-name"
|
||||
value={gameSlug}
|
||||
onValueChange={(value) => {
|
||||
setGameSlug(sanitizeSlug(value));
|
||||
setIsSlugManuallyEdited(true);
|
||||
}}
|
||||
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>
|
||||
|
|
@ -315,7 +421,9 @@ const handleAuthorSearch = async (query: string) => {
|
|||
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]);
|
||||
if (!selectedAuthors.some(a => a.id === user.id)) {
|
||||
setSelectedAuthors([...selectedAuthors, user]);
|
||||
}
|
||||
setSearchResults([]);
|
||||
setAuthorSearch("");
|
||||
}}
|
||||
|
|
@ -326,121 +434,155 @@ const handleAuthorSearch = async (query: string) => {
|
|||
</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"
|
||||
{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>
|
||||
{((game && author.id !== game.authorId) || (!game && author.id !== user?.id)) && (
|
||||
<button
|
||||
onClick={() => setSelectedAuthors(selectedAuthors.filter(a => a.id !== author.id))}
|
||||
className="text-sm hover:text-red-500"
|
||||
>
|
||||
<span>{author.name}</span>
|
||||
<button
|
||||
onClick={() => setSelectedAuthors(selectedAuthors.filter(a => a.id !== author.id))}
|
||||
className="text-sm hover:text-red-500"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
×
|
||||
</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
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<Editor key={editorKey} content={content} setContent={setContent} gameEditor />
|
||||
|
||||
<Spacer />
|
||||
|
||||
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
|
||||
<Input
|
||||
label="Thumbnail URL"
|
||||
labelPlacement="outside"
|
||||
placeholder="https://example.com/thumbnail.png"
|
||||
value={thumbnailUrl}
|
||||
onValueChange={setThumbnailUrl}
|
||||
/>
|
||||
<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="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
{Array.isArray(downloadLinks) &&
|
||||
downloadLinks.map((link, index) => (
|
||||
<div key={link.id} className="flex gap-2">
|
||||
<Input
|
||||
className="flex-grow"
|
||||
placeholder="https://example.com/download"
|
||||
value={link.url}
|
||||
onValueChange={(value) => {
|
||||
const newLinks = [...downloadLinks];
|
||||
newLinks[index].url = value;
|
||||
setDownloadLinks(newLinks);
|
||||
}}
|
||||
onBlur={() => {
|
||||
if (!urlRegex.test(downloadLinks[index].url)) {
|
||||
toast.error("Please enter a valid URL starting with http:// or https://");
|
||||
|
||||
if (!downloadLinks[index].url.startsWith("http://") && !downloadLinks[index].url.startsWith("https://")) {
|
||||
const newUrl = "https://" + downloadLinks[index].url;
|
||||
const newLinks = [...downloadLinks];
|
||||
newLinks[index].url = newUrl;
|
||||
setDownloadLinks(newLinks);
|
||||
const input = document.querySelector<HTMLInputElement>(
|
||||
`#download-link-${index}`
|
||||
);
|
||||
if (input) {
|
||||
input.value = newUrl;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Select
|
||||
className="w-96"
|
||||
defaultSelectedKeys={["Windows"]}
|
||||
aria-label="Select platform" // Add this to fix accessibility warning
|
||||
onSelectionChange={(value) => {
|
||||
const newLinks = [...downloadLinks];
|
||||
newLinks[index].platform = value as unknown as PlatformType;
|
||||
setDownloadLinks(newLinks);
|
||||
}}
|
||||
>
|
||||
<SelectItem key="Windows" value="Windows">
|
||||
Windows
|
||||
</SelectItem>
|
||||
<SelectItem key="MacOS" value="MacOS">
|
||||
MacOS
|
||||
</SelectItem>
|
||||
<SelectItem key="Linux" value="Linux">
|
||||
Linux
|
||||
</SelectItem>
|
||||
<SelectItem key="Web" value="Web">
|
||||
Web
|
||||
</SelectItem>
|
||||
<SelectItem key="Mobile" value="Mobile">
|
||||
Mobile
|
||||
</SelectItem>
|
||||
<SelectItem key="Other" value="Other">
|
||||
Other
|
||||
</SelectItem>
|
||||
</Select>
|
||||
<Button
|
||||
color="danger"
|
||||
variant="light"
|
||||
onPress={() => {
|
||||
setDownloadLinks(downloadLinks.filter((l) => l.id !== link.id));
|
||||
}}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
|
||||
<Button
|
||||
color="primary"
|
||||
variant="solid"
|
||||
onPress={() => {
|
||||
setDownloadLinks([
|
||||
...downloadLinks,
|
||||
{
|
||||
id: Date.now(),
|
||||
url: "",
|
||||
platform: "Windows",
|
||||
},
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Add Download Link
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button color="primary" type="submit">
|
||||
{waitingPost ? (
|
||||
<LoaderCircle className="animate-spin" size={16} />
|
||||
) : (
|
||||
<p>{editGame ? "Update" : "Create"}</p>
|
||||
)}
|
||||
</Button>
|
||||
</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">
|
||||
{!isMobile && (
|
||||
<div className="flex flex-col gap-4 px-8 items-end">
|
||||
<Timers />
|
||||
<Streams />
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ export default function CreatePostPage() {
|
|||
const { theme } = useTheme();
|
||||
const [user, setUser] = useState<UserType>();
|
||||
const [sticky, setSticky] = useState(false);
|
||||
const [isMobile, setIsMobile] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
|
|
@ -108,6 +109,16 @@ export default function CreatePostPage() {
|
|||
load();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsMobile(window.innerWidth <= 768);
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
|
||||
const styles: StylesConfig<
|
||||
{
|
||||
value: string;
|
||||
|
|
@ -307,10 +318,12 @@ export default function CreatePostPage() {
|
|||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
<div className="flex flex-col gap-4 px-8 items-end">
|
||||
{!isMobile && (
|
||||
<div className="flex flex-col gap-4 px-8 items-end">
|
||||
<Timers />
|
||||
<Streams />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
163
src/app/games/[gameSlug]/page.tsx
Normal file
163
src/app/games/[gameSlug]/page.tsx
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
"use client";
|
||||
|
||||
import { use } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getCookie } from '@/helpers/cookie';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@nextui-org/react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { GameType } from '@/types/GameType';
|
||||
import { UserType } from '@/types/UserType';
|
||||
import { DownloadLinkType } from '@/types/DownloadLinkType';
|
||||
|
||||
export default function GamePage({ params }: { params: Promise<{ gameSlug: string }> }) {
|
||||
const resolvedParams = use(params);
|
||||
const gameSlug = resolvedParams.gameSlug;
|
||||
const [game, setGame] = useState<GameType | null>(null);
|
||||
const [user, setUser] = useState<UserType | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const fetchGameAndUser = async () => {
|
||||
// Fetch the game data
|
||||
const gameResponse = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
? `https://d2jam.com/api/v1/games/${gameSlug}`
|
||||
: `http://localhost:3005/api/v1/games/${gameSlug}`,
|
||||
{
|
||||
headers: { authorization: `Bearer ${getCookie("token")}` },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (gameResponse.ok) {
|
||||
const gameData = await gameResponse.json();
|
||||
|
||||
const filteredContributors = gameData.contributors.filter(
|
||||
(contributor: UserType) => contributor.id !== gameData.author.id
|
||||
);
|
||||
|
||||
const updatedGameData = {
|
||||
...gameData,
|
||||
contributors: filteredContributors,
|
||||
};
|
||||
|
||||
setGame(updatedGameData);
|
||||
}
|
||||
|
||||
// Fetch the logged-in user data
|
||||
if (getCookie("token")) {
|
||||
const userResponse = 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",
|
||||
}
|
||||
);
|
||||
|
||||
if (userResponse.ok) {
|
||||
const userData = await userResponse.json();
|
||||
setUser(userData);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchGameAndUser();
|
||||
}, [gameSlug]);
|
||||
|
||||
if (!game) return <div>Loading...</div>;
|
||||
|
||||
// Check if the logged-in user is the creator or a contributor
|
||||
const isEditable =
|
||||
user &&
|
||||
(user.id === game.author.id ||
|
||||
game.contributors.some((contributor: UserType) => contributor.id === user.id));
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 py-8">
|
||||
{/* Game Name and Edit Button */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-4xl font-bold">{game.name}</h1>
|
||||
{isEditable && (
|
||||
<Button
|
||||
color="primary"
|
||||
variant="solid"
|
||||
onPress={() => router.push(`/create-game`)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Authors */}
|
||||
<div className="mb-8">
|
||||
<p className="text-gray-600">
|
||||
Created by{' '}
|
||||
<Link href={`/users/${game.author.slug}`} className="text-blue-500 hover:underline">
|
||||
{game.author.name}
|
||||
</Link>
|
||||
{game.contributors.length > 0 && (
|
||||
<>
|
||||
{' '}with{' '}
|
||||
{game.contributors.map((contributor: UserType, index: number) => (
|
||||
<span key={contributor.id}>
|
||||
<Link href={`/users/${contributor.slug}`} className="text-blue-500 hover:underline">
|
||||
{contributor.name}
|
||||
</Link>
|
||||
{index < game.contributors.length - 1 ? ', ' : ''}
|
||||
</span>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">About</h2>
|
||||
<div className="prose-neutral prose-lg" dangerouslySetInnerHTML={{ __html: game.description ?? '' }} />
|
||||
</div>
|
||||
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-semibold mb-4">Downloads</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{game.downloadLinks.map((link: DownloadLinkType) => (
|
||||
<Button
|
||||
key={link.id}
|
||||
as="a"
|
||||
href={link.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full"
|
||||
color="primary"
|
||||
variant="bordered"
|
||||
>
|
||||
Download for {link.platform}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Game Metrics */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg text-center">
|
||||
<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-gray-100 dark:bg-gray-800 p-4 rounded-lg text-center">
|
||||
<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-gray-100 dark:bg-gray-800 p-4 rounded-lg text-center">
|
||||
<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-gray-100 dark:bg-gray-800 p-4 rounded-lg text-center">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Comments</p>
|
||||
<p className="text-2xl font-bold">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -14,9 +14,9 @@ export default function JamHeader() {
|
|||
const fetchData = async () => {
|
||||
const jamData = await getCurrentJam();
|
||||
setActiveJamResponse(jamData);
|
||||
|
||||
console.log(jamData);
|
||||
// If we're in Jamming phase, fetch top themes and pick the first one
|
||||
if (jamData?.phase === "Jamming" && jamData.jam) {
|
||||
if ((jamData?.phase === "Jamming" || jamData?.phase === "Rating") && jamData.jam) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
|
|
|
|||
|
|
@ -17,57 +17,60 @@ import { getCurrentJam } from "@/helpers/jam";
|
|||
import { JamType } from "@/types/JamType";
|
||||
import { UserType } from "@/types/UserType";
|
||||
import MobileNavbarUser from "./MobileNavbarUser";
|
||||
import ThemeToggle from "../theme-toggle";
|
||||
|
||||
|
||||
export default function MobileNavbar() {
|
||||
const pathname = usePathname();
|
||||
const [jam, setJam] = useState<JamType | null>();
|
||||
const [isInJam, setIsInJam] = useState<boolean>();
|
||||
|
||||
const [user, setUser] = useState<UserType>();
|
||||
|
||||
useEffect(() => {
|
||||
loadUser();
|
||||
async function loadUser() {
|
||||
const currentJamResponse = await getCurrentJam();
|
||||
const currentJam = currentJamResponse?.jam;
|
||||
setJam(currentJam);
|
||||
|
||||
if (!hasCookie("token")) {
|
||||
setUser(undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
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",
|
||||
loadUser();
|
||||
async function loadUser() {
|
||||
const jamResponse = await getCurrentJam();
|
||||
const currentJam = jamResponse?.jam;
|
||||
setJam(currentJam);
|
||||
|
||||
if (!hasCookie("token")) {
|
||||
setUser(undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
|
||||
if (
|
||||
currentJam &&
|
||||
user.jams.filter((jam: JamType) => jam.id == currentJam.id).length > 0
|
||||
) {
|
||||
setIsInJam(true);
|
||||
} else {
|
||||
setIsInJam(false);
|
||||
}
|
||||
|
||||
if (response.status == 200) {
|
||||
setUser(user);
|
||||
} else {
|
||||
setUser(undefined);
|
||||
}
|
||||
);
|
||||
|
||||
const user = await response.json();
|
||||
|
||||
if (
|
||||
currentJam &&
|
||||
user.jams.filter((jam: JamType) => jam.id == currentJam.id).length > 0
|
||||
) {
|
||||
setIsInJam(true);
|
||||
} else {
|
||||
setIsInJam(false);
|
||||
}
|
||||
|
||||
if (response.status == 200) {
|
||||
setUser(user);
|
||||
} else {
|
||||
setUser(undefined);
|
||||
}
|
||||
}
|
||||
}, [pathname]);
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<NavbarBase maxWidth="2xl" className="bg-[#222] p-1" isBordered height={80}>
|
||||
{/* Left side navbar items */}
|
||||
<NavbarContent justify="start" className="gap-10">
|
||||
<NavbarBrand className="flex-grow-0">
|
||||
<Link
|
||||
|
|
@ -85,9 +88,9 @@ export default function MobileNavbar() {
|
|||
</Link>
|
||||
</NavbarBrand>
|
||||
</NavbarContent>
|
||||
|
||||
{/* Right side navbar items */}
|
||||
|
||||
<NavbarContent justify="end" className="gap-4">
|
||||
<ThemeToggle />
|
||||
{!user && (
|
||||
<NavbarButtonLink icon={<LogInIcon />} name="Log In" href="/login" />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Dropdown,
|
||||
|
|
@ -7,9 +9,9 @@ import {
|
|||
NavbarItem,
|
||||
} from "@nextui-org/react";
|
||||
import { UserType } from "@/types/UserType";
|
||||
import { getCurrentJam, joinJam } from "@/helpers/jam";
|
||||
import { JamType } from "@/types/JamType";
|
||||
import { Dispatch, SetStateAction } from "react";
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
import { getCurrentJam, joinJam } from "@/helpers/jam";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
interface NavbarUserProps {
|
||||
|
|
@ -19,12 +21,27 @@ interface NavbarUserProps {
|
|||
isInJam?: boolean;
|
||||
}
|
||||
|
||||
export default async function MobileNavbarUser({
|
||||
export default function MobileNavbarUser({
|
||||
user,
|
||||
jam,
|
||||
setIsInJam,
|
||||
isInJam,
|
||||
}: NavbarUserProps) {
|
||||
const [currentJam, setCurrentJam] = useState<JamType | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchCurrentJam = async () => {
|
||||
try {
|
||||
const response = await getCurrentJam();
|
||||
setCurrentJam(response?.jam || null);
|
||||
} catch (error) {
|
||||
console.error("Error fetching current jam:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCurrentJam();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<NavbarItem>
|
||||
<Dropdown>
|
||||
|
|
@ -38,7 +55,7 @@ export default async function MobileNavbarUser({
|
|||
/>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu>
|
||||
{jam && (await getCurrentJam())?.jam && isInJam ? (
|
||||
{jam && currentJam && isInJam ? (
|
||||
<DropdownItem
|
||||
key="create-game"
|
||||
href="/create-game"
|
||||
|
|
@ -47,20 +64,18 @@ export default async function MobileNavbarUser({
|
|||
Create Game
|
||||
</DropdownItem>
|
||||
) : null}
|
||||
{jam && (await getCurrentJam())?.jam && !isInJam ? (
|
||||
{jam && currentJam && !isInJam ? (
|
||||
<DropdownItem
|
||||
key="join-event"
|
||||
className="text-black"
|
||||
onPress={async () => {
|
||||
try {
|
||||
const currentJam = await getCurrentJam();
|
||||
|
||||
if (!currentJam || !currentJam.jam) {
|
||||
if (!currentJam) {
|
||||
toast.error("There is no jam to join");
|
||||
return;
|
||||
}
|
||||
|
||||
if (await joinJam(currentJam.jam.id)) {
|
||||
if (await joinJam(currentJam.id)) {
|
||||
setIsInJam(true);
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -105,4 +120,4 @@ export default async function MobileNavbarUser({
|
|||
</Dropdown>
|
||||
</NavbarItem>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -26,6 +26,7 @@ import { usePathname } from "next/navigation";
|
|||
import { getCookie, hasCookie } from "@/helpers/cookie";
|
||||
import { getCurrentJam, joinJam } from "@/helpers/jam";
|
||||
import { JamType } from "@/types/JamType";
|
||||
import { GameType } from "@/types/GameType";
|
||||
import { UserType } from "@/types/UserType";
|
||||
import NavbarUser from "./PCNavbarUser";
|
||||
import NavbarButtonAction from "./NavbarButtonAction";
|
||||
|
|
@ -39,6 +40,7 @@ export default function PCNavbar() {
|
|||
const [isInJam, setIsInJam] = useState<boolean>();
|
||||
const [user, setUser] = useState<UserType>();
|
||||
const [reduceMotion, setReduceMotion] = useState<boolean>(false);
|
||||
const [hasGame, setHasGame] = useState<GameType | null>();
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
|
|
@ -60,12 +62,12 @@ export default function PCNavbar() {
|
|||
const jamResponse = await getCurrentJam();
|
||||
const currentJam = jamResponse?.jam;
|
||||
setJam(currentJam);
|
||||
|
||||
|
||||
if (!hasCookie("token")) {
|
||||
setUser(undefined);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
? `https://d2jam.com/api/v1/self?username=${getCookie("user")}`
|
||||
|
|
@ -75,9 +77,41 @@ export default function PCNavbar() {
|
|||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
const user = await response.json();
|
||||
|
||||
|
||||
// Check if user has a game in current jam
|
||||
const gameResponse = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
? `https://d2jam.com/api/v1/self/current-game?username=${getCookie("user")}`
|
||||
: `http://localhost:3005/api/v1/self/current-game?username=${getCookie("user")}`,
|
||||
{
|
||||
headers: { authorization: `Bearer ${getCookie("token")}` },
|
||||
credentials: "include",
|
||||
}
|
||||
);
|
||||
|
||||
if (gameResponse.ok) {
|
||||
const gameData = await gameResponse.json();
|
||||
console.log("Game Data:", gameData); // Log game data
|
||||
console.log("User Data:", user); // Log user data
|
||||
|
||||
if (gameData) {
|
||||
// Check if the logged-in user is either the creator or a contributor
|
||||
const isContributor =
|
||||
gameData.author?.id === user.id || // Check if logged-in user is the author
|
||||
gameData.contributors?.some((contributor: UserType) => contributor.id === user.id); // Check if logged-in user is a contributor
|
||||
|
||||
console.log("Is Contributor:", isContributor); // Log whether the user is a contributor
|
||||
|
||||
if (isContributor) {
|
||||
setHasGame(gameData); // Set the game data for "My Game"
|
||||
} else {
|
||||
setHasGame(null); // No game associated with this user
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
currentJam &&
|
||||
user.jams.filter((jam: JamType) => jam.id == currentJam.id).length > 0
|
||||
|
|
@ -86,7 +120,7 @@ export default function PCNavbar() {
|
|||
} else {
|
||||
setIsInJam(false);
|
||||
}
|
||||
|
||||
|
||||
if (response.status == 200) {
|
||||
setUser(user);
|
||||
} else {
|
||||
|
|
@ -94,6 +128,7 @@ export default function PCNavbar() {
|
|||
}
|
||||
}
|
||||
}, [pathname]);
|
||||
|
||||
|
||||
return (
|
||||
<NavbarBase
|
||||
|
|
@ -126,15 +161,15 @@ export default function PCNavbar() {
|
|||
<NavbarLink href="/games" name="Games" />
|
||||
</NavbarContent>
|
||||
|
||||
{/* Right side navbar items */}
|
||||
|
||||
<NavbarContent justify="end" className="gap-4">
|
||||
<NavbarSearchbar />
|
||||
{user && <Divider orientation="vertical" className="h-1/2" />}
|
||||
{user && jam && isInJam && (
|
||||
<NavbarButtonLink
|
||||
icon={<Gamepad2 />}
|
||||
name="Create Game"
|
||||
href="/create-game"
|
||||
name={hasGame ? "My Game" : "Create Game"}
|
||||
href={hasGame ? "/games/"+hasGame.slug : "/create-game"}
|
||||
/>
|
||||
)}
|
||||
{user && jam && !isInJam && (
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export default function ThemeSlaughter() {
|
|||
null
|
||||
);
|
||||
const [phaseLoading, setPhaseLoading] = useState(true);
|
||||
const [themeLoading, setThemeLoading] = useState<{ [key: number]: boolean }>({});
|
||||
|
||||
// Fetch token on the client side
|
||||
useEffect(() => {
|
||||
|
|
@ -108,8 +109,10 @@ export default function ThemeSlaughter() {
|
|||
// Handle voting
|
||||
const handleVote = async (voteType: string) => {
|
||||
if (!randomTheme) return;
|
||||
|
||||
setLoading(true);
|
||||
|
||||
// Set loading for the current random theme
|
||||
setThemeLoading((prev) => ({ ...prev, [randomTheme.id]: true }));
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
|
|
@ -128,7 +131,7 @@ export default function ThemeSlaughter() {
|
|||
}),
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
if (response.ok) {
|
||||
// Refresh data after voting
|
||||
fetchRandomTheme();
|
||||
|
|
@ -139,7 +142,8 @@ export default function ThemeSlaughter() {
|
|||
} catch (error) {
|
||||
console.error("Error submitting vote:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
// Remove loading state for the current random theme
|
||||
setThemeLoading((prev) => ({ ...prev, [randomTheme.id]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -229,68 +233,78 @@ export default function ThemeSlaughter() {
|
|||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
{/* Left Side */}
|
||||
<div className="w-1/2 p-6 bg-gray-100 dark:bg-gray-800 flex flex-col justify-start items-center">
|
||||
{randomTheme ? (
|
||||
<>
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||
{randomTheme.suggestion}
|
||||
</h2>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => handleVote("YES")}
|
||||
className="px-6 py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600"
|
||||
disabled={loading}
|
||||
>
|
||||
YES
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleVote("NO")}
|
||||
className="px-6 py-3 bg-red-500 text-white font-bold rounded-lg hover:bg-red-600"
|
||||
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 */}
|
||||
<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"
|
||||
{/* Left Side */}
|
||||
<div className="w-1/2 p-6 bg-gray-100 dark:bg-gray-800 flex flex-col justify-start items-center">
|
||||
{randomTheme ? (
|
||||
<>
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||
{randomTheme.suggestion}
|
||||
</h2>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => handleVote("YES")}
|
||||
className={`px-6 py-3 font-bold rounded-lg ${
|
||||
themeLoading[randomTheme?.id || -1]
|
||||
? "bg-gray-400 text-white cursor-not-allowed"
|
||||
: "bg-green-500 text-white hover:bg-green-600"
|
||||
}`}
|
||||
disabled={themeLoading[randomTheme?.id || -1]}
|
||||
>
|
||||
{theme.suggestion}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
YES
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleVote("NO")}
|
||||
className={`px-6 py-3 font-bold rounded-lg ${
|
||||
themeLoading[randomTheme?.id || -1]
|
||||
? "bg-gray-400 text-white cursor-not-allowed"
|
||||
: "bg-red-500 text-white hover:bg-red-600"
|
||||
}`}
|
||||
disabled={themeLoading[randomTheme?.id || -1]}
|
||||
>
|
||||
NO
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleVote("SKIP")}
|
||||
className={`px-6 py-3 font-bold rounded-lg ${
|
||||
themeLoading[randomTheme?.id || -1]
|
||||
? "bg-gray-400 text-white cursor-not-allowed"
|
||||
: "bg-gray-500 text-white hover:bg-gray-600"
|
||||
}`}
|
||||
disabled={themeLoading[randomTheme?.id || -1]}
|
||||
>
|
||||
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 <></>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,7 +96,12 @@ export default function VotingPage() {
|
|||
|
||||
// Handle voting
|
||||
const handleVote = async (themeId: number, votingScore: number) => {
|
||||
setLoading(true);
|
||||
setThemes((prevThemes) =>
|
||||
prevThemes.map((theme) =>
|
||||
theme.id === themeId ? { ...theme, loading: true } : theme
|
||||
)
|
||||
);
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
||||
|
|
@ -112,21 +117,30 @@ export default function VotingPage() {
|
|||
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
|
||||
theme.id === themeId
|
||||
? { ...theme, votingScore, loading: false }
|
||||
: theme
|
||||
)
|
||||
);
|
||||
} else {
|
||||
console.error("Failed to submit vote.");
|
||||
setThemes((prevThemes) =>
|
||||
prevThemes.map((theme) =>
|
||||
theme.id === themeId ? { ...theme, loading: false } : theme
|
||||
)
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting vote:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setThemes((prevThemes) =>
|
||||
prevThemes.map((theme) =>
|
||||
theme.id === themeId ? { ...theme, loading: false } : theme
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -23,24 +23,55 @@ export default function Timers() {
|
|||
fetchCurrentJamPhase();
|
||||
}, []);
|
||||
|
||||
if (activeJamResponse && activeJamResponse.jam) {
|
||||
return (
|
||||
<div className="text-[#333] dark:text-white transition-color duration-250">
|
||||
<Timer
|
||||
name="Jam Start"
|
||||
targetDate={new Date(activeJamResponse.jam.startTime)}
|
||||
/>
|
||||
<Spacer y={8} />
|
||||
<p>Site under construction</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="text-[#333] dark:text-white transition-color duration-250">
|
||||
No upcoming jams
|
||||
<Spacer y={8} />
|
||||
<p>Site under construction</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
if(activeJamResponse && activeJamResponse.jam)
|
||||
{
|
||||
const startTimeUTC = new Date(activeJamResponse.jam.startTime).toISOString();
|
||||
console.log(startTimeUTC);
|
||||
|
||||
if (activeJamResponse.phase == "Suggestion" || activeJamResponse.phase == "Survival" || activeJamResponse.phase == "Voting") {
|
||||
return (
|
||||
<div className="text-[#333] dark:text-white transition-color duration-250">
|
||||
<Timer
|
||||
name="Jam starts in"
|
||||
targetDate={new Date(activeJamResponse.jam.startTime) }
|
||||
/>
|
||||
<Spacer y={8} />
|
||||
<p>Site under construction</p>
|
||||
</div>
|
||||
);
|
||||
} else if (activeJamResponse.phase == "Jamming") {
|
||||
return (
|
||||
<div className="text-[#333] dark:text-white transition-color duration-250">
|
||||
<Timer
|
||||
name="Jam ends in"
|
||||
targetDate={ new Date(new Date(activeJamResponse.jam.startTime).getTime() + (activeJamResponse.jam.jammingHours * 60 * 60 * 1000))}
|
||||
/>
|
||||
<Spacer y={8} />
|
||||
<p>Site under construction</p>
|
||||
</div>
|
||||
);
|
||||
} else if (activeJamResponse.phase == "Rating") {
|
||||
return (
|
||||
<div className="text-[#333] dark:text-white transition-color duration-250">
|
||||
<Timer
|
||||
name="Rating ends in"
|
||||
targetDate={new Date(new Date(activeJamResponse.jam.startTime).getTime() + (activeJamResponse.jam.jammingHours * 60 * 60 * 1000) + (activeJamResponse.jam.ratingHours * 60 * 60 * 1000))}
|
||||
/>
|
||||
<Spacer y={8} />
|
||||
<p>Site under construction</p>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="text-[#333] dark:text-white transition-color duration-250">
|
||||
No upcoming jams
|
||||
<Spacer y={8} />
|
||||
<p>Site under construction</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,8 @@ export async function getCurrentJam(): Promise<ActiveJamResponse | null> {
|
|||
: "http://localhost:3005/api/v1/jams/active"
|
||||
);
|
||||
|
||||
// Parse JSON response
|
||||
const data = await response.json();
|
||||
|
||||
// Return the phase and jam details
|
||||
|
||||
return {
|
||||
phase: data.phase,
|
||||
jam: data.futureJam,
|
||||
|
|
|
|||
6
src/types/DownloadLinkType.ts
Normal file
6
src/types/DownloadLinkType.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export type PlatformType = "Windows" | "MacOS" | "Linux" | "Web" | "Mobile" | "Other";
|
||||
export interface DownloadLinkType {
|
||||
id: number;
|
||||
url: string;
|
||||
platform: PlatformType;
|
||||
}
|
||||
17
src/types/GameType.ts
Normal file
17
src/types/GameType.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { DownloadLinkType } from "./DownloadLinkType";
|
||||
import { UserType } from "./UserType";
|
||||
|
||||
export interface GameType {
|
||||
id: number;
|
||||
slug: string,
|
||||
name: string;
|
||||
authorId: number;
|
||||
author: UserType;
|
||||
description?: string;
|
||||
thumbnail?: string;
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
downloadLinks: DownloadLinkType[];
|
||||
contributors: UserType[];
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue