feat: restructure guardian progression system with dynamic element support

2026-05-29 17:18:13 +02:00
parent 644b76f16d
commit 71c68443c4
19 changed files with 757 additions and 446 deletions
@@ -77,7 +77,7 @@ function FloorProgressBar({ maxFloor, clearedFloors }: { maxFloor: number; clear
                }`}
                title={
                  getGuardianForFloor(floor)
-                    ? `Floor ${floor} — ${getGuardianForFloor(floor)!.name} (${getGuardianForFloor(floor)!.element})`
+                    ? `Floor ${floor} — ${getGuardianForFloor(floor)!.name} (${getGuardianForFloor(floor)!.element.join(' + ')})`
                    : `Floor ${floor}${isCleared ? ' (cleared)' : ''}`
                }
              >
@@ -149,7 +149,7 @@ function StatCell({ value, label, color }: { value: number | string; label: stri
 // ─── Next Guardian Card ──────────────────────────────────────────────────────

 function NextGuardianCard({ nextGuardian, nextGuardianData }: { nextGuardian: number; nextGuardianData: GuardianDef }) {
-  const counterElement = getCounterElement(nextGuardianData.element);
+  const counterElement = getCounterElement(nextGuardianData.element[0]);
  const nextFloorElement = FLOOR_ELEM_CYCLE[(nextGuardian - 1) % FLOOR_ELEM_CYCLE.length];

  return (
@@ -176,9 +176,9 @@ function NextGuardianCard({ nextGuardian, nextGuardianData }: { nextGuardian: nu
              <Badge
                variant="outline"
                className="text-xs"
-                style={{ borderColor: getElementColor(nextGuardianData.element), color: getElementColor(nextGuardianData.element) }}
+                style={{ borderColor: getElementColor(nextGuardianData.element[0]), color: getElementColor(nextGuardianData.element[0]) }}
              >
-                {nextGuardianData.element}
+                {nextGuardianData.element.join(' + ')}
              </Badge>
              <span className="text-xs text-gray-500">HP: {fmt(nextGuardianData.hp)}</span>
              {nextGuardianData.armor && (
@@ -287,7 +287,7 @@ function GuardianRosterItem({ floor, guardian, isDefeated }: { floor: number; gu
                color: guardian.color,
              }}
            >
-              {guardian.element}
+              {guardian.element.join(' + ')}
            </span>
            <span className="text-[10px] text-gray-500">HP: {fmt(guardian.hp)}</span>
          </div>