Completely remove legacy skill system and tests
This commit is contained in:
@@ -1,269 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { Scroll, Hammer, Sparkles, Anvil } from 'lucide-react';
|
||||
import { fmt } from '@/lib/game/stores';
|
||||
import {
|
||||
EnchantmentDesigner,
|
||||
EnchantmentPreparer,
|
||||
EnchantmentApplier,
|
||||
EquipmentCrafter,
|
||||
} from '@/components/game/crafting';
|
||||
import { useCombatStore, useCraftingStore } from '@/lib/game/stores';
|
||||
import { DebugName } from '@/lib/game/debug-context';
|
||||
import { useGameToast } from '@/components/game/GameToast';
|
||||
import type { DesignEffect } from '@/lib/game/types';
|
||||
|
||||
export function CraftingTab() {
|
||||
const showToast = useGameToast();
|
||||
const currentAction = useCombatStore((s) => s.currentAction);
|
||||
const designProgress = useCraftingStore((s) => s.designProgress);
|
||||
const preparationProgress = useCraftingStore((s) => s.preparationProgress);
|
||||
const applicationProgress = useCraftingStore((s) => s.applicationProgress);
|
||||
const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
|
||||
const pauseApplication = useCraftingStore((s) => s.pauseApplication);
|
||||
const resumeApplication = useCraftingStore((s) => s.resumeApplication);
|
||||
|
||||
const [activeTab, setActiveTab] = useState<'fabricate' | 'enchant'>('fabricate');
|
||||
const [enchantStage, setEnchantStage] = useState<'design' | 'prepare' | 'apply'>('design');
|
||||
|
||||
// Enchant state
|
||||
const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
|
||||
const [selectedEffects, setSelectedEffects] = useState<DesignEffect[]>([]);
|
||||
const [designName, setDesignName] = useState('');
|
||||
const [selectedDesign, setSelectedDesign] = useState<string | null>(null);
|
||||
const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
|
||||
|
||||
// Safe toFixed helper
|
||||
const safeToFixed = (value: number | undefined, decimals: number = 0): string => {
|
||||
if (value === undefined || isNaN(value)) return '0';
|
||||
return value.toFixed(decimals);
|
||||
};
|
||||
|
||||
// Safe percentage calculation
|
||||
const calcPercent = (progress: number, required: number): number => {
|
||||
if (!required || required === 0) return 0;
|
||||
return (progress / required) * 100;
|
||||
};
|
||||
|
||||
// Handle enchantment application with toast
|
||||
const handleEnchantmentApplied = () => {
|
||||
showToast('success', 'Enchantment Applied', 'The enchantment has been successfully applied!');
|
||||
};
|
||||
|
||||
// Handle enchantment capacity exceeded
|
||||
const handleCapacityExceeded = (itemName: string, used: number, total: number) => {
|
||||
showToast('error', 'Enchantment Capacity Exceeded', `${itemName} can only hold ${total} enchantments (${used}/${total} used). Remove some enchantments first.`);
|
||||
};
|
||||
|
||||
return (
|
||||
<DebugName name="CraftingTab">
|
||||
<div className="space-y-4 max-w-full overflow-x-hidden">
|
||||
{/* Top Sub-Tabs: Fabricate / Enchant */}
|
||||
<GameCard variant="default" className="p-4">
|
||||
<div className="flex justify-center gap-2">
|
||||
<ActionButton
|
||||
variant={activeTab === 'fabricate' ? 'primary' : 'secondary'}
|
||||
onClick={() => setActiveTab('fabricate')}
|
||||
className={activeTab === 'fabricate' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
|
||||
>
|
||||
<Anvil size={14} className="mr-1" />
|
||||
Fabricate
|
||||
</ActionButton>
|
||||
<ActionButton
|
||||
variant={activeTab === 'enchant' ? 'primary' : 'secondary'}
|
||||
onClick={() => setActiveTab('enchant')}
|
||||
className={activeTab === 'enchant' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
|
||||
>
|
||||
<Sparkles size={14} className="mr-1" />
|
||||
Enchant
|
||||
</ActionButton>
|
||||
</div>
|
||||
</GameCard>
|
||||
|
||||
{/* Fabricate Content: EquipmentCrafter */}
|
||||
{activeTab === 'fabricate' && (
|
||||
<EquipmentCrafter />
|
||||
)}
|
||||
|
||||
{/* Enchant Content: Design → Prepare → Apply workflow */}
|
||||
{activeTab === 'enchant' && (
|
||||
<div className="space-y-4">
|
||||
{/* Enchant Sub-Navigation (no numbered stepper) */}
|
||||
<GameCard variant="default" className="p-4">
|
||||
<div className="flex justify-center gap-2 flex-wrap">
|
||||
<ActionButton
|
||||
variant={enchantStage === 'design' ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setEnchantStage('design')}
|
||||
className={enchantStage === 'design' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
|
||||
>
|
||||
<Scroll size={14} className="mr-1" />
|
||||
Design
|
||||
</ActionButton>
|
||||
<ActionButton
|
||||
variant={enchantStage === 'prepare' ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setEnchantStage('prepare')}
|
||||
className={enchantStage === 'prepare' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
|
||||
>
|
||||
<Hammer size={14} className="mr-1" />
|
||||
Prepare
|
||||
</ActionButton>
|
||||
<ActionButton
|
||||
variant={enchantStage === 'apply' ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
onClick={() => setEnchantStage('apply')}
|
||||
className={enchantStage === 'apply' ? 'ring-2 ring-[var(--interactive-primary)]' : ''}
|
||||
>
|
||||
<Sparkles size={14} className="mr-1" />
|
||||
Apply
|
||||
</ActionButton>
|
||||
</div>
|
||||
</GameCard>
|
||||
|
||||
{/* Enchant Stage Content */}
|
||||
{enchantStage === 'design' && (
|
||||
<EnchantmentDesigner
|
||||
selectedEquipmentType={selectedEquipmentType}
|
||||
setSelectedEquipmentType={setSelectedEquipmentType}
|
||||
selectedEffects={selectedEffects}
|
||||
setSelectedEffects={setSelectedEffects}
|
||||
designName={designName}
|
||||
setDesignName={setDesignName}
|
||||
selectedDesign={selectedDesign}
|
||||
setSelectedDesign={setSelectedDesign}
|
||||
/>
|
||||
)}
|
||||
{enchantStage === 'prepare' && (
|
||||
<EnchantmentPreparer
|
||||
selectedEquipmentInstance={selectedEquipmentInstance}
|
||||
setSelectedEquipmentInstance={setSelectedEquipmentInstance}
|
||||
/>
|
||||
)}
|
||||
{enchantStage === 'apply' && (
|
||||
<EnchantmentApplier
|
||||
selectedEquipmentInstance={selectedEquipmentInstance}
|
||||
setSelectedEquipmentInstance={setSelectedEquipmentInstance}
|
||||
selectedDesign={selectedDesign}
|
||||
setSelectedDesign={setSelectedDesign}
|
||||
onEnchantmentApplied={handleEnchantmentApplied}
|
||||
onCapacityExceeded={handleCapacityExceeded}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Current Activity Indicator: Crafting */}
|
||||
{currentAction === 'craft' && equipmentCraftingProgress && (
|
||||
<GameCard variant="default" className="border-[var(--mana-water)]/60 bg-[var(--mana-water)]/10">
|
||||
<SectionHeader
|
||||
title="Crafting Equipment"
|
||||
action={
|
||||
<span className="text-sm text-[var(--text-muted)]">
|
||||
{safeToFixed(calcPercent(equipmentCraftingProgress.progress, equipmentCraftingProgress.required), 0)}%
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<Progress
|
||||
value={calcPercent(equipmentCraftingProgress.progress, equipmentCraftingProgress.required)}
|
||||
className="h-3 bg-[var(--bg-sunken)]"
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-[var(--text-secondary)]">
|
||||
<Anvil size={16} className="text-[var(--mana-water)]" />
|
||||
<span>Crafting equipment...</span>
|
||||
</div>
|
||||
</GameCard>
|
||||
)}
|
||||
|
||||
{/* Current Activity Indicator: Designing */}
|
||||
{currentAction === 'design' && designProgress && (
|
||||
<GameCard variant="default" className="border-[var(--mana-stellar)]/60 bg-[var(--mana-stellar)]/10">
|
||||
<SectionHeader
|
||||
title="Designing Enchantment"
|
||||
action={
|
||||
<ActionButton variant="ghost" size="sm" onClick={() => useCraftingStore.getState().cancelDesign()}>
|
||||
Cancel
|
||||
</ActionButton>
|
||||
}
|
||||
/>
|
||||
<Progress
|
||||
value={calcPercent(designProgress.progress, designProgress.required)}
|
||||
className="h-3 bg-[var(--bg-sunken)]"
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-[var(--text-secondary)]">
|
||||
<Scroll size={16} className="text-[var(--mana-stellar)]" />
|
||||
<span>Designing: {designProgress.name}</span>
|
||||
</div>
|
||||
</GameCard>
|
||||
)}
|
||||
|
||||
{/* Current Activity Indicator: Preparing */}
|
||||
{currentAction === 'prepare' && preparationProgress && (
|
||||
<GameCard variant="default" className="border-[var(--color-warning)]/60 bg-[var(--color-warning)]/10">
|
||||
<SectionHeader
|
||||
title="Preparing Equipment"
|
||||
action={
|
||||
<ActionButton variant="ghost" size="sm" onClick={() => useCraftingStore.getState().cancelPreparation()}>
|
||||
Cancel
|
||||
</ActionButton>
|
||||
}
|
||||
/>
|
||||
<Progress
|
||||
value={calcPercent(preparationProgress.progress, preparationProgress.required)}
|
||||
className="h-3 bg-[var(--bg-sunken)]"
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-[var(--text-secondary)]">
|
||||
<Hammer size={16} className="text-[var(--color-warning)]" />
|
||||
<span>Preparing equipment...</span>
|
||||
<span className="text-[var(--text-muted)] ml-auto">
|
||||
Mana paid: {fmt(preparationProgress.manaCostPaid)}
|
||||
</span>
|
||||
</div>
|
||||
</GameCard>
|
||||
)}
|
||||
|
||||
{/* Current Activity Indicator: Enchanting */}
|
||||
{currentAction === 'enchant' && applicationProgress && (
|
||||
<GameCard variant="default" className="border-[var(--mana-light)]/60 bg-[var(--mana-light)]/10">
|
||||
<SectionHeader
|
||||
title={applicationProgress.paused ? "Enchantment Paused" : "Applying Enchantment"}
|
||||
action={
|
||||
<div className="flex gap-2">
|
||||
{applicationProgress.paused ? (
|
||||
<ActionButton size="sm" onClick={resumeApplication}>Resume</ActionButton>
|
||||
) : (
|
||||
<>
|
||||
<ActionButton variant="secondary" size="sm" onClick={pauseApplication}>Pause</ActionButton>
|
||||
<ActionButton variant="ghost" size="sm" onClick={() => {
|
||||
useCraftingStore.getState().cancelApplication();
|
||||
showToast('warning', 'Enchantment Cancelled', 'The enchantment application was cancelled.');
|
||||
}}>Cancel</ActionButton>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<Progress
|
||||
value={calcPercent(applicationProgress.progress, applicationProgress.required)}
|
||||
className="h-3 bg-[var(--bg-sunken)]"
|
||||
/>
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-[var(--text-secondary)]">
|
||||
<Sparkles size={16} className="text-[var(--mana-light)]" />
|
||||
<span>{applicationProgress.paused ? 'Enchantment paused' : 'Applying enchantment...'}</span>
|
||||
<span className="text-[var(--text-muted)] ml-auto">
|
||||
{safeToFixed(calcPercent(applicationProgress.progress, applicationProgress.required), 0)}%
|
||||
</span>
|
||||
</div>
|
||||
</GameCard>
|
||||
)}
|
||||
</div>
|
||||
</DebugName>
|
||||
);
|
||||
}
|
||||
|
||||
CraftingTab.displayName = 'CraftingTab';
|
||||
Reference in New Issue
Block a user