+
+
+ {guardian.name}
+
+
+ Floor {floor} | {guardian.pact}x multiplier
+
+
+ Element: {ELEMENTS[guardian.element]?.name || guardian.element}
+
+
+
+ {isSigned ? (
+
+ Remove
+
+ ) : (
+
+ Force Sign
+
+ )}
+
+
- {guardianFloors.map((floor) => {
- const guardian = GUARDIANS[floor];
- const isSigned = signedPacts.includes(floor);
-
- return (
-
-
-
- {guardian.name}
-
-
- Floor {floor} | {guardian.pact}x multiplier
-
-
- Element: {ELEMENTS[guardian.element]?.name || guardian.element}
-
-
-
- {isSigned ? (
- removePactHandler(floor)}
- className="text-xs"
- >
- Remove
-
- ) : (
- forcePact(floor)}
- className="text-xs bg-amber-600 hover:bg-amber-700"
- >
- Force Sign
-
- )}
-
-
- );
- })}
+ {guardianFloors.map((floor) => (
+
forcePact(floor)}
+ onRemove={() => removePactHandler(floor)}
+ />
+ ))}
@@ -158,4 +165,4 @@ export function PactDebugSection() {
);
}
-PactDebugSection.displayName = "PactDebugSection";
+PactDebugSection.displayName = 'PactDebugSection';
diff --git a/src/components/game/tabs/GuardianPactsTab.tsx b/src/components/game/tabs/GuardianPactsTab.tsx
index b0b7e11..99f9170 100644
--- a/src/components/game/tabs/GuardianPactsTab.tsx
+++ b/src/components/game/tabs/GuardianPactsTab.tsx
@@ -5,14 +5,14 @@ import { useShallow } from 'zustand/react/shallow';
import { usePrestigeStore } from '@/lib/game/stores/prestigeStore';
import { useManaStore } from '@/lib/game/stores/manaStore';
import { useUIStore } from '@/lib/game/stores/uiStore';
-import { GUARDIANS, ELEMENTS } from '@/lib/game/constants';
-import type { GuardianDef, GuardianBoon } from '@/lib/game/types';
+import { GUARDIANS } from '@/lib/game/constants';
import { DebugName } from '@/components/game/debug/debug-context';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
-import { Shield, Swords, Clock, Sparkles, Check, Lock, ChevronRight } from 'lucide-react';
-import clsx from 'clsx';
+import {
+ GuardianCard,
+ PactHeaderSummary,
+ TierFilter,
+} from './guardian-pacts-components';
// ─── Helpers ─────────────────────────────────────────────────────────────────
@@ -24,172 +24,6 @@ function getGuardianStatus(floor: number, defeated: number[], signed: number[]):
return 'undefeated';
}
-function formatHours(hours: number): string {
- return `${hours}h`;
-}
-
-// ─── Guardian Card ───────────────────────────────────────────────────────────
-
-interface GuardianCardProps {
- floor: number;
- guardian: GuardianDef;
- status: GuardianStatus;
- canAfford: boolean;
- hasSlot: boolean;
- isRitualActive: boolean;
- ritualProgress: number;
- onStartRitual: (floor: number) => void;
-}
-
-const GuardianCard: React.FC
= React.memo(({
- floor,
- guardian,
- status,
- canAfford,
- hasSlot,
- isRitualActive,
- ritualProgress,
- onStartRitual,
-}) => {
- const elemDef = ELEMENTS[guardian.element];
- const elemColor = elemDef?.color ?? '#888';
- const elemSym = elemDef?.sym ?? '';
-
- const statusConfig: Record = {
- undefeated: { label: 'Undefeated', color: 'text-gray-400', bg: 'bg-gray-800/50' },
- defeated: { label: 'Pact Available', color: 'text-amber-400', bg: 'bg-amber-900/20' },
- signed: { label: 'Pact Signed', color: 'text-green-400', bg: 'bg-green-900/20' },
- };
-
- const sc = statusConfig[status];
- const ritualTime = guardian.pactTime;
- const ritualComplete = ritualProgress >= ritualTime;
-
- return (
-
-
-
-
-
- {elemSym}
- {guardian.name}
-
-
Floor {floor} · {elemDef?.name ?? guardian.element}
-
-
- {sc.label}
-
-
-
-
- {/* Stats */}
-
-
- HP: {guardian.hp.toLocaleString()}
-
-
- PWR: {guardian.power.toLocaleString()}
-
-
- ARM: {Math.round((guardian.armor ?? 0) * 100)}%
-
-
-
-
-
- {guardian.boons.map((boon: GuardianBoon, i: number) => (
-
- {boon.desc}
-
- ))}
-
-
- Perk: {guardian.uniquePerk}
-
-
- {/* Pact Cost */}
-
-
- {formatHours(guardian.pactTime)}
-
-
- Cost: {guardian.pactCost.toLocaleString()} mana
-
-
-
- Ritual in progress…
- {ritualProgress}/{ritualTime}h
-
-
- {ritualComplete && (
-
-
- )}
-
onStartRitual(floor)}
- disabled={!canAfford || !hasSlot}
- className={clsx(
- 'w-full rounded px-3 py-1.5 text-xs font-medium transition-colors flex items-center justify-center gap-1',
- canAfford && hasSlot
- ? 'bg-amber-600/80 text-white hover:bg-amber-500'
- : 'bg-gray-700 text-gray-500 cursor-not-allowed',
- )}
- >
- {!canAfford ? (
- <>
- )}
-
-
- );
-});
-
-GuardianCard.displayName = 'GuardianCard';
-
-// ─── Floor Tier Groups ──────────────────────────────────────────────────────
-
interface FloorTier {
label: string;
floors: number[];
@@ -263,7 +97,6 @@ export const GuardianPactsTab: React.FC = () => {
}
}, [startPactRitual, rawMana, addLog]);
- // Cumulative boon summary from signed pacts
const cumulativeBoons = useMemo(() => {
const boonMap: Record = {};
for (const floor of signedPacts) {
@@ -287,95 +120,34 @@ export const GuardianPactsTab: React.FC = () => {
return (
- {/* Header Summary */}
-
-
-
-
- Pact Slots:
- {signedPacts.length} / {pactSlots}
-
-
- Signed:
- {signedPacts.length}
-
-
- Defeated:
- {defeatedGuardians.length}
-
-
-
Active Boon Effects:
-
- {Object.entries(cumulativeBoons).map(([type, value]) => (
-
- {type}: +{value}
-
- ))}
-
-
-
+
- {/* Tier Filter */}
-
- setActiveTier('all')}
- className={clsx(
- 'rounded px-3 py-1 text-xs font-medium transition-colors',
- activeTier === 'all'
- ? 'bg-amber-600 text-white'
- : 'text-gray-400 hover:text-gray-200',
- )}
- >
- All ({guardianFloors.length})
-
- {tiers.map((tier) => (
- setActiveTier(tier.label)}
- className={clsx(
- 'rounded px-3 py-1 text-xs font-medium transition-colors',
- activeTier === tier.label
- ? 'bg-amber-600 text-white'
- : 'text-gray-400 hover:text-gray-200',
- )}
- >
- {tier.label} ({tier.floors.length})
-
- ))}
-
-
- {/* Guardian Cards */}
{filteredFloors.map((floor) => {
const guardian = GUARDIANS[floor];
if (!guardian) return null;
- const status = getGuardianStatus(floor, defeatedGuardians, signedPacts);
- const isRitualActive = pactRitualFloor === floor;
- const hasSlot = signedPacts.length < pactSlots;
- const canAfford = rawMana >= guardian.pactCost;
-
return (
= guardian.pactCost}
+ hasSlot={signedPacts.length < pactSlots}
+ isRitualActive={pactRitualFloor === floor}
ritualProgress={pactRitualProgress}
onStartRitual={handleStartRitual}
/>
diff --git a/src/components/game/tabs/PrestigeTab.tsx b/src/components/game/tabs/PrestigeTab.tsx
index 5387b30..9cc0b0b 100644
--- a/src/components/game/tabs/PrestigeTab.tsx
+++ b/src/components/game/tabs/PrestigeTab.tsx
@@ -23,6 +23,101 @@ import {
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
+// ─── Stat Cell ────────────────────────────────────────────────────────────────
+
+function PrestigeStatCell({ value, label, color }: { value: string | number; label: string; color: string }) {
+ return (
+
+ );
+}
+
+// ─── Insight Summary ──────────────────────────────────────────────────────────
+
+function InsightSummary({ insight, totalInsight, loopCount, loopInsight }: {
+ insight: number;
+ totalInsight: number;
+ loopCount: number;
+ loopInsight: number;
+}) {
+ return (
+
+
+
+
+
+ );
+}
+
+// ─── Memories Card ────────────────────────────────────────────────────────────
+
+function MemoriesCard({ memories, memorySlots }: { memories: { skillId: string; level: number; tier: number }[]; memorySlots: number }) {
+ return (
+
+
+
+ Skills carried between loops. Slots: {memories.length}/{memorySlots}
+
+ {memories.length === 0 ? (
+ No memories stored yet.
+ ) : (
+
+ {memories.map((m) => (
+
+ {m.skillId}
+ Lv.{m.level} T{m.tier}
+
+ ))}
+
+
+ );
+}
+
+// ─── Pacts Card ───────────────────────────────────────────────────────────────
+
+function PactsCard({ signedPacts, pactSlots, defeatedGuardians }: {
+ signedPacts: number[];
+ pactSlots: number;
+ defeatedGuardians: number[];
+}) {
+ return (
+
+
+
+ Guardian pacts signed. Slots: {signedPacts.length}/{pactSlots}
+
+ {defeatedGuardians.length > 0 && (
+
+ Defeated guardians: {defeatedGuardians.map((f) => `F${f}`).join(', ')}
+
+ )}
+ {signedPacts.length === 0 ? (
+ No pacts signed yet.
+ ) : (
+
+ {signedPacts.map((f) => (
+
+ ✓ Floor {f} — Pact signed
+
+ ))}
+
+
+ );
+}
+
// ─── Upgrade Card ─────────────────────────────────────────────────────────────
interface UpgradeCardProps {
@@ -72,6 +167,49 @@ function UpgradeCard({ id, name, desc, max, cost, currentLevel, insight, onPurch
);
}
+// ─── Reset Loop Section ──────────────────────────────────────────────────────
+
+function ResetLoopSection({ loopInsight, onReset }: { loopInsight: number; onReset: () => void }) {
+ return (
+
+
+
+
+
Reset Loop
+
+ End the current loop and gain {fmt(loopInsight)} insight. Your prestige upgrades, memories, and pacts are preserved.
+
+
+
+
+
+ Reset Loop
+
+
+
+
+ Reset the Loop?
+
+ This will end your current loop and award you {fmt(loopInsight)} insight .
+ Your prestige upgrades, memories, and pacts will be preserved.
+
+
+
+ Cancel
+
+ Confirm Reset
+
+
+
+
+
+
+ );
+}
+
// ─── Main Component ───────────────────────────────────────────────────────────
export function PrestigeTab() {
@@ -130,80 +268,18 @@ export function PrestigeTab() {
return (
- {/* Insight & Loop Summary */}
-
-
-
-
-
{fmt(insight)}
-
Insight Available
-
-
-
{fmt(totalInsight)}
-
Total Insight Earned
-
-
-
{loopCount}
-
Loops Completed
-
-
-
{fmt(loopInsight)}
-
This Loop's Insight
-
-
-
+
- {/* Memories & Pacts */}
-
-
-
- Skills carried between loops. Slots: {memories.length}/{memorySlots}
-
- {memories.length === 0 ? (
- No memories stored yet.
- ) : (
-
- {memories.map((m) => (
-
- {m.skillId}
- Lv.{m.level} T{m.tier}
-
- ))}
-
-
-
-
-
-
- Guardian pacts signed. Slots: {signedPacts.length}/{pactSlots}
-
- {defeatedGuardians.length > 0 && (
-
- Defeated guardians: {defeatedGuardians.map((f) => `F${f}`).join(', ')}
-
- )}
- {signedPacts.length === 0 ? (
- No pacts signed yet.
- ) : (
-
- {signedPacts.map((f) => (
-
- ✓ Floor {f} — Pact signed
-
- ))}
-
-
+
+
- {/* Prestige Upgrades */}
@@ -227,43 +303,7 @@ export function PrestigeTab() {
- {/* Reset Loop */}
-
-
-
-
-
Reset Loop
-
- End the current loop and gain {fmt(loopInsight)} insight. Your prestige upgrades, memories, and pacts are preserved.
-
-
-
-
-
- Reset Loop
-
-
-
-
- Reset the Loop?
-
- This will end your current loop and award you {fmt(loopInsight)} insight .
- Your prestige upgrades, memories, and pacts will be preserved.
-
-
-
- Cancel
-
- Confirm Reset
-
-
-
-
-
-
+
);
diff --git a/src/components/game/tabs/SpireCombatPage/SpireCombatPage.tsx b/src/components/game/tabs/SpireCombatPage/SpireCombatPage.tsx
index 418f2a2..fe36088 100644
--- a/src/components/game/tabs/SpireCombatPage/SpireCombatPage.tsx
+++ b/src/components/game/tabs/SpireCombatPage/SpireCombatPage.tsx
@@ -5,82 +5,21 @@ import { useShallow } from 'zustand/react/shallow';
import { useCombatStore, useManaStore, usePrestigeStore, fmt, computeMaxMana, computeRegen } from '@/lib/game/stores';
import { computeDisciplineEffects } from '@/lib/game/effects/discipline-effects';
import { getUnifiedEffects } from '@/lib/game/effects';
-import { useDisciplineStore } from '@/lib/game/stores/discipline-slice';
import { useCraftingStore } from '@/lib/game/stores/craftingStore';
import { GUARDIANS } from '@/lib/game/constants';
import { getExtendedGuardian, isGuardianFloor } from '@/lib/game/data/guardian-encounters';
-import { getRoomsForFloor, generateSpireFloorState, calcInsight } from '@/lib/game/utils/spire-utils';
+import { getRoomsForFloor, generateSpireFloorState } from '@/lib/game/utils/spire-utils';
import { SpireHeader } from './SpireHeader';
import { RoomDisplay } from './RoomDisplay';
import { SpireCombatControls } from './SpireCombatControls';
import { SpireActivityLog } from './SpireActivityLog';
import { SpireManaDisplay } from './SpireManaDisplay';
-export function SpireCombatPage() {
- const [mounted, setMounted] = useState(false);
- const [roomsCleared, setRoomsCleared] = useState(0);
+// ─── Derived Stats Hook ──────────────────────────────────────────────────────
- // Combat store
- const {
- currentFloor,
- floorHP,
- floorMaxHP,
- castProgress,
- clearedFloors,
- isDescending,
- currentRoom,
- activityLog,
- setCurrentRoom,
- setFloorHP,
- setClearedFloor,
- climbDownFloor,
- exitSpireMode,
- startClimbUp,
- startClimbDown,
- addActivityLog,
- processCombatTick,
- setAction,
- } = useCombatStore(useShallow((s) => ({
- currentFloor: s.currentFloor,
- floorHP: s.floorHP,
- floorMaxHP: s.floorMaxHP,
- castProgress: s.castProgress,
- clearedFloors: s.clearedFloors,
- isDescending: s.isDescending,
- currentRoom: s.currentRoom,
- activityLog: s.activityLog,
- setCurrentRoom: s.setCurrentRoom,
- setFloorHP: s.setFloorHP,
- setClearedFloor: s.setClearedFloor,
- climbDownFloor: s.climbDownFloor,
- exitSpireMode: s.exitSpireMode,
- startClimbUp: s.startClimbUp,
- startClimbDown: s.startClimbDown,
- addActivityLog: s.addActivityLog,
- processCombatTick: s.processCombatTick,
- setAction: s.setAction,
- })));
-
- // Mana store
- const { rawMana, elements } = useManaStore(useShallow((s) => ({
- rawMana: s.rawMana,
- elements: s.elements,
- })));
-
- // Prestige store
- const { prestigeUpgrades, insight } = usePrestigeStore(useShallow((s) => ({
- prestigeUpgrades: s.prestigeUpgrades,
- insight: s.insight,
- })));
-
- // Crafting store for equipment effects
- const equippedInstances = useCraftingStore((s) => s.equippedInstances);
- const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
-
- // Discipline effects
+function useSpireStats(prestigeUpgrades: Record, equippedInstances: unknown[], equipmentInstances: unknown[]) {
const disciplineEffects = computeDisciplineEffects();
- // Compute derived stats
const upgradeEffects = getUnifiedEffects({
skillUpgrades: {},
skillTiers: {},
@@ -103,10 +42,70 @@ export function SpireCombatPage() {
attunements: {},
}, upgradeEffects, disciplineEffects);
- // Total rooms for current floor
+ return { maxMana, baseRegen };
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+export function SpireCombatPage() {
+ const [mounted, setMounted] = useState(false);
+ const [roomsCleared, setRoomsCleared] = useState(0);
+
+ const {
+ currentFloor,
+ floorHP,
+ floorMaxHP,
+ castProgress,
+ clearedFloors,
+ isDescending,
+ currentRoom,
+ activityLog,
+ setCurrentRoom,
+ setFloorHP,
+ setClearedFloor,
+ climbDownFloor,
+ exitSpireMode,
+ startClimbUp,
+ startClimbDown,
+ addActivityLog,
+ setAction,
+ } = useCombatStore(useShallow((s) => ({
+ currentFloor: s.currentFloor,
+ floorHP: s.floorHP,
+ floorMaxHP: s.floorMaxHP,
+ castProgress: s.castProgress,
+ clearedFloors: s.clearedFloors,
+ isDescending: s.isDescending,
+ currentRoom: s.currentRoom,
+ activityLog: s.activityLog,
+ setCurrentRoom: s.setCurrentRoom,
+ setFloorHP: s.setFloorHP,
+ setClearedFloor: s.setClearedFloor,
+ climbDownFloor: s.climbDownFloor,
+ exitSpireMode: s.exitSpireMode,
+ startClimbUp: s.startClimbUp,
+ startClimbDown: s.startClimbDown,
+ addActivityLog: s.addActivityLog,
+ setAction: s.setAction,
+ })));
+
+ const { rawMana, elements } = useManaStore(useShallow((s) => ({
+ rawMana: s.rawMana,
+ elements: s.elements,
+ })));
+
+ const { prestigeUpgrades, insight } = usePrestigeStore(useShallow((s) => ({
+ prestigeUpgrades: s.prestigeUpgrades,
+ insight: s.insight,
+ })));
+
+ const equippedInstances = useCraftingStore((s) => s.equippedInstances);
+ const equipmentInstances = useCraftingStore((s) => s.equipmentInstances);
+
+ const { maxMana, baseRegen } = useSpireStats(prestigeUpgrades, equippedInstances, equipmentInstances);
+
const totalRooms = useMemo(() => getRoomsForFloor(currentFloor), [currentFloor]);
- // Initialize room on floor change
useEffect(() => {
setMounted(true);
setRoomsCleared(0);
@@ -115,12 +114,10 @@ export function SpireCombatPage() {
setAction('climb');
}, [currentFloor, totalRooms, setCurrentRoom, setAction]);
- // Handle room/floor transitions
const handleRoomCleared = () => {
const nextRoomIndex = roomsCleared + 1;
if (nextRoomIndex >= totalRooms) {
- // Floor cleared
const wasGuardian = isGuardianFloor(currentFloor);
setClearedFloor(currentFloor, true);
@@ -138,30 +135,26 @@ export function SpireCombatPage() {
floor: currentFloor,
});
- // Auto-advance to next floor
const newFloor = currentFloor + 1;
const newTotalRooms = getRoomsForFloor(newFloor);
const newRoom = generateSpireFloorState(newFloor, 0, newTotalRooms);
setCurrentRoom(newRoom);
- setFloorHP(floorMaxHP); // Reset HP for new floor
+ setFloorHP(floorMaxHP);
setClearedFloor(currentFloor, true);
setRoomsCleared(0);
} else {
- // Next room on same floor
const newRoom = generateSpireFloorState(currentFloor, nextRoomIndex, totalRooms);
setCurrentRoom(newRoom);
setRoomsCleared(nextRoomIndex);
}
};
- // Handle climb up
const handleClimbUp = () => {
startClimbUp();
addActivityLog('floor_transition', `⬆️ Climbing to floor ${currentFloor + 1}...`);
};
- // Handle climb down
const handleClimbDown = () => {
if (currentFloor <= 1) return;
startClimbDown();
@@ -170,7 +163,6 @@ export function SpireCombatPage() {
addActivityLog('floor_transition', `⬇️ Descending to floor ${currentFloor - 1}...`);
};
- // Handle exit spire
const handleExitSpire = () => {
exitSpireMode();
addActivityLog('floor_transition', '🚪 Exited the Spire.');
@@ -186,7 +178,6 @@ export function SpireCombatPage() {
return (
- {/* Compact header */}
- {/* Main content */}
- {/* Top section: Header + Mana */}
- {/* Middle section: Room + Controls */}
- {/* Bottom: Activity Log */}
diff --git a/src/components/game/tabs/SpireSummaryTab.tsx b/src/components/game/tabs/SpireSummaryTab.tsx
index 4ef9708..c5cb633 100644
--- a/src/components/game/tabs/SpireSummaryTab.tsx
+++ b/src/components/game/tabs/SpireSummaryTab.tsx
@@ -45,7 +45,6 @@ function FloorProgressBar({ maxFloor, clearedFloors }: { maxFloor: number; clear
const totalFloors = Math.min(maxFloor, 100);
const clearedSet = new Set(Object.entries(clearedFloors).filter(([, v]) => v).map(([k]) => Number(k)));
- // Group floors into rows of 10 for display
const rows: number[][] = [];
for (let i = 0; i < totalFloors; i += 10) {
rows.push(Array.from({ length: 10 }, (_, j) => i + j + 1).filter((f) => f <= totalFloors));
@@ -88,23 +87,219 @@ function FloorProgressBar({ maxFloor, clearedFloors }: { maxFloor: number; clear
})}
-
+ );
+}
+
+function FloorLegend() {
+ return (
+
+ );
+}
+
+// ─── Top Stats Row ───────────────────────────────────────────────────────────
+
+function TopStatsRow({ maxFloorReached, totalFloorsCleared, defeatedCount, insight }: {
+ maxFloorReached: number;
+ totalFloorsCleared: number;
+ defeatedCount: number;
+ insight: number;
+}) {
+ return (
+
+
+
+
-
-
-
Uncleared
+
+
+ );
+}
+
+function StatCell({ value, label, color }: { value: number | string; label: string; color: string }) {
+ return (
+
+ );
+}
+
+// ─── Next Guardian Card ──────────────────────────────────────────────────────
+
+function NextGuardianCard({ nextGuardian, nextGuardianData }: { nextGuardian: number; nextGuardianData: (typeof GUARDIANS)[number] }) {
+ const counterElement = getCounterElement(nextGuardianData.element);
+ const nextFloorElement = FLOOR_ELEM_CYCLE[(nextGuardian - 1) % FLOOR_ELEM_CYCLE.length];
+
+ return (
+
+
+
+
+ {nextGuardian}
+
+
+
{nextGuardianData.name}
+
+
+ {nextGuardianData.element}
+
+ HP: {fmt(nextGuardianData.hp)}
+ {nextGuardianData.armor && (
+
+ Armor: {Math.round(nextGuardianData.armor * 100)}%
+
+ )}
+
+
-
-
Guardian
+
+
0.15)}
+ />
+
+
+ );
+}
+
+function PreparationTips({ counterElement, nextFloorElement, hasHighArmor }: { counterElement: string | null; nextFloorElement: string | null; hasHighArmor: boolean }) {
+ return (
+
+
Recommended Preparation:
+
+ {counterElement && (
+
+ ⚡
+
+ Use {counterElement} spells for super effective damage (+50%)
+
+
+ )}
+ {nextFloorElement && (
+
+ 🔄
+
+ Floor element: {nextFloorElement}
+
+
+ )}
+ {hasHighArmor && (
+
+ 🛡️
+ High armor — consider armor-piercing or raw damage spells
+
+ )}
+
+ 💡
+ Ensure mana pools are full before attempting
-
+
+ );
+}
+
+// ─── Guardian Roster ─────────────────────────────────────────────────────────
+
+function GuardianRoster({ clearedFloors }: { clearedFloors: Record
}) {
+ return (
+
+
+
+ {GUARDIAN_FLOORS.map((floor) => (
+
+
+
+ );
+}
+
+function GuardianRosterItem({ floor, guardian, isDefeated }: { floor: number; guardian: (typeof GUARDIANS)[number]; isDefeated: boolean }) {
+ return (
+
+
+
+ {floor}
+
+
+
+ {guardian.name}
+
+
+
+ {guardian.element}
+
+ HP: {fmt(guardian.hp)}
+
+
+
+
+ {isDefeated ? (
+
+ ✓ Defeated
+
+ ) : (
+
+ Undefeated
+
+ )}
- {/* ── Top Stats Row ─────────────────────────────────────────────── */}
-
-
-
-
-
{maxFloorReached}
-
Max Floor Reached
-
-
-
{totalFloorsCleared}
-
Floors Cleared
-
-
-
{defeatedGuardians.length}
-
Guardians Defeated
-
-
-
{fmt(insight)}
-
Insight Earned
-
-
-
+
- {/* ── Climb the Spire Button ────────────────────────────────────── */}
- {/* ── Next Guardian + Preparation ───────────────────────────────── */}
{nextGuardianData && nextGuardian && (
-
-
-
-
- {nextGuardian}
-
-
-
{nextGuardianData.name}
-
-
- {nextGuardianData.element}
-
- HP: {fmt(nextGuardianData.hp)}
- {nextGuardianData.armor && (
-
- Armor: {Math.round(nextGuardianData.armor * 100)}%
-
- )}
-
-
-
-
Recommended Preparation:
-
- {counterElement && (
-
- ⚡
-
- Use {counterElement} spells for super effective damage (+50%)
-
-
- )}
- {nextFloorElement && (
-
- 🔄
-
- Floor element: {nextFloorElement}
-
-
- )}
- {nextGuardianData.armor && nextGuardianData.armor > 0.15 && (
-
- 🛡️
- High armor — consider armor-piercing or raw damage spells
-
- )}
-
- 💡
- Ensure mana pools are full before attempting
-
-
-
-
+
)}
- {/* ── All Guardians List ────────────────────────────────────────── */}
-
-
-
- {GUARDIAN_FLOORS.map((floor) => {
- const guardian = GUARDIANS[floor];
- const isDefeated = clearedFloors[floor];
+
- return (
-
-
-
- {floor}
-
-
-
- {guardian.name}
-
-
-
- {guardian.element}
-
- HP: {fmt(guardian.hp)}
-
-
-
-
- {isDefeated ? (
-
- ✓ Defeated
-
- ) : (
-
- Undefeated
-
- )}
-
-
- );
- })}
-
-
-
- {/* ── Floor Progress Map ────────────────────────────────────────── */}
diff --git a/src/components/game/tabs/guardian-pacts-components.tsx b/src/components/game/tabs/guardian-pacts-components.tsx
new file mode 100644
index 0000000..58864bc
--- /dev/null
+++ b/src/components/game/tabs/guardian-pacts-components.tsx
@@ -0,0 +1,306 @@
+'use client';
+
+import React from 'react';
+import { ELEMENTS } from '@/lib/game/constants';
+import type { GuardianDef, GuardianBoon } from '@/lib/game/types';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Shield, Swords, Clock, Sparkles, Check, Lock, ChevronRight } from 'lucide-react';
+import clsx from 'clsx';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export type GuardianStatus = 'undefeated' | 'defeated' | 'signed';
+
+interface FloorTier {
+ label: string;
+ floors: number[];
+}
+
+// ─── Guardian Card ───────────────────────────────────────────────────────────
+
+interface GuardianCardProps {
+ floor: number;
+ guardian: GuardianDef;
+ status: GuardianStatus;
+ canAfford: boolean;
+ hasSlot: boolean;
+ isRitualActive: boolean;
+ ritualProgress: number;
+ onStartRitual: (floor: number) => void;
+}
+
+export const GuardianCard: React.FC = React.memo(({
+ floor,
+ guardian,
+ status,
+ canAfford,
+ hasSlot,
+ isRitualActive,
+ ritualProgress,
+ onStartRitual,
+}) => {
+ const elemDef = ELEMENTS[guardian.element];
+ const elemColor = elemDef?.color ?? '#888';
+ const elemSym = elemDef?.sym ?? '';
+
+ const statusConfig: Record = {
+ undefeated: { label: 'Undefeated', color: 'text-gray-400', bg: 'bg-gray-800/50' },
+ defeated: { label: 'Pact Available', color: 'text-amber-400', bg: 'bg-amber-900/20' },
+ signed: { label: 'Pact Signed', color: 'text-green-400', bg: 'bg-green-900/20' },
+ };
+
+ const sc = statusConfig[status];
+ const ritualTime = guardian.pactTime;
+ const ritualComplete = ritualProgress >= ritualTime;
+
+ return (
+
+
+
+
+
+ {elemSym}
+ {guardian.name}
+
+
Floor {floor} · {elemDef?.name ?? guardian.element}
+
+
+ {sc.label}
+
+
+
+
+
+ Perk: {guardian.uniquePerk}
+
+
+
+
+ {ritualTime}h
+
+
+ Cost: {guardian.pactCost.toLocaleString()} mana
+
+
onStartRitual(floor)}
+ />
+ )}
+
+
+ );
+});
+
+GuardianCard.displayName = 'GuardianCard';
+
+// ─── Guardian Stats ──────────────────────────────────────────────────────────
+
+function GuardianStats({ guardian }: { guardian: GuardianDef }) {
+ return (
+
+
+ HP: {guardian.hp.toLocaleString()}
+
+
+ PWR: {guardian.power.toLocaleString()}
+
+
+ ARM: {Math.round((guardian.armor ?? 0) * 100)}%
+
+
+
+
+
+ {guardian.boons.map((boon: GuardianBoon, i: number) => (
+
+ {boon.desc}
+
+ ))}
+
+
+
+ Ritual in progress…
+ {ritualProgress}/{ritualTime}h
+
+
+ {ritualComplete && (
+
+
+ )}
+
+ {!canAfford ? (
+ <>
+ );
+}
+
+// ─── Pact Header Summary ────────────────────────────────────────────────────
+
+export function PactHeaderSummary({
+ signedCount,
+ pactSlots,
+ defeatedCount,
+ cumulativeBoons,
+}: {
+ signedCount: number;
+ pactSlots: number;
+ defeatedCount: number;
+ cumulativeBoons: Record;
+}) {
+ return (
+
+
+
+
+ Pact Slots:
+ {signedCount} / {pactSlots}
+
+
+ Signed:
+ {signedCount}
+
+
+ Defeated:
+ {defeatedCount}
+
+
+
Active Boon Effects:
+
+ {Object.entries(cumulativeBoons).map(([type, value]) => (
+
+ {type}: +{value}
+
+ ))}
+
+
+
+ );
+}
+
+// ─── Tier Filter ─────────────────────────────────────────────────────────────
+
+export function TierFilter({
+ tiers,
+ activeTier,
+ guardianFloors,
+ onSelectTier,
+}: {
+ tiers: FloorTier[];
+ activeTier: string;
+ guardianFloors: number[];
+ onSelectTier: (tier: string) => void;
+}) {
+ return (
+
+ onSelectTier('all')}
+ className={clsx(
+ 'rounded px-3 py-1 text-xs font-medium transition-colors',
+ activeTier === 'all'
+ ? 'bg-amber-600 text-white'
+ : 'text-gray-400 hover:text-gray-200',
+ )}
+ >
+ All ({guardianFloors.length})
+
+ {tiers.map((tier) => (
+ onSelectTier(tier.label)}
+ className={clsx(
+ 'rounded px-3 py-1 text-xs font-medium transition-colors',
+ activeTier === tier.label
+ ? 'bg-amber-600 text-white'
+ : 'text-gray-400 hover:text-gray-200',
+ )}
+ >
+ {tier.label} ({tier.floors.length})
+
+ ))}
+
+ );
+}