From f0584f0dfb0b574efceef05a009fab7e801427a5 Mon Sep 17 00:00:00 2001
From: dvelo <52332868+DeveloLongScript@users.noreply.github.com>
Date: Sun, 18 Aug 2024 01:15:27 -0500
Subject: [PATCH] feat: fade-in + skeletons
---
package.json | 2 +-
src/app/layout.tsx | 3 +-
src/components/AfterServerView.tsx | 60 +-
src/components/ClientFadeIn.tsx | 12 +
src/components/FavoritesSortView.tsx | 140 ++--
src/components/FavoritesView.tsx | 114 ++--
src/components/NewChart.tsx | 185 +++---
src/components/ServerList.tsx | 934 ++++++++++++++-------------
src/components/ServerView.tsx | 297 ++++-----
src/version.tsx | 13 +-
10 files changed, 933 insertions(+), 827 deletions(-)
create mode 100644 src/components/ClientFadeIn.tsx
diff --git a/package.json b/package.json
index 1e7a01e..da6439d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mh-stats",
- "version": "0.10.0",
+ "version": "0.10.2",
"private": true,
"packageManager": "yarn@1.22.22",
"scripts": {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7fcc4fc..ff73674 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,6 +20,7 @@ import { Inter as interFont } from "next/font/google";
import { CommandBarer } from "@/components/CommandBar";
import ThemedToaster from "@/components/misc/ThemedToaster";
import UnofficalDialog from "@/components/misc/UnofficalDialog";
+import ClientFadeIn from "@/components/ClientFadeIn";
const inter = interFont({ variable: "--font-inter", subsets: ["latin"] });
export default async function RootLayout({
@@ -63,7 +64,7 @@ export default async function RootLayout({
{children}
{" "}
- {description != "" && (
-
-
- {description}
-
-
- )}
- {discord != "" && (
-
-
- Discord Server
-
-
-
-
-
- )}
+ <>
+
+
+ {description != "" && (
+
+
+ {description}
+
+
+ )}
+ {discord != "" && (
+
+
+ Discord Server
+
+
+
+
+
+ )}
-
+ {children} ;
+}
diff --git a/src/components/FavoritesSortView.tsx b/src/components/FavoritesSortView.tsx
index 974fbfe..8907041 100644
--- a/src/components/FavoritesSortView.tsx
+++ b/src/components/FavoritesSortView.tsx
@@ -18,6 +18,8 @@ import { Separator } from "./ui/separator";
import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
import Link from "next/link";
import toast from "react-hot-toast";
+import { Skeleton } from "./ui/skeleton";
+import FadeIn from "react-fade-in/lib/FadeIn";
export default function FavoriteSortView() {
const [loading, setLoading] = useState(true);
@@ -55,7 +57,23 @@ export default function FavoriteSortView() {
}, []);
if (loading) {
- return
+
+
+
+
+ );
}
return (
@@ -200,66 +218,68 @@ export default function FavoriteSortView() {
}
style={{ overflow: "hidden", paddingLeft: 6 }}
>
-
- {allItems.map((v) => {
- if (v.favorites == 0) {
- return <>;
- }
+
+
+ {allItems.map((v) => {
+ if (v.favorites == 0) {
+ return <>;
+ }
- if (online[v.server] != undefined)
- return (
-
-
- {v.server}
-
- {v.favorites} favorited
- {
- navigator.clipboard.writeText(
- v.server + ".mshf.minehut.gg"
- );
- toast.success("Copied IP to clipboard");
- }}
- >
- {v.server}
-
-
-
-
-
-
-
-
- Open up the server page to see more information about
- the server
-
-
-
-
-
- );
- })}
-
+ if (online[v.server] != undefined)
+ return (
+
+
+ {v.server}
+
+ {v.favorites} favorited
+ {
+ navigator.clipboard.writeText(
+ v.server + ".mshf.minehut.gg"
+ );
+ toast.success("Copied IP to clipboard");
+ }}
+ >
+ {v.server}
+
+
+
+
+
+
+
+
+ Open up the server page to see more information
+ about the server
+
+
+
+
+
+ );
+ })}
+ ([]);
@@ -40,8 +42,20 @@ export default function FavoritesView() {
if (loading) {
return (
<>
-
+
);
}
@@ -54,53 +68,55 @@ export default function FavoritesView() {
Your favorites are empty. Maybe favorite a server!
)}
-
- {apiFavorites.map((server: ServerResponse) => (
-
-
- {server.name}
-
- {
- navigator.clipboard.writeText(
- server.name + ".mshf.minehut.gg"
- );
- toast.success("Copied IP to clipboard");
- }}
- >
- {server.name}
-
-
-
- {
- router.push("/server/" + server.name);
- }}
- >
-
-
-
- Open up the server page to see more information about the
- server
-
-
-
-
- {convert(server.joins)} total joins •{" "}
- {server.online ? "Online" : "Offline"}
-
-
-
- ))}
-
+
+ {apiFavorites.map((server: ServerResponse) => (
+
+
+ {server.name}
+
+ {
+ navigator.clipboard.writeText(
+ server.name + ".mshf.minehut.gg"
+ );
+ toast.success("Copied IP to clipboard");
+ }}
+ >
+ {server.name}
+
+
+
+ {
+ router.push("/server/" + server.name);
+ }}
+ >
+
+
+
+ Open up the server page to see more information about the
+ server
+
+
+
+
+ {convert(server.joins)} total joins •{" "}
+ {server.online ? "Online" : "Offline"}
+
+
+
+ ))}
+
);
}
diff --git a/src/components/NewChart.tsx b/src/components/NewChart.tsx
index f4b7100..1b01976 100644
--- a/src/components/NewChart.tsx
+++ b/src/components/NewChart.tsx
@@ -19,6 +19,8 @@ import {
import { useEffectOnce } from "@/lib/useEffectOnce";
import { ServerResponse } from "@/lib/types/mh-server";
import { getCommunityServerFavorites, getShortTermData } from "@/lib/api";
+import { Skeleton } from "./ui/skeleton";
+import FadeIn from "react-fade-in/lib/FadeIn";
const chartConfig = {
player_count: {
@@ -37,6 +39,7 @@ export function NewChart({ server }: { server: string }) {
const [chartData, setChartData] = React.useState([]);
const [joins, setJoins] = React.useState(0);
+ const [loading, setLoading] = React.useState(true);
const [favorites, setFavorites] = React.useState(0);
const allNums = { player_count: joins, favorites };
@@ -52,99 +55,109 @@ export function NewChart({ server }: { server: string }) {
});
}
);
+ setLoading(false);
}
);
});
+ if (loading)
+ return (
+ <>
+
-
-
-
- {chartConfig[activeChart].label} Chart for {server}
-
- Showing the past 30 entries.
-
-
- {["player_count", "favorites"].map((key) => {
- const chart = key as keyof typeof chartConfig;
- return (
- setActiveChart(chart)}
- >
-
- {chartConfig[chart].label}
-
-
- {convert(allNums[chart])}
-
-
- );
- })}
-
-
-
-
-
+
+
+
+
+ {chartConfig[activeChart].label} Chart for {server}
+
+ Showing the past 30 entries.
+
+
+ {["player_count", "favorites"].map((key) => {
+ const chart = key as keyof typeof chartConfig;
+ return (
+ setActiveChart(chart)}
+ >
+
+ {chartConfig[chart].label}
+
+
+ {convert(allNums[chart])}
+
+
+ );
+ })}
+
+
+
+
- {
- return new Date(value).toLocaleTimeString("en-US", {
- timeStyle: "short",
- });
+ {
- return (
- value +
- (activeChart == "player_count"
- ? ` plyr${value != 1 ? "s" : ""}.`
- : ` ${value == 1 ? "favorite" : "favrts."}`)
- );
- }}
- />
-
-
-
-
+ >
+ {
+ return new Date(value).toLocaleTimeString("en-US", {
+ timeStyle: "short",
+ });
+ }}
+ />
+ {
+ return (
+ value +
+ (activeChart == "player_count"
+ ? ` plyr${value != 1 ? "s" : ""}.`
+ : ` ${value == 1 ? "favorite" : "favrts."}`)
+ );
+ }}
+ />
+
+
+
+
);
}
return (
<>
-
-
-
= 3200
- ? "bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-500"
- : ""
- }
- >
- Servers online{" "}
-
+
+
+
+
= 3200
- ? "bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-500 "
+ ? "bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-500"
: ""
}
>
- {serverList.getExtraData().total_servers.toString()}
+ Servers online{" "}
-
-
-
- The server amount is over 3.2k, meaning that new servers
- have to go into a queue before being able to be online.{" "}
-
-
- )}
-
- {serverList.currentServers[0] != undefined
- ? serverList.currentServers[0].name
- : "None"}{" "}
- {serverList.currentServers[0] != undefined && (
-
-
- Servers
-
- events.emit("search-request-event")}>
- Search Servers
-
-
-
- {
- setRandomData(serverList.getRandomServer());
- setRandom(true);
- }}
- >
- Pick Random Server
-
- {
- toast.promise(
- new Promise((s, e) => {
- setLoading(true);
- serverList
- .fetchDataAndFilter()
- .then(() => {
- serverList.moveListDown();
-
- let stringList: Array<{
- server: string;
- motd: string;
- }> = [];
- let obj: any = {};
-
- serverList.currentServers.forEach((b) => {
- stringList.push({ motd: b.motd, server: b.name });
- });
-
- serverList.getMOTDs(stringList).then((c) => {
- var updatedSL = motdList;
- c.forEach((b: { server: string; motd: string }) => {
- updatedSL[b.server] = b.motd;
- });
- setMotdList(updatedSL);
- setServers(serverList.currentServers);
- setLoading(false);
- s(false);
- });
- })
- .catch(() => {
- e();
- });
- }),
- {
- success: "Succesfully refreshed servers",
- loading: "Refreshing...",
- error: "Error while refreshing",
- }
- );
- }}
- >
- Refresh
-
-
-
-
- Filter
-
- {
- toast.promise(
- new Promise((g, b) => {
- if (v == "smaller") {
- setTemplateFilter(true);
- var filt = nameFilters;
- filt["smaller-tf"] = true;
- filt["bigger-tf"] = false;
- setNameFilters(filt);
-
- var filt2 = filters;
- filt2.push(smaller);
- if (filt2.includes(bigger)) {
- filt2.splice(filt2.indexOf(bigger), 1);
- }
- setFilters(filt2);
- serverList.editFilters(filters);
- serverList.fetchDataAndFilter().then(() => {
- serverList.moveListDown();
-
- let stringList: Array<{
- server: string;
- motd: string;
- }> = [];
- let obj: any = {};
-
- serverList.currentServers.forEach((b) => {
- stringList.push({ motd: b.motd, server: b.name });
- });
-
- serverList.getMOTDs(stringList).then((c) => {
- var updatedSL = motdList;
- c.forEach((b: { server: string; motd: string }) => {
- updatedSL[b.server] = b.motd;
- });
- setMotdList(updatedSL);
- setServers(serverList.currentServers);
- g(undefined);
- });
- });
- } else if (v == "bigger") {
- setTemplateFilter(true);
- var filt = nameFilters;
- filt["smaller-tf"] = false;
- filt["bigger-tf"] = true;
- setNameFilters(filt);
- var filt2 = filters;
- filt2.push(bigger);
-
- filt2.splice(filt2.indexOf(smaller), 1);
-
- setFilters(filt2);
- serverList.editFilters(filters);
-
- serverList.fetchDataAndFilter().then(() => {
- serverList.moveListDown();
-
- let stringList: Array<{
- server: string;
- motd: string;
- }> = [];
- let obj: any = {};
-
- serverList.currentServers.forEach((b) => {
- stringList.push({ motd: b.motd, server: b.name });
- });
-
- serverList.getMOTDs(stringList).then((c) => {
- var updatedSL = motdList;
- c.forEach((b: { server: string; motd: string }) => {
- updatedSL[b.server] = b.motd;
- });
- setMotdList(updatedSL);
- setServers(serverList.currentServers);
- g(undefined);
- });
- });
- } else {
- var filt = nameFilters;
- filt["smaller-tf"] = false;
- filt["bigger-tf"] = false;
- setNameFilters(filt);
- setTemplateFilter(false);
-
- var filt2 = filters;
- filt2.splice(filt2.indexOf(smaller), 1);
- filt2.splice(filt2.indexOf(bigger), 1);
- setFilters(filt2);
- console.log(filters, filters.includes(smaller));
- serverList.editFilters(filters);
-
- serverList.fetchDataAndFilter().then(() => {
- serverList.moveListDown();
-
- let stringList: Array<{
- server: string;
- motd: string;
- }> = [];
- let obj: any = {};
-
- serverList.currentServers.forEach((b) => {
- stringList.push({ motd: b.motd, server: b.name });
- });
-
- serverList.getMOTDs(stringList).then((c) => {
- var updatedSL = motdList;
- c.forEach((b: { server: string; motd: string }) => {
- updatedSL[b.server] = b.motd;
- });
- setMotdList(updatedSL);
- setServers(serverList.currentServers);
- g(undefined);
- });
- });
- }
- }),
- {
- error: "Error while changing filters",
- loading: "Changing filters...",
- success: "Changed filters!",
- }
- );
- }}
- value={(() => {
- if (nameFilters["smaller-tf"]) {
- return "smaller";
- } else if (nameFilters["bigger-tf"]) {
- return "bigger";
- } else {
- return "none";
- }
- })()}
- >
-
-
- Only allow smaller servers
-
- Only allow servers that have the player range 7-15, and
- cannot
-
-
-
-
- Only allow bigger servers
-
- Only allow servers with more than 15 players.
-
-
-
-
- No/custom requirements
-
-
-
- Tags
-
- {allTags.map((tag) => (
-
- {tag.docsName && tag.__filter == undefined && (
- {
- return nameFilters["t-" + tag.docsName];
- })()}
- onCheckedChange={async (b) => {
- var filt = nameFilters;
- filt["t-" + tag.docsName] = b;
- setNameFilters(filt);
- if (b) {
- var filt2 = filters;
- filt2.push(tag.condition);
- setFilters(filt2);
- } else {
- var filt2 = filters;
- filt2.splice(filt2.indexOf(tag.condition), 1);
- setFilters(filt2);
- }
- serverList.editFilters(filters);
- serverList.fetchDataAndFilter().then(() => {
- serverList.moveListDown();
-
- let stringList: Array<{
- server: string;
- motd: string;
- }> = [];
- let obj: any = {};
-
- serverList.currentServers.forEach((b) => {
- stringList.push({ motd: b.motd, server: b.name });
- });
-
- serverList.getMOTDs(stringList).then((c) => {
- var updatedSL = motdList;
- c.forEach((b: { server: string; motd: string }) => {
- updatedSL[b.server] = b.motd;
- });
- setMotdList(updatedSL);
- setServers(serverList.currentServers);
- });
- });
- }}
- >
-
- {tag.docsName}
-
-
- )}
-
- ))}
-
-
- Categories
-
-
- {allCategories.map((categorie) => (
- {
- var filt = nameFilters;
- filt["c-" + categorie.name] = b;
- setNameFilters(filt);
- if (b) {
- var filt2 = filters;
- filt2.push(categorie.condition);
- setFilters(filt2);
- } else {
- var filt2 = filters;
- filt2.splice(filt2.indexOf(categorie.condition), 1);
- setFilters(filt2);
- }
- serverList.editFilters(filters);
- serverList.fetchDataAndFilter().then(() => {
- serverList.moveListDown();
-
- let stringList: Array<{ server: string; motd: string }> =
- [];
- let obj: any = {};
-
- serverList.currentServers.forEach((b) => {
- stringList.push({ motd: b.motd, server: b.name });
- });
-
- serverList.getMOTDs(stringList).then((c) => {
- var updatedSL = motdList;
- c.forEach((b: { server: string; motd: string }) => {
- updatedSL[b.server] = b.motd;
- });
- setMotdList(updatedSL);
- setServers(serverList.currentServers);
- });
- });
- }}
- checked={(() => {
- return nameFilters["c-" + categorie.name];
- })()}
- >
-
- {categorie.name}
-
-
- ))}
-
-
-
- View
-
-
- Grid
-
-
- 4 items per row
- 5 items per row
- 6 items per row
-
-
-
-
- Sort
-
-
- c == "favorites" && router.push("/sort/favorites")
+ }
+ className="relative z-0"
+ desc={
+
+
= 3200
+ ? "bg-clip-text text-transparent bg-gradient-to-r from-cyan-500 to-blue-500 "
+ : ""
}
>
-
- Players Online
-
-
- Favorites
-
-
-
-
-
-
-
+ {serverList.getExtraData().total_servers.toString()}
+
+ {serverList.getExtraData().total_servers >= 3200 && (
+
+
+
+
+ The server amount is over 3.2k, meaning that new servers
+ have to go into a queue before being able to be online.{" "}
+
+
+ )}
+
+
+ {serverList.currentServers[0] != undefined
+ ? serverList.currentServers[0].name
+ : "None"}{" "}
+ {serverList.currentServers[0] != undefined && (
+
+
+
+ Servers
+
+ events.emit("search-request-event")}>
+ Search Servers
+
+
+
+ {
+ setRandomData(serverList.getRandomServer());
+ setRandom(true);
+ }}
+ >
+ Pick Random Server
+
+ {
+ toast.promise(
+ new Promise((s, e) => {
+ setLoading(true);
+ serverList
+ .fetchDataAndFilter()
+ .then(() => {
+ serverList.moveListDown();
+
+ let stringList: Array<{
+ server: string;
+ motd: string;
+ }> = [];
+ let obj: any = {};
+
+ serverList.currentServers.forEach((b) => {
+ stringList.push({ motd: b.motd, server: b.name });
+ });
+
+ serverList.getMOTDs(stringList).then((c) => {
+ var updatedSL = motdList;
+ c.forEach((b: { server: string; motd: string }) => {
+ updatedSL[b.server] = b.motd;
+ });
+ setMotdList(updatedSL);
+ setServers(serverList.currentServers);
+ setLoading(false);
+ s(false);
+ });
+ })
+ .catch(() => {
+ e();
+ });
+ }),
+ {
+ success: "Succesfully refreshed servers",
+ loading: "Refreshing...",
+ error: "Error while refreshing",
+ }
+ );
+ }}
+ >
+ Refresh
+
+
+
+
+ Filter
+
+ {
+ toast.promise(
+ new Promise((g, b) => {
+ if (v == "smaller") {
+ setTemplateFilter(true);
+ var filt = nameFilters;
+ filt["smaller-tf"] = true;
+ filt["bigger-tf"] = false;
+ setNameFilters(filt);
+
+ var filt2 = filters;
+ filt2.push(smaller);
+ if (filt2.includes(bigger)) {
+ filt2.splice(filt2.indexOf(bigger), 1);
+ }
+ setFilters(filt2);
+ serverList.editFilters(filters);
+ serverList.fetchDataAndFilter().then(() => {
+ serverList.moveListDown();
+
+ let stringList: Array<{
+ server: string;
+ motd: string;
+ }> = [];
+ let obj: any = {};
+
+ serverList.currentServers.forEach((b) => {
+ stringList.push({ motd: b.motd, server: b.name });
+ });
+
+ serverList.getMOTDs(stringList).then((c) => {
+ var updatedSL = motdList;
+ c.forEach((b: { server: string; motd: string }) => {
+ updatedSL[b.server] = b.motd;
+ });
+ setMotdList(updatedSL);
+ setServers(serverList.currentServers);
+ g(undefined);
+ });
+ });
+ } else if (v == "bigger") {
+ setTemplateFilter(true);
+ var filt = nameFilters;
+ filt["smaller-tf"] = false;
+ filt["bigger-tf"] = true;
+ setNameFilters(filt);
+ var filt2 = filters;
+ filt2.push(bigger);
+
+ filt2.splice(filt2.indexOf(smaller), 1);
+
+ setFilters(filt2);
+ serverList.editFilters(filters);
+
+ serverList.fetchDataAndFilter().then(() => {
+ serverList.moveListDown();
+
+ let stringList: Array<{
+ server: string;
+ motd: string;
+ }> = [];
+ let obj: any = {};
+
+ serverList.currentServers.forEach((b) => {
+ stringList.push({ motd: b.motd, server: b.name });
+ });
+
+ serverList.getMOTDs(stringList).then((c) => {
+ var updatedSL = motdList;
+ c.forEach((b: { server: string; motd: string }) => {
+ updatedSL[b.server] = b.motd;
+ });
+ setMotdList(updatedSL);
+ setServers(serverList.currentServers);
+ g(undefined);
+ });
+ });
+ } else {
+ var filt = nameFilters;
+ filt["smaller-tf"] = false;
+ filt["bigger-tf"] = false;
+ setNameFilters(filt);
+ setTemplateFilter(false);
+
+ var filt2 = filters;
+ filt2.splice(filt2.indexOf(smaller), 1);
+ filt2.splice(filt2.indexOf(bigger), 1);
+ setFilters(filt2);
+ console.log(filters, filters.includes(smaller));
+ serverList.editFilters(filters);
+
+ serverList.fetchDataAndFilter().then(() => {
+ serverList.moveListDown();
+
+ let stringList: Array<{
+ server: string;
+ motd: string;
+ }> = [];
+ let obj: any = {};
+
+ serverList.currentServers.forEach((b) => {
+ stringList.push({ motd: b.motd, server: b.name });
+ });
+
+ serverList.getMOTDs(stringList).then((c) => {
+ var updatedSL = motdList;
+ c.forEach((b: { server: string; motd: string }) => {
+ updatedSL[b.server] = b.motd;
+ });
+ setMotdList(updatedSL);
+ setServers(serverList.currentServers);
+ g(undefined);
+ });
+ });
+ }
+ }),
+ {
+ error: "Error while changing filters",
+ loading: "Changing filters...",
+ success: "Changed filters!",
+ }
+ );
+ }}
+ value={(() => {
+ if (nameFilters["smaller-tf"]) {
+ return "smaller";
+ } else if (nameFilters["bigger-tf"]) {
+ return "bigger";
+ } else {
+ return "none";
+ }
+ })()}
+ >
+
+
+ Only allow smaller servers
+
+ Only allow servers that have the player range 7-15, and
+ cannot
+
+
+
+
+ Only allow bigger servers
+
+ Only allow servers with more than 15 players.
+
+
+
+
+ No/custom requirements
+
+
+
+ Tags
+
+ {allTags.map((tag) => (
+
+ {tag.docsName && tag.__filter == undefined && (
+ {
+ return nameFilters["t-" + tag.docsName];
+ })()}
+ onCheckedChange={async (b) => {
+ var filt = nameFilters;
+ filt["t-" + tag.docsName] = b;
+ setNameFilters(filt);
+ if (b) {
+ var filt2 = filters;
+ filt2.push(tag.condition);
+ setFilters(filt2);
+ } else {
+ var filt2 = filters;
+ filt2.splice(filt2.indexOf(tag.condition), 1);
+ setFilters(filt2);
+ }
+ serverList.editFilters(filters);
+ serverList.fetchDataAndFilter().then(() => {
+ serverList.moveListDown();
+
+ let stringList: Array<{
+ server: string;
+ motd: string;
+ }> = [];
+ let obj: any = {};
+
+ serverList.currentServers.forEach((b) => {
+ stringList.push({ motd: b.motd, server: b.name });
+ });
+
+ serverList.getMOTDs(stringList).then((c) => {
+ var updatedSL = motdList;
+ c.forEach((b: { server: string; motd: string }) => {
+ updatedSL[b.server] = b.motd;
+ });
+ setMotdList(updatedSL);
+ setServers(serverList.currentServers);
+ });
+ });
+ }}
+ >
+
+ {tag.docsName}
+
+
+ )}
+
+ ))}
+
+
+ Categories
+
+
+ {allCategories.map((categorie) => (
+ {
+ var filt = nameFilters;
+ filt["c-" + categorie.name] = b;
+ setNameFilters(filt);
+ if (b) {
+ var filt2 = filters;
+ filt2.push(categorie.condition);
+ setFilters(filt2);
+ } else {
+ var filt2 = filters;
+ filt2.splice(filt2.indexOf(categorie.condition), 1);
+ setFilters(filt2);
+ }
+ serverList.editFilters(filters);
+ serverList.fetchDataAndFilter().then(() => {
+ serverList.moveListDown();
+
+ let stringList: Array<{ server: string; motd: string }> =
+ [];
+ let obj: any = {};
+
+ serverList.currentServers.forEach((b) => {
+ stringList.push({ motd: b.motd, server: b.name });
+ });
+
+ serverList.getMOTDs(stringList).then((c) => {
+ var updatedSL = motdList;
+ c.forEach((b: { server: string; motd: string }) => {
+ updatedSL[b.server] = b.motd;
+ });
+ setMotdList(updatedSL);
+ setServers(serverList.currentServers);
+ });
+ });
+ }}
+ checked={(() => {
+ return nameFilters["c-" + categorie.name];
+ })()}
+ >
+
+ {categorie.name}
+
+
+ ))}
+
+
+
+ View
+
+
+ Grid
+
+
+
+ 4 items per row
+
+
+ 5 items per row
+
+
+ 6 items per row
+
+
+
+
+
+ Sort
+
+
+ c == "favorites" && router.push("/sort/favorites")
+ }
+ >
+
+ Players Online
+
+
+ Favorites
+
+
+
+
+
+
+
+
@@ -695,13 +715,15 @@ export default function ServerList() {
}
style={{ overflow: "hidden !important", paddingLeft: 6 }}
>
-
- {servers.map((b: any) => (
- <>
-
+
+
+ {servers.map((b: any) => (
+ <>
+
+
);
diff --git a/src/components/ServerView.tsx b/src/components/ServerView.tsx
index 8bbc5be..3b9eacb 100644
--- a/src/components/ServerView.tsx
+++ b/src/components/ServerView.tsx
@@ -24,6 +24,8 @@ import { Star, X } from "lucide-react";
import { favoriteServer, isFavorited } from "@/lib/api";
import { LoadingButton } from "./ui/loading-button";
import { useTheme } from "next-themes";
+import { Skeleton } from "./ui/skeleton";
+import FadeIn from "react-fade-in/lib/FadeIn";
export default function ServerView(props: { server: string }) {
const [single, setSingle] = useState(new ServerSingle(props.server));
@@ -66,12 +68,11 @@ export default function ServerView(props: { server: string }) {
if (loading) {
return (
<>
-
+
+
);
}
@@ -94,151 +95,153 @@ export default function ServerView(props: { server: string }) {
)}
-
-
-
-
-
- {single.grabOnline() == undefined ? (
-
- ) : (
-
- )}
- {props.server}
-
-
- {/* 1704088800000 is the Unix time (in milliseconds) of (GMT) Monday, January 1, 2024 6:00:00 AM */}
- {lastOnline < 1704088800000 &&
- single.grabOnline() == undefined && (
-
-
-
- Server too old to grab data
-
-
-
- This server was last online before 1/1/24 or{" "}
- (GMT) Monday, January 1, 2024 6:00:00 AM,
-
-
+
+
+
+
+
+ {single.grabOnline() == undefined ? (
+
+ ) : (
+
)}
+ {props.server}
+
+
+ {/* 1704088800000 is the Unix time (in milliseconds) of (GMT) Monday, January 1, 2024 6:00:00 AM */}
+ {lastOnline < 1704088800000 &&
+ single.grabOnline() == undefined && (
+
+
+
+ Server too old to grab data
+
+
+
+ This server was last online before 1/1/24 or{" "}
+ (GMT) Monday, January 1, 2024 6:00:00 AM,
+
+
+ )}
- {single.getAuthor() != undefined && (
- by {single.getAuthor()}
- )}
-
-
-
-
- Time:
- Last online {" "}
-
-
-
- {timeConverter(single.grabOffline()?.last_online)}
-
-
-
- {single.grabOffline()?.last_online} in Unix time
-
- {" "}
- Created on {" "}
-
-
- {timeConverter(single.grabOffline()?.creation)}
-
-
- {single.grabOffline()?.creation} in Unix time
-
-
-
-
-
-
-
- Favorite the server?
-
- By favoriting the server, you can see it later.{" "}
+ {single.getAuthor() != undefined && (
+ by {single.getAuthor()}
+ )}
+
+
+
+
+ Time:
+ Last online {" "}
+
+
+
+ {timeConverter(single.grabOffline()?.last_online)}
+
+
+
+ {single.grabOffline()?.last_online} in Unix
+ time
+
+ {" "}
+ Created on {" "}
+
+
+ {timeConverter(single.grabOffline()?.creation)}
+
+
+ {single.grabOffline()?.creation} in Unix time
+
+
+
+
+
+
+
+ Favorite the server?
+
+ By favoriting the server, you can see it later.{" "}
+
+ You need to sign in to favorite a server.
+
+
+
+
- You need to sign in to favorite a server.
+
-
-
-
-
-
-
- {
- setLoadingFavorite(true);
- favoriteServer(single.grabOffline()?.name as string).then(
- () => {
- setFavorited(!favorited);
- setLoadingFavorite(false);
- }
- );
- }}
- >
- {favorited && (
-
-
- )}
- {!favorited && (
-
-
- )}
- {favorited && "Unf"}
- {!favorited && "F"}avorite Server
-
-
-
-
-
- This is unlike voting. The{" "}
- amount of people who favorited are public , but the server
- doesn{"'"}t know who favorited, as Favorites are completely
- anonymous.
-
-
-
-
+ {
+ setLoadingFavorite(true);
+ favoriteServer(single.grabOffline()?.name as string).then(
+ () => {
+ setFavorited(!favorited);
+ setLoadingFavorite(false);
+ }
+ );
+ }}
+ >
+ {favorited && (
+
+
+ )}
+ {!favorited && (
+
+
+ )}
+ {favorited && "Unf"}
+ {!favorited && "F"}avorite Server
+
+
+
+
+
+ This is unlike voting. The{" "}
+ amount of people who favorited are public , but the server
+ doesn{"'"}t know who favorited, as Favorites are completely
+ anonymous.
+
+
+
+
@@ -44,6 +44,17 @@ export const Changelog = () => (
+
+ Version b-0.10.2 (August 18th 2024)
+
+
+ • Content fades-in on load
+ • Instead of using spinners, now we are using Skeletons
+
+
Version b-0.10.0 (August 17th 2024)