functional minimum

.gitignore

@@ -4,4 +4,4 @@ node_modules
 /functions/\[\[path\]\].js
 /functions/\[\[path\]\].js.map
 /public/build
-.env
+.env

app/components/Card.tsx

@@ -8,6 +8,7 @@ export const CardBase = styled("div", {
   backgroundColor: "#000",
   border: "2px solid #fff",
   borderRadius: "0.5rem",
+  margin: "1rem",
 });
 
 export const CardHeader = styled(Link, {
@@ -17,4 +18,12 @@ export const CardHeader = styled(Link, {
   justifyContent: "space-between",
   backgroundColor: "#ccc",
   borderRadius: "0.5rem",
+  fontSize: "1.25rem",
+  color: "#000",
+  textDecoration: "none",
+  padding: "0.5rem",
+  cursor: "pointer",
+  ":hover": {
+    backgroundColor: "#fff",
+  },
 });

app/components/FactionBar.tsx

@@ -0,0 +1,55 @@
+import { styled } from "styletron-react";
+
+const BarRoot = styled("div", {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  overflow: "hidden",
+  borderRadius: "0.5rem",
+  border: "1px solid #888",
+});
+
+const Bar = styled(
+  "div",
+  ({
+    color,
+    size,
+    borders = false,
+  }: {
+    color: string;
+    size: number;
+    borders?: boolean;
+  }) => ({
+    backgroundColor: color,
+    flex: size,
+    padding: "0 0.35rem",
+    textAlign: "center",
+    textShadow: "0 0 0.25rem #000",
+  })
+);
+
+export const FactionBar = ({
+  nc,
+  tr,
+  vs,
+  showNumbers = true,
+}: {
+  showNumbers?: boolean;
+  nc: number;
+  tr: number;
+  vs: number;
+}) => {
+  return (
+    <BarRoot>
+      <Bar size={nc} color="#22f" title="New Conglomerate">
+        {nc.toLocaleString()}
+      </Bar>
+      <Bar size={tr} color="#f11" borders title="Terran Republic">
+        {tr.toLocaleString()}
+      </Bar>
+      <Bar size={vs} color="#a0d" title="Vanu Sovreignty">
+        {vs.toLocaleString()}
+      </Bar>
+    </BarRoot>
+  );
+};

app/globalStyles.ts

@@ -8,4 +8,5 @@ export const Body = styled("body", {
   color: "#fff",
   lineHeight: 1.6,
   fontFamily: "Inter, system-ui, sans-serif",
+  margin: 0,
 });

app/routes/index.tsx

@@ -4,6 +4,7 @@ import type { IndexResponse, World } from "~/utils/saerro";
 import { indexQuery } from "~/utils/saerro";
 import { useLoaderData } from "@remix-run/react";
 import { json } from "@remix-run/cloudflare";
+import { FactionBar } from "~/components/FactionBar";
 
 export const loader = async () => {
   return json(await indexQuery());
@@ -26,10 +27,15 @@ const WorldCard = ({ world }: { world: World }) => {
     <CardBase>
       <CardHeader to={`/worlds/${world.id}`}>
         <div>{world.name}</div>
-        <div>
-          <HiChevronRight />
-        </div>
+        <HiChevronRight />
       </CardHeader>
+
+      <div>
+        <div>Population: {world.population.total.toLocaleString()}</div>
+        <div>
+          <FactionBar {...world.population} />
+        </div>
+      </div>
     </CardBase>
   );
 };