initial index

app/routes/_index.tsx

@@ -1,7 +1,7 @@
 import { json, type V2_MetaFunction } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
 import { IndexWorld } from "~/components/index-world";
-import type { IndexResponse } from "~/utils/saerro";
+import { WorldContainer } from "~/components/index-world-container";
 import { indexQuery } from "~/utils/saerro";
 
 export const loader = async () => {
@@ -9,18 +9,22 @@ export const loader = async () => {
 };
 
 export const meta: V2_MetaFunction = () => {
-  return [{ title: "PS2.LIVE" }];
+  return [
+    { title: "PS2.LIVE" },
+    {
+      name: "description",
+      content: "PlanetSide 2 Live Population Stats",
+    },
+  ];
 };
 
 export default function Index() {
   const data = useLoaderData<typeof loader>();
   return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
+    <div>
       <h1>PS2.LIVE</h1>
       <h2>Worlds</h2>
-      {data.allWorlds.map((world) => (
-        <IndexWorld key={world.id} world={world} />
-      ))}
+      <WorldContainer worlds={data.allWorlds} health={data.health} />
     </div>
   );
 }

app/routes/worlds.$id.tsx

@@ -1,9 +1,11 @@
 import type { LoaderArgs, V2_MetaFunction } from "@remix-run/cloudflare";
 import { json } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
-import type { WorldResponse, Zone } from "~/utils/saerro";
+import type { Zone } from "~/utils/saerro";
+import { totalPopulation } from "~/utils/saerro";
 import { allClasses, allVehicles, worldQuery } from "~/utils/saerro";
 import { pascalCaseToTitleCase, toTitleCase } from "~/utils/strings";
+import { worlds } from "~/utils/worlds";
 
 export const loader = async ({ params }: LoaderArgs) => {
   return json(await worldQuery(params.id as string));
@@ -12,50 +14,34 @@ export const loader = async ({ params }: LoaderArgs) => {
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
   const date = new Date();
   const id = data?.world.id;
-  const timeZone =
-    id === 1
-      ? "America/Los_Angeles"
-      : id === 17 || id === 19 || id === 1000
-      ? "America/New_York"
-      : id === 40
-      ? "Asia/Tokyo"
-      : "UTC";
-  const datetimeHumanFriendly = date.toLocaleString("en-GB", {
-    timeZone,
-    hour12: true,
+  const worldInfo = worlds[String(id || "default")];
+  const datetimeHumanFriendly = date.toLocaleString(worldInfo.locale, {
+    timeZone: worldInfo.timeZone,
     dateStyle: "medium",
     timeStyle: "short",
   });
   return [
-    { title: `${data?.world.name || "Unknown world"} | PS2.LIVE` },
     {
-      name: "description",
-      content: `${data?.world.name} currently has ${
-        data?.world.population.total
-      } players online as of ${datetimeHumanFriendly} local server time (<t:${Math.round(
-        date.getTime() / 1000
-      )}:R>). VS: ${data?.world.population.vs}, NC: ${
-        data?.world.population.nc
-      }, TR: ${
-        data?.world.population.tr
-      } -- See more detailed stats on ps2.live.`,
+      title: `${
+        data?.world.name || "Unknown world"
+      } | PlanetSide 2 Live Population Stats`,
     },
     {
-      name: "timestamp",
-      content: date.toISOString(),
+      name: "description",
+      content: `${data?.world.name} currently has ${data?.world.population.total} players online as of ${datetimeHumanFriendly} ${data?.world.name} time. VS: ${data?.world.population.vs}, NC: ${data?.world.population.nc}, TR: ${data?.world.population.tr} -- See more detailed stats on ps2.live.`,
     },
   ];
 };
 
 export default function World() {
-  const { world } = useLoaderData<WorldResponse>();
+  const { world } = useLoaderData<typeof loader>();
 
   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,{" "}
+        {totalPopulation(world.population)} players ({world.population.vs} VS,{" "}
         {world.population.nc} NC, {world.population.tr} TR)
       </p>
       <div>
@@ -73,7 +59,7 @@ const ZoneInfo = ({ zone }: { zone: Zone }) => {
     <section>
       <h3>{zone.name}</h3>
       <p>
-        {zone.population.total} players ({zone.population.vs} VS,{" "}
+        {totalPopulation(zone.population)} players ({zone.population.vs} VS,{" "}
         {zone.population.nc} NC, {zone.population.tr} TR)
       </p>
       <p>
@@ -88,13 +74,14 @@ const ZoneInfo = ({ zone }: { zone: Zone }) => {
         </ul>
       </p>
       <p>
-        {zone.vehicles?.total} vehicles...
+        {totalPopulation(zone.vehicles as any)} 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
+              <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>