reset

app/routes/worlds.$id.tsx

@@ -0,0 +1,71 @@
+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>
+  );
+};