feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s
- Implemented complete design system with 40+ CSS custom properties - Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo) - Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug - Added toast notification system (GameToast) with success/warning/error/info types - Added confirmation dialogs for destructive actions - Removed all dev artifacts and component name labels - Added empty states to all tabs - Replaced emoji icons with Lucide React icons - Added enchantPower placeholder to StatsTab and EquipmentTab - Mobile audit passed at 375px viewport - Build passes with 0 errors, lint passes with 0 errors Sub-tasks completed: - ST1: Design System Implementation - ST2: Global Layout & Header - ST3: Left Panel (Mana Display & Action Area) - ST4: Skills Tab - ST5: Spire Tab & Spire Mode UI - ST6: Stats Tab - ST7: Equipment & Crafting Tabs - ST8: Attunements Tab - ST9: Remaining Tabs - ST10: Toast System & Confirmation Dialogs Documentation: 15+ files in docs/task4/
This commit is contained in:
Refactoring Agent
@@ -1,25 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { useState } from 'react';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { StatRow } from '@/components/ui/stat-row';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
|
||||
import type { EquipmentInstance, EnchantmentDesign, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, EquipmentSlot } 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',
|
||||
};
|
||||
import { CheckCircle, Sparkles } from 'lucide-react';
|
||||
|
||||
export interface EnchantmentApplierProps {
|
||||
store: GameStore;
|
||||
@@ -27,6 +19,8 @@ export interface EnchantmentApplierProps {
|
||||
setSelectedEquipmentInstance: (id: string | null) => void;
|
||||
selectedDesign: string | null;
|
||||
setSelectedDesign: (id: string | null) => void;
|
||||
onEnchantmentApplied?: () => void;
|
||||
onCapacityExceeded?: (itemName: string, used: number, total: number) => void;
|
||||
}
|
||||
|
||||
export function EnchantmentApplier({
|
||||
@@ -35,6 +29,8 @@ export function EnchantmentApplier({
|
||||
setSelectedEquipmentInstance,
|
||||
selectedDesign,
|
||||
setSelectedDesign,
|
||||
onEnchantmentApplied,
|
||||
onCapacityExceeded,
|
||||
}: EnchantmentApplierProps) {
|
||||
const equippedInstances = store.equippedInstances;
|
||||
const equipmentInstances = store.equipmentInstances;
|
||||
@@ -46,182 +42,237 @@ export function EnchantmentApplier({
|
||||
const resumeApplication = store.resumeApplication;
|
||||
const cancelApplication = store.cancelApplication;
|
||||
|
||||
// Get equipped items as array - only show items tagged 'Ready for Enchantment'
|
||||
// Get equipped items as array - ONLY show items tagged 'Ready for Enchantment' (requirement cr5)
|
||||
const equippedItems = Object.entries(equippedInstances)
|
||||
.filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
|
||||
.map(([slot, instanceId]) => ({
|
||||
slot: slot as EquipmentSlot,
|
||||
instance: equipmentInstances[instanceId!],
|
||||
}));
|
||||
}))
|
||||
.filter(({ instance }) => instance.tags?.includes('Ready for Enchantment'));
|
||||
|
||||
// Handle apply button click
|
||||
const handleApply = () => {
|
||||
if (!selectedEquipmentInstance || !selectedDesign) return;
|
||||
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
const design = enchantmentDesigns.find(d => d.id === selectedDesign);
|
||||
|
||||
if (!instance || !design) return;
|
||||
|
||||
// Check capacity
|
||||
const availableCap = instance.totalCapacity - instance.usedCapacity;
|
||||
if (availableCap < design.totalCapacityUsed) {
|
||||
onCapacityExceeded?.(instance.name, instance.usedCapacity, instance.totalCapacity);
|
||||
return;
|
||||
}
|
||||
|
||||
startApplying(selectedEquipmentInstance, selectedDesign);
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Select Equipment & Design" />
|
||||
{applicationProgress ? (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400 mb-2">Equipment (Ready for Enchantment):</div>
|
||||
<ScrollArea className="h-32">
|
||||
<div className="space-y-1">
|
||||
{equippedItems
|
||||
.filter(({ instance }) => instance.tags?.includes('Ready for Enchantment'))
|
||||
.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'
|
||||
<div className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-[var(--mana-light)] transition-all duration-300"
|
||||
style={{ width: `${(applicationProgress.progress / applicationProgress.required) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-[var(--text-muted)]">
|
||||
<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 ? (
|
||||
<ActionButton size="sm" onClick={resumeApplication}>Resume</ActionButton>
|
||||
) : (
|
||||
<>
|
||||
<ActionButton variant="outline" size="sm" onClick={pauseApplication}>Pause</ActionButton>
|
||||
<ActionButton variant="ghost" size="sm" onClick={() => {
|
||||
cancelApplication();
|
||||
onEnchantmentApplied?.(); // This will trigger the cancel toast via parent
|
||||
}}>Cancel</ActionButton>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-muted)] mb-2">
|
||||
Equipment (Ready for Enchantment):
|
||||
</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 transition-all
|
||||
${selectedEquipmentInstance === instance.instanceId
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}`}
|
||||
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
||||
>
|
||||
{instance.name} ({instance.usedCapacity}/{instance.totalCapacity} cap)
|
||||
<span className="text-xs text-green-400 ml-2">✓ Ready</span>
|
||||
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select ${instance.name} (Ready for Enchantment)`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[var(--text-primary)]">{instance.name}</span>
|
||||
<span className="text-xs text-[var(--text-muted)]">
|
||||
({instance.usedCapacity}/{instance.totalCapacity} cap)
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{equippedItems.filter(({ instance }) => instance.tags?.includes('Ready for Enchantment')).length === 0 && (
|
||||
<div className="text-center text-gray-500 text-xs py-2">
|
||||
No equipment ready for enchantment. Prepare equipment first in the Prepare stage.
|
||||
<div className="text-xs text-[var(--color-success)] mt-1">
|
||||
<CheckCircle size={10} className="inline mr-1" />
|
||||
Ready
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{equippedItems.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] text-xs py-2">
|
||||
No equipment ready for enchantment.
|
||||
<br />
|
||||
Prepare equipment first in the Prepare stage.
|
||||
</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'
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-muted)] 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 transition-all
|
||||
${selectedDesign === design.id
|
||||
? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}`}
|
||||
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];
|
||||
if (!instance) return null;
|
||||
|
||||
// Check if equipment is ready for enchantment
|
||||
const isReady = instance.tags?.includes('Ready for Enchantment');
|
||||
if (!isReady) {
|
||||
return (
|
||||
<div className="text-center text-red-400 py-8">
|
||||
This equipment is not prepared for enchantment. Please prepare it in the Prepare stage first.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
<div className="text-xs text-green-400">✓ Ready for Enchantment</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
|
||||
onClick={() => setSelectedDesign(design.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select design: ${design.name}`}
|
||||
>
|
||||
<span className="text-[var(--text-primary)]">{design.name}</span>
|
||||
<span className="text-xs text-[var(--text-muted)] ml-2">
|
||||
({design.totalCapacityUsed} cap)
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Application Time:</span>
|
||||
<span>{applicationTime}h</span>
|
||||
))}
|
||||
{enchantmentDesigns.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] text-xs py-2">
|
||||
No designs available. Create one in the Design stage.
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Mana per Hour:</span>
|
||||
<span>{manaPerHour}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</GameCard>
|
||||
|
||||
<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>
|
||||
{/* Application Details */}
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Apply Enchantment" />
|
||||
{!selectedEquipmentInstance || !selectedDesign ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
Select equipment and a design
|
||||
</div>
|
||||
) : applicationProgress ? (
|
||||
<div className="text-[var(--text-secondary)]">Application in progress...</div>
|
||||
) : (
|
||||
(() => {
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
if (!instance) return null;
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
disabled={!canFit}
|
||||
onClick={() => startApplying(selectedEquipmentInstance, selectedDesign)}
|
||||
>
|
||||
Apply Enchantment
|
||||
</Button>
|
||||
// Check if equipment is ready for enchantment
|
||||
const isReady = instance.tags?.includes('Ready for Enchantment');
|
||||
if (!isReady) {
|
||||
return (
|
||||
<div className="text-center text-[var(--color-danger)] py-8">
|
||||
This equipment is not prepared for enchantment. Please prepare it in the Prepare stage first.
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
}
|
||||
|
||||
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 text-[var(--text-primary)]">{design.name}</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">→ {instance.name}</div>
|
||||
<div className="text-xs text-[var(--color-success)]">
|
||||
<CheckCircle size={12} className="inline mr-1" />
|
||||
Ready for Enchantment
|
||||
</div>
|
||||
<Separator className="bg-[var(--border-subtle)]" />
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<StatRow
|
||||
label="Required Capacity:"
|
||||
value={
|
||||
<span className={canFit ? 'text-[var(--color-success)]' : 'text-[var(--color-danger)]'}>
|
||||
{design.totalCapacityUsed} / {availableCap} available
|
||||
</span>
|
||||
}
|
||||
highlight={canFit ? 'success' : 'danger'}
|
||||
/>
|
||||
<StatRow
|
||||
label="Application Time:"
|
||||
value={`${applicationTime}h`}
|
||||
highlight="default"
|
||||
/>
|
||||
<StatRow
|
||||
label="Mana per Hour:"
|
||||
value={manaPerHour}
|
||||
highlight="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-[var(--text-muted)]">
|
||||
Effects:
|
||||
<ul className="list-disc list-inside mt-1">
|
||||
{design.effects.map(eff => (
|
||||
<li key={eff.effectId} className="text-[var(--text-secondary)]">
|
||||
{ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ActionButton
|
||||
className="w-full"
|
||||
disabled={!canFit}
|
||||
onClick={handleApply}
|
||||
>
|
||||
<Sparkles size={16} className="mr-2" />
|
||||
Apply Enchantment
|
||||
</ActionButton>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</GameCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
EnchantmentApplier.displayName = "EnchantmentApplier";
|
||||
EnchantmentApplier.displayName = 'EnchantmentApplier';
|
||||
|
||||
@@ -1,30 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { StatRow } from '@/components/ui/stat-row';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Wand2, Scroll, Trash2, Plus, Minus } from 'lucide-react';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { AlertCircle, Wand2, Scroll, Trash2, Plus, Minus, Check } from 'lucide-react';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress } from '@/lib/game/types';
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } 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 EnchantmentDesignerProps {
|
||||
store: GameStore;
|
||||
selectedEquipmentType: string | null;
|
||||
@@ -137,243 +129,321 @@ export function EnchantmentDesigner({
|
||||
);
|
||||
};
|
||||
|
||||
// Get incompatible effects (unlocked but not for this equipment type)
|
||||
// Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
|
||||
const getIncompatibleEffects = () => {
|
||||
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)
|
||||
);
|
||||
};
|
||||
|
||||
// Get equipment types that the player actually owns (has instances of)
|
||||
// This ensures enchantment compatibility is based on owned items, not just blueprints
|
||||
const getOwnedEquipmentTypes = () => {
|
||||
// Get all unique equipment type IDs from owned instances
|
||||
const ownedEquipmentTypeIds = new Set<string>();
|
||||
|
||||
|
||||
// Check all equipment instances the player owns
|
||||
for (const instance of Object.values(store.equipmentInstances)) {
|
||||
ownedEquipmentTypeIds.add(instance.typeId);
|
||||
}
|
||||
|
||||
|
||||
// Filter EQUIPMENT_TYPES to only include types the player owns
|
||||
return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
|
||||
};
|
||||
|
||||
const ownedEquipmentTypes = getOwnedEquipmentTypes();
|
||||
const availableEffects = getAvailableEffects();
|
||||
const incompatibleEffects = getIncompatibleEffects();
|
||||
|
||||
// Render design stage
|
||||
// Get the reason why an effect is incompatible
|
||||
const getIncompatibilityReason = (effect: typeof ENCHANTMENT_EFFECTS[string]): string => {
|
||||
if (!selectedEquipmentType) return 'No equipment selected';
|
||||
const type = EQUIPMENT_TYPES[selectedEquipmentType];
|
||||
if (!type) return 'Unknown equipment type';
|
||||
|
||||
// Check what categories this effect is allowed for
|
||||
const allowedCategories = effect.allowedEquipmentCategories;
|
||||
const equipmentCategory = type.category;
|
||||
|
||||
if (allowedCategories.includes(equipmentCategory)) {
|
||||
return 'Compatible';
|
||||
}
|
||||
|
||||
// Provide specific reasons
|
||||
if (allowedCategories.includes('weapon' as EquipmentCategory) && equipmentCategory !== 'sword' && equipmentCategory !== 'caster' && equipmentCategory !== 'catalyst') {
|
||||
return `Requires a weapon (${allowedCategories.filter(c => ['sword', 'caster', 'catalyst'].includes(c)).join(', ')})`;
|
||||
}
|
||||
|
||||
return `Requires ${allowedCategories.join(' or ')} equipment`;
|
||||
};
|
||||
|
||||
// Render stage
|
||||
return (
|
||||
<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[designProgress.equipmentType]?.name}
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-amber-300">{designProgress.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>
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="1. Select Equipment Type" />
|
||||
{designProgress ? (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
Designing for: {EQUIPMENT_TYPES[designProgress.equipmentType]?.name}
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-64">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{ownedEquipmentTypes.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>
|
||||
{ownedEquipmentTypes.length === 0 && (
|
||||
<div className="text-center text-gray-400 py-4 text-sm">
|
||||
No equipment blueprints owned. Craft or find equipment blueprints first.
|
||||
</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 className="text-sm font-semibold text-[var(--mana-light)]">{designProgress.name}</div>
|
||||
<Progress
|
||||
value={(designProgress.progress / designProgress.required) * 100}
|
||||
className="h-3 bg-[var(--bg-sunken)]"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-[var(--text-muted)]">
|
||||
<span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
|
||||
<ActionButton size="sm" variant="outline" onClick={cancelDesign}>Cancel</ActionButton>
|
||||
</div>
|
||||
) : designProgress ? (
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm text-gray-400">Design in progress...</div>
|
||||
{designProgress.effects.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={isOverCapacity ? 'text-red-400' : 'text-green-400'}>
|
||||
{designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
|
||||
</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 || isOverCapacity}
|
||||
onClick={handleCreateDesign}
|
||||
>
|
||||
{isOverCapacity ? 'Over Capacity!' : `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>
|
||||
) : (
|
||||
<ScrollArea className="h-64">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{ownedEquipmentTypes.map(type => (
|
||||
<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)}
|
||||
key={type.id}
|
||||
className={`p-2 rounded border cursor-pointer transition-all
|
||||
${selectedEquipmentType === type.id
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}`}
|
||||
onClick={() => setSelectedEquipmentType(type.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select ${type.name}`}
|
||||
>
|
||||
<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 className="text-sm font-semibold text-[var(--text-primary)]">{type.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">Cap: {type.baseCapacity}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{ownedEquipmentTypes.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] py-4 text-sm">
|
||||
No equipment blueprints owned. Craft or find equipment blueprints first.
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
)}
|
||||
</GameCard>
|
||||
|
||||
{/* Effect Selection */}
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="2. Select Effects" />
|
||||
{enchantingLevel < 1 ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
<Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50 text-[var(--text-disabled)]" />
|
||||
<p>Learn Enchanting skill to design enchantments</p>
|
||||
</div>
|
||||
) : designProgress ? (
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm text-[var(--text-secondary)]">Design in progress...</div>
|
||||
{designProgress.effects.map(eff => {
|
||||
const def = ENCHANTMENT_EFFECTS[eff.effectId];
|
||||
return (
|
||||
<div key={eff.effectId} className="flex justify-between text-sm text-[var(--text-primary)]">
|
||||
<span>{def?.name} x{eff.stacks}</span>
|
||||
<span className="text-[var(--text-muted)]">{eff.capacityCost} cap</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : !selectedEquipmentType ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
Select an equipment type first
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ScrollArea className="h-48 mb-4">
|
||||
<div className="space-y-2">
|
||||
{/* Compatible Effects */}
|
||||
{availableEffects.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-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-semibold text-[var(--text-primary)]">{effect.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">{effect.description}</div>
|
||||
<div className="text-xs text-[var(--text-disabled)] mt-1">
|
||||
Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
{selected && (
|
||||
<ActionButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => removeEffect(effect.id)}
|
||||
>
|
||||
<Minus className="w-3 h-3" />
|
||||
</ActionButton>
|
||||
)}
|
||||
<ActionButton
|
||||
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" />
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
{selected && (
|
||||
<Badge variant="outline" className="mt-1 text-xs border-[var(--mana-stellar)] text-[var(--mana-stellar)]">
|
||||
{selected.stacks}/{effect.maxStacks}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Incompatible Effects - Requirement: greyed-out "Unavailable" section with tooltips */}
|
||||
{incompatibleEffects.length > 0 && (
|
||||
<>
|
||||
<Separator className="bg-[var(--border-subtle)] my-2" />
|
||||
<div className="text-xs font-semibold text-[var(--text-disabled)] uppercase tracking-wider mb-2">
|
||||
Unavailable
|
||||
</div>
|
||||
{incompatibleEffects.map(effect => {
|
||||
const reason = getIncompatibilityReason(effect);
|
||||
|
||||
return (
|
||||
<TooltipProvider key={effect.id}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className="p-2 rounded border border-[var(--border-subtle)] bg-[var(--bg-sunken)]/30 opacity-50 cursor-not-allowed"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="text-sm font-semibold text-[var(--text-disabled)]">{effect.name}</div>
|
||||
<div className="text-xs text-[var(--text-disabled)]">{effect.description}</div>
|
||||
</div>
|
||||
<AlertCircle size={14} className="text-[var(--text-disabled)]" />
|
||||
</div>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
|
||||
<p className="font-semibold">Incompatible Effect</p>
|
||||
<p className="text-xs text-[var(--text-muted)] mt-1">{reason}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Selected effects summary */}
|
||||
<Separator className="bg-[var(--border-subtle)] 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-[var(--bg-sunken)] border border-[var(--border-default)] rounded px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] focus:outline-none focus:border-[var(--border-focus)]"
|
||||
aria-label="Design name"
|
||||
/>
|
||||
<StatRow
|
||||
label="Total Capacity:"
|
||||
value={
|
||||
<span className={isOverCapacity ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
|
||||
{designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<StatRow
|
||||
label="Design Time:"
|
||||
value={`${designTime.toFixed(1)}h`}
|
||||
highlight="default"
|
||||
/>
|
||||
<ActionButton
|
||||
className="w-full"
|
||||
disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
|
||||
onClick={handleCreateDesign}
|
||||
>
|
||||
{isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
|
||||
</ActionButton>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</GameCard>
|
||||
|
||||
{/* Saved Designs */}
|
||||
<GameCard variant="default" className="lg:col-span-2">
|
||||
<SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
|
||||
{enchantmentDesigns.length === 0 ? (
|
||||
<div className="text-center text-[var(--text-muted)] 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 cursor-pointer transition-all
|
||||
${selectedDesign === design.id
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}`}
|
||||
onClick={() => setSelectedDesign(design.id)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Select design: ${design.name}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="font-semibold text-[var(--text-primary)]">{design.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">
|
||||
{EQUIPMENT_TYPES[design.equipmentType]?.name}
|
||||
</div>
|
||||
</div>
|
||||
<ActionButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--color-danger)]"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deleteDesign(design.id);
|
||||
}}
|
||||
aria-label={`Delete design: ${design.name}`}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</ActionButton>
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-[var(--text-muted)]">
|
||||
{design.effects.length} effects | {design.totalCapacityUsed} cap
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</GameCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
EnchantmentDesigner.displayName = "EnchantmentDesigner";
|
||||
EnchantmentDesigner.displayName = 'EnchantmentDesigner';
|
||||
|
||||
@@ -1,26 +1,19 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { useState } from 'react';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { StatRow } from '@/components/ui/stat-row';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
|
||||
import { Trash2, CheckCircle, AlertTriangle } from 'lucide-react';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, EquipmentSlot } 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',
|
||||
};
|
||||
import { useGameToast } from '@/components/game/GameToast';
|
||||
|
||||
export interface EnchantmentPreparerProps {
|
||||
store: GameStore;
|
||||
@@ -33,6 +26,7 @@ export function EnchantmentPreparer({
|
||||
selectedEquipmentInstance,
|
||||
setSelectedEquipmentInstance,
|
||||
}: EnchantmentPreparerProps) {
|
||||
const showToast = useGameToast();
|
||||
const equippedInstances = store.equippedInstances;
|
||||
const equipmentInstances = store.equipmentInstances;
|
||||
const preparationProgress = store.preparationProgress;
|
||||
@@ -49,170 +43,263 @@ export function EnchantmentPreparer({
|
||||
instance: equipmentInstances[instanceId!],
|
||||
}));
|
||||
|
||||
// Confirm dialog state
|
||||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||||
|
||||
const handleStartPreparation = () => {
|
||||
if (!selectedEquipmentInstance) return;
|
||||
const instance = equipmentInstances[selectedEquipmentInstance];
|
||||
if (!instance) return;
|
||||
|
||||
// If item has existing enchantments, show confirm dialog (bug #8)
|
||||
if (instance.enchantments.length > 0) {
|
||||
setShowConfirmDialog(true);
|
||||
} else {
|
||||
startPreparingWithToast(selectedEquipmentInstance);
|
||||
}
|
||||
};
|
||||
|
||||
const startPreparingWithToast = (instanceId: string) => {
|
||||
const instance = equipmentInstances[instanceId];
|
||||
startPreparing(instanceId);
|
||||
if (instance) {
|
||||
showToast('info', 'Preparation Started', `Preparing ${instance.name} for enchantment...`);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmPreparation = () => {
|
||||
if (selectedEquipmentInstance) {
|
||||
startPreparingWithToast(selectedEquipmentInstance);
|
||||
setShowConfirmDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Select Equipment to Prepare" />
|
||||
{preparationProgress ? (
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-64">
|
||||
<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}
|
||||
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'
|
||||
} ${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">
|
||||
<div>
|
||||
<div className="font-semibold">{instance.name}</div>
|
||||
<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 - Preparation will remove them
|
||||
</div>
|
||||
)}
|
||||
{isReady && (
|
||||
<div className="text-xs text-green-400 mt-1">
|
||||
✅ Ready for Enchantment
|
||||
</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 className="h-3 bg-[var(--bg-sunken)] rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-[var(--color-warning)] transition-all duration-300"
|
||||
style={{ width: `${(preparationProgress.progress / preparationProgress.required) * 100}%` }}
|
||||
/>
|
||||
</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;
|
||||
|
||||
// Calculate disenchant recovery
|
||||
const recoveryRate = 0.1; // Base recovery rate (disenchanting skill removed)
|
||||
const totalRecoverable = instance.enchantments.reduce(
|
||||
(sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-lg font-semibold">{instance.name}</div>
|
||||
<Separator className="bg-gray-700" />
|
||||
|
||||
{/* 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 mt-1">
|
||||
Preparation will remove all existing enchantments and recover some mana.
|
||||
</div>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between text-xs text-[var(--text-muted)]">
|
||||
<span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
|
||||
<span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
|
||||
</div>
|
||||
<ActionButton size="sm" variant="outline" onClick={() => {
|
||||
cancelPreparation();
|
||||
showToast('warning', 'Preparation Cancelled', 'Equipment preparation was cancelled.');
|
||||
}}>Cancel</ActionButton>
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-64">
|
||||
<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}
|
||||
className={`p-3 rounded border cursor-pointer transition-all
|
||||
${selectedEquipmentInstance === instance.instanceId
|
||||
? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
|
||||
: 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
|
||||
}
|
||||
${hasEnchantments ? 'border-l-4 border-l-[var(--color-danger)]' : ''}
|
||||
${isReady ? 'border-l-4 border-l-[var(--color-success)]' : ''}
|
||||
`}
|
||||
onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`${instance.name}${hasEnchantments ? ' (has enchantments)' : ''}${isReady ? ' (ready for enchantment)' : ''}`}
|
||||
>
|
||||
<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 className="font-semibold text-[var(--text-primary)]">{instance.name}</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">{slot}</div>
|
||||
{hasEnchantments && (
|
||||
<div className="text-xs text-[var(--color-danger)] mt-1">
|
||||
<AlertTriangle size={12} className="inline mr-1" />
|
||||
{instance.enchantments.length} enchantments - Preparation will remove them
|
||||
</div>
|
||||
)}
|
||||
{isReady && (
|
||||
<div className="text-xs text-[var(--color-success)] mt-1">
|
||||
<CheckCircle size={12} className="inline mr-1" />
|
||||
Ready for Enchantment
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-right text-sm">
|
||||
<div className="text-[var(--color-success)]">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
|
||||
<div className="text-xs text-[var(--text-muted)]">{instance.enchantments.length} enchants</div>
|
||||
{/* Requirement: Visual badge for 'Ready for Enchantment' */}
|
||||
{isReady && (
|
||||
<Badge className="mt-1 bg-[var(--color-success)]/20 text-[var(--color-success)] border-[var(--color-success)]/40">
|
||||
<CheckCircle size={10} className="mr-1" />
|
||||
Ready
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{equippedItems.length === 0 && (
|
||||
<div className="text-center text-[var(--text-muted)] py-4">No equipped items</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</GameCard>
|
||||
|
||||
<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>
|
||||
{/* Preparation Details */}
|
||||
<GameCard variant="default">
|
||||
<SectionHeader title="Preparation Details" />
|
||||
{!selectedEquipmentInstance ? (
|
||||
<div className="text-center text-[var(--text-muted)] py-8">
|
||||
Select equipment to prepare
|
||||
</div>
|
||||
) : preparationProgress ? (
|
||||
<div className="text-[var(--text-secondary)]">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;
|
||||
|
||||
// Calculate disenchant recovery
|
||||
const recoveryRate = 0.1; // Base recovery rate
|
||||
const totalRecoverable = instance.enchantments.reduce(
|
||||
(sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
|
||||
0
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="text-lg font-semibold text-[var(--text-primary)]">{instance.name}</div>
|
||||
<Separator className="bg-[var(--border-subtle)]" />
|
||||
|
||||
{/* Show warning if item has enchantments - Requirement: button reads "Prepare — removes existing enchantments" */}
|
||||
{hasEnchantments && !isReady && (
|
||||
<div className="p-3 rounded border border-[var(--color-danger)]/50 bg-[var(--color-danger)]/10">
|
||||
<div className="text-sm font-semibold text-[var(--color-danger)]">
|
||||
<AlertTriangle size={14} className="inline mr-1" />
|
||||
Equipment has enchantments
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-muted)] mt-1">
|
||||
Preparation will remove all existing enchantments and recover some mana.
|
||||
</div>
|
||||
<div className="flex justify-between text-sm mt-2">
|
||||
<span className="text-[var(--text-muted)]">Recoverable Mana:</span>
|
||||
<span className="text-[var(--color-success)]">{fmt(totalRecoverable)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show ready status */}
|
||||
{isReady && (
|
||||
<div className="p-3 rounded border border-[var(--color-success)]/50 bg-[var(--color-success)]/10">
|
||||
<div className="text-sm font-semibold text-[var(--color-success)]">
|
||||
<CheckCircle size={14} className="inline mr-1" />
|
||||
Ready for Enchantment
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-muted)] mt-1">
|
||||
This item has been prepared and is ready for enchantment application.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<StatRow
|
||||
label="Capacity:"
|
||||
value={`${instance.usedCapacity}/${instance.totalCapacity}`}
|
||||
highlight="default"
|
||||
/>
|
||||
<StatRow
|
||||
label="Prep Time:"
|
||||
value={`${prepTime}h`}
|
||||
highlight="default"
|
||||
/>
|
||||
<StatRow
|
||||
label="Mana Cost:"
|
||||
value={
|
||||
<span className={rawMana < manaCost ? 'text-[var(--color-danger)]' : 'text-[var(--color-success)]'}>
|
||||
{fmt(manaCost)}
|
||||
</span>
|
||||
}
|
||||
highlight={rawMana < manaCost ? 'danger' : 'success'}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Requirement (bug #8): Confirm dialog before proceeding if item has enchantments */}
|
||||
<AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
|
||||
<AlertDialogTrigger asChild>
|
||||
<ActionButton
|
||||
className="w-full"
|
||||
disabled={rawMana < manaCost || isReady}
|
||||
onClick={handleStartPreparation}
|
||||
>
|
||||
{hasEnchantments ? (
|
||||
<>
|
||||
<Trash2 size={16} className="mr-2" />
|
||||
Prepare — removes existing enchantments ({prepTime}h, {fmt(manaCost)} mana)
|
||||
</>
|
||||
) : (
|
||||
<>Start Preparation ({prepTime}h, {fmt(manaCost)} mana)</>
|
||||
)}
|
||||
</ActionButton>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-[var(--color-danger)]">
|
||||
<AlertTriangle className="inline mr-2" size={18} />
|
||||
Confirm Preparation
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription className="text-[var(--text-secondary)]">
|
||||
This equipment has {instance.enchantments.length} existing enchantment(s). Preparation will
|
||||
<strong className="text-[var(--color-danger)]"> permanently remove</strong> all existing enchantments
|
||||
and recover approximately <strong className="text-[var(--color-success)]">{fmt(totalRecoverable)} mana</strong>.
|
||||
<div className="mt-2 p-2 bg-[var(--bg-sunken)]/50 rounded text-xs">
|
||||
Equipment: {instance.name}<br />
|
||||
Enchantments to remove: {instance.enchantments.length}
|
||||
</div>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel
|
||||
className="bg-[var(--bg-sunken)] border-[var(--border-default)] text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]"
|
||||
onClick={() => setShowConfirmDialog(false)}
|
||||
>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-[var(--color-danger)] hover:bg-[var(--interactive-danger-hover)] text-white"
|
||||
onClick={confirmPreparation}
|
||||
>
|
||||
Yes, Remove Enchantments & Prepare
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</GameCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
EnchantmentPreparer.displayName = "EnchantmentPreparer";
|
||||
EnchantmentPreparer.displayName = 'EnchantmentPreparer';
|
||||
|
||||
Reference in New Issue
Block a user