Refactor large files into modular components
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m9s
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m9s
- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted - Refactored StatsTab.tsx (584→92 lines) with section components - Refactored SkillsTab.tsx (434→54 lines) with sub-components - Created modular structure for GameContext, LootInventory, and other components - All extracted components organized into feature directories
This commit is contained in:
Refactoring Agent
@@ -1,33 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
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 { 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, EquipmentCategory } from '@/lib/game/types';
|
||||
import { fmt, type GameStore } from '@/lib/game/store';
|
||||
|
||||
export interface EnchantmentDesignerProps {
|
||||
store: GameStore;
|
||||
selectedEquipmentType: string | null;
|
||||
setSelectedEquipmentType: (type: string | null) => void;
|
||||
selectedEffects: DesignEffect[];
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void;
|
||||
designName: string;
|
||||
setDesignName: (name: string) => void;
|
||||
selectedDesign: string | null;
|
||||
setSelectedDesign: (id: string | null) => void;
|
||||
}
|
||||
import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress } from '@/lib/game/types';
|
||||
import { type GameStore } from '@/lib/game/store';
|
||||
import type { EnchantmentDesignerProps } from './EnchantmentDesigner/types';
|
||||
import { EquipmentTypeSelector } from './EnchantmentDesigner/EquipmentTypeSelector';
|
||||
import { EffectSelector } from './EnchantmentDesigner/EffectSelector';
|
||||
import { SavedDesigns } from './EnchantmentDesigner/SavedDesigns';
|
||||
import { DesignForm } from './EnchantmentDesigner/DesignForm';
|
||||
import {
|
||||
getAvailableEffects,
|
||||
getIncompatibleEffects,
|
||||
getOwnedEquipmentTypes,
|
||||
getIncompatibilityReason,
|
||||
calculateDesignCapacityCost,
|
||||
getEquipmentCapacity,
|
||||
calculateDesignTime,
|
||||
addEffectToDesign,
|
||||
removeEffectFromDesign,
|
||||
} from './EnchantmentDesigner/utils';
|
||||
|
||||
export function EnchantmentDesigner({
|
||||
store,
|
||||
@@ -52,55 +47,23 @@ export function EnchantmentDesigner({
|
||||
const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
|
||||
|
||||
// Calculate total capacity cost for current design
|
||||
const designCapacityCost = selectedEffects.reduce(
|
||||
(total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
|
||||
0
|
||||
);
|
||||
const designCapacityCost = calculateDesignCapacityCost(selectedEffects, efficiencyBonus);
|
||||
|
||||
// Get capacity limit for selected equipment type
|
||||
const selectedEquipmentCapacity = selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
|
||||
const selectedEquipmentCapacity = getEquipmentCapacity(selectedEquipmentType);
|
||||
const isOverCapacity = selectedEquipmentType ? designCapacityCost > selectedEquipmentCapacity : false;
|
||||
|
||||
// Calculate design time
|
||||
const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
|
||||
const designTime = calculateDesignTime(selectedEffects);
|
||||
|
||||
// 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),
|
||||
}]);
|
||||
}
|
||||
addEffectToDesign(effectId, selectedEffects, efficiencyBonus, setSelectedEffects);
|
||||
};
|
||||
|
||||
// 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));
|
||||
}
|
||||
removeEffectFromDesign(effectId, selectedEffects, setSelectedEffects);
|
||||
};
|
||||
|
||||
// Create design
|
||||
@@ -117,331 +80,73 @@ export function EnchantmentDesigner({
|
||||
};
|
||||
|
||||
// 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)
|
||||
);
|
||||
};
|
||||
const availableEffects = getAvailableEffects(selectedEquipmentType, unlockedEffects);
|
||||
|
||||
// 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)
|
||||
);
|
||||
};
|
||||
const incompatibleEffects = getIncompatibleEffects(selectedEquipmentType, unlockedEffects);
|
||||
|
||||
// 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();
|
||||
const ownedEquipmentTypes = getOwnedEquipmentTypes(store);
|
||||
|
||||
// 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`;
|
||||
const getIncompatibilityReasonWrapper = (effect: { id: string; name: string; description: string; allowedEquipmentCategories: any[] }) => {
|
||||
return getIncompatibilityReason(effect, selectedEquipmentType);
|
||||
};
|
||||
|
||||
// Render stage
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Equipment Type Selection */}
|
||||
<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>
|
||||
<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>
|
||||
</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-[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="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>
|
||||
{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>
|
||||
<EquipmentTypeSelector
|
||||
ownedEquipmentTypes={ownedEquipmentTypes}
|
||||
selectedEquipmentType={selectedEquipmentType}
|
||||
setSelectedEquipmentType={setSelectedEquipmentType}
|
||||
designProgress={designProgress}
|
||||
cancelDesign={cancelDesign}
|
||||
/>
|
||||
|
||||
{/* 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>
|
||||
) : (
|
||||
<EffectSelector
|
||||
selectedEquipmentType={selectedEquipmentType}
|
||||
selectedEffects={selectedEffects}
|
||||
setSelectedEffects={setSelectedEffects}
|
||||
availableEffects={availableEffects}
|
||||
incompatibleEffects={incompatibleEffects}
|
||||
enchantingLevel={enchantingLevel}
|
||||
efficiencyBonus={efficiencyBonus}
|
||||
designProgress={designProgress}
|
||||
addEffect={addEffect}
|
||||
removeEffect={removeEffect}
|
||||
getIncompatibilityReason={getIncompatibilityReasonWrapper}
|
||||
/>
|
||||
|
||||
{/* Selected effects summary - only show when not in design progress and equipment type is selected */}
|
||||
{!designProgress && selectedEquipmentType && (
|
||||
<>
|
||||
<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>
|
||||
<DesignForm
|
||||
designName={designName}
|
||||
setDesignName={setDesignName}
|
||||
selectedEffects={selectedEffects}
|
||||
designCapacityCost={designCapacityCost}
|
||||
selectedEquipmentCapacity={selectedEquipmentCapacity}
|
||||
isOverCapacity={isOverCapacity}
|
||||
designTime={designTime}
|
||||
selectedEquipmentType={selectedEquipmentType}
|
||||
handleCreateDesign={handleCreateDesign}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
<SavedDesigns
|
||||
enchantmentDesigns={enchantmentDesigns}
|
||||
selectedDesign={selectedDesign}
|
||||
setSelectedDesign={setSelectedDesign}
|
||||
deleteDesign={deleteDesign}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
'use client';
|
||||
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { StatRow } from '@/components/ui/stat-row';
|
||||
import type { DesignFormProps } from './types';
|
||||
|
||||
export function DesignForm({
|
||||
designName,
|
||||
setDesignName,
|
||||
selectedEffects,
|
||||
designCapacityCost,
|
||||
selectedEquipmentCapacity,
|
||||
isOverCapacity,
|
||||
designTime,
|
||||
selectedEquipmentType,
|
||||
handleCreateDesign,
|
||||
}: DesignFormProps) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
DesignForm.displayName = 'DesignForm';
|
||||
@@ -0,0 +1,152 @@
|
||||
'use client';
|
||||
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
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 { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { AlertCircle, Wand2, Plus, Minus } from 'lucide-react';
|
||||
import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
|
||||
import type { EffectSelectorProps } from './types';
|
||||
|
||||
export function EffectSelector({
|
||||
selectedEquipmentType,
|
||||
selectedEffects,
|
||||
setSelectedEffects,
|
||||
availableEffects,
|
||||
incompatibleEffects,
|
||||
enchantingLevel,
|
||||
efficiencyBonus,
|
||||
designProgress,
|
||||
addEffect,
|
||||
removeEffect,
|
||||
getIncompatibilityReason,
|
||||
}: EffectSelectorProps) {
|
||||
return (
|
||||
<>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
EffectSelector.displayName = 'EffectSelector';
|
||||
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import type { EquipmentTypeSelectorProps } from './types';
|
||||
|
||||
export function EquipmentTypeSelector({
|
||||
ownedEquipmentTypes,
|
||||
selectedEquipmentType,
|
||||
setSelectedEquipmentType,
|
||||
designProgress,
|
||||
cancelDesign,
|
||||
}: EquipmentTypeSelectorProps) {
|
||||
return (
|
||||
<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: {designProgress.equipmentType}
|
||||
</div>
|
||||
<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>
|
||||
</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-[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="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>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
||||
EquipmentTypeSelector.displayName = 'EquipmentTypeSelector';
|
||||
@@ -0,0 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { GameCard } from '@/components/ui/game-card';
|
||||
import { SectionHeader } from '@/components/ui/section-header';
|
||||
import { ActionButton } from '@/components/ui/action-button';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import type { SavedDesignsProps } from './types';
|
||||
|
||||
export function SavedDesigns({
|
||||
enchantmentDesigns,
|
||||
selectedDesign,
|
||||
setSelectedDesign,
|
||||
deleteDesign,
|
||||
}: SavedDesignsProps) {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
SavedDesigns.displayName = 'SavedDesigns';
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
|
||||
import type { GameStore } from '@/lib/game/store';
|
||||
|
||||
export interface EnchantmentDesignerProps {
|
||||
store: GameStore;
|
||||
selectedEquipmentType: string | null;
|
||||
setSelectedEquipmentType: (type: string | null) => void;
|
||||
selectedEffects: DesignEffect[];
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void;
|
||||
designName: string;
|
||||
setDesignName: (name: string) => void;
|
||||
selectedDesign: string | null;
|
||||
setSelectedDesign: (id: string | null) => void;
|
||||
}
|
||||
|
||||
export interface EquipmentTypeSelectorProps {
|
||||
ownedEquipmentTypes: Array<{ id: string; name: string; baseCapacity: number }>;
|
||||
selectedEquipmentType: string | null;
|
||||
setSelectedEquipmentType: (type: string | null) => void;
|
||||
designProgress: EquipmentCraftingProgress | null;
|
||||
cancelDesign: () => void;
|
||||
}
|
||||
|
||||
export interface EffectSelectorProps {
|
||||
selectedEquipmentType: string | null;
|
||||
selectedEffects: DesignEffect[];
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void;
|
||||
availableEffects: Array<{ id: string; name: string; description: string; baseCapacityCost: number; maxStacks: number }>;
|
||||
incompatibleEffects: Array<{ id: string; name: string; description: string }>;
|
||||
enchantingLevel: number;
|
||||
efficiencyBonus: number;
|
||||
designProgress: EquipmentCraftingProgress | null;
|
||||
addEffect: (effectId: string) => void;
|
||||
removeEffect: (effectId: string) => void;
|
||||
getIncompatibilityReason: (effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] }) => string;
|
||||
}
|
||||
|
||||
export interface SavedDesignsProps {
|
||||
enchantmentDesigns: EnchantmentDesign[];
|
||||
selectedDesign: string | null;
|
||||
setSelectedDesign: (id: string | null) => void;
|
||||
deleteDesign: (id: string) => void;
|
||||
}
|
||||
|
||||
export interface DesignFormProps {
|
||||
designName: string;
|
||||
setDesignName: (name: string) => void;
|
||||
selectedEffects: DesignEffect[];
|
||||
designCapacityCost: number;
|
||||
selectedEquipmentCapacity: number;
|
||||
isOverCapacity: boolean;
|
||||
designTime: number;
|
||||
selectedEquipmentType: string | null;
|
||||
handleCreateDesign: () => void;
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
|
||||
import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
|
||||
import type { DesignEffect, EquipmentCategory } from '@/lib/game/types';
|
||||
import type { GameStore } from '@/lib/game/store';
|
||||
|
||||
/**
|
||||
* Get available effects for selected equipment type (only unlocked ones)
|
||||
* Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
|
||||
*/
|
||||
export function getAvailableEffects(
|
||||
selectedEquipmentType: string | null,
|
||||
unlockedEffects: string[]
|
||||
) {
|
||||
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 incompatible effects (unlocked but not for this equipment type)
|
||||
*/
|
||||
export function getIncompatibleEffects(
|
||||
selectedEquipmentType: string | null,
|
||||
unlockedEffects: string[]
|
||||
) {
|
||||
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
|
||||
*/
|
||||
export function getOwnedEquipmentTypes(store: GameStore) {
|
||||
// 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));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the reason why an effect is incompatible
|
||||
*/
|
||||
export function getIncompatibilityReason(
|
||||
effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] },
|
||||
selectedEquipmentType: string | null
|
||||
): 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`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate total capacity cost for current design
|
||||
*/
|
||||
export function calculateDesignCapacityCost(
|
||||
selectedEffects: DesignEffect[],
|
||||
efficiencyBonus: number
|
||||
): number {
|
||||
return selectedEffects.reduce(
|
||||
(total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get capacity limit for selected equipment type
|
||||
*/
|
||||
export function getEquipmentCapacity(selectedEquipmentType: string | null): number {
|
||||
return selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate design time
|
||||
*/
|
||||
export function calculateDesignTime(selectedEffects: DesignEffect[]): number {
|
||||
return selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add effect to design
|
||||
*/
|
||||
export function addEffectToDesign(
|
||||
effectId: string,
|
||||
selectedEffects: DesignEffect[],
|
||||
efficiencyBonus: number,
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void
|
||||
) {
|
||||
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
|
||||
*/
|
||||
export function removeEffectFromDesign(
|
||||
effectId: string,
|
||||
selectedEffects: DesignEffect[],
|
||||
setSelectedEffects: (effects: DesignEffect[]) => void
|
||||
) {
|
||||
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));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user