feat: add DebugName wrappers to 56 components + redesign attunement cards + remove ScrollArea from AttunementsTab

2026-05-28 15:28:18 +02:00
parent 9671078fea
commit 13c185a216
59 changed files with 781 additions and 539 deletions
@@ -11,6 +11,7 @@ import type { EquipmentSlot } from '@/lib/game/data/equipment';
 import { fmt } from '@/lib/game/stores';
 import { CheckCircle, Sparkles } from 'lucide-react';
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';

 export interface EnchantmentApplierProps {
  selectedEquipmentInstance: string | null;
@@ -51,23 +52,24 @@ export function EnchantmentApplier({
  // 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 (
+    <DebugName name="EnchantmentApplier">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment & Design Selection */}
      <GameCard variant="default">
@@ -217,7 +219,7 @@ export function EnchantmentApplier({
            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-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
@@ -271,6 +273,7 @@ export function EnchantmentApplier({
        )}
      </GameCard>
    </div>
+    </DebugName>
  );
 }

@@ -20,6 +20,7 @@ import {
  removeEffectFromDesign,
 } from './EnchantmentDesigner/utils';
 import { useCraftingStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';

 export function EnchantmentDesigner({
  selectedEquipmentType,
@@ -88,6 +89,7 @@ export function EnchantmentDesigner({

  // Render stage
  return (
+    <DebugName name="EnchantmentDesigner">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Type Selection */}
      <EquipmentTypeSelector
@@ -141,6 +143,7 @@ export function EnchantmentDesigner({
        deleteDesign={deleteDesign}
      />
    </div>
+    </DebugName>
  );
 }

@@ -3,6 +3,7 @@
 import { ActionButton } from '@/components/ui/action-button';
 import { StatRow } from '@/components/ui/stat-row';
 import type { DesignFormProps } from './types';
+import { DebugName } from '@/components/game/debug/debug-context';

 export function DesignForm({
  designName,
@@ -15,6 +16,7 @@ export function DesignForm({
  handleCreateDesign,
 }: DesignFormProps) {
  return (
+    <DebugName name="DesignForm">
    <div className="space-y-2">
      <input
        type="text"
@@ -45,6 +47,7 @@ export function DesignForm({
        {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
      </ActionButton>
    </div>
+    </DebugName>
  );
 }

@@ -8,6 +8,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { AlertCircle, Wand2, Plus, Minus } from 'lucide-react';
 import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
 import type { EffectSelectorProps } from './types';
+import { DebugName } from '@/components/game/debug/debug-context';

 export function EffectSelector({
  selectedEquipmentType,
@@ -22,6 +23,7 @@ export function EffectSelector({
  getIncompatibilityReason,
 }: EffectSelectorProps) {
  return (
+    <DebugName name="EffectSelector">
    <>
      {enchantingLevel < 1 ? (
        <div className="text-center text-[var(--text-muted)] py-8">
@@ -84,7 +86,7 @@ export function EffectSelector({
                        )}
                        <ActionButton
                          size="sm"
-                            variant="ghost"
+                          variant="ghost"
                          className="h-6 w-6 p-0"
                          onClick={() => addEffect(effect.id)}
                          disabled={!selected && selectedEffects.length >= 5}
@@ -143,6 +145,7 @@ export function EffectSelector({
        </>
      )}
    </>
+    </DebugName>
  );
 }

@@ -6,6 +6,7 @@ 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';
+import { DebugName } from '@/components/game/debug/debug-context';

 export function EquipmentTypeSelector({
  ownedEquipmentTypes,
@@ -15,6 +16,7 @@ export function EquipmentTypeSelector({
  cancelDesign,
 }: EquipmentTypeSelectorProps) {
  return (
+    <DebugName name="EquipmentTypeSelector">
    <GameCard variant="default">
      <SectionHeader title="1. Select Equipment Type" />
      {designProgress ? (
@@ -61,6 +63,7 @@ export function EquipmentTypeSelector({
        </ScrollArea>
      )}
    </GameCard>
+    </DebugName>
  );
 }

@@ -6,6 +6,7 @@ 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';
+import { DebugName } from '@/components/game/debug/debug-context';

 export function SavedDesigns({
  enchantmentDesigns,
@@ -14,6 +15,7 @@ export function SavedDesigns({
  deleteDesign,
 }: SavedDesignsProps) {
  return (
+    <DebugName name="SavedDesigns">
    <GameCard variant="default" className="lg:col-span-2">
      <SectionHeader title={`Saved Designs (${enchantmentDesigns.length})`} />
      {enchantmentDesigns.length === 0 ? (
@@ -63,6 +65,7 @@ export function SavedDesigns({
        </div>
      )}
    </GameCard>
+    </DebugName>
  );
 }

@@ -14,6 +14,7 @@ import type { EquipmentSlot } from '@/lib/game/types';
 import { fmt } from '@/lib/game/stores';
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
 import { useGameToast } from '@/components/game/GameToast';
+import { DebugName } from '@/components/game/debug/debug-context';

 export interface EnchantmentPreparerProps {
  selectedEquipmentInstance: string | null;
@@ -72,6 +73,7 @@ export function EnchantmentPreparer({
  };

  return (
+    <DebugName name="EnchantmentPreparer">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      {/* Equipment Selection */}
      <GameCard variant="default">
@@ -296,6 +298,7 @@ export function EnchantmentPreparer({
        )}
      </GameCard>
    </div>
+    </DebugName>
  );
 }

@@ -12,6 +12,7 @@ import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import type { LootInventory } from '@/lib/game/types';
 import { fmt } from '@/lib/game/stores';
 import { useCraftingStore, useCombatStore, useManaStore } from '@/lib/game/stores';
+import { DebugName } from '@/components/game/debug/debug-context';

 // ─── Crafting Progress ───────────────────────────────────────────────────────

@@ -222,6 +223,7 @@ export function EquipmentCrafter() {
  const currentAction = useCombatStore((s) => s.currentAction);

  return (
+    <DebugName name="EquipmentCrafter">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
@@ -241,6 +243,7 @@ export function EquipmentCrafter() {

      <MaterialsInventory materials={lootInventory.materials} deleteMaterial={deleteMaterial} />
    </div>
+    </DebugName>
  );
 }