first pass of new server page

app/routes/debug.components.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { FactionBar } from "~/components/faction-bar";
+import { FactionPie } from "~/components/faction-pie";
+import type { Population } from "~/utils/saerro";
+
+export default function DebugComponents() {
+  const [population, setPopulation] = useState<Population>({
+    nc: 33,
+    tr: 33,
+    vs: 33,
+  });
+
+  const [innerMargin, setInnerMargin] = useState<number>(10);
+  const [innerColor, setInnerColor] = useState<string>("black");
+  return (
+    <div>
+      <h1>Debug Components</h1>
+      <h2>Faction Viz</h2>
+      <div>
+        NC{" "}
+        <input
+          type="number"
+          value={population.nc}
+          onChange={(e) =>
+            setPopulation((p) => ({ ...p, nc: Number(e.target.value) }))
+          }
+        />{" "}
+        || TR{" "}
+        <input
+          type="number"
+          value={population.tr}
+          onChange={(e) =>
+            setPopulation((p) => ({ ...p, tr: Number(e.target.value) }))
+          }
+        />{" "}
+        || VS{" "}
+        <input
+          type="number"
+          value={population.vs}
+          onChange={(e) =>
+            setPopulation((p) => ({ ...p, vs: Number(e.target.value) }))
+          }
+        />
+      </div>
+      <div>
+        <h3>Horizontal Stacked Bar Chart</h3>
+        <FactionBar population={population} />
+        <h3>Pie Chart</h3>
+        <div style={{ fontSize: "5rem" }}>
+          <FactionPie population={population} />
+          <FactionPie
+            population={population}
+            innerBackground={innerColor}
+            innerMargin={innerMargin}
+          />
+        </div>
+        Inner margin{" "}
+        <input
+          type="number"
+          value={innerMargin}
+          onChange={(e) => setInnerMargin(Number(e.target.value))}
+        />
+        Inner color{" "}
+        <input
+          type="color"
+          value={innerColor}
+          onChange={(e) => setInnerColor(e.target.value)}
+        />
+      </div>
+    </div>
+  );
+}

app/routes/worlds.$id.tsx

@@ -17,6 +17,16 @@ import {
   worlds,
   zones,
 } from "~/utils/strings";
+import * as styles from "~/components/world.css";
+import { c } from "~/utils/classes";
+import { FactionBar } from "~/components/faction-bar";
+import { popImage } from "~/components/index-world.css";
+import vsLogo from "~/images/vs-100.png";
+import ncLogo from "~/images/nc-100.png";
+import trLogo from "~/images/tr-100.png";
+import { FactionPie } from "~/components/faction-pie";
+import { AlertTimer } from "~/components/alert-timer";
+import { contPrioritySort } from "~/utils/sorting";
 
 type LoaderData = {
   saerro: WorldResponse;
@@ -66,26 +76,104 @@ export default function World() {
   const {
     saerro: { world },
     id,
+    metagame,
   } = useLoaderData<typeof loader>();
 
   const worldInfo = worlds[String(id || "default")];
+  const nextZoneID = metagame.zones.sort(
+    (a, b) =>
+      new Date(a.locked_since ?? Date.now()).getTime() -
+      new Date(b.locked_since ?? Date.now()).getTime()
+  )[0].id;
 
   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 className={styles.outer}>
+        <div>
+          <div className={styles.header}>
+            <div className={c(styles.headerName, styles.headerFont)}>
+              <div>{worldInfo.name.toUpperCase()}</div>
+              <div className={styles.headerSub}>
+                [{worldInfo.location}] [{worldInfo.platform}]
+              </div>
+            </div>
+            <div className={styles.populationHead}>
+              <div className={styles.headerFont}>
+                <div className={styles.totalPop}>
+                  {totalPopulation(world.population).toLocaleString()}
+                </div>
+                PLAYERS
+              </div>
+              <div className={styles.population}>
+                <div className={styles.popNumbers}>
+                  <div
+                    className={styles.popItem}
+                    style={{ flex: world.population.vs + 1 }}
+                  >
+                    <img className={popImage} src={vsLogo} alt="VS" />{" "}
+                    {world.population.vs}
+                  </div>
+                  <div
+                    className={styles.popItem}
+                    style={{ flex: world.population.nc + 1 }}
+                  >
+                    <img className={popImage} src={ncLogo} alt="NC" />{" "}
+                    {world.population.nc}
+                  </div>
+                  <div
+                    className={styles.popItem}
+                    style={{ flex: world.population.tr + 1 }}
+                  >
+                    <img className={popImage} src={trLogo} alt="TR" />{" "}
+                    {world.population.tr}
+                  </div>
+                </div>
+                <FactionBar population={world.population} />
+              </div>
+            </div>
+            <div className={styles.headerConts}>
+              <div className={styles.headerSub}>CONTINENT CONTROL</div>
+              {metagame.zones.sort(contPrioritySort).map((zone, idx) => {
+                const zoneInfo = zones[String(zone.id)];
+                return (
+                  <div key={idx} className={styles.cont}>
+                    <div style={{ flex: 0 }}>{zoneInfo.name.toUpperCase()}</div>
+                    <div style={{ flex: 1 }}>
+                      <FactionPie
+                        size="4rem"
+                        population={zone.alert?.percentages ?? zone.territory}
+                        innerBackground={`linear-gradient(45deg, ${zoneInfo.colors[0]}, ${zoneInfo.colors[1]})`}
+                        innerMargin={10}
+                      />
+                    </div>
+                    <div className={styles.contSub}>
+                      {zone.alert ? (
+                        <AlertTimer alert={zone.alert} />
+                      ) : zone.locked ? (
+                        nextZoneID == zone.id ? (
+                          <>NEXT UP »</>
+                        ) : (
+                          <>LOCKED</>
+                        )
+                      ) : (
+                        <>UNLOCKED</>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div>
+            <h2>Continents</h2>
+            {world.zones.all.map((zone) => (
+              <ZoneInfo zone={zone} key={zone.id} />
+            ))}
+          </div>
+        </div>
       </div>
       <Footer isMainPage />
-    </div>
+    </>
   );
 }