diff --git a/Frontend/.gitignore b/Frontend/.gitignore index 7222243..80ee040 100644 --- a/Frontend/.gitignore +++ b/Frontend/.gitignore @@ -1,5 +1,6 @@ node_modules .next/ +.fleet/ .vscode/ .env*.local next-env.d.ts \ No newline at end of file diff --git a/Frontend/.prettierrc b/Frontend/.prettierrc new file mode 100644 index 0000000..2ef2d71 --- /dev/null +++ b/Frontend/.prettierrc @@ -0,0 +1,4 @@ +{ + "trailingComma": "es5", + "tabWidth": 4 +} \ No newline at end of file diff --git a/Frontend/src/app/(pages)/docs/page.tsx b/Frontend/src/app/(pages)/docs/page.tsx index ae2b931..5e182b2 100644 --- a/Frontend/src/app/(pages)/docs/page.tsx +++ b/Frontend/src/app/(pages)/docs/page.tsx @@ -3,12 +3,13 @@ import { minecrafter } from "@/font/fonts"; import { cn } from "@/lib/utils"; import { Metadata } from "next"; import Link from "next/link"; +import { ReactElement } from "react"; /** * Page metadata. */ export const metadata: Metadata = { - title: "Docs", + title: "Docs", }; /** @@ -16,34 +17,34 @@ export const metadata: Metadata = { * * @returns the page jsx */ -const DocsPage = (): JSX.Element => ( -
- {/* Creeper */} -
- -
+const DocsPage = (): ReactElement => ( +
+ {/* Creeper */} +
+ +
- {/* Header */} -

- Documentation -

+ {/* Header */} +

+ Documentation +

- {/* Content */} -

- This page is still under construction, however we do have a{" "} - - Wiki - - ! -

-
+ {/* Content */} +

+ This page is still under construction, however we do have a{" "} + + Wiki + + ! +

+
); export default DocsPage; diff --git a/Frontend/src/app/(pages)/page.tsx b/Frontend/src/app/(pages)/page.tsx index 10f2e0c..4fd605a 100644 --- a/Frontend/src/app/(pages)/page.tsx +++ b/Frontend/src/app/(pages)/page.tsx @@ -7,11 +7,11 @@ import StatisticCounters from "@/components/landing/statistic-counters"; * * @returns the page jsx */ -const LandingPage = (): JSX.Element => ( -
- - - -
+const LandingPage = (): ReactElement => ( +
+ + + +
); export default LandingPage; diff --git a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx index 3032867..c07572d 100644 --- a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx +++ b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx @@ -7,62 +7,63 @@ import { PageProps } from "@/types/page"; import { Metadata } from "next"; import Image from "next/image"; import { CachedPlayer, getPlayer, type RestfulMCAPIError } from "restfulmc-lib"; +import { ReactElement } from "react"; /** * The page to lookup a player. * * @returns the page jsx */ -const PlayerPage = async ({ params }: PageProps): Promise => { - let error: string | undefined = undefined; // The error to display - let result: CachedPlayer | undefined = undefined; // The player to display - const query: string | undefined = trimQuery(params.slug?.[0]); // The query to search for +const PlayerPage = async ({ params }: PageProps): Promise => { + let error: string | undefined = undefined; // The error to display + let result: CachedPlayer | undefined = undefined; // The player to display + const query: string | undefined = trimQuery(params.slug?.[0]); // The query to search for - // Try and get the player to display - try { - result = query ? await getPlayer(query) : undefined; - } catch (err) { - error = (err as RestfulMCAPIError).message; // Set the error message - } + // Try and get the player to display + try { + result = query ? await getPlayer(query) : undefined; + } catch (err) { + error = (err as RestfulMCAPIError).message; // Set the error message + } - // Render the page - return ( -
-
- {/* Banner */} - Minecraft Players + // Render the page + return ( +
+
+ {/* Banner */} + Minecraft Players - {/* Search */} -
-

- Player Lookup -

+ {/* Search */} +
+

+ Player Lookup +

-
- {/* Error */} - {error &&

{error}

} +
+ {/* Error */} + {error &&

{error}

} - {/* Search */} - -
+ {/* Search */} + +
- {/* Player Result */} - {result && } -
-
-
- ); + {/* Player Result */} + {result && } +
+ +
+ ); }; /** @@ -73,35 +74,35 @@ const PlayerPage = async ({ params }: PageProps): Promise => { * @returns the generated metadata */ export const generateMetadata = async ({ - params, + params, }: PageProps): Promise => { - const query: string | undefined = trimQuery(params.slug?.[0]); // The query to embed for + const query: string | undefined = trimQuery(params.slug?.[0]); // The query to embed for - // Try and get the player to display - if (query) { - try { - const player: CachedPlayer = await getPlayer(query); // Get the player to embed - return Embed({ - title: `${player.username}'s Profile`, - description: `UUID: ${player.uniqueId}\n\nClick to view data about this player.`, - thumbnail: player.skin.parts.HEAD, - }); - } catch (err) { - const code: number = (err as RestfulMCAPIError).code; // Get the error status code - if (code === 400) { - return Embed({ - title: "Invalid Player", - description: "The player you searched for is invalid.", - }); - } else if (code === 404) { - return Embed({ - title: "Player Not Found", - description: "The player you searched for was not found.", - }); - } - } - } - return {}; + // Try and get the player to display + if (query) { + try { + const player: CachedPlayer = await getPlayer(query); // Get the player to embed + return Embed({ + title: `${player.username}'s Profile`, + description: `UUID: ${player.uniqueId}\n\nClick to view data about this player.`, + thumbnail: player.skin.parts.HEAD, + }); + } catch (err) { + const code: number = (err as RestfulMCAPIError).code; // Get the error status code + if (code === 400) { + return Embed({ + title: "Invalid Player", + description: "The player you searched for is invalid.", + }); + } else if (code === 404) { + return Embed({ + title: "Player Not Found", + description: "The player you searched for was not found.", + }); + } + } + } + return {}; }; /** @@ -111,11 +112,11 @@ export const generateMetadata = async ({ * @returns the trimmed query */ const trimQuery = (query: string | undefined): string | undefined => { - // Limit the query to 36 chars - if (query && query.length > 36) { - query = query.substr(0, 36); - } - return query; + // Limit the query to 36 chars + if (query && query.length > 36) { + query = query.substr(0, 36); + } + return query; }; export default PlayerPage; diff --git a/Frontend/src/app/components/counter.tsx b/Frontend/src/app/components/counter.tsx index 8ef4d7a..774dea3 100644 --- a/Frontend/src/app/components/counter.tsx +++ b/Frontend/src/app/components/counter.tsx @@ -3,28 +3,29 @@ import { minecrafter } from "@/font/fonts"; import { cn } from "@/lib/utils"; import CountUp from "react-countup"; +import { ReactElement } from "react"; /** * Props for the counter. */ type CounterProps = { - /** - * The name of the counter. - */ - name: string; + /** + * The name of the counter. + */ + name: string; - /** - * The amount to count up to. - */ - amount: number; + /** + * The amount to count up to. + */ + amount: number; - /** - * The optional duration of the count up. - *

- * Uses the default duration if not provided. - *

- */ - duration?: number | undefined; + /** + * The optional duration of the count up. + *

+ * Uses the default duration if not provided. + *

+ */ + duration?: number | undefined; }; /** @@ -34,16 +35,19 @@ type CounterProps = { * @param duration the optional duration of the count up * @returns the counter jsx */ -const Counter = ({ name, amount, duration }: CounterProps): JSX.Element => ( -
-

- {name} -

-

- -

-
+const Counter = ({ name, amount, duration }: CounterProps): ReactElement => ( +
+

+ {name} +

+

+ +

+
); export default Counter; diff --git a/Frontend/src/app/components/creeper.tsx b/Frontend/src/app/components/creeper.tsx index f89033c..85d9073 100644 --- a/Frontend/src/app/components/creeper.tsx +++ b/Frontend/src/app/components/creeper.tsx @@ -1,16 +1,17 @@ import Image from "next/image"; +import { ReactElement } from "react"; /** * A creeper image. * * @returns the creeper jsx */ -const Creeper = (): JSX.Element => ( - A Minecraft Creeper +const Creeper = (): ReactElement => ( + A Minecraft Creeper ); export default Creeper; diff --git a/Frontend/src/app/components/footer.tsx b/Frontend/src/app/components/footer.tsx index 58fc364..f5ee589 100644 --- a/Frontend/src/app/components/footer.tsx +++ b/Frontend/src/app/components/footer.tsx @@ -1,2 +1,4 @@ -const Footer = (): JSX.Element =>
FOOTER
; +import { ReactElement } from "react"; + +const Footer = (): ReactElement =>
FOOTER
; export default Footer; diff --git a/Frontend/src/app/components/github-star-button.tsx b/Frontend/src/app/components/github-star-button.tsx index 5c0a944..1c85ab0 100644 --- a/Frontend/src/app/components/github-star-button.tsx +++ b/Frontend/src/app/components/github-star-button.tsx @@ -4,28 +4,30 @@ import { StarIcon } from "@heroicons/react/24/outline"; import Link from "next/link"; import { Suspense } from "react"; -const GitHubStarButton = async (): Promise => { - return ( - - - {/* Star Count */} - }> - - +const GitHubStarButton = async (): Promise => { + return ( + + + {/* Star Count */} + } + > + + - - Star on GitHub - - - ); + + Star on GitHub + + + ); }; /** @@ -34,10 +36,10 @@ const GitHubStarButton = async (): Promise => { * @returns the star count jsx */ const GitHubStarCount = async (): Promise => { - const stars: number = await getStarCount(); // Get the repo star count - return ( - {stars} - ); + const stars: number = await getStarCount(); // Get the repo star count + return ( + {stars} + ); }; /** @@ -47,12 +49,12 @@ const GitHubStarCount = async (): Promise => { * @returns the star count */ const getStarCount = async (): Promise => { - const response: Response = await fetch( - "https://api.github.com/repos/Rainnny7/RESTfulMC", - { next: { revalidate: 300 } } // Revalidate every 5 minutes - ); - const json: any = await response.json(); // Get the JSON response - return json.stargazers_count; // Return the stars + const response: Response = await fetch( + "https://api.github.com/repos/Rainnny7/RESTfulMC", + { next: { revalidate: 300 } } // Revalidate every 5 minutes + ); + const json: any = await response.json(); // Get the JSON response + return json.stargazers_count; // Return the stars }; export default GitHubStarButton; diff --git a/Frontend/src/app/components/landing/featured-content.tsx b/Frontend/src/app/components/landing/featured-content.tsx index bb8c5ae..89c9a69 100644 --- a/Frontend/src/app/components/landing/featured-content.tsx +++ b/Frontend/src/app/components/landing/featured-content.tsx @@ -3,20 +3,23 @@ import { minecrafter } from "@/font/fonts"; import { cn } from "@/lib/utils"; import { FeaturedItemProps } from "@/types/config"; import Link from "next/link"; +import { ReactElement } from "react"; /** * The featured content component. * * @returns the featured content jsx */ -const FeaturedContent = (): JSX.Element => ( -
-
- {config.featuredItems.map((item, index) => ( - - ))} -
-
+const FeaturedContent = (): ReactElement => ( +
+
+ {config.featuredItems.map( + (item: FeaturedItemProps, index: number) => ( + + ) + )} +
+
); /** @@ -26,25 +29,28 @@ const FeaturedContent = (): JSX.Element => ( * @returns the item jsx */ const FeaturedItem = ({ - name, - description, - image, - href, -}: FeaturedItemProps): JSX.Element => ( - -

- {name} -

-

{description}

- + name, + description, + image, + href, +}: FeaturedItemProps): ReactElement => ( + +

+ {name} +

+

{description}

+ ); export default FeaturedContent; diff --git a/Frontend/src/app/components/landing/hero.tsx b/Frontend/src/app/components/landing/hero.tsx index 7e0cf68..4072912 100644 --- a/Frontend/src/app/components/landing/hero.tsx +++ b/Frontend/src/app/components/landing/hero.tsx @@ -4,40 +4,43 @@ import config from "@/config"; import { minecrafter } from "@/font/fonts"; import { cn } from "@/lib/utils"; import Link from "next/link"; +import { ReactElement } from "react"; /** * The hero content. * * @returns the hero jsx */ -const Hero = (): JSX.Element => ( -
-
- {/* Title */} -

- {config.siteName} -

+const Hero = (): ReactElement => ( +
+
+ {/* Title */} +

+ {config.siteName} +

- {/* Subtitle */} -

{config.metadata.description}

-
+ {/* Subtitle */} +

{config.metadata.description}

+
- {/* Links */} -
- - Get Started - + {/* Links */} +
+ + + Get Started + + - {/* Star on Github <3 */} -
- -
-
-
+ {/* Star on Github <3 */} +
+ +
+
+
); export default Hero; diff --git a/Frontend/src/app/components/landing/statistic-counters.tsx b/Frontend/src/app/components/landing/statistic-counters.tsx index e2b3668..7fd3b7f 100644 --- a/Frontend/src/app/components/landing/statistic-counters.tsx +++ b/Frontend/src/app/components/landing/statistic-counters.tsx @@ -1,18 +1,19 @@ import Counter from "@/components/counter"; +import { ReactElement } from "react"; /** * The statistic counters component. * * @returns the counters jsx */ -const StatisticCounters = (): JSX.Element => ( -
-
- - - - -
-
+const StatisticCounters = (): ReactElement => ( +
+
+ + + + +
+
); export default StatisticCounters; diff --git a/Frontend/src/app/components/navbar.tsx b/Frontend/src/app/components/navbar.tsx index 4428fdf..32402a8 100644 --- a/Frontend/src/app/components/navbar.tsx +++ b/Frontend/src/app/components/navbar.tsx @@ -7,66 +7,69 @@ import { cn } from "@/lib/utils"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import { ReactElement } from "react"; /** * The navbar for the site. * * @returns the navbar jsx */ -const Navbar = (): JSX.Element => { - const path: string = usePathname(); // Get the current path - return ( - - ); + {/* Social Buttons - Right */} +
+ {/* Star on Github <3 */} + +
+ + ); }; export default Navbar; diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx index 57500ae..fa56bfb 100644 --- a/Frontend/src/app/components/player/player-result.tsx +++ b/Frontend/src/app/components/player/player-result.tsx @@ -2,6 +2,7 @@ import Image from "next/image"; import Link from "next/link"; import { CachedPlayer, SkinPart } from "restfulmc-lib"; +import { ReactElement } from "react"; /** * The result of a player search. @@ -10,62 +11,68 @@ import { CachedPlayer, SkinPart } from "restfulmc-lib"; * @returns the player result jsx */ const PlayerResult = ({ - player: { - uniqueId, - username, - skin: { parts }, - legacy, - }, + player: { + uniqueId, + username, + skin: { parts }, + legacy, + }, }: { - player: CachedPlayer; -}): JSX.Element => ( -
- {/* Details */} -
- {/* Player Head */} - {`${username}'s + player: CachedPlayer; +}): ReactElement => ( +
+ {/* Details */} +
+ {/* Player Head */} + {`${username}'s - {/* Name, Unique ID, and Badges */} -
-

{username}

- {uniqueId} + {/* Name, Unique ID, and Badges */} +
+

+ {username} +

+ + {uniqueId} + - {/* Legacy Badge */} - {legacy &&

Legacy

} -
-
+ {/* Legacy Badge */} + {legacy && ( +

Legacy

+ )} +
+
- {/* Skin Parts */} -
- {/* Header */} -

Skin Parts

+ {/* Skin Parts */} +
+ {/* Header */} +

Skin Parts

- {/* Skin Parts */} -
- {Object.entries(parts) - .filter( - ([part]) => - part === SkinPart.HEAD || - part === SkinPart.FACE || - part === SkinPart.BODY_FLAT - ) - .map(([part, url], index) => ( - - {`${username}'s - - ))} -
-
-
+ {/* Skin Parts */} +
+ {Object.entries(parts) + .filter( + ([part]) => + part === SkinPart.HEAD || + part === SkinPart.FACE || + part === SkinPart.BODY_FLAT + ) + .map(([part, url], index) => ( + + {`${username}'s + + ))} +
+
+
); export default PlayerResult; diff --git a/Frontend/src/app/components/player/player-search.tsx b/Frontend/src/app/components/player/player-search.tsx index 46e48ea..60fdc72 100644 --- a/Frontend/src/app/components/player/player-search.tsx +++ b/Frontend/src/app/components/player/player-search.tsx @@ -11,31 +11,31 @@ import { redirect } from "next/navigation"; * @returns the search component jsx */ const PlayerSearch = ({ - query, + query, }: { - query: string | undefined; -}): JSX.Element => { - const handleRedirect = async (form: FormData) => { - "use server"; - redirect(`/player/${form.get("query")}`); - }; - return ( -
-
- - -
- Search -
- ); + query: string | undefined; +}): ReactElement => { + const handleRedirect = async (form: FormData) => { + "use server"; + redirect(`/player/${form.get("query")}`); + }; + return ( +
+
+ + +
+ Search +
+ ); }; export default PlayerSearch; diff --git a/Frontend/src/app/globals.css b/Frontend/src/app/globals.css index 52c99de..b9202b8 100644 --- a/Frontend/src/app/globals.css +++ b/Frontend/src/app/globals.css @@ -3,76 +3,76 @@ @tailwind utilities; @layer base { - :root { - --background: 30 5% 9%; - --foreground: 0 0% 98%; + :root { + --background: 30 5% 9%; + --foreground: 0 0% 98%; - --card: 240 10% 3.9%; - --card-foreground: 0 0% 98%; + --card: 240 10% 3.9%; + --card-foreground: 0 0% 98%; - --popover: 240 10% 3.9%; - --popover-foreground: 0 0% 98%; + --popover: 240 10% 3.9%; + --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 240 5.9% 10%; + --primary: 0 0% 98%; + --primary-foreground: 240 5.9% 10%; - --secondary: 240 3.7% 15.9%; - --secondary-foreground: 0 0% 98%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; - --muted: 20 4% 14%; - --muted-foreground: 240 5% 64.9%; + --muted: 20 4% 14%; + --muted-foreground: 240 5% 64.9%; - --accent: 240 3.7% 15.9%; - --accent-foreground: 0 0% 98%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; - --border: 240 3.7% 15.9%; - --input: 240 3.7% 15.9%; - --ring: 240 4.9% 83.9%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; - --radius: 0.5rem; + --radius: 0.5rem; - /* Navbar */ - --navbar-background: 0 0% 7%; + /* Navbar */ + --navbar-background: 0 0% 7%; - /* Minecraft Colors (Dark -> Light) */ - --minecraft-green-1: 108 56% 25%; - --minecraft-green-2: 107 55% 34%; - --minecraft-green-3: 104 51% 43%; - --minecraft-green-4: 103 50% 53%; - } + /* Minecraft Colors (Dark -> Light) */ + --minecraft-green-1: 108 56% 25%; + --minecraft-green-2: 107 55% 34%; + --minecraft-green-3: 104 51% 43%; + --minecraft-green-4: 103 50% 53%; + } } @layer base { - * { - @apply border-border; + * { + @apply border-border; - /* Scrollbar (Firefox) */ - scrollbar-color: hsl(var(--minecraft-green-2)) hsl(var(--background)); - } + /* Scrollbar (Firefox) */ + scrollbar-color: hsl(var(--minecraft-green-2)) hsl(var(--background)); + } - body { - @apply bg-background text-foreground; - } + body { + @apply bg-background text-foreground; + } } /* Scrollbar (Chrome & Safari) */ @layer base { - ::-webkit-scrollbar { - @apply w-1.5; - } + ::-webkit-scrollbar { + @apply w-1.5; + } - ::-webkit-scrollbar-track { - @apply bg-inherit; - } + ::-webkit-scrollbar-track { + @apply bg-inherit; + } - ::-webkit-scrollbar-thumb { - @apply bg-minecraft-green-2 rounded-3xl; - } + ::-webkit-scrollbar-thumb { + @apply bg-minecraft-green-2 rounded-3xl; + } - ::-webkit-scrollbar-thumb:hover { - @apply bg-opacity-80; - } + ::-webkit-scrollbar-thumb:hover { + @apply bg-opacity-80; + } }