feat: add discipline and perks section to Stats tab

2026-05-27 12:04:11 +02:00
parent a6dd9479b3
commit 32cebad403
5 changed files with 81 additions and 2 deletions
@@ -0,0 +1,72 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Brain } from 'lucide-react';
+import { useDisciplineStore } from '@/lib/game/stores/discipline-slice';
+import type { DisciplineEffectsResult } from '@/lib/game/effects/discipline-effects';
+import { ALL_DISCIPLINES } from '@/lib/game/data/disciplines';
+import { getUnlockedPerks } from '@/lib/game/utils/discipline-math';
+
+interface DisciplineStatsSectionProps {
+  disciplineEffects: DisciplineEffectsResult;
+}
+
+export function DisciplineStatsSection({ disciplineEffects }: DisciplineStatsSectionProps) {
+  const disciplines = useDisciplineStore((s) => s.disciplines);
+  const activeIds = useDisciplineStore((s) => s.activeIds);
+
+  const disciplineEntries = useMemo(() => {
+    return ALL_DISCIPLINES.map((def) => {
+      const state = disciplines[def.id] ?? { xp: 0, paused: true };
+      const unlockedPerks = getUnlockedPerks(def, state.xp);
+      return { def, state, unlockedPerks };
+    }).filter(({ def, state }) => state.xp > 0 || activeIds.includes(def.id));
+  }, [disciplines, activeIds]);
+
+  if (disciplineEntries.length === 0) return null;
+
+  return (
+    <Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-[var(--mana-crystal)] game-panel-title text-xs flex items-center gap-2">
+          <Brain className="w-4 h-4" />
+          Disciplines
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {disciplineEntries.map(({ def, state, unlockedPerks }) => {
+            const totalEffect = disciplineEffects.bonuses[def.statBonus.stat] ?? 0;
+
+            return (
+              <div key={def.id} className="border-b border-[var(--border-subtle)] pb-2 last:border-0">
+                <div className="flex justify-between text-sm">
+                  <span style={{ color: 'var(--text-secondary)' }}>{def.name}</span>
+                  <span style={{ color: activeIds.includes(def.id) ? 'var(--color-success)' : 'var(--text-muted)' }}>
+                    {activeIds.includes(def.id) ? 'Active' : 'Paused'} &bull; {state.xp} XP
+                  </span>
+                </div>
+                {totalEffect > 0 && (
+                  <div className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>
+                    Effect: +{totalEffect.toFixed(2)} {def.statBonus.label}
+                  </div>
+                )}
+                {unlockedPerks.length > 0 && (
+                  <div className="mt-1">
+                    <span className="text-xs" style={{ color: 'var(--text-muted)' }}>Perks:</span>
+                    <ul className="mt-0.5 space-y-0.5">
+                      {unlockedPerks.map((perk) => (
+                        <li key={perk.id} className="text-xs text-green-500 list-none">&bull; {perk.description}</li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}