SkillsTab Modifications (Bugs 9,11,12,13)

src/components/game/crafting/EnchantmentPreparer.tsx

@@ -139,8 +139,7 @@ export function EnchantmentPreparer({
               const manaCost = instance.totalCapacity * 10;
 
               // Calculate disenchant recovery
-              const disenchantLevel = skills.disenchanting || 0;
-              const recoveryRate = 0.1 + disenchantLevel * 0.2;
+              const recoveryRate = 0.1; // Base recovery rate (disenchanting skill removed)
               const totalRecoverable = instance.enchantments.reduce(
                 (sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
                 0

src/components/game/debug/SkillDebug.tsx

@@ -30,7 +30,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 variant="outline"
                 onClick={() => {
                   // Level up all enchanting skills by 1
-                  const enchantSkills = ['enchanting', 'efficientEnchant', 'disenchanting', 'enchantSpeed','essenceRefining'];
+                  const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed','essenceRefining'];
                   enchantSkills.forEach(skillId => {
                     if (store.skills[skillId] !== undefined) {
                       store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
@@ -47,7 +47,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 variant="outline"
                 onClick={() => {
                   // Max all enchanting skills
-                  const enchantSkills = ['enchanting', 'efficientEnchant', 'disenchanting', 'enchantSpeed','essenceRefining'];
+                  const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed','essenceRefining'];
                   enchantSkills.forEach(skillId => {
                     store.skills[skillId] = 10;
                   });
@@ -66,7 +66,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 size="sm"
                 variant="outline"
                 onClick={() => {
-                  const manaSkills = ['manaWell', 'manaFlow', 'elemAttune', 'manaOverflow'];
+                  const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
                   manaSkills.forEach(skillId => {
                     if (store.skills[skillId] !== undefined) {
                       store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
@@ -82,7 +82,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                 size="sm"
                 variant="outline"
                 onClick={() => {
-                  const manaSkills = ['manaWell', 'manaFlow', 'elemAttune', 'manaOverflow'];
+                  const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
                   manaSkills.forEach(skillId => {
                     store.skills[skillId] = 10;
                   });

src/components/game/tabs/AttunementsTab.tsx

@@ -195,14 +195,14 @@ export function AttunementsTab({ store }: AttunementsTabProps) {
                     {def.capabilities.map(cap => (
                       <Badge key={cap} variant="outline" className="text-xs">
                         {cap === 'enchanting' && '✨ Enchanting'}
-                        {cap === 'disenchanting' && '🔄 Disenchant'}
+                        {cap === 'disenchanting' && '🔄 Disenchant'}  // TODO: Remove after bug 13 complete
                         {cap === 'pacts' && '🤝 Pacts'}
                         {cap === 'guardianPowers' && '💜 Guardian Powers'}
                         {cap === 'elementalMastery' && '🌟 Elem. Mastery'}
                         {cap === 'golemCrafting' && '🗿 Golems'}
                         {cap === 'gearCrafting' && '⚒️ Gear'}
                         {cap === 'earthShaping' && '⛰️ Earth Shaping'}
-                        {!['enchanting', 'disenchanting', 'pacts', 'guardianPowers', 
+                        {!['enchanting', 'pacts', 'guardianPowers', 
                            'elementalMastery', 'golemCrafting', 'gearCrafting', 'earthShaping'].includes(cap) && cap}
                       </Badge>
                     ))}
@@ -246,7 +246,7 @@ export function AttunementsTab({ store }: AttunementsTabProps) {
                 >
                   {cat === 'mana' && '💧 Mana'}
                   {cat === 'study' && '📚 Study'}
-                  {cat === 'research' && '🔮 Research'}
+                  {cat === 'research' && '🔮 Research'}  // TODO: Remove after Bug 12 - research moved to mana
                   {cat === 'ascension' && '⭐ Ascension'}
                   {cat === 'enchant' && '✨ Enchanting'}
                   {cat === 'effectResearch' && '🔬 Effect Research'}

src/components/game/tabs/SkillsTab.tsx

@@ -211,8 +211,19 @@ export function SkillsTab({ store }: SkillsTabProps) {
                   const baseCost = def.base * (level + 1) * currentTier;
                   const cost = Math.floor(baseCost * costMult);
                   
+                  // Additional cost (element mana)
+                  const additionalCost = def.cost;
+                  
                   // Can start studying?
-                  const canStudy = !maxed && prereqMet && store.rawMana >= cost && !isStudying;
+                  let canStudy = !maxed && prereqMet && store.rawMana >= cost && !isStudying;
+                  
+                  // Check additional cost (element mana)
+                  if (def.cost && def.cost.type === 'element') {
+                    const element = store.elements[def.cost.element];
+                    if (!element || element.current < def.cost.amount) {
+                      canStudy = false;
+                    }
+                  }
                   
                   // Check for milestone upgrades
                   const milestoneInfo = hasMilestoneUpgrade(tieredSkillId, level, store.skillTiers || {}, store.skillUpgrades);
@@ -266,6 +277,11 @@ export function SkillsTab({ store }: SkillsTabProps) {
                           {' • '}
                           <span className={costMult < 1 ? 'text-green-400' : ''}>
                             Cost: {fmt(cost)} mana{costMult < 1 && <span className="text-xs ml-1">({Math.round(costMult * 100)}% cost)</span>}
+                            {additionalCost && additionalCost.type === 'element' && (
+                              <span className="ml-2" style={{ color: ELEMENTS[additionalCost.element]?.color }}>
+                                + {additionalCost.amount} {ELEMENTS[additionalCost.element]?.sym} {additionalCost.element}
+                              </span>
+                            )}
                           </span>
                         </div>
                         
@@ -325,7 +341,7 @@ export function SkillsTab({ store }: SkillsTabProps) {
                               className={canStudy ? 'bg-purple-600 hover:bg-purple-700' : 'opacity-50'}
                               onClick={() => store.startStudyingSkill(tieredSkillId)}
                             >
-                              Study ({fmt(cost)})
+                              Study ({fmt(cost)}{additionalCost && additionalCost.type === 'element' && ` + ${additionalCost.amount} ${ELEMENTS[additionalCost.element]?.sym}`}
                             </Button>
                             {/* Parallel Study button */}
                             {hasSpecial(upgradeEffects, SPECIAL_EFFECTS.PARALLEL_STUDY) &&