Consolidate disenchanting into CraftingTab Prepare step (Bug 8)
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m32s
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m32s
- Add 'tags' field to EquipmentInstance type - Modify Prepare step to show warning and different button text when item has enchantments - Consolidate disenchanting into Prepare step (remove separate disenchant UI) - After successful preparation, item receives 'Ready for Enchantment' tag - Modify Apply step to only allow applying enchantments to items tagged 'Ready for Enchantment' - Update subtask_6_progress.md and todo.md to mark Sub-Task 6 as completed
This commit is contained in:
Refactoring Agent
@@ -7,7 +7,7 @@ import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
|
||||
import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, EquipmentSlot } from '@/lib/game/types';
|
||||
import { fmt, type GameStore } from '@/lib/game/store';
|
||||
|
||||
// Slot display names
|
||||
@@ -40,7 +40,6 @@ export function EnchantmentPreparer({
|
||||
const skills = store.skills;
|
||||
const startPreparing = store.startPreparing;
|
||||
const cancelPreparation = store.cancelPreparation;
|
||||
const disenchantEquipment = store.disenchantEquipment;
|
||||
|
||||
// Get equipped items as array
|
||||
const equippedItems = Object.entries(equippedInstances)
|
||||
@@ -55,7 +54,7 @@ export function EnchantmentPreparer({
|
||||
{/* 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 or Disenchant</CardTitle>
|
||||
<CardTitle className="text-amber-400 text-sm">Select Equipment to Prepare</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{preparationProgress ? (
|
||||
@@ -75,6 +74,7 @@ export function EnchantmentPreparer({
|
||||
<div className="space-y-2">
|
||||
{equippedItems.map(({ slot, instance }) => {
|
||||
const hasEnchantments = instance.enchantments.length > 0;
|
||||
const isReady = instance.tags?.includes('Ready for Enchantment');
|
||||
return (
|
||||
<div
|
||||
key={instance.instanceId}
|
||||
@@ -82,7 +82,7 @@ export function EnchantmentPreparer({
|
||||
selectedEquipmentInstance === instance.instanceId
|
||||
? 'border-amber-500 bg-amber-900/20'
|
||||
: 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
|
||||
} ${hasEnchantments ? 'border-l-4 border-l-red-600' : ''}`}
|
||||
} ${hasEnchantments ? 'border-l-4 border-l-red-600' : ''} ${isReady ? 'border-l-4 border-l-green-600' : ''}`}
|
||||
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
||||
>
|
||||
<div className="flex justify-between">
|
||||
@@ -91,7 +91,12 @@ export function EnchantmentPreparer({
|
||||
<div className="text-xs text-gray-400">{SLOT_NAMES[slot]}</div>
|
||||
{hasEnchantments && (
|
||||
<div className="text-xs text-red-400 mt-1">
|
||||
⚠️ {instance.enchantments.length} enchantments - Disenchant to apply new
|
||||
⚠️ {instance.enchantments.length} enchantments - Preparation will remove them
|
||||
</div>
|
||||
)}
|
||||
{isReady && (
|
||||
<div className="text-xs text-green-400 mt-1">
|
||||
✅ Ready for Enchantment
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -120,14 +125,16 @@ export function EnchantmentPreparer({
|
||||
<CardContent>
|
||||
{!selectedEquipmentInstance ? (
|
||||
<div className="text-center text-gray-400 py-8">
|
||||
Select equipment to prepare or disenchant
|
||||
Select equipment to prepare
|
||||
</div>
|
||||
) : preparationProgress ? (
|
||||
<div className="text-gray-400">Preparation in progress...</div>
|
||||
) : (
|
||||
(() => {
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
if (!instance) return null;
|
||||
const hasEnchantments = instance.enchantments.length > 0;
|
||||
const isReady = instance.tags?.includes('Ready for Enchantment');
|
||||
const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
|
||||
const manaCost = instance.totalCapacity * 10;
|
||||
|
||||
@@ -144,55 +151,61 @@ export function EnchantmentPreparer({
|
||||
<div className="text-lg font-semibold">{instance.name}</div>
|
||||
<Separator className="bg-gray-700" />
|
||||
|
||||
{/* Disenchant option for enchanted gear */}
|
||||
{hasEnchantments && (
|
||||
<div className="p-3 rounded border border-red-600/50 bg-red-900/20 space-y-3">
|
||||
{/* Show warning if item has enchantments */}
|
||||
{hasEnchantments && !isReady && (
|
||||
<div className="p-3 rounded border border-red-600/50 bg-red-900/20">
|
||||
<div className="text-sm font-semibold text-red-400">⚠️ Equipment has enchantments</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
You must disenchant before applying new enchantments.
|
||||
<div className="text-xs text-gray-400 mt-1">
|
||||
Preparation will remove all existing enchantments and recover some mana.
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<div className="flex justify-between text-sm mt-2">
|
||||
<span className="text-gray-400">Recoverable Mana:</span>
|
||||
<span className="text-green-400">{fmt(totalRecoverable)}</span>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full bg-red-600 hover:bg-red-700"
|
||||
onClick={() => disenchantEquipment(instance.instanceId)}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Disenchant & Recover {fmt(totalRecoverable)} Mana
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Prepare option for non-enchanted gear */}
|
||||
{!hasEnchantments && (
|
||||
<>
|
||||
<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>
|
||||
{/* Show ready status */}
|
||||
{isReady && (
|
||||
<div className="p-3 rounded border border-green-600/50 bg-green-900/20">
|
||||
<div className="text-sm font-semibold text-green-400">✅ Ready for Enchantment</div>
|
||||
<div className="text-xs text-gray-400 mt-1">
|
||||
This item has been prepared and is ready for enchantment application.
|
||||
</div>
|
||||
<Button
|
||||
className="w-full"
|
||||
disabled={rawMana < manaCost}
|
||||
onClick={() => startPreparing(selectedEquipmentInstance)}
|
||||
>
|
||||
Start Preparation ({prepTime}h, {fmt(manaCost)} mana)
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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 || isReady}
|
||||
onClick={() => startPreparing(selectedEquipmentInstance)}
|
||||
>
|
||||
{hasEnchantments ? (
|
||||
<>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Start Preparation — this will remove existing enchantments ({prepTime}h, {fmt(manaCost)} mana)
|
||||
</>
|
||||
) : (
|
||||
<>Start Preparation ({prepTime}h, {fmt(manaCost)} mana)</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
|
||||
Reference in New Issue
Block a user