feat: add zone system to bosses and quests

apps/web/src/components/game/BossPanel.tsx

@@ -2,6 +2,7 @@ import type { Boss } from "@elysium/types";
 import { useState } from "react";
 import { useGame } from "../../context/GameContext.js";
 import { formatNumber } from "../../utils/format.js";
+import { ZoneSelector } from "./ZoneSelector.js";
 
 interface BossCardProps {
   boss: Boss;
@@ -17,7 +18,7 @@ const BossCard = ({
   isChallenging,
 }: BossCardProps): React.JSX.Element => {
   const hpPercent = (boss.currentHp / boss.maxHp) * 100;
-  const isLocked = boss.prestigeRequirement > prestigeCount;
+  const isPrestigeLocked = boss.prestigeRequirement > prestigeCount;
   const canChallenge =
     (boss.status === "available" || boss.status === "in_progress") && !isChallenging;
 
@@ -26,7 +27,7 @@ const BossCard = ({
       <div className="boss-info">
         <h3>{boss.name}</h3>
         <p>{boss.description}</p>
-        {isLocked && boss.status === "locked" && (
+        {isPrestigeLocked && boss.status === "locked" && (
           <p className="prestige-lock">
             🔒 Requires Prestige {boss.prestigeRequirement}
           </p>
@@ -87,6 +88,7 @@ const BossCard = ({
 export const BossPanel = (): React.JSX.Element => {
   const { state, challengeBoss } = useGame();
   const [challengingBossId, setChallengingBossId] = useState<string | null>(null);
+  const [activeZoneId, setActiveZoneId] = useState("verdant_vale");
 
   if (!state) return <section className="panel"><p>Loading...</p></section>;
 
@@ -135,10 +137,19 @@ export const BossPanel = (): React.JSX.Element => {
     }
   };
 
+  const zones = state.zones ?? [];
+  const zoneBosses = state.bosses.filter((b) => b.zoneId === activeZoneId);
+
   return (
     <section className="panel boss-panel">
       <h2>Boss Encounters</h2>
 
+      <ZoneSelector
+        activeZoneId={activeZoneId}
+        zones={zones}
+        onSelectZone={setActiveZoneId}
+      />
+
       <div className="party-combat-stats">
         <div className="combat-stat">
           <span className="stat-label">⚔️ Party DPS</span>
@@ -151,7 +162,7 @@ export const BossPanel = (): React.JSX.Element => {
       </div>
 
       <div className="boss-list">
-        {state.bosses.map((boss) => (
+        {zoneBosses.map((boss) => (
           <BossCard
             key={boss.id}
             boss={boss}
@@ -162,6 +173,9 @@ export const BossPanel = (): React.JSX.Element => {
             }}
           />
         ))}
+        {zoneBosses.length === 0 && (
+          <p className="empty-zone">No bosses in this zone yet.</p>
+        )}
       </div>
     </section>
   );