From 78709ed06047438d1192652a728bda1059e29e95 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 19 Apr 2024 16:51:58 +0100
Subject: [PATCH] make the server page show a minecraft style server

---
 src/app/(pages)/page.tsx                  |   2 +-
 src/app/components/card.tsx               |  16 ++++--
 src/app/components/navbar.tsx             |   4 +-
 src/app/components/server/server-view.tsx |  58 +++++++++++-----------
 src/app/font/Minecraft.otf                | Bin 0 -> 11424 bytes
 src/app/font/fonts.ts                     |  16 ++++++
 src/app/layout.tsx                        |   4 +-
 src/common/fonts.ts                       |   7 ---
 8 files changed, 62 insertions(+), 45 deletions(-)
 create mode 100644 src/app/font/Minecraft.otf
 create mode 100644 src/app/font/fonts.ts
 delete mode 100644 src/common/fonts.ts

diff --git a/src/app/(pages)/page.tsx b/src/app/(pages)/page.tsx
index 3d83a54..7d7128f 100644
--- a/src/app/(pages)/page.tsx
+++ b/src/app/(pages)/page.tsx
@@ -53,7 +53,7 @@ export default function Home(): ReactElement {
     <div className="text-center flex flex-col gap-4">
       <div className="p-4">
         <div>
-          <h1 className="text-4xl mb-2 font-semibold">Minecraft Utilities</h1>
+          <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
           <div>
             <p>
               Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
diff --git a/src/app/components/card.tsx b/src/app/components/card.tsx
index bf88edf..d0f7b0a 100644
--- a/src/app/components/card.tsx
+++ b/src/app/components/card.tsx
@@ -1,6 +1,7 @@
 import { Card as ShadcnCard, CardContent } from "@/app/components/ui/card";
 import { cn } from "@/common/utils";
 import { ReactElement } from "react";
+import { type ClassValue } from "clsx";
 
 type CardProps = {
   /**
@@ -9,15 +10,20 @@ type CardProps = {
   children: React.ReactNode;
 
   /**
-   * The class names to append.
+   * The class names for the card.
    */
-  className?: string;
+  classNameCard?: ClassValue;
+
+  /**
+   * The class names for the content.
+   */
+  classNameContent?: ClassValue;
 };
 
-export function Card({ children, className }: CardProps): ReactElement {
+export function Card({ children, classNameCard, classNameContent }: CardProps): ReactElement {
   return (
-    <ShadcnCard className={cn(className, "pt-4")}>
-      <CardContent>{children}</CardContent>
+    <ShadcnCard className={cn("p-1.5", classNameCard)}>
+      <CardContent className={cn("p-1.5", classNameContent)}>{children}</CardContent>
     </ShadcnCard>
   );
 }
diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar.tsx
index a9b7c2a..9bc8744 100644
--- a/src/app/components/navbar.tsx
+++ b/src/app/components/navbar.tsx
@@ -42,12 +42,12 @@ export default function NavBar(): ReactElement {
       <div className="z-50">
         <Link href="/" className="flex items-center gap-2">
           <Logo />
-          <p className="hidden md:block">Minecraft Utilities</p>
+          <p className="hidden lg:block text-lg font-semibold">Minecraft Utilities</p>
         </Link>
       </div>
 
       {/* Links */}
-      <div className="absolute inset-x-0 flex justify-center">
+      <div className="absolute inset-x-0 flex justify-start ml-16 lg:ml-0 lg:justify-center xs:justify-center">
         <div className="flex gap-4">
           {pages.map((page, index) => {
             const isActive = path.includes(page.url);
diff --git a/src/app/components/server/server-view.tsx b/src/app/components/server/server-view.tsx
index 1712ad4..b52cd4e 100644
--- a/src/app/components/server/server-view.tsx
+++ b/src/app/components/server/server-view.tsx
@@ -5,6 +5,9 @@ import { ReactElement } from "react";
 import { Card } from "../card";
 import { CodeDialog } from "../code-dialog";
 import { Button } from "../ui/button";
+import config from "@root/config.json";
+import { cn } from "@/common/utils";
+import { minecraft } from "@/app/font/fonts";
 
 type ServerViewProps = {
   /**
@@ -20,37 +23,36 @@ type ServerViewProps = {
 
 export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
   return (
-    <div className="flex flex-col gap-2 items-center">
-      <Card className="w-max xs:w-fit relative">
-        <div className="flex gap-2 flex-col">
-          <div className="flex gap-4 flex-col xs:flex-row">
-            {favicon && (
-              <div className="flex justify-center xs:justify-start">
-                <Image
-                  className="w-[64px] h-[64px]"
-                  src={favicon}
-                  width={64}
-                  height={64}
-                  quality={100}
-                  alt="The server's favicon"
-                />
-              </div>
-            )}
+    <div className="flex flex-col gap-2 items-center scale-75 xs:scale-100">
+      <Card classNameContent="w-max xs:w-fit relative">
+        <div
+          className={cn(
+            "w-[31rem] relative p-2 flex gap-2 rounded-lg pointer-events-none",
+            'bg-[url("/media/server-background.png")]',
+          )}
+        >
+          {/* Favicon */}
+          <Image
+            src={favicon || `${config.apiUrl}/server/icon/fallback`}
+            alt={`${server.hostname}'s Favicon`}
+            width={64}
+            height={64}
+          />
 
-            <div className="flex flex-col">
-              <h2 className="text-xl text-primary font-semibold">{server.hostname}</h2>
-              <div>
-                <p>
-                  Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
-                </p>
-              </div>
-            </div>
+          {/* Name & MOTD */}
+          <div className={cn("flex flex-col leading-[1.3rem] w-full", minecraft.className)}>
+            <h1>{server.hostname}</h1>
+            {server.motd.html.map((line: string, index: number): ReactElement => {
+              return <p key={index} className="pointer-events-auto" dangerouslySetInnerHTML={{ __html: line }}></p>;
+            })}
           </div>
 
-          <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
-            {server.motd.html.map((line, index) => {
-              return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
-            })}
+          {/* Ping */}
+          <div className={cn("absolute top-0.5 right-0.5 flex items-center", minecraft.className)}>
+            <p>
+              {server.players.online}/{server.players.max}
+            </p>
+            <Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
           </div>
         </div>
       </Card>
diff --git a/src/app/font/Minecraft.otf b/src/app/font/Minecraft.otf
new file mode 100644
index 0000000000000000000000000000000000000000..6904fc17bea7b7626bbc79b3ef363968f005e32c
GIT binary patch
literal 11424
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
O>;L=L{1E*A?*9XkawR|j

literal 0
HcmV?d00001

diff --git a/src/app/font/fonts.ts b/src/app/font/fonts.ts
new file mode 100644
index 0000000..a67e6bc
--- /dev/null
+++ b/src/app/font/fonts.ts
@@ -0,0 +1,16 @@
+import { Inter } from "next/font/google";
+
+import localFont from "next/font/local";
+import { NextFont } from "next/dist/compiled/@next/font";
+
+/**
+ * The default font to use for the site.
+ */
+export const inter = Inter({ subsets: ["latin"] });
+
+/**
+ * The Minecraft font to use for the site.
+ */
+export const minecraft: NextFont = localFont({
+  src: "../font/Minecraft.otf",
+});
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 16f09cb..eed7b66 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,3 @@
-import { Fonts } from "@/common/fonts";
 import { Metadata, Viewport } from "next";
 import Script from "next/script";
 import { ReactElement } from "react";
@@ -9,6 +8,7 @@ import { TooltipProvider } from "./components/ui/tooltip";
 
 import "./globals.css";
 import config from "@root/config.json";
+import { inter } from "@/app/font/fonts";
 
 export const viewport: Viewport = {
   themeColor: "#3498DB",
@@ -47,7 +47,7 @@ export default function RootLayout({
   return (
     <>
       <Script defer data-domain="mcutils.xyz" src="https://analytics.fascinated.cc/js/script.js" />
-      <html className={Fonts.inter.className} lang="en" suppressHydrationWarning>
+      <html className={inter.className} lang="en" suppressHydrationWarning>
         <head />
         <body>
           <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
diff --git a/src/common/fonts.ts b/src/common/fonts.ts
deleted file mode 100644
index a6aa953..0000000
--- a/src/common/fonts.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const Fonts = {
-  inter: inter,
-};