Update documentation for Sub-Task 3 completion

- Marked Sub-Task 3 as completed in todo.md
- Updated subtask_3_progress.md with completion status and notes

src/components/game/crafting/EnchantmentDesigner.tsx

@@ -10,9 +10,7 @@ import { Separator } from '@/components/ui/separator';
 import { Wand2, Scroll, Trash2, Plus, Minus } from 'lucide-react';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
-import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
-import { CRAFTING_RECIPES } from '@/lib/game/data/crafting-recipes';
-import type { EquipmentInstance, EnchantmentDesign, DesignEffect, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
+import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress } from '@/lib/game/types';
 import { fmt, type GameStore } from '@/lib/game/store';
 
 // Slot display names
@@ -139,29 +137,18 @@ export function EnchantmentDesigner({
     );
   };
 
-  // Get equipment types that the player has blueprints for
+  // 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 = () => {
-    const ownedBlueprints = store.lootInventory.blueprints || [];
-    
-    // Map blueprint IDs to equipment type IDs
+    // Get all unique equipment type IDs from owned instances
     const ownedEquipmentTypeIds = new Set<string>();
-    for (const blueprintId of ownedBlueprints) {
-      const recipe = CRAFTING_RECIPES[blueprintId];
-      if (recipe) {
-        ownedEquipmentTypeIds.add(recipe.equipmentTypeId);
-      }
+    
+    // Check all equipment instances the player owns
+    for (const instance of Object.values(store.equipmentInstances)) {
+      ownedEquipmentTypeIds.add(instance.typeId);
     }
     
-    // Also include the starting equipment types (basicStaff, civilianShirt, civilianShoes)
-    // These are the types the player starts with, so they should be able to design for them
-    ownedEquipmentTypeIds.add('basicStaff');
-    ownedEquipmentTypeIds.add('civilianShirt');
-    ownedEquipmentTypeIds.add('civilianShoes');
-    ownedEquipmentTypeIds.add('apprenticeWand');
-    ownedEquipmentTypeIds.add('clothHood');
-    ownedEquipmentTypeIds.add('civilianGloves');
-    ownedEquipmentTypeIds.add('copperRing');
-    
+    // Filter EQUIPMENT_TYPES to only include types the player owns
     return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
   };
 

src/components/game/tabs/EquipmentTab.tsx

@@ -155,9 +155,8 @@ export function EquipmentTab({ store }: EquipmentTabProps) {
               const equipmentType = instance ? EQUIPMENT_TYPES[instance.typeId] : null;
               const blocked = isSlotBlocked(slot);
               
-              return (
+              const slotElement = (
                 <div
-                  key={slot}
                   className={`p-3 rounded border ${
                     blocked
                       ? 'border-red-900/50 bg-red-950/20'
@@ -245,6 +244,25 @@ export function EquipmentTab({ store }: EquipmentTabProps) {
                   )}
                 </div>
               );
+              
+              // Wrap blocked slots with a tooltip
+              if (blocked) {
+                return (
+                  <TooltipProvider key={slot}>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        {slotElement}
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>The offhand slot is blocked because a 2-handed weapon is equipped in the main hand.</p>
+                        <p className="text-gray-400 text-xs mt-1">Unequip the 2-handed weapon to use this slot.</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                );
+              }
+              
+              return <div key={slot}>{slotElement}</div>;
             })}
           </div>
         </CardContent>