n8n-gitea
2805f75f5e
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 57s
- Delete src/lib/game/computed-stats.ts (root-level re-export shim) - Delete src/lib/game/store/index.ts (nothing imports from it) - Update __tests__/computed-stats.test.ts to import from ../utils instead - Clean up craftingStore.ts imports (remove unused useGameStore, CraftingApply) Typecheck and lint pass (pre-existing DisciplinesTab.tsx errors unchanged)
64 lines
2.9 KiB
TypeScript
64 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { FlaskConical } from 'lucide-react';
|
|
import { ELEMENTS } from '@/lib/game/constants';
|
|
import { fmt, fmtDec } from '@/lib/game/stores';
|
|
import { usePrestigeStore, useManaStore } from '@/lib/game/stores';
|
|
|
|
interface ElementStatsSectionProps {
|
|
elemMax: number;
|
|
}
|
|
|
|
export function ElementStatsSection({ elemMax }: ElementStatsSectionProps) {
|
|
const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
|
|
const elements = useManaStore((s) => s.elements);
|
|
|
|
return (
|
|
<Card className="bg-[var(--bg-panel)] border-[var(--border-subtle)]">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-[var(--color-success)] game-panel-title text-xs flex items-center gap-2">
|
|
<FlaskConical className="w-4 h-4" />
|
|
Element Stats
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span style={{ color: 'var(--text-muted)' }}>Element Capacity:</span>
|
|
<span style={{ color: 'var(--color-success)' }}>{elemMax}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span style={{ color: 'var(--text-muted)' }}>Prestige Attunement:</span>
|
|
<span style={{ color: 'var(--color-success)' }}>+{(prestigeUpgrades.elementalAttune || 0) * 25}</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span style={{ color: 'var(--text-muted)' }}>Unlocked Elements:</span>
|
|
<span style={{ color: 'var(--color-success)' }}>{Object.values(elements || {}).filter((e: any) => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator className="bg-[var(--border-subtle)] my-3" />
|
|
<div className="text-xs" style={{ color: 'var(--text-muted)' }}>Elemental Mana Pools:</div>
|
|
<div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
|
|
{Object.entries(elements)
|
|
.filter(([, state]: [string, any]) => state.unlocked)
|
|
.map(([id, state]: [string, any]) => {
|
|
const def = ELEMENTS[id];
|
|
return (
|
|
<div key={id} className="p-2 rounded transition-colors" style={{ border: `1px solid ${def?.color}30`, background: 'var(--bg-sunken)/50', textAlign: 'center' }}>
|
|
<div className="text-lg" style={{ color: def?.color }}>{def?.sym}</div>
|
|
<div className="text-xs" style={{ color: 'var(--text-muted)' }}>{state.current}/{state.max}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|