fix empty metagame

app/components/index-world.css.ts

@@ -188,3 +188,25 @@ export const nextContText = style({
   textTransform: "uppercase",
   marginRight: "0.5rem",
 });
+
+export const oopsies = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "1.5rem",
+  height: "10rem",
+});
+
+const oopsiesSpinAnim = keyframes({
+  from: {
+    transform: "rotate(0deg)",
+  },
+  to: {
+    transform: "rotate(360deg)",
+  },
+});
+
+export const oopsiesSpin = style({
+  animation: `${oopsiesSpinAnim} 2s linear infinite`,
+});

app/components/index-world.tsx

@@ -24,6 +24,11 @@ export type IndexWorldProps = {
 export const IndexWorld = ({ metagame, population }: IndexWorldProps) => {
   const worldId = metagame.id;
   const { platform, location, name } = worlds[String(worldId || "default")];
+
+  if (metagame.zones.length === 0) {
+    return <BrokenWorld worldId={worldId} />;
+  }
+
   const nextZone = metagame.zones.sort(
     (a, b) =>
       new Date(a.locked_since ?? Date.now()).getTime() -
@@ -164,3 +169,26 @@ const Continent = ({ zone }: { zone: MetagameWorld["zones"][0] }) => {
     </div>
   );
 };
+
+const BrokenWorld = ({ worldId }: { worldId: number }) => {
+  const { platform, location, name } = worlds[String(worldId || "default")];
+
+  return (
+    <div className={styles.container}>
+      <Link to={`/worlds/${worldId}`} className={styles.header}>
+        <div className={styles.headerName}>{name}</div>
+        <div className={styles.headerMarkers}>
+          [{location}] [{platform}]{" "}
+        </div>
+        <div className={styles.headerDetailsLink}>DETAILS ⇨</div>
+      </Link>
+      <div className={styles.details}>
+        <div className={styles.oopsies}>
+          Daybreak made an oopsie.
+          <br />
+          <div className={styles.oopsiesSpin}>🙂</div>
+        </div>
+      </div>
+    </div>
+  );
+};