71 lines
2 KiB
TypeScript
71 lines
2 KiB
TypeScript
import type { LoaderArgs } from "@remix-run/cloudflare";
|
|
import { json } from "@remix-run/cloudflare";
|
|
import { useLoaderData } from "@remix-run/react";
|
|
import {
|
|
WorldResponse,
|
|
Zone,
|
|
allClasses,
|
|
allVehicles,
|
|
worldQuery,
|
|
} from "~/utils/saerro";
|
|
import { pascalCaseToTitleCase, toTitleCase } from "~/utils/strings";
|
|
|
|
export const loader = async ({ params }: LoaderArgs) => {
|
|
return json(await worldQuery(params.id as string));
|
|
};
|
|
|
|
export default function Index() {
|
|
const { world } = useLoaderData<WorldResponse>();
|
|
|
|
return (
|
|
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.6" }}>
|
|
<h1>{world.name}</h1>
|
|
<h2>Total Population</h2>
|
|
<p>
|
|
{world.population.total} 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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const ZoneInfo = ({ zone }: { zone: Zone }) => {
|
|
return (
|
|
<section>
|
|
<h3>{zone.name}</h3>
|
|
<p>
|
|
{zone.population.total} 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>
|
|
{zone.vehicles?.total} vehicles...
|
|
<ul>
|
|
{allVehicles.map((vehicle, idx) => (
|
|
<li key={idx}>
|
|
<b>{toTitleCase(vehicle)}</b>: {zone.vehicles?.[vehicle].total}{" "}
|
|
total, {zone.vehicles?.[vehicle].vs} VS,{" "}
|
|
{zone.vehicles?.[vehicle].nc} NC, {zone.vehicles?.[vehicle].tr} TR
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</p>
|
|
</section>
|
|
);
|
|
};
|