98ab975fb9
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 4m28s
- Updated AGENTS.md to include store/ directory and clarify store architecture - Updated GAME_BRIEFING.md Code Architecture section with store/ and legacy store info - Updated skills.md with skill state management information - Includes other refactoring changes (store hooks, component updates, etc.)
68 lines
2.9 KiB
TypeScript
68 lines
2.9 KiB
TypeScript
'use client';
|
||
|
||
import { fmtDec } from '@/lib/game/stores';
|
||
import { GUARDIANS } from '@/lib/game/constants';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Swords } from 'lucide-react';
|
||
|
||
// Modular stores
|
||
import { useSkillStore, usePrestigeStore } from '@/lib/game/stores';
|
||
|
||
export function CombatStatsSection() {
|
||
// Get state from modular stores
|
||
const skills = useSkillStore((s) => s.skills);
|
||
const signedPacts = usePrestigeStore((s) => s.signedPacts);
|
||
|
||
return (
|
||
<Card className="bg-gray-900/80 border-gray-700">
|
||
<CardHeader className="pb-2">
|
||
<CardTitle className="text-red-400 text-sm flex items-center gap-2">
|
||
<Swords className="w-4 h-4" />
|
||
Combat 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 className="text-gray-400">Combat Training Bonus:</span>
|
||
<span className="text-red-300">+{(skills.combatTrain || 0) * 5}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">Arcane Fury Multiplier:</span>
|
||
<span className="text-red-300">×{fmtDec(1 + (skills.arcaneFury || 0) * 0.1, 2)}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">Elemental Mastery:</span>
|
||
<span className="text-red-300">×{fmtDec(1 + (skills.elementalMastery || 0) * 0.15, 2)}</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">Guardian Bane:</span>
|
||
<span className="text-red-300">×{fmtDec(1 + (skills.guardianBane || 0) * 0.2, 2)} (vs guardians)</span>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">Critical Hit Chance:</span>
|
||
<span className="text-amber-300">{(skills.precision || 0) * 5}%</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">Critical Multiplier:</span>
|
||
<span className="text-amber-300">1.5x</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-gray-400">Spell Echo Chance:</span>
|
||
<span className="text-amber-300">{(skills.spellEcho || 0) * 10}%</span>
|
||
</div>
|
||
<div className="flex justify-between text-sm">
|
||
<span className="text-amber-300">×{fmtDec(signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
CombatStatsSection.displayName = "CombatStatsSection";
|