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 (