fix motd on mobile and format the player counts
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 55s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 55s
This commit is contained in:
parent
2824bb5878
commit
e1ebccd5b7
@ -57,8 +57,8 @@ export default async function Page({ params }: Params): Promise<JSX.Element> {
|
||||
<Card>
|
||||
{player == null && <NotFound message="Invalid UUID / Username" />}
|
||||
{player != null && (
|
||||
<div className="flex gap-4 flex-col md:flex-row">
|
||||
<div className="flex justify-center md:justify-start">
|
||||
<div className="flex gap-4 flex-col xs:flex-row">
|
||||
<div className="flex justify-center xs:justify-start">
|
||||
<Image
|
||||
className="w-[96px] h-[96px]"
|
||||
src={player.skin.parts.head}
|
||||
|
@ -2,6 +2,7 @@ import { Card } from "@/app/components/card";
|
||||
import { NotFound } from "@/app/components/not-found";
|
||||
import { LookupServer } from "@/app/components/server/lookup-server";
|
||||
import { generateEmbed } from "@/common/embed";
|
||||
import { formatNumber } from "@/common/number-utils";
|
||||
import { capitalizeFirstLetter } from "@/common/string-utils";
|
||||
import { getServer } from "mcutils-library";
|
||||
import JavaMinecraftServer from "mcutils-library/dist/types/server/javaServer";
|
||||
@ -78,9 +79,9 @@ export default async function Page({ params: { platform, hostname } }: Params):
|
||||
{server == null && <NotFound message="Server not responding" />}
|
||||
{server != null && (
|
||||
<div className="flex gap-4 flex-col">
|
||||
<div className="flex gap-4 flex-col md:flex-row">
|
||||
<div className="flex gap-4 flex-col xs:flex-row">
|
||||
{favicon && (
|
||||
<div className="flex justify-center md:justify-start">
|
||||
<div className="flex justify-center xs:justify-start">
|
||||
<Image
|
||||
className="w-[64px] h-[64px]"
|
||||
src={favicon}
|
||||
@ -96,13 +97,13 @@ export default async function Page({ params: { platform, hostname } }: Params):
|
||||
<h2 className="text-xl">{server.hostname}</h2>
|
||||
<div className="text-primary">
|
||||
<p>
|
||||
Players online: {server.players.online}/{server.players.max}
|
||||
Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-background rounded-lg p-2">
|
||||
<div className="bg-background rounded-lg p-2 text-sm xs:text-md">
|
||||
{server.motd.html.map((line, index) => {
|
||||
return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
|
||||
})}
|
||||
|
@ -6,7 +6,7 @@ export default function Container({
|
||||
children: React.ReactNode;
|
||||
}>): JSX.Element {
|
||||
return (
|
||||
<div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 md:max-w-[1200px]">
|
||||
<div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 xs:max-w-[1200px]">
|
||||
<NavBar />
|
||||
<div className="w-full flex-1 p-4">{children}</div>
|
||||
</div>
|
||||
|
@ -18,7 +18,7 @@ export default function NavBar(): JSX.Element {
|
||||
<div className="bg-secondary w-full rounded-lg flex items-center gap-3 mt-2 bg-opacity-85 h-12">
|
||||
<div className="flex items-center gap-2 pl-3 pr-3">
|
||||
<Logo />
|
||||
<Link href="/" className="hidden md:block">
|
||||
<Link href="/" className="hidden xs:block">
|
||||
<p>Minecraft Utilities</p>
|
||||
</Link>
|
||||
</div>
|
||||
@ -29,7 +29,7 @@ export default function NavBar(): JSX.Element {
|
||||
<div className="flex-grow"></div>
|
||||
|
||||
<div className="mr-4 flex items-center gap-2">
|
||||
<div className="hidden md:block">
|
||||
<div className="hidden xs:block">
|
||||
<RedirectButton
|
||||
title="Star us on Github!"
|
||||
url="https://github.com/RealFascinated/minecraft-helper"
|
||||
|
@ -30,7 +30,7 @@ export function LookupPlayer(): JSX.Element {
|
||||
|
||||
return (
|
||||
<form className="flex gap-2 justify-center mt-2">
|
||||
<Input className="w-fit" placeholder="UUID / Username" value={player} onChange={setPlayerValue} />
|
||||
<Input className="w-fit" placeholder="UUID / Username" value={player} onChange={setPlayerValue} maxLength={36} />
|
||||
<Button type="submit" onClick={() => lookupPlayer()}>
|
||||
Lookup
|
||||
</Button>
|
||||
|
@ -32,10 +32,12 @@ export function LookupServer(): JSX.Element {
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="flex gap-2 justify-center mt-2">
|
||||
<Input className="w-fit" placeholder="Hostname" value={hostname} onChange={setHostnameValue} />
|
||||
<Button onClick={() => lookupServer(ServerPlatform.Java)}>Java</Button>
|
||||
<Button onClick={() => lookupServer(ServerPlatform.Bedrock)}>Bedrock</Button>
|
||||
<form className="flex gap-2 justify-center items-center mt-2 flex-col xs:flex-row">
|
||||
<Input className="w-fit" placeholder="Hostname" value={hostname} onChange={setHostnameValue} maxLength={128} />
|
||||
<div className="flex gap-2 justify-center">
|
||||
<Button onClick={() => lookupServer(ServerPlatform.Java)}>Java</Button>
|
||||
<Button onClick={() => lookupServer(ServerPlatform.Bedrock)}>Bedrock</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
9
src/common/number-utils.ts
Normal file
9
src/common/number-utils.ts
Normal file
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Formats a number using the browser's locale
|
||||
*
|
||||
* @param number the number to format
|
||||
* @returns the formatted number
|
||||
*/
|
||||
export function formatNumber(number: number): string {
|
||||
return new Intl.NumberFormat().format(number);
|
||||
}
|
@ -1,4 +1,5 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
import defaultTheme from "tailwindcss/defaultTheme";
|
||||
|
||||
const config = {
|
||||
darkMode: ["class"],
|
||||
@ -9,10 +10,14 @@ const config = {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
xs: "475px",
|
||||
...defaultTheme.screens,
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
screens: {
|
||||
xs: "475px",
|
||||
},
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
|
Loading…
Reference in New Issue
Block a user