show next continent

app/components/index-world.css.ts

@@ -144,3 +144,21 @@ export const alertCont = style({
   border: "2px solid #ff2d2d",
   animation: `${alertFade} 1s ease-in-out 4 alternate`,
 });
+
+export const nextCont = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  padding: "0.5rem",
+  justifyContent: "center",
+  backgroundColor: "#222",
+  borderRadius: "0.4rem",
+  margin: "0.5rem",
+  color: "#aaa",
+});
+
+export const nextContText = style({
+  fontWeight: "bold",
+  textTransform: "uppercase",
+  marginRight: "0.5rem",
+});

app/components/index-world.tsx

@@ -22,6 +22,12 @@ export type IndexWorldProps = {
 export const IndexWorld = ({ metagame, population }: IndexWorldProps) => {
   const worldId = metagame.id;
   const { platform, location, name } = worlds[String(worldId || "default")];
+  const nextZone = metagame.zones.sort(
+    (a, b) =>
+      new Date(a.locked_since ?? Date.now()).getTime() -
+      new Date(b.locked_since ?? Date.now()).getTime()
+  )[0];
+  const nextZoneStrings = zones[nextZone.id];
 
   return (
     <div className={styles.container}>
@@ -121,6 +127,23 @@ export const IndexWorld = ({ metagame, population }: IndexWorldProps) => {
               </div>
             );
           })}
+        {worldId !== 19 && (
+          <div className={styles.nextCont}>
+            <div className={styles.nextContText}>Next continent &raquo;</div>{" "}
+            <div className={styles.contName}>
+              <div
+                className={styles.contCircle}
+                style={
+                  {
+                    "--upper-color": nextZoneStrings.colors[0],
+                    "--lower-color": nextZoneStrings.colors[1],
+                  } as any
+                }
+              ></div>
+              <div>{nextZoneStrings.name}</div>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

app/utils/metagame.ts

@@ -21,6 +21,7 @@ export type MetagameWorld = {
       tr: number;
       vs: number;
     };
+    locked_since?: string;
   }[];
 };