976 lines
42 KiB
TypeScript
Executable File
976 lines
42 KiB
TypeScript
Executable File
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import {
|
|
Wand2, Scroll, Hammer, Sparkles, Trash2, Plus, Minus,
|
|
Package, Zap, Clock, ChevronRight, Circle, Anvil
|
|
} from 'lucide-react';
|
|
import { EQUIPMENT_TYPES, type EquipmentType, type EquipmentSlot } from '@/lib/game/data/equipment';
|
|
import { ENCHANTMENT_EFFECTS, type EnchantmentEffectDef, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
|
|
import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
|
|
import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
|
|
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
|
|
import { fmt, type GameStore } from '@/lib/game/store';
|
|
|
|
// Slot display names
|
|
const SLOT_NAMES: Record<EquipmentSlot, string> = {
|
|
mainHand: 'Main Hand',
|
|
offHand: 'Off Hand',
|
|
head: 'Head',
|
|
body: 'Body',
|
|
hands: 'Hands',
|
|
feet: 'Feet',
|
|
accessory1: 'Accessory 1',
|
|
accessory2: 'Accessory 2',
|
|
};
|
|
|
|
export interface CraftingTabProps {
|
|
store: GameStore;
|
|
}
|
|
|
|
export function CraftingTab({ store }: CraftingTabProps) {
|
|
const equippedInstances = store.equippedInstances;
|
|
const equipmentInstances = store.equipmentInstances;
|
|
const enchantmentDesigns = store.enchantmentDesigns;
|
|
const designProgress = store.designProgress;
|
|
const preparationProgress = store.preparationProgress;
|
|
const applicationProgress = store.applicationProgress;
|
|
const equipmentCraftingProgress = store.equipmentCraftingProgress;
|
|
const rawMana = store.rawMana;
|
|
const skills = store.skills;
|
|
const currentAction = store.currentAction;
|
|
const unlockedEffects = store.unlockedEffects;
|
|
const lootInventory = store.lootInventory;
|
|
const startDesigningEnchantment = store.startDesigningEnchantment;
|
|
const cancelDesign = store.cancelDesign;
|
|
const saveDesign = store.saveDesign;
|
|
const deleteDesign = store.deleteDesign;
|
|
const startPreparing = store.startPreparing;
|
|
const cancelPreparation = store.cancelPreparation;
|
|
const startApplying = store.startApplying;
|
|
const pauseApplication = store.pauseApplication;
|
|
const resumeApplication = store.resumeApplication;
|
|
const cancelApplication = store.cancelApplication;
|
|
const disenchantEquipment = store.disenchantEquipment;
|
|
const getAvailableCapacity = store.getAvailableCapacity;
|
|
const startCraftingEquipment = store.startCraftingEquipment;
|
|
const cancelEquipmentCrafting = store.cancelEquipmentCrafting;
|
|
const deleteMaterial = store.deleteMaterial;
|
|
const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply' | 'craft'>('craft');
|
|
const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
|
|
const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
|
|
const [selectedDesign, setSelectedDesign] = useState<string | null>(null);
|
|
|
|
// Design creation state
|
|
const [designName, setDesignName] = useState('');
|
|
const [selectedEffects, setSelectedEffects] = useState<DesignEffect[]>([]);
|
|
|
|
const enchantingLevel = skills.enchanting || 0;
|
|
const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
|
|
|
|
// Get equipped items as array
|
|
const equippedItems = Object.entries(equippedInstances)
|
|
.filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
|
|
.map(([slot, instanceId]) => ({
|
|
slot: slot as EquipmentSlot,
|
|
instance: equipmentInstances[instanceId!],
|
|
}));
|
|
|
|
// Calculate total capacity cost for current design
|
|
const designCapacityCost = selectedEffects.reduce(
|
|
(total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
|
|
0
|
|
);
|
|
|
|
// Calculate design time
|
|
const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
|
|
|
|
// Add effect to design
|
|
const addEffect = (effectId: string) => {
|
|
const existing = selectedEffects.find(e => e.effectId === effectId);
|
|
const effectDef = ENCHANTMENT_EFFECTS[effectId];
|
|
if (!effectDef) return;
|
|
|
|
if (existing) {
|
|
if (existing.stacks < effectDef.maxStacks) {
|
|
setSelectedEffects(selectedEffects.map(e =>
|
|
e.effectId === effectId
|
|
? { ...e, stacks: e.stacks + 1 }
|
|
: e
|
|
));
|
|
}
|
|
} else {
|
|
setSelectedEffects([...selectedEffects, {
|
|
effectId,
|
|
stacks: 1,
|
|
capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
|
|
}]);
|
|
}
|
|
};
|
|
|
|
// Remove effect from design
|
|
const removeEffect = (effectId: string) => {
|
|
const existing = selectedEffects.find(e => e.effectId === effectId);
|
|
if (!existing) return;
|
|
|
|
if (existing.stacks > 1) {
|
|
setSelectedEffects(selectedEffects.map(e =>
|
|
e.effectId === effectId
|
|
? { ...e, stacks: e.stacks - 1 }
|
|
: e
|
|
));
|
|
} else {
|
|
setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
|
|
}
|
|
};
|
|
|
|
// Create design
|
|
const handleCreateDesign = () => {
|
|
if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
|
|
|
|
const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
|
|
if (success) {
|
|
// Reset form
|
|
setDesignName('');
|
|
setSelectedEquipmentType(null);
|
|
setSelectedEffects([]);
|
|
}
|
|
};
|
|
|
|
// Complete design after progress
|
|
const handleCompleteDesign = () => {
|
|
if (!designProgress || !selectedEquipmentType) return;
|
|
|
|
const design: EnchantmentDesign = {
|
|
id: designProgress.designId,
|
|
name: designName || 'Untitled Design',
|
|
equipmentType: selectedEquipmentType,
|
|
effects: selectedEffects,
|
|
totalCapacityUsed: designCapacityCost,
|
|
designTime,
|
|
created: Date.now(),
|
|
};
|
|
|
|
saveDesign(design);
|
|
setDesignName('');
|
|
setSelectedEquipmentType(null);
|
|
setSelectedEffects([]);
|
|
};
|
|
|
|
// Get available effects for selected equipment type (only unlocked ones)
|
|
const getAvailableEffects = () => {
|
|
if (!selectedEquipmentType) return [];
|
|
const type = EQUIPMENT_TYPES[selectedEquipmentType];
|
|
if (!type) return [];
|
|
|
|
return Object.values(ENCHANTMENT_EFFECTS).filter(
|
|
effect =>
|
|
effect.allowedEquipmentCategories.includes(type.category) &&
|
|
unlockedEffects.includes(effect.id)
|
|
);
|
|
};
|
|
|
|
// Render design stage
|
|
const renderDesignStage = () => (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{/* Equipment Type Selection */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">1. Select Equipment Type</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{designProgress ? (
|
|
<div className="space-y-3">
|
|
<div className="text-sm text-gray-400">Designing for: {EQUIPMENT_TYPES[selectedEquipmentType || '']?.name}</div>
|
|
<Progress value={(designProgress.progress / designProgress.required) * 100} className="h-3" />
|
|
<div className="flex justify-between text-xs text-gray-400">
|
|
<span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
|
|
<Button size="sm" variant="outline" onClick={cancelDesign}>Cancel</Button>
|
|
</div>
|
|
{designProgress.progress >= designProgress.required && (
|
|
<Button onClick={handleCompleteDesign} className="w-full">Complete Design</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<ScrollArea className="h-64">
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{Object.values(EQUIPMENT_TYPES).map(type => (
|
|
<div
|
|
key={type.id}
|
|
className={`p-2 rounded border cursor-pointer transition-all ${
|
|
selectedEquipmentType === type.id
|
|
? 'border-amber-500 bg-amber-900/20'
|
|
: 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
|
|
}`}
|
|
onClick={() => setSelectedEquipmentType(type.id)}
|
|
>
|
|
<div className="text-sm font-semibold">{type.name}</div>
|
|
<div className="text-xs text-gray-400">Cap: {type.baseCapacity}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Effect Selection */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">2. Select Effects</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{enchantingLevel < 1 ? (
|
|
<div className="text-center text-gray-400 py-8">
|
|
<Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
|
<p>Learn Enchanting skill to design enchantments</p>
|
|
</div>
|
|
) : designProgress ? (
|
|
<div className="space-y-2">
|
|
<div className="text-sm text-gray-400">Design in progress...</div>
|
|
{selectedEffects.map(eff => {
|
|
const def = ENCHANTMENT_EFFECTS[eff.effectId];
|
|
return (
|
|
<div key={eff.effectId} className="flex justify-between text-sm">
|
|
<span>{def?.name} x{eff.stacks}</span>
|
|
<span className="text-gray-400">{eff.capacityCost} cap</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : !selectedEquipmentType ? (
|
|
<div className="text-center text-gray-400 py-8">
|
|
Select an equipment type first
|
|
</div>
|
|
) : (
|
|
<>
|
|
<ScrollArea className="h-48 mb-4">
|
|
<div className="space-y-2">
|
|
{getAvailableEffects().map(effect => {
|
|
const selected = selectedEffects.find(e => e.effectId === effect.id);
|
|
const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
|
|
|
|
return (
|
|
<div
|
|
key={effect.id}
|
|
className={`p-2 rounded border transition-all ${
|
|
selected
|
|
? 'border-purple-500 bg-purple-900/20'
|
|
: 'border-gray-700 bg-gray-800/50'
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex-1">
|
|
<div className="text-sm font-semibold">{effect.name}</div>
|
|
<div className="text-xs text-gray-400">{effect.description}</div>
|
|
<div className="text-xs text-gray-500 mt-1">
|
|
Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
{selected && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-6 w-6 p-0"
|
|
onClick={() => removeEffect(effect.id)}
|
|
>
|
|
<Minus className="w-3 h-3" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-6 w-6 p-0"
|
|
onClick={() => addEffect(effect.id)}
|
|
disabled={!selected && selectedEffects.length >= 5}
|
|
>
|
|
<Plus className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
{selected && (
|
|
<Badge variant="outline" className="mt-1 text-xs">
|
|
{selected.stacks}/{effect.maxStacks}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
{/* Selected effects summary */}
|
|
<Separator className="bg-gray-700 my-2" />
|
|
<div className="space-y-2">
|
|
<input
|
|
type="text"
|
|
placeholder="Design name..."
|
|
value={designName}
|
|
onChange={(e) => setDesignName(e.target.value)}
|
|
className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
|
|
/>
|
|
<div className="flex justify-between text-sm">
|
|
<span>Total Capacity:</span>
|
|
<span className={designCapacityCost > 100 ? 'text-red-400' : 'text-green-400'}>
|
|
{designCapacityCost.toFixed(0)}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm text-gray-400">
|
|
<span>Design Time:</span>
|
|
<span>{designTime.toFixed(1)}h</span>
|
|
</div>
|
|
<Button
|
|
className="w-full"
|
|
disabled={!designName || selectedEffects.length === 0}
|
|
onClick={handleCreateDesign}
|
|
>
|
|
Start Design ({designTime.toFixed(1)}h)
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Saved Designs */}
|
|
<Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">Saved Designs ({enchantmentDesigns.length})</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{enchantmentDesigns.length === 0 ? (
|
|
<div className="text-center text-gray-400 py-4">
|
|
No saved designs yet
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
{enchantmentDesigns.map(design => (
|
|
<div
|
|
key={design.id}
|
|
className={`p-3 rounded border ${
|
|
selectedDesign === design.id
|
|
? 'border-amber-500 bg-amber-900/20'
|
|
: 'border-gray-700 bg-gray-800/50'
|
|
}`}
|
|
onClick={() => setSelectedDesign(design.id)}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="font-semibold">{design.name}</div>
|
|
<div className="text-xs text-gray-400">
|
|
{EQUIPMENT_TYPES[design.equipmentType]?.name}
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-6 w-6 p-0 text-gray-400 hover:text-red-400"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
deleteDesign(design.id);
|
|
}}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="mt-2 text-xs text-gray-400">
|
|
{design.effects.length} effects | {design.totalCapacityUsed} cap
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
|
|
// Render prepare stage
|
|
const renderPrepareStage = () => (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{/* Equipment Selection */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">Select Equipment to Prepare</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{preparationProgress ? (
|
|
<div className="space-y-3">
|
|
<div className="text-sm text-gray-400">
|
|
Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
|
|
</div>
|
|
<Progress value={(preparationProgress.progress / preparationProgress.required) * 100} className="h-3" />
|
|
<div className="flex justify-between text-xs text-gray-400">
|
|
<span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
|
|
<span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
|
|
</div>
|
|
<Button size="sm" variant="outline" onClick={cancelPreparation}>Cancel</Button>
|
|
</div>
|
|
) : (
|
|
<ScrollArea className="h-64">
|
|
<div className="space-y-2">
|
|
{equippedItems.map(({ slot, instance }) => (
|
|
<div
|
|
key={instance.instanceId}
|
|
className={`p-3 rounded border cursor-pointer transition-all ${
|
|
selectedEquipmentInstance === instance.instanceId
|
|
? 'border-amber-500 bg-amber-900/20'
|
|
: 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
|
|
}`}
|
|
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
|
>
|
|
<div className="flex justify-between">
|
|
<div>
|
|
<div className="font-semibold">{instance.name}</div>
|
|
<div className="text-xs text-gray-400">{SLOT_NAMES[slot]}</div>
|
|
</div>
|
|
<div className="text-right text-sm">
|
|
<div className="text-green-400">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
|
|
<div className="text-xs text-gray-400">{instance.enchantments.length} enchants</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{equippedItems.length === 0 && (
|
|
<div className="text-center text-gray-400 py-4">No equipped items</div>
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Preparation Details */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">Preparation Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!selectedEquipmentInstance ? (
|
|
<div className="text-center text-gray-400 py-8">
|
|
Select equipment to prepare
|
|
</div>
|
|
) : preparationProgress ? (
|
|
<div className="text-gray-400">Preparation in progress...</div>
|
|
) : (
|
|
(() => {
|
|
const instance = equipmentInstances[selectedEquipmentInstance];
|
|
const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
|
|
const manaCost = instance.totalCapacity * 10;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-lg font-semibold">{instance.name}</div>
|
|
<Separator className="bg-gray-700" />
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Capacity:</span>
|
|
<span>{instance.usedCapacity}/{instance.totalCapacity}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Prep Time:</span>
|
|
<span>{prepTime}h</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Mana Cost:</span>
|
|
<span className={rawMana < manaCost ? 'text-red-400' : 'text-green-400'}>
|
|
{fmt(manaCost)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
className="w-full"
|
|
disabled={rawMana < manaCost}
|
|
onClick={() => startPreparing(selectedEquipmentInstance)}
|
|
>
|
|
Start Preparation ({prepTime}h, {fmt(manaCost)} mana)
|
|
</Button>
|
|
</div>
|
|
);
|
|
})()
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
|
|
// Render apply stage
|
|
const renderApplyStage = () => (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{/* Equipment & Design Selection */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">Select Equipment & Design</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{applicationProgress ? (
|
|
<div className="space-y-3">
|
|
<div className="text-sm text-gray-400">
|
|
Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
|
|
</div>
|
|
<Progress value={(applicationProgress.progress / applicationProgress.required) * 100} className="h-3" />
|
|
<div className="flex justify-between text-xs text-gray-400">
|
|
<span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
|
|
<span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{applicationProgress.paused ? (
|
|
<Button size="sm" onClick={resumeApplication}>Resume</Button>
|
|
) : (
|
|
<Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
|
|
)}
|
|
<Button size="sm" variant="outline" onClick={cancelApplication}>Cancel</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="text-sm text-gray-400 mb-2">Equipment:</div>
|
|
<ScrollArea className="h-32">
|
|
<div className="space-y-1">
|
|
{equippedItems.map(({ slot, instance }) => (
|
|
<div
|
|
key={instance.instanceId}
|
|
className={`p-2 rounded border cursor-pointer text-sm ${
|
|
selectedEquipmentInstance === instance.instanceId
|
|
? 'border-amber-500 bg-amber-900/20'
|
|
: 'border-gray-700 bg-gray-800/50'
|
|
}`}
|
|
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
|
>
|
|
{instance.name} ({instance.usedCapacity}/{instance.totalCapacity} cap)
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-sm text-gray-400 mb-2">Design:</div>
|
|
<ScrollArea className="h-32">
|
|
<div className="space-y-1">
|
|
{enchantmentDesigns.map(design => (
|
|
<div
|
|
key={design.id}
|
|
className={`p-2 rounded border cursor-pointer text-sm ${
|
|
selectedDesign === design.id
|
|
? 'border-purple-500 bg-purple-900/20'
|
|
: 'border-gray-700 bg-gray-800/50'
|
|
}`}
|
|
onClick={() => setSelectedDesign(design.id)}
|
|
>
|
|
{design.name} ({design.totalCapacityUsed} cap)
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Application Details */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">Apply Enchantment</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!selectedEquipmentInstance || !selectedDesign ? (
|
|
<div className="text-center text-gray-400 py-8">
|
|
Select equipment and a design
|
|
</div>
|
|
) : applicationProgress ? (
|
|
<div className="text-gray-400">Application in progress...</div>
|
|
) : (
|
|
(() => {
|
|
const instance = equipmentInstances[selectedEquipmentInstance];
|
|
const design = enchantmentDesigns.find(d => d.id === selectedDesign);
|
|
if (!design) return null;
|
|
|
|
const availableCap = instance.totalCapacity - instance.usedCapacity;
|
|
const canFit = availableCap >= design.totalCapacityUsed;
|
|
const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
|
|
const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-lg font-semibold">{design.name}</div>
|
|
<div className="text-sm text-gray-400">→ {instance.name}</div>
|
|
<Separator className="bg-gray-700" />
|
|
|
|
<div className="space-y-2 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Required Capacity:</span>
|
|
<span className={canFit ? 'text-green-400' : 'text-red-400'}>
|
|
{design.totalCapacityUsed} / {availableCap} available
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Application Time:</span>
|
|
<span>{applicationTime}h</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-400">Mana per Hour:</span>
|
|
<span>{manaPerHour}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-sm text-gray-400">
|
|
Effects:
|
|
<ul className="list-disc list-inside">
|
|
{design.effects.map(eff => (
|
|
<li key={eff.effectId}>
|
|
{ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<Button
|
|
className="w-full"
|
|
disabled={!canFit}
|
|
onClick={() => startApplying(selectedEquipmentInstance, selectedDesign)}
|
|
>
|
|
Apply Enchantment
|
|
</Button>
|
|
</div>
|
|
);
|
|
})()
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Disenchant Section */}
|
|
<Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm">Disenchant Equipment</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
|
|
{equippedItems
|
|
.filter(({ instance }) => instance.enchantments.length > 0)
|
|
.map(({ slot, instance }) => {
|
|
const disenchantLevel = skills.disenchanting || 0;
|
|
const recoveryRate = 0.1 + disenchantLevel * 0.2;
|
|
const totalRecoverable = instance.enchantments.reduce(
|
|
(sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
|
|
0
|
|
);
|
|
|
|
return (
|
|
<div key={instance.instanceId} className="p-3 rounded border border-gray-700 bg-gray-800/50">
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<div className="font-semibold">{instance.name}</div>
|
|
<div className="text-xs text-gray-400">{instance.enchantments.length} enchantments</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => disenchantEquipment(instance.instanceId)}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-1" />
|
|
Recover {fmt(totalRecoverable)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
{equippedItems.filter(({ instance }) => instance.enchantments.length > 0).length === 0 && (
|
|
<div className="col-span-full text-center text-gray-400 py-4">
|
|
No enchanted equipment to disenchant
|
|
</div>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
|
|
// Render equipment crafting stage
|
|
const renderCraftStage = () => (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{/* Blueprint Selection */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm flex items-center gap-2">
|
|
<Anvil className="w-4 h-4" />
|
|
Available Blueprints
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{equipmentCraftingProgress ? (
|
|
<div className="space-y-3">
|
|
<div className="text-sm text-gray-400">
|
|
Crafting: {CRAFTING_RECIPES[equipmentCraftingProgress.blueprintId]?.name}
|
|
</div>
|
|
<Progress value={(equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100} className="h-3" />
|
|
<div className="flex justify-between text-xs text-gray-400">
|
|
<span>{equipmentCraftingProgress.progress.toFixed(1)}h / {equipmentCraftingProgress.required.toFixed(1)}h</span>
|
|
<span>Mana spent: {fmt(equipmentCraftingProgress.manaSpent)}</span>
|
|
</div>
|
|
<Button size="sm" variant="outline" onClick={cancelEquipmentCrafting}>Cancel</Button>
|
|
</div>
|
|
) : (
|
|
<ScrollArea className="h-64">
|
|
<div className="space-y-2">
|
|
{lootInventory.blueprints.length === 0 ? (
|
|
<div className="text-center text-gray-400 py-4">
|
|
<Package className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
|
<p>No blueprints discovered yet.</p>
|
|
<p className="text-xs mt-1">Defeat guardians to find blueprints!</p>
|
|
</div>
|
|
) : (
|
|
lootInventory.blueprints.map(bpId => {
|
|
const recipe = CRAFTING_RECIPES[bpId];
|
|
if (!recipe) return null;
|
|
|
|
const { canCraft, missingMaterials, missingMana } = canCraftRecipe(
|
|
recipe,
|
|
lootInventory.materials,
|
|
rawMana
|
|
);
|
|
|
|
const rarityStyle = RARITY_COLORS[recipe.rarity];
|
|
|
|
return (
|
|
<div
|
|
key={bpId}
|
|
className="p-3 rounded border bg-gray-800/50"
|
|
style={{ borderColor: rarityStyle?.color }}
|
|
>
|
|
<div className="flex justify-between items-start mb-2">
|
|
<div>
|
|
<div className="font-semibold" style={{ color: rarityStyle?.color }}>
|
|
{recipe.name}
|
|
</div>
|
|
<div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
|
|
</div>
|
|
<Badge variant="outline" className="text-xs">
|
|
{EQUIPMENT_TYPES[recipe.equipmentTypeId]?.category}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
|
|
|
|
<Separator className="bg-gray-700 my-2" />
|
|
|
|
<div className="text-xs space-y-1">
|
|
<div className="text-gray-500">Materials:</div>
|
|
{Object.entries(recipe.materials).map(([matId, amount]) => {
|
|
const available = lootInventory.materials[matId] || 0;
|
|
const matDrop = LOOT_DROPS[matId];
|
|
const hasEnough = available >= amount;
|
|
|
|
return (
|
|
<div key={matId} className="flex justify-between">
|
|
<span>{matDrop?.name || matId}</span>
|
|
<span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
|
|
{available} / {amount}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<div className="flex justify-between mt-2">
|
|
<span>Mana Cost:</span>
|
|
<span className={rawMana >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
|
|
{fmt(recipe.manaCost)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<span>Craft Time:</span>
|
|
<span>{recipe.craftTime}h</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
className="w-full mt-3"
|
|
size="sm"
|
|
disabled={!canCraft || currentAction === 'craft'}
|
|
onClick={() => startCraftingEquipment(bpId)}
|
|
>
|
|
{canCraft ? 'Craft Equipment' : 'Missing Resources'}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</ScrollArea>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Materials Inventory */}
|
|
<Card className="bg-gray-900/80 border-gray-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-amber-400 text-sm flex items-center gap-2">
|
|
<Package className="w-4 h-4" />
|
|
Materials ({Object.values(lootInventory.materials).reduce((a, b) => a + b, 0)})
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<ScrollArea className="h-64">
|
|
{Object.keys(lootInventory.materials).length === 0 ? (
|
|
<div className="text-center text-gray-400 py-4">
|
|
<Sparkles className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
|
<p>No materials collected yet.</p>
|
|
<p className="text-xs mt-1">Defeat floors to gather materials!</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{Object.entries(lootInventory.materials).map(([matId, count]) => {
|
|
if (count <= 0) return null;
|
|
const drop = LOOT_DROPS[matId];
|
|
if (!drop) return null;
|
|
|
|
const rarityStyle = RARITY_COLORS[drop.rarity];
|
|
|
|
return (
|
|
<div
|
|
key={matId}
|
|
className="p-2 rounded border bg-gray-800/50 group relative"
|
|
style={{ borderColor: rarityStyle?.color }}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<div className="text-sm font-semibold" style={{ color: rarityStyle?.color }}>
|
|
{drop.name}
|
|
</div>
|
|
<div className="text-xs text-gray-400">x{count}</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
|
|
onClick={() => deleteMaterial(matId, count)}
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</ScrollArea>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Stage Tabs */}
|
|
<Tabs value={craftingStage} onValueChange={(v) => setCraftingStage(v as typeof craftingStage)}>
|
|
<TabsList className="bg-gray-800/50">
|
|
<TabsTrigger value="craft" className="data-[state=active]:bg-cyan-600">
|
|
<Anvil className="w-4 h-4 mr-1" />
|
|
Craft
|
|
</TabsTrigger>
|
|
<TabsTrigger value="design" className="data-[state=active]:bg-amber-600">
|
|
<Scroll className="w-4 h-4 mr-1" />
|
|
Design
|
|
</TabsTrigger>
|
|
<TabsTrigger value="prepare" className="data-[state=active]:bg-amber-600">
|
|
<Hammer className="w-4 h-4 mr-1" />
|
|
Prepare
|
|
</TabsTrigger>
|
|
<TabsTrigger value="apply" className="data-[state=active]:bg-amber-600">
|
|
<Sparkles className="w-4 h-4 mr-1" />
|
|
Apply
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="craft" className="mt-4">
|
|
{renderCraftStage()}
|
|
</TabsContent>
|
|
<TabsContent value="design" className="mt-4">
|
|
{renderDesignStage()}
|
|
</TabsContent>
|
|
<TabsContent value="prepare" className="mt-4">
|
|
{renderPrepareStage()}
|
|
</TabsContent>
|
|
<TabsContent value="apply" className="mt-4">
|
|
{renderApplyStage()}
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* Current Activity Indicator */}
|
|
{currentAction === 'craft' && equipmentCraftingProgress && (
|
|
<Card className="bg-cyan-900/30 border-cyan-600">
|
|
<CardContent className="py-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Anvil className="w-5 h-5 text-cyan-400" />
|
|
<span>Crafting equipment...</span>
|
|
</div>
|
|
<div className="text-sm text-gray-400">
|
|
{((equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100).toFixed(0)}%
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{currentAction === 'design' && designProgress && (
|
|
<Card className="bg-purple-900/30 border-purple-600">
|
|
<CardContent className="py-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Scroll className="w-5 h-5 text-purple-400" />
|
|
<span>Designing enchantment...</span>
|
|
</div>
|
|
<div className="text-sm text-gray-400">
|
|
{((designProgress.progress / designProgress.required) * 100).toFixed(0)}%
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{currentAction === 'prepare' && preparationProgress && (
|
|
<Card className="bg-blue-900/30 border-blue-600">
|
|
<CardContent className="py-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Hammer className="w-5 h-5 text-blue-400" />
|
|
<span>Preparing equipment...</span>
|
|
</div>
|
|
<div className="text-sm text-gray-400">
|
|
{((preparationProgress.progress / preparationProgress.required) * 100).toFixed(0)}%
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{currentAction === 'enchant' && applicationProgress && (
|
|
<Card className="bg-amber-900/30 border-amber-600">
|
|
<CardContent className="py-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Sparkles className="w-5 h-5 text-amber-400" />
|
|
<span>{applicationProgress.paused ? 'Enchantment paused' : 'Applying enchantment...'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="text-sm text-gray-400">
|
|
{((applicationProgress.progress / applicationProgress.required) * 100).toFixed(0)}%
|
|
</div>
|
|
{applicationProgress.paused ? (
|
|
<Button size="sm" onClick={resumeApplication}>Resume</Button>
|
|
) : (
|
|
<Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|