mirror of
https://github.com/Ategon/Jamjar.git
synced 2025-02-12 06:16:21 +00:00
Compare commits
No commits in common. "e908237d84fef3214dae929d1f45db75a898c9d0" and "4642ea9032d917bf455d86b1729807d6c764c07d" have entirely different histories.
e908237d84
...
4642ea9032
6 changed files with 29 additions and 340 deletions
36
README.md
36
README.md
|
|
@ -2,37 +2,15 @@
|
||||||
|
|
||||||
Frontend for a game jam site
|
Frontend for a game jam site
|
||||||
|
|
||||||
## Things used
|
To run using next.js (for development)
|
||||||
|
|
||||||
- Typescript (language)
|
|
||||||
- Next.js (web framework)
|
|
||||||
- Tailwind (css framework)
|
|
||||||
- Lucide (icons)
|
|
||||||
- Eslint (static code analysis)
|
|
||||||
- Framer motion (animations)
|
|
||||||
- React Toastify (toasts)
|
|
||||||
|
|
||||||
## Running for development
|
|
||||||
|
|
||||||
Prerequisites:
|
|
||||||
- node.js or equivalent
|
|
||||||
|
|
||||||
To start up the site locally for development you need to:
|
|
||||||
|
|
||||||
1. Go to a spot you want to be the parent folder for where the folder for Jamjar goes (e.g. navigate to it in terminal)
|
|
||||||
2. Clone the repository aka get a local copy of the files (e.g. by running `git clone https://github.com/Dare2Jam/Jamjar.git`)
|
|
||||||
3. Go into the folder you just cloned in (e.g. using `cd Jamjar`)
|
|
||||||
4. Install dependencies needed for the site (e.g. `npm i`)
|
|
||||||
5. Create a `.env` file in the folder which is used for environment variables. In this you would set NEXT_PUBLIC_MODE to either PROD or DEV depending on what backend data you want to load in (dev loads it from a locally running jamcore, PROD loads it from the production site)
|
|
||||||
```
|
```
|
||||||
NEXT_PUBLIC_MODE=DEV
|
npm i
|
||||||
|
npm run dev
|
||||||
```
|
```
|
||||||
6. Run the site using `npm run dev` which will start up a dev server that will hot reload as you make changes (most of the time)
|
|
||||||
7. Go to https://localhost:3000 (or another port if it says it started up the site on a different port)
|
|
||||||
|
|
||||||
## Running using docker
|
To run using docker and docker compose
|
||||||
|
|
||||||
Prerequisites:
|
```
|
||||||
- docker
|
docker compose up --build -d
|
||||||
|
```
|
||||||
If you want to start up the frontend using docker instead of what is above (either for development or for a production site) you can run `docker compose up --build -d` to build the image and then run it in the background. This will need to be done after any changes you make to rebuild the image
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
export default function CreateGamePage() {
|
|
||||||
return (
|
|
||||||
<div className="absolute flex items-center justify-center top-0 left-0 w-screen h-screen">
|
|
||||||
<p>Game creation coming soon</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { getCookie, hasCookie } from "@/helpers/cookie";
|
|
||||||
import { UserType } from "@/types/UserType";
|
|
||||||
import { Button, Form, Input } from "@nextui-org/react";
|
|
||||||
import { redirect, usePathname } from "next/navigation";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { toast } from "react-toastify";
|
|
||||||
|
|
||||||
export default function UserPage() {
|
|
||||||
const [user, setUser] = useState<UserType>();
|
|
||||||
const [profilePicture, setProfilePicture] = useState("");
|
|
||||||
const [errors] = useState({});
|
|
||||||
const pathname = usePathname();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadUser();
|
|
||||||
async function loadUser() {
|
|
||||||
if (!hasCookie("token")) {
|
|
||||||
setUser(undefined);
|
|
||||||
redirect("/");
|
|
||||||
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")}` },
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (response.status == 200) {
|
|
||||||
const data = await response.json();
|
|
||||||
setUser(data);
|
|
||||||
|
|
||||||
setProfilePicture(data.profilePicture ?? "");
|
|
||||||
} else {
|
|
||||||
setUser(undefined);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, [pathname]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="absolute flex items-center justify-center top-0 left-0 w-screen h-screen">
|
|
||||||
{!user ? (
|
|
||||||
"Loading settings..."
|
|
||||||
) : (
|
|
||||||
<Form
|
|
||||||
className="w-full max-w-xs flex flex-col gap-4"
|
|
||||||
validationErrors={errors}
|
|
||||||
onReset={() => {
|
|
||||||
setProfilePicture(user.profilePicture ?? "");
|
|
||||||
}}
|
|
||||||
onSubmit={async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const response = await fetch(
|
|
||||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
|
||||||
? "https://d2jam.com/api/v1/user"
|
|
||||||
: "http://localhost:3005/api/v1/user",
|
|
||||||
{
|
|
||||||
body: JSON.stringify({
|
|
||||||
slug: user.slug,
|
|
||||||
profilePicture: profilePicture,
|
|
||||||
}),
|
|
||||||
method: "PUT",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
authorization: `Bearer ${getCookie("token")}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
toast.success("Changed settings");
|
|
||||||
setUser(await response.json());
|
|
||||||
} else {
|
|
||||||
toast.error("Failed to update settings");
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
label="Profile Picture"
|
|
||||||
labelPlacement="outside"
|
|
||||||
name="profilePicture"
|
|
||||||
placeholder="Enter a url to an image"
|
|
||||||
type="text"
|
|
||||||
value={profilePicture}
|
|
||||||
onValueChange={setProfilePicture}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button color="primary" type="submit">
|
|
||||||
Save
|
|
||||||
</Button>
|
|
||||||
<Button type="reset" variant="flat">
|
|
||||||
Reset
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -16,38 +16,24 @@ import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownTrigger,
|
DropdownTrigger,
|
||||||
Image,
|
Image,
|
||||||
|
Spacer,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
} from "@nextui-org/react";
|
} from "@nextui-org/react";
|
||||||
import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
|
import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
|
||||||
import {
|
import { LogInIcon, Menu, NotebookPen, SquarePen } from "lucide-react";
|
||||||
CalendarPlus,
|
|
||||||
Gamepad2,
|
|
||||||
LogInIcon,
|
|
||||||
Menu,
|
|
||||||
NotebookPen,
|
|
||||||
SquarePen,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { hasCookie, getCookie } from "@/helpers/cookie";
|
import { hasCookie, getCookie } from "@/helpers/cookie";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { UserType } from "@/types/UserType";
|
import { UserType } from "@/types/UserType";
|
||||||
import { getCurrentJam, joinJam } from "@/helpers/jam";
|
|
||||||
import { toast } from "react-toastify";
|
|
||||||
import { JamType } from "@/types/JamType";
|
|
||||||
|
|
||||||
export default function Navbar() {
|
export default function Navbar() {
|
||||||
const [user, setUser] = useState<UserType>();
|
const [user, setUser] = useState<UserType>();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const [isMobile, setIsMobile] = useState(false);
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
const [jam, setJam] = useState<JamType | null>();
|
|
||||||
const [isInJam, setIsInJam] = useState<boolean>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadUser();
|
loadUser();
|
||||||
async function loadUser() {
|
async function loadUser() {
|
||||||
const currentJam = await getCurrentJam();
|
|
||||||
setJam(currentJam);
|
|
||||||
|
|
||||||
if (!hasCookie("token")) {
|
if (!hasCookie("token")) {
|
||||||
setUser(undefined);
|
setUser(undefined);
|
||||||
return;
|
return;
|
||||||
|
|
@ -62,19 +48,8 @@ export default function Navbar() {
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
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) {
|
if (response.status == 200) {
|
||||||
setUser(user);
|
setUser(await response.json());
|
||||||
} else {
|
} else {
|
||||||
setUser(undefined);
|
setUser(undefined);
|
||||||
}
|
}
|
||||||
|
|
@ -112,52 +87,9 @@ export default function Navbar() {
|
||||||
<Avatar src={user.profilePicture} />
|
<Avatar src={user.profilePicture} />
|
||||||
</DropdownTrigger>
|
</DropdownTrigger>
|
||||||
<DropdownMenu className="text-black">
|
<DropdownMenu className="text-black">
|
||||||
{jam && isInJam ? (
|
|
||||||
<DropdownItem key="create-game" href="/create-game">
|
|
||||||
Create Game
|
|
||||||
</DropdownItem>
|
|
||||||
) : null}
|
|
||||||
{jam && !isInJam ? (
|
|
||||||
<DropdownItem
|
|
||||||
key="join-event"
|
|
||||||
onPress={async () => {
|
|
||||||
try {
|
|
||||||
const currentJam = await getCurrentJam();
|
|
||||||
|
|
||||||
if (!currentJam) {
|
|
||||||
toast.error("There is no jam to join");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (await joinJam(currentJam.id)) {
|
|
||||||
setIsInJam(true);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error during join process:", error);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Join Event
|
|
||||||
</DropdownItem>
|
|
||||||
) : null}
|
|
||||||
<DropdownItem key="create-post" href="/create-post">
|
<DropdownItem key="create-post" href="/create-post">
|
||||||
Create Post
|
Create Post
|
||||||
</DropdownItem>
|
</DropdownItem>
|
||||||
<DropdownItem
|
|
||||||
key="profile"
|
|
||||||
className="text-black"
|
|
||||||
href={`/u/${user.slug}`}
|
|
||||||
>
|
|
||||||
Profile
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem
|
|
||||||
showDivider
|
|
||||||
key="settings"
|
|
||||||
className="text-black"
|
|
||||||
href="/settings"
|
|
||||||
>
|
|
||||||
Settings
|
|
||||||
</DropdownItem>
|
|
||||||
<DropdownItem
|
<DropdownItem
|
||||||
key="github"
|
key="github"
|
||||||
href="https://github.com/Ategon/Jamjar"
|
href="https://github.com/Ategon/Jamjar"
|
||||||
|
|
@ -216,43 +148,8 @@ export default function Navbar() {
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
<div className="flex gap-3 items-center">
|
<div className="flex gap-3 items-center">
|
||||||
{user && jam && isInJam && (
|
|
||||||
<NavbarItem>
|
|
||||||
<Link href="/create-game">
|
|
||||||
<Button
|
|
||||||
endContent={<Gamepad2 />}
|
|
||||||
className="text-white border-white/50 hover:border-green-100/50 hover:text-green-100 hover:scale-110 transition-all transform duration-500 ease-in-out"
|
|
||||||
variant="bordered"
|
|
||||||
>
|
|
||||||
Create Game
|
|
||||||
</Button>
|
|
||||||
</Link>
|
|
||||||
</NavbarItem>
|
|
||||||
)}
|
|
||||||
{user && jam && !isInJam && (
|
|
||||||
<NavbarItem>
|
|
||||||
<Button
|
|
||||||
endContent={<CalendarPlus />}
|
|
||||||
className="text-white border-white/50 hover:border-green-100/50 hover:text-green-100 hover:scale-110 transition-all transform duration-500 ease-in-out"
|
|
||||||
variant="bordered"
|
|
||||||
onPress={async () => {
|
|
||||||
const currentJam = await getCurrentJam();
|
|
||||||
|
|
||||||
if (!currentJam) {
|
|
||||||
toast.error("There is no jam to join");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (await joinJam(currentJam.id)) {
|
|
||||||
setIsInJam(true);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Join Jam
|
|
||||||
</Button>
|
|
||||||
</NavbarItem>
|
|
||||||
)}
|
|
||||||
{user && (
|
{user && (
|
||||||
<NavbarItem className="flex items-center">
|
<NavbarItem>
|
||||||
<Link href="/create-post">
|
<Link href="/create-post">
|
||||||
<Button
|
<Button
|
||||||
endContent={<SquarePen />}
|
endContent={<SquarePen />}
|
||||||
|
|
@ -262,6 +159,7 @@ export default function Navbar() {
|
||||||
Create Post
|
Create Post
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
<Spacer x={32} />
|
||||||
</NavbarItem>
|
</NavbarItem>
|
||||||
)}
|
)}
|
||||||
<NavbarItem>
|
<NavbarItem>
|
||||||
|
|
@ -275,7 +173,7 @@ export default function Navbar() {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
href="https://github.com/Dare2Jam/"
|
href="https://github.com/Ategon/Jamjar"
|
||||||
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-125 hover:text-red-100"
|
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-125 hover:text-red-100"
|
||||||
isExternal
|
isExternal
|
||||||
>
|
>
|
||||||
|
|
@ -343,21 +241,21 @@ export default function Navbar() {
|
||||||
<Avatar src={user.profilePicture} />
|
<Avatar src={user.profilePicture} />
|
||||||
</DropdownTrigger>
|
</DropdownTrigger>
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownItem
|
{/* <DropdownItem
|
||||||
key="profile"
|
key="profile"
|
||||||
className="text-black"
|
className="text-black"
|
||||||
href={`/u/${user.slug}`}
|
href="/profile"
|
||||||
>
|
>
|
||||||
Profile
|
Profile
|
||||||
</DropdownItem>
|
</DropdownItem>
|
||||||
<DropdownItem
|
<DropdownItem
|
||||||
showDivider
|
showDivider
|
||||||
key="settings"
|
key="settings"
|
||||||
className="text-black"
|
className="text-black"
|
||||||
href="/settings"
|
href="/settings"
|
||||||
>
|
>
|
||||||
Settings
|
Settings
|
||||||
</DropdownItem>
|
</DropdownItem> */}
|
||||||
<DropdownItem
|
<DropdownItem
|
||||||
key="logout"
|
key="logout"
|
||||||
color="danger"
|
color="danger"
|
||||||
|
|
@ -447,7 +345,7 @@ export default function Navbar() {
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
href="https://github.com/Dare2Jam/"
|
href="https://github.com/Ategon/Jamjar"
|
||||||
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-125 hover:text-red-100"
|
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-125 hover:text-red-100"
|
||||||
isExternal
|
isExternal
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
import { JamType } from "@/types/JamType";
|
|
||||||
import { getCookie } from "./cookie";
|
|
||||||
import { toast } from "react-toastify";
|
|
||||||
|
|
||||||
export async function getJams(): Promise<JamType[]> {
|
|
||||||
const response = await fetch(
|
|
||||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
|
||||||
? "https://d2jam.com/api/v1/jams"
|
|
||||||
: "http://localhost:3005/api/v1/jams"
|
|
||||||
);
|
|
||||||
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getCurrentJam(): Promise<JamType | null> {
|
|
||||||
const jams = await getJams();
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
// Get only jams that happen in the future
|
|
||||||
const futureJams = jams.filter((jam) => new Date(jam.startTime) > now);
|
|
||||||
|
|
||||||
// If theres no jams happening returns null
|
|
||||||
if (futureJams.length === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort future jams by startTime (earliest first)
|
|
||||||
futureJams.sort(
|
|
||||||
(a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime()
|
|
||||||
);
|
|
||||||
|
|
||||||
return futureJams[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function joinJam(jamId: number) {
|
|
||||||
const response = await fetch(
|
|
||||||
process.env.NEXT_PUBLIC_MODE === "PROD"
|
|
||||||
? "https://d2jam.com/api/v1/join-jam"
|
|
||||||
: "http://localhost:3005/api/v1/join-jam",
|
|
||||||
{
|
|
||||||
body: JSON.stringify({
|
|
||||||
jamId: jamId,
|
|
||||||
userSlug: getCookie("user"),
|
|
||||||
}),
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
authorization: `Bearer ${getCookie("token")}`,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
if (response.status == 401) {
|
|
||||||
toast.error("You have already joined the jam");
|
|
||||||
return false;
|
|
||||||
} else if (response.ok) {
|
|
||||||
toast.success("Joined jam");
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
toast.error("Error while trying to join jam");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
export interface JamType {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
ratingHours: number;
|
|
||||||
slaughterHours: number;
|
|
||||||
startTime: Date;
|
|
||||||
createdAt: Date;
|
|
||||||
updatedAt: Date;
|
|
||||||
}
|
|
||||||
Loading…
Reference in a new issue