add homepage

app/routes/_index.tsx

@@ -1,37 +1,30 @@
-import type { V2_MetaFunction } from "@remix-run/cloudflare";
+import { json, type V2_MetaFunction } from "@remix-run/cloudflare";
+import { useLoaderData } from "@remix-run/react";
+import type { IndexResponse } from "~/utils/saerro";
+import { indexQuery } from "~/utils/saerro";
+
+export const loader = async () => {
+  return json(await indexQuery());
+};
 
 export const meta: V2_MetaFunction = () => {
-  return [{ title: "New Remix App" }];
+  return [{ title: "PS2.LIVE" }];
 };
 
 export default function Index() {
+  const data = useLoaderData<typeof loader>();
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
-      <h1>Welcome to Remix</h1>
+      <h1>PS2.LIVE</h1>
+      <h2>Worlds</h2>
       <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/blog"
-            rel="noreferrer"
-          >
-            15m Quickstart Blog Tutorial
-          </a>
-        </li>
-        <li>
-          <a
-            target="_blank"
-            href="https://remix.run/tutorials/jokes"
-            rel="noreferrer"
-          >
-            Deep Dive Jokes App Tutorial
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
+        {data.allWorlds.map((world) => (
+          <li key={world.id}>
+            <a href={`/worlds/${world.id}`}>{world.name}</a> -{" "}
+            {world.population.total} players ({world.population.vs} VS,{" "}
+            {world.population.nc} NC, {world.population.tr} TR)
+          </li>
+        ))}
       </ul>
     </div>
   );

app/utils/saerro.ts

@@ -91,6 +91,8 @@ export const indexQuery = async (): Promise<IndexResponse> => {
 
   indexData.allWorlds.sort((a, b) => a.id - b.id);
 
+  console.log(indexData);
+
   return indexData;
 };