Enhance who is online page

nekiro · nekiro · commit dee989ad8a42 · 2024-12-26T17:44:00.000+01:00
diff --git a/src/pages/community/who-is-online/index.tsx b/src/pages/community/who-is-online/index.tsx
@@ -1,38 +1,47 @@
-import StrippedTable from "@component/StrippedTable";
 import Head from "@layout/Head";
 import Label from "@component/Label";
 import { trpc } from "@util/trpc";
-import { VStack } from "@chakra-ui/react";
+import { Table, TableContainer, Thead, Tr, Th, Tbody, Td } from "@chakra-ui/react";
 import { getVocationNameById } from "@shared/enums/Vocation";
 import { Content } from "@component/Content";
 
 export default function WhoIsOnline() {
 	const players = trpc.player.online.useQuery();
 	const status = trpc.status.status.useQuery();
+	const onlinePlayers = players.data;
 
 	return (
 		<>
 			<Head title="Who is online" />
 			<Content>
-				<Content.Header>Server Info</Content.Header>
-				<Content.Body>
-					<VStack w="40rem" maxW="40rem">
-						<Label colorScheme="violet" fontSize="sm">
-							Overall Maximum: {status.data?.maxOnlineCount ?? 0} players. There are currently {players.data?.length ?? 0} players online on
-							{status.data?.name ?? "..."}
-						</Label>
-						{players.data && (
-							<StrippedTable
-								isLoading={players.isLoading}
-								head={[{ text: "Name" }, { text: "Level" }, { text: "Vocation" }]}
-								body={players.data?.map((player) => [
-									{ href: `/character/${player.name}`, text: player.name },
-									{ text: player.level },
-									{ text: getVocationNameById(player.vocation) },
-								])}
-							/>
-						)}
-					</VStack>
+				<Content.Header>Who Is Online</Content.Header>
+				<Content.Body w="100%" gap={5}>
+					<Label colorScheme="violet" fontSize="sm">
+						Overall Maximum: {status.data?.maxOnlineCount ?? 0} players. There are currently {onlinePlayers?.length ?? 0} players online on{" "}
+						{status.data?.name ? status.data.name : "unknown"}
+					</Label>
+					{onlinePlayers && (
+						<TableContainer>
+							<Table variant="striped" colorScheme="purple">
+								<Thead>
+									<Tr>
+										<Th>Name</Th>
+										<Th isNumeric>Level</Th>
+										<Th>Vocation</Th>
+									</Tr>
+								</Thead>
+								<Tbody>
+									{onlinePlayers?.map((player) => (
+										<Tr key={player.name}>
+											<Td>{player.name}</Td>
+											<Td isNumeric>{player.level}</Td>
+											<Td>{getVocationNameById(player.vocation)}</Td>
+										</Tr>
+									))}
+								</Tbody>
+							</Table>
+						</TableContainer>
+					)}
 				</Content.Body>
 			</Content>
 		</>
diff --git a/src/server/routers/player.ts b/src/server/routers/player.ts
@@ -44,7 +44,7 @@ export const playerRouter = router({
 	}),
 	online: procedure.query(async () => {
 		const players = await prisma.players_online.findMany({
-			select: { players: true },
+			include: { players: { select: { name: true, vocation: true, level: true } } },
 		});
 
 		return players.map((player) => player.players);
