feat: add zone system to bosses and quests

2026-03-06 13:42:40 -08:00
parent e9e0df31fd
commit 897eba5f64
15 changed files with 239 additions and 4 deletions
@@ -0,0 +1,32 @@
+import type { Zone } from "@elysium/types";
+
+interface ZoneSelectorProps {
+  zones: Zone[];
+  activeZoneId: string;
+  onSelectZone: (zoneId: string) => void;
+}
+
+export const ZoneSelector = ({
+  zones,
+  activeZoneId,
+  onSelectZone,
+}: ZoneSelectorProps): React.JSX.Element => (
+  <div className="zone-selector">
+    {zones.map((zone) => (
+      <button
+        key={zone.id}
+        className={`zone-tab ${zone.id === activeZoneId ? "zone-tab-active" : ""} ${zone.status === "locked" ? "zone-tab-locked" : ""}`}
+        disabled={zone.status === "locked"}
+        onClick={() => {
+          onSelectZone(zone.id);
+        }}
+        title={zone.status === "locked" ? `Unlock by defeating ${zone.unlockBossId?.replace(/_/g, " ") ?? "the previous boss"}` : zone.description}
+        type="button"
+      >
+        <span className="zone-emoji">{zone.emoji}</span>
+        <span className="zone-name">{zone.name}</span>
+        {zone.status === "locked" && <span className="zone-lock">🔒</span>}
+      </button>
+    ))}
+  </div>
+);