127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
import type { LoaderArgs, V2_MetaFunction } from "@remix-run/cloudflare";
|
|
import { json } from "@remix-run/cloudflare";
|
|
import { useLoaderData } from "@remix-run/react";
|
|
import { Footer } from "~/components/footer";
|
|
import type { MetagameWorld } from "~/utils/metagame";
|
|
import { fetchSingleMetagameWorld } from "~/utils/metagame";
|
|
import type { WorldResponse, Zone } from "~/utils/saerro";
|
|
import {
|
|
allClasses,
|
|
allVehicles,
|
|
totalPopulation,
|
|
worldQuery,
|
|
} from "~/utils/saerro";
|
|
import {
|
|
pascalCaseToTitleCase,
|
|
toTitleCase,
|
|
worlds,
|
|
zones,
|
|
} from "~/utils/strings";
|
|
|
|
type LoaderData = {
|
|
saerro: WorldResponse;
|
|
metagame: MetagameWorld;
|
|
id: string;
|
|
};
|
|
|
|
export async function loader({ params }: LoaderArgs) {
|
|
const [saerro, metagame] = await Promise.all([
|
|
worldQuery(params.id as string),
|
|
fetchSingleMetagameWorld(params.id as string),
|
|
]);
|
|
return json({ saerro, metagame, id: params.id } as LoaderData);
|
|
}
|
|
|
|
export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
|
|
const { saerro, id } = data as LoaderData;
|
|
const date = new Date();
|
|
const worldInfo = worlds[String(id || "default")];
|
|
const datetimeHumanFriendly = date.toLocaleString(worldInfo.locale, {
|
|
timeZone: worldInfo.timeZone,
|
|
dateStyle: "medium",
|
|
timeStyle: "short",
|
|
});
|
|
return [
|
|
{
|
|
title: `${
|
|
worldInfo.name || "Unknown world"
|
|
} | PlanetSide 2 Live Population Stats`,
|
|
},
|
|
{
|
|
name: "description",
|
|
content: `${worldInfo.name} currently has ${totalPopulation(
|
|
saerro.world.population
|
|
)} players online as of ${datetimeHumanFriendly} ${
|
|
worldInfo.name
|
|
} time. VS: ${saerro.world.population.vs}, NC: ${
|
|
saerro.world.population.nc
|
|
}, TR: ${
|
|
saerro.world.population.tr
|
|
} -- See more detailed stats on ps2.live.`,
|
|
},
|
|
];
|
|
};
|
|
|
|
export default function World() {
|
|
const {
|
|
saerro: { world },
|
|
id,
|
|
} = useLoaderData<typeof loader>();
|
|
|
|
const worldInfo = worlds[String(id || "default")];
|
|
|
|
return (
|
|
<div>
|
|
<h1>{worldInfo.name}</h1>
|
|
<h2>Total Population</h2>
|
|
<p>
|
|
{totalPopulation(world.population)} players ({world.population.vs} VS,{" "}
|
|
{world.population.nc} NC, {world.population.tr} TR)
|
|
</p>
|
|
<div>
|
|
<h2>Continents</h2>
|
|
{world.zones.all.map((zone) => (
|
|
<ZoneInfo zone={zone} key={zone.id} />
|
|
))}
|
|
</div>
|
|
<Footer isMainPage />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const ZoneInfo = ({ zone }: { zone: Zone }) => {
|
|
const zoneInfo = zones[String(zone.id)];
|
|
return (
|
|
<section>
|
|
<h3>{zoneInfo.name}</h3>
|
|
<p>
|
|
{totalPopulation(zone.population)} players ({zone.population.vs} VS,{" "}
|
|
{zone.population.nc} NC, {zone.population.tr} TR)
|
|
</p>
|
|
<p>
|
|
<ul>
|
|
{allClasses.map((cls, idx) => (
|
|
<li key={idx}>
|
|
<b>{pascalCaseToTitleCase(cls)}</b>: {zone.classes?.[cls].total}{" "}
|
|
total, {zone.classes?.[cls].vs} VS, {zone.classes?.[cls].nc} NC,{" "}
|
|
{zone.classes?.[cls].tr} TR
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</p>
|
|
<p>
|
|
{totalPopulation(zone.vehicles as any)} vehicles...
|
|
<ul>
|
|
{allVehicles.map((vehicle, idx) => (
|
|
<li key={idx}>
|
|
<b>{toTitleCase(vehicle)}</b>:{" "}
|
|
{totalPopulation(zone.vehicles?.[vehicle] as any)} total,{" "}
|
|
{zone.vehicles?.[vehicle].vs} VS, {zone.vehicles?.[vehicle].nc}{" "}
|
|
NC, {zone.vehicles?.[vehicle].tr} TR
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</p>
|
|
</section>
|
|
);
|
|
};
|