fix motd on mobile and format the player counts
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 55s

This commit is contained in:
Lee
2024-04-16 21:50:08 +01:00
parent 2824bb5878
commit e1ebccd5b7
8 changed files with 32 additions and 15 deletions

View File

@ -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}

View File

@ -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>;
})}