Anexim/Mana-Loop
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add room enchantment indicator to EffectSelector for feet-only effects
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m23s
Details

Browse Source
This commit is contained in:
n8n-gitea
2026-06-15 13:06:36 +02:00
parent 5f4d29d96e
commit 83106bf37d
4 changed files with 63 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/game/crafting/EnchantmentDesigner/EffectSelector.tsx
+36 -8
View File
@@ -5,8 +5,9 @@ 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 { AlertCircle, Wand2, Plus, Minus, Sparkles } from 'lucide-react';
import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
import { isRoomEnchantmentEffectId } from '@/lib/game/utils/room-enchantments-utils';
import type { EffectSelectorProps } from './types';
import { DebugName } from '@/components/game/debug/debug-context';
@@ -55,6 +56,7 @@ export function EffectSelector({
{availableEffects.map(effect => {
const selected = selectedEffects.find(e => e.effectId === effect.id);
const _cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
const isRoomEnchant = isRoomEnchantmentEffectId(effect.id);
return (
<div
@@ -62,12 +64,31 @@ export function EffectSelector({
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'
: isRoomEnchant
? 'border-[var(--mana-fire)]/40 bg-[var(--mana-fire)]/5'
: '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-sm font-semibold text-[var(--text-primary)]">
{effect.name}
{isRoomEnchant && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span className="ml-1.5 inline-flex items-center gap-0.5 cursor-help">
<Sparkles className="w-3 h-3 text-[var(--mana-fire)]" />
</span>
</TooltipTrigger>
<TooltipContent className="bg-[var(--bg-elevated)] border-[var(--border-default)] text-[var(--text-primary)]">
<p className="font-semibold text-[var(--mana-fire)]">Room Enchantment</p>
<p className="text-xs text-[var(--text-muted)] mt-1">Creates an environmental aura effect that scales with room coverage. Only available on feet equipment.</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</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}
@@ -95,11 +116,18 @@ export function EffectSelector({
</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 className="flex gap-1 mt-1">
{selected && (
<Badge variant="outline" className="text-xs border-[var(--mana-stellar)] text-[var(--mana-stellar)]">
{selected.stacks}/{effect.maxStacks}
</Badge>
)}
{isRoomEnchant && (
<Badge variant="outline" className="text-xs border-[var(--mana-fire)]/60 text-[var(--mana-fire)]">
Room
</Badge>
)}
</div>
</div>
);
})}