feat: add material crafting recipes to Fabricator

src/components/game/tabs/CraftingTab/FabricatorSubTab.tsx

@@ -7,23 +7,19 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
-import { Anvil, Hammer, Package } from 'lucide-react';
+import { Anvil, FlaskConical, Hammer, Package } from 'lucide-react';
+import { MaterialRecipeCard } from './MaterialRecipeCard';
 import {
   FABRICATOR_RECIPES,
+  MATERIAL_RECIPES,
   getRecipesByManaType,
   canCraftRecipe,
+  MANA_TYPE_LABELS,
 } from '@/lib/game/data/fabricator-recipes';
 import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import { useCraftingStore, useManaStore } from '@/lib/game/stores';
 import type { FabricatorRecipe } from '@/lib/game/data/fabricator-recipes';
 
-const MANA_TYPE_LABELS: Record<string, string> = {
-  earth: '⛰️ Earth',
-  metal: '🔩 Metal',
-  crystal: '💎 Crystal',
-  sand: '🏜️ Sand',
-};
-
 function RecipeCard({
   recipe,
   materials,
@@ -117,12 +113,14 @@ function RecipeCard({
 
 export function FabricatorSubTab() {
   const [selectedManaType, setSelectedManaType] = useState<string>('earth');
+  const [activeSection, setActiveSection] = useState<'equipment' | 'materials'>('equipment');
 
   const lootInventory = useCraftingStore((s) => s.lootInventory);
   const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
   const rawMana = useManaStore((s) => s.rawMana);
   const elements = useManaStore((s) => s.elements);
   const startFabricatorCrafting = useCraftingStore((s) => s.startFabricatorCrafting);
+  const craftMaterial = useCraftingStore((s) => s.craftMaterial);
   const cancelEquipmentCrafting = useCraftingStore((s) => s.cancelEquipmentCrafting);
 
   const availableManaTypes = useMemo(() => {
@@ -136,33 +134,64 @@ export function FabricatorSubTab() {
 
   const isCrafting = equipmentCraftingProgress !== null;
 
+  const materialRecipes = useMemo(() => MATERIAL_RECIPES, []);
+
   const handleCraft = (recipe: FabricatorRecipe) => {
-    startFabricatorCrafting(recipe.id);
+    if (recipe.recipeType === 'material') {
+      craftMaterial(recipe.id);
+    } else {
+      startFabricatorCrafting(recipe.id);
+    }
   };
 
   return (
     <div className="space-y-4">
-      {/* Mana type filter */}
-      <div className="flex gap-2 flex-wrap">
-        {availableManaTypes.map((mt) => (
-          <Button
-            key={mt}
-            variant={selectedManaType === mt ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => setSelectedManaType(mt)}
-          >
-            {MANA_TYPE_LABELS[mt] ?? mt}
-          </Button>
-        ))}
+      {/* Section toggle: Equipment vs Materials */}
+      <div className="flex gap-2">
+        <Button
+          variant={activeSection === 'equipment' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setActiveSection('equipment')}
+        >
+          <Hammer className="w-3 h-3 mr-1" />
+          Equipment
+        </Button>
+        <Button
+          variant={activeSection === 'materials' ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => setActiveSection('materials')}
+        >
+          <FlaskConical className="w-3 h-3 mr-1" />
+          Materials
+        </Button>
       </div>
 
+      {/* Mana type filter — only for equipment */}
+      {activeSection === 'equipment' && (
+        <div className="flex gap-2 flex-wrap">
+          {availableManaTypes.map((mt) => (
+            <Button
+              key={mt}
+              variant={selectedManaType === mt ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => setSelectedManaType(mt)}
+            >
+              {MANA_TYPE_LABELS[mt] ?? mt}
+            </Button>
+          ))}
+        </div>
+      )}
+
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         {/* Recipe list */}
         <Card className="bg-gray-900/80 border-gray-700">
           <CardHeader className="pb-2">
             <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
-              <Hammer className="w-4 h-4" />
-              {MANA_TYPE_LABELS[selectedManaType] ?? selectedManaType} Recipes
+              {activeSection === 'equipment' ? (
+                <><Hammer className="w-4 h-4" />{MANA_TYPE_LABELS[selectedManaType] ?? selectedManaType} Recipes</>
+              ) : (
+                <><FlaskConical className="w-4 h-4" />Material Recipes</>
+              )}
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -193,23 +222,43 @@ export function FabricatorSubTab() {
             ) : (
               <ScrollArea className="h-80">
                 <div className="space-y-2">
-                  {filteredRecipes.length === 0 ? (
-                    <div className="text-center text-gray-400 py-4">
-                      <Anvil className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                      <p>No recipes for this mana type yet.</p>
-                    </div>
+                  {activeSection === 'equipment' ? (
+                    filteredRecipes.length === 0 ? (
+                      <div className="text-center text-gray-400 py-4">
+                        <Anvil className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                        <p>No recipes for this mana type yet.</p>
+                      </div>
+                    ) : (
+                      filteredRecipes.map((recipe) => (
+                        <RecipeCard
+                          key={recipe.id}
+                          recipe={recipe}
+                          materials={lootInventory.materials}
+                          rawMana={rawMana}
+                          elementalMana={elements}
+                          onCraft={handleCraft}
+                          isCrafting={isCrafting}
+                        />
+                      ))
+                    )
                   ) : (
-                    filteredRecipes.map((recipe) => (
-                      <RecipeCard
-                        key={recipe.id}
-                        recipe={recipe}
-                        materials={lootInventory.materials}
-                        rawMana={rawMana}
-                        elementalMana={elements}
-                        onCraft={handleCraft}
-                        isCrafting={isCrafting}
-                      />
-                    ))
+                    materialRecipes.length === 0 ? (
+                      <div className="text-center text-gray-400 py-4">
+                        <FlaskConical className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                        <p>No material recipes available.</p>
+                      </div>
+                    ) : (
+                      materialRecipes.map((recipe) => (
+                        <MaterialRecipeCard
+                          key={recipe.id}
+                          recipe={recipe}
+                          materials={lootInventory.materials}
+                          rawMana={rawMana}
+                          elementalMana={elements}
+                          onCraft={handleCraft}
+                        />
+                      ))
+                    )
                   )}
                 </div>
               </ScrollArea>

src/components/game/tabs/CraftingTab/MaterialRecipeCard.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { LOOT_DROPS, LOOT_RARITY_COLORS } from '@/lib/game/data/loot-drops';
+import { canCraftRecipe, MANA_TYPE_LABELS } from '@/lib/game/data/fabricator-recipes';
+import type { FabricatorRecipe } from '@/lib/game/data/fabricator-recipes';
+
+interface MaterialRecipeCardProps {
+  recipe: FabricatorRecipe;
+  materials: Record<string, number>;
+  rawMana: number;
+  elementalMana: Record<string, { current: number; max: number; unlocked: boolean }>;
+  onCraft: (recipe: FabricatorRecipe) => void;
+}
+
+export function MaterialRecipeCard({
+  recipe,
+  materials,
+  rawMana,
+  elementalMana,
+  onCraft,
+}: MaterialRecipeCardProps) {
+  const pool = recipe.manaType === 'raw'
+    ? rawMana
+    : (elementalMana[recipe.manaType]?.current ?? 0);
+  const { canCraft } = canCraftRecipe(recipe, materials, pool, recipe.manaType);
+  const resultDrop = recipe.resultMaterial ? LOOT_DROPS[recipe.resultMaterial] : null;
+  const resultRarity = resultDrop ? LOOT_RARITY_COLORS[resultDrop.rarity] : null;
+
+  return (
+    <div
+      className="p-3 rounded border bg-gray-800/50"
+      style={{ borderColor: resultRarity?.color ?? '#6B7280' }}
+    >
+      <div className="flex justify-between items-start mb-2">
+        <div>
+          <div className="font-semibold" style={{ color: resultRarity?.color ?? '#D1D5DB' }}>
+            {recipe.name}
+          </div>
+          <div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
+        </div>
+        <Badge variant="outline" className="text-xs">
+          {recipe.resultAmount}x Output
+        </Badge>
+      </div>
+
+      <div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
+
+      <Separator className="bg-gray-700 my-2" />
+
+      <div className="text-xs space-y-1">
+        {Object.keys(recipe.materials).length > 0 && (
+          <>
+            <div className="text-gray-500">Input Materials:</div>
+            {Object.entries(recipe.materials).map(([matId, amount]) => {
+              const available = materials[matId] || 0;
+              const matDrop = LOOT_DROPS[matId];
+              const hasEnough = available >= amount;
+
+              return (
+                <div key={matId} className="flex justify-between">
+                  <span>{matDrop?.name ?? matId}</span>
+                  <span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
+                    {available} / {amount}
+                  </span>
+                </div>
+              );
+            })}
+          </>
+        )}
+
+        {recipe.manaCost > 0 && (
+          <div className="flex justify-between mt-2">
+            <span>{MANA_TYPE_LABELS[recipe.manaType]?.split(' ')[1] ?? recipe.manaType} Mana:</span>
+            <span className={pool >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
+              {pool} / {recipe.manaCost}
+            </span>
+          </div>
+        )}
+
+        <div className="flex justify-between">
+          <span>Produces:</span>
+          <span className="text-amber-400">
+            {recipe.resultAmount}x {resultDrop?.name ?? recipe.resultMaterial}
+          </span>
+        </div>
+      </div>
+
+      <Button
+        className="w-full mt-3"
+        size="sm"
+        disabled={!canCraft}
+        onClick={() => onCraft(recipe)}
+      >
+        {canCraft ? 'Craft' : 'Missing Resources'}
+      </Button>
+    </div>
+  );
+}