From ca9be2d8461b414b0170b4171aba6e31a24df95e Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Fri, 9 Jun 2023 16:44:05 -0400
Subject: [PATCH] show next continent

---
 app/components/index-world.css.ts | 18 ++++++++++++++++++
 app/components/index-world.tsx    | 23 +++++++++++++++++++++++
 app/utils/metagame.ts             |  1 +
 3 files changed, 42 insertions(+)

diff --git a/app/components/index-world.css.ts b/app/components/index-world.css.ts
index 0e6044c..62ff0fd 100644
--- a/app/components/index-world.css.ts
+++ b/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",
+});
diff --git a/app/components/index-world.tsx b/app/components/index-world.tsx
index b00d112..93e236d 100644
--- a/app/components/index-world.tsx
+++ b/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>
   );
diff --git a/app/utils/metagame.ts b/app/utils/metagame.ts
index f20acd8..0f60c02 100644
--- a/app/utils/metagame.ts
+++ b/app/utils/metagame.ts
@@ -21,6 +21,7 @@ export type MetagameWorld = {
       tr: number;
       vs: number;
     };
+    locked_since?: string;
   }[];
 };