zhipu
2ca5d8b7f8
All checks were successful
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m4s
Store refactoring (2138 → 1651 lines, 23% reduction): - Extract computed-stats.ts with 18 utility functions - Extract navigation-slice.ts for floor navigation actions - Extract study-slice.ts for study-related actions - Move fmt/fmtDec to computed-stats, re-export from formatting Page refactoring (2554 → 1695 lines, 34% reduction): - Use existing SpireTab component instead of inline render - Extract ActionButtons component - Extract CalendarDisplay component - Extract CraftingProgress component - Extract StudyProgress component - Extract ManaDisplay component - Extract TimeDisplay component - Create tabs/index.ts for cleaner exports This improves code organization and makes the codebase more maintainable.
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Zap } from 'lucide-react';
|
|
import { fmt, fmtDec } from '@/lib/game/store';
|
|
|
|
interface ManaDisplayProps {
|
|
rawMana: number;
|
|
maxMana: number;
|
|
effectiveRegen: number;
|
|
meditationMultiplier: number;
|
|
clickMana: number;
|
|
isGathering: boolean;
|
|
onGatherStart: () => void;
|
|
onGatherEnd: () => void;
|
|
}
|
|
|
|
export function ManaDisplay({
|
|
rawMana,
|
|
maxMana,
|
|
effectiveRegen,
|
|
meditationMultiplier,
|
|
clickMana,
|
|
isGathering,
|
|
onGatherStart,
|
|
onGatherEnd,
|
|
}: ManaDisplayProps) {
|
|
return (
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardContent className="pt-4 space-y-3">
|
|
<div>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-3xl font-bold game-mono text-blue-400">{fmt(rawMana)}</span>
|
|
<span className="text-sm text-gray-400">/ {fmt(maxMana)}</span>
|
|
</div>
|
|
<div className="text-xs text-gray-400">
|
|
+{fmtDec(effectiveRegen)} mana/hr {meditationMultiplier > 1.01 && <span className="text-purple-400">({fmtDec(meditationMultiplier, 1)}x med)</span>}
|
|
</div>
|
|
</div>
|
|
|
|
<Progress
|
|
value={(rawMana / maxMana) * 100}
|
|
className="h-2 bg-gray-800"
|
|
/>
|
|
|
|
<Button
|
|
className={`w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 ${isGathering ? 'animate-pulse' : ''}`}
|
|
onMouseDown={onGatherStart}
|
|
onMouseUp={onGatherEnd}
|
|
onMouseLeave={onGatherEnd}
|
|
onTouchStart={onGatherStart}
|
|
onTouchEnd={onGatherEnd}
|
|
>
|
|
<Zap className="w-4 h-4 mr-2" />
|
|
Gather +{clickMana} Mana
|
|
{isGathering && <span className="ml-2 text-xs">(Holding...)</span>}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|