diff --git a/Frontend/bun.lockb b/Frontend/bun.lockb index d170874..03f1aae 100644 Binary files a/Frontend/bun.lockb and b/Frontend/bun.lockb differ diff --git a/Frontend/next.config.mjs b/Frontend/next.config.mjs index 4678774..52671cd 100644 --- a/Frontend/next.config.mjs +++ b/Frontend/next.config.mjs @@ -1,4 +1,13 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "mc.rainnny.club", + }, + ], + }, +}; export default nextConfig; diff --git a/Frontend/package.json b/Frontend/package.json index e1a0d2d..d3a48ed 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -25,7 +25,7 @@ "react": "^18", "react-dom": "^18", "react-hook-form": "^7.51.3", - "restfulmc-lib": "^1.0.9", + "restfulmc-lib": "^1.1.1", "tailwind-merge": "^2.2.2", "tailwindcss-animate": "^1.0.7" }, diff --git a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx index 466c261..57e7a00 100644 --- a/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx +++ b/Frontend/src/app/(pages)/player/[[...slug]]/page.tsx @@ -5,6 +5,7 @@ import { PageProps } from "@/types/page"; import { Metadata } from "next"; import Image from "next/image"; import { CachedPlayer, getPlayer, type RestfulMCAPIError } from "restfulmc-lib"; +import PlayerResult from "../../../components/player/player-result"; /** * The page to lookup a player. @@ -34,7 +35,7 @@ const PlayerPage = async ({ params }: PageProps): Promise => {
{/* Header */} Minecraft Players => { {/* Search */} + + {/* Player Result */} + {result && }
diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx new file mode 100644 index 0000000..7fa3102 --- /dev/null +++ b/Frontend/src/app/components/player/player-result.tsx @@ -0,0 +1,66 @@ +/* eslint-disable @next/next/no-img-element */ +import Image from "next/image"; +import Link from "next/link"; +import { CachedPlayer, SkinPart } from "restfulmc-lib"; + +/** + * The result of a player search. + * + * @param player the player to display + * @returns the player result jsx + */ +const PlayerResult = ({ + player: { + uniqueId, + username, + skin: { parts }, + }, +}: { + player: CachedPlayer; +}): JSX.Element => ( +
+ {/* Details */} +
+ {/* Player Head */} + {`${username}'s + + {/* Name & Unique ID */} +
+

{username}

+ {uniqueId} +
+
+ + {/* 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 + + ))} +
+
+
+); +export default PlayerResult; diff --git a/Frontend/src/app/globals.css b/Frontend/src/app/globals.css index c979c50..52c99de 100644 --- a/Frontend/src/app/globals.css +++ b/Frontend/src/app/globals.css @@ -19,7 +19,7 @@ --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; - --muted: 240 3.7% 15.9%; + --muted: 20 4% 14%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%;