Add golemancy system, combination skills, and UI redesigns
All checks were successful
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m17s
All checks were successful
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m17s
- Remove scroll crafting skill (no consumables in idle game) - Add golem types (Earth, Metal, Crystal) with variants (Lava, Mud, Forge, Storm) - Implement golemancy state in store with summoning/drain mechanics - Add combination skills requiring level 5+ in two attunements: - Enchanter+Fabricator: Enchanted Golems, Capacity Overflow - Invoker+Fabricator: Pact-Bonded Golems, Guardian Infusion - Invoker+Enchanter: Pact Enchantments, Elemental Resonance - Redesign CraftingTab with sub-tabs for Enchanter/Fabricator - Redesign SpireTab to show summoned golems and DPS contribution - Redesign StatsTab with attunement-specific stats sections - Update documentation (README.md, AGENTS.md)
This commit is contained in:
Z User
58
AGENTS.md
58
AGENTS.md
@@ -348,6 +348,64 @@ const useGameStore = create<GameStore>()(
|
||||
| Crafting | `crafting-slice.ts` | Equipment/enchantment (createEquipmentInstance, startDesigningEnchantment) |
|
||||
| Familiar | `familiar-slice.ts` | Familiar system (addFamiliar, removeFamiliar) |
|
||||
|
||||
## Attunement System
|
||||
|
||||
### Overview
|
||||
Attunements are class-like specializations tied to body slots. Each attunement provides unique capabilities and skills.
|
||||
|
||||
### Attunement Types
|
||||
| Attunement | Slot | Primary Mana | Capabilities |
|
||||
|------------|------|--------------|--------------|
|
||||
| Enchanter | Right Hand | Transference | Enchanting, Disenchanting |
|
||||
| Invoker | Chest | (from pacts) | Pacts, Guardian Powers |
|
||||
| Fabricator | Left Hand | Earth | Golemancy, Gear Crafting |
|
||||
|
||||
### Leveling
|
||||
- XP is earned by using attunement-specific actions
|
||||
- Enchanter: XP from enchanting equipment (1 XP per 10 capacity used)
|
||||
- Invoker: XP from signing pacts and defeating guardians
|
||||
- Fabricator: XP from crafting equipment and golems
|
||||
- Level 5+ unlocks combination skills with other attunements
|
||||
|
||||
### Combination Skills
|
||||
Unlock at level 5+ in two attunements:
|
||||
|
||||
| Combination | Skills |
|
||||
|-------------|--------|
|
||||
| Enchanter + Fabricator | Enchanted Golems, Capacity Overflow, Runic Golems |
|
||||
| Invoker + Fabricator | Pact-Bonded Golems, Guardian Infusion |
|
||||
| Invoker + Enchanter | Pact Enchantments, Elemental Resonance |
|
||||
|
||||
## Golemancy System
|
||||
|
||||
### Overview
|
||||
Golems are channeling summons that deal automatic damage while draining mana.
|
||||
|
||||
### Golem Types
|
||||
| Type | Element | Base DPS | Mana Cost | Drain | Unlock |
|
||||
|------|---------|----------|-----------|-------|--------|
|
||||
| Earth Golem | Earth | 22.5 | 50 earth | 2/hr | Fabricator attunement |
|
||||
| Metal Golem | Metal | 50 | 100 metal | 3/hr | Metalworking skill |
|
||||
| Crystal Golem | Crystal | 100 | 200 crystal | 5/hr | Golemancy Master skill |
|
||||
|
||||
### Golem Variants
|
||||
Created by embedding elemental crystals (requires Crystal Embedding skill):
|
||||
- **Lava Golem**: Earth + Fire (1.5x damage, burn effect)
|
||||
- **Mud Golem**: Earth + Water (1.2x damage, slow effect)
|
||||
- **Forge Golem**: Metal + Fire (1.6x damage, burn effect)
|
||||
- **Storm Golem**: Metal + Air (1.4x damage, shock effect)
|
||||
|
||||
### Duration
|
||||
- Base: 1 floor
|
||||
- +1 floor per Fabricator level (max 10)
|
||||
|
||||
### Store Methods
|
||||
- `canSummonGolem(golemId)` - Check if golem can be summoned
|
||||
- `summonGolem(golemId, variant?)` - Summon a golem
|
||||
- `dismissGolem(instanceId)` - Dismiss an active golem
|
||||
- `getGolemDuration()` - Get duration in floors
|
||||
- `getActiveGolemDPS()` - Get total DPS from all golems
|
||||
|
||||
## File Size Guidelines
|
||||
|
||||
### Current File Sizes (After Refactoring)
|
||||
|
||||
21
README.md
21
README.md
@@ -30,6 +30,27 @@ An incremental/idle game about climbing a magical spire, mastering skills, and u
|
||||
- Milestone upgrades at levels 5 and 10 for each tier
|
||||
- Unique special effects unlocked through skill upgrades
|
||||
|
||||
### Attunement System (Class-Like Progression)
|
||||
- **Three attunements** tied to body slots (Right Hand, Chest, Left Hand)
|
||||
- **Enchanter** (Right Hand) - Enchanting equipment with magical effects
|
||||
- **Invoker** (Chest) - Forming pacts with guardians for elemental powers
|
||||
- **Fabricator** (Left Hand) - Crafting golems and equipment
|
||||
- Each attunement levels up independently with XP
|
||||
- Level-based unlocks for skills and capabilities
|
||||
|
||||
### Golemancy System (Fabricator)
|
||||
- **Summon golems** as channeling spells with mana drain
|
||||
- Golems deal automatic damage each tick while draining mana
|
||||
- Duration scales with Fabricator level (1 floor + 1 per level, max 10)
|
||||
- **Golem variants** via elemental crystal embedding (Lava Golem, Storm Golem)
|
||||
- Multiple golem types: Earth, Metal, Crystal golems
|
||||
|
||||
### Combination Skills
|
||||
- Unlock at **Level 5+** in two attunements
|
||||
- **Enchanter + Fabricator**: Enchanted Golems, higher capacity gear
|
||||
- **Invoker + Fabricator**: Pact-Bonded Golems, guardian bonuses
|
||||
- **Invoker + Enchanter**: Pact-Based Enchantments, elemental resonance
|
||||
|
||||
### Equipment Crafting & Enchanting
|
||||
- 3-stage enchantment process (Design → Prepare → Apply)
|
||||
- Equipment capacity system limiting total enchantment power
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
@@ -10,13 +10,15 @@ import { Separator } from '@/components/ui/separator';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import {
|
||||
Wand2, Scroll, Hammer, Sparkles, Trash2, Plus, Minus,
|
||||
Package, Zap, Clock, ChevronRight, Circle, Anvil
|
||||
Package, Zap, Clock, ChevronRight, Circle, Anvil, Heart,
|
||||
Sword, Skull
|
||||
} from 'lucide-react';
|
||||
import { EQUIPMENT_TYPES, type EquipmentType, type EquipmentSlot } from '@/lib/game/data/equipment';
|
||||
import { ENCHANTMENT_EFFECTS, type EnchantmentEffectDef, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
|
||||
import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
|
||||
import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
|
||||
import { GOLEM_DEFS, GOLEM_VARIANTS, ELEMENTS } from '@/lib/game/constants';
|
||||
import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, ActiveGolem } from '@/lib/game/types';
|
||||
import { fmt, type GameStore } from '@/lib/game/store';
|
||||
|
||||
// Slot display names
|
||||
@@ -48,6 +50,8 @@ export function CraftingTab({ store }: CraftingTabProps) {
|
||||
const currentAction = store.currentAction;
|
||||
const unlockedEffects = store.unlockedEffects;
|
||||
const lootInventory = store.lootInventory;
|
||||
const elements = store.elements;
|
||||
const activeGolems = store.activeGolems;
|
||||
const startDesigningEnchantment = store.startDesigningEnchantment;
|
||||
const cancelDesign = store.cancelDesign;
|
||||
const saveDesign = store.saveDesign;
|
||||
@@ -63,7 +67,19 @@ export function CraftingTab({ store }: CraftingTabProps) {
|
||||
const startCraftingEquipment = store.startCraftingEquipment;
|
||||
const cancelEquipmentCrafting = store.cancelEquipmentCrafting;
|
||||
const deleteMaterial = store.deleteMaterial;
|
||||
const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply' | 'craft'>('craft');
|
||||
const canSummonGolem = store.canSummonGolem;
|
||||
const summonGolem = store.summonGolem;
|
||||
const dismissGolem = store.dismissGolem;
|
||||
const getGolemDuration = store.getGolemDuration;
|
||||
|
||||
// Top-level attunement tab state
|
||||
const [topLevelTab, setTopLevelTab] = useState<'enchanter' | 'fabricator'>('enchanter');
|
||||
|
||||
// Sub-tab states
|
||||
const [enchanterSubTab, setEnchanterSubTab] = useState<'design' | 'prepare' | 'apply'>('design');
|
||||
const [fabricatorSubTab, setFabricatorSubTab] = useState<'craft' | 'golemancy'>('craft');
|
||||
|
||||
// Selection states
|
||||
const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
|
||||
const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
|
||||
const [selectedDesign, setSelectedDesign] = useState<string | null>(null);
|
||||
@@ -75,6 +91,11 @@ export function CraftingTab({ store }: CraftingTabProps) {
|
||||
const enchantingLevel = skills.enchanting || 0;
|
||||
const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
|
||||
|
||||
// Determine active attunements
|
||||
const enchanterActive = store.attunements?.enchanter?.active ?? false;
|
||||
const fabricatorActive = store.attunements?.fabricator?.active ?? false;
|
||||
const activeAttunementCount = (enchanterActive ? 1 : 0) + (fabricatorActive ? 1 : 0);
|
||||
|
||||
// Get equipped items as array
|
||||
const equippedItems = Object.entries(equippedInstances)
|
||||
.filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
|
||||
@@ -877,42 +898,383 @@ export function CraftingTab({ store }: CraftingTabProps) {
|
||||
</div>
|
||||
);
|
||||
|
||||
// Render golemancy stage
|
||||
const renderGolemancyStage = () => {
|
||||
const golemancySkill = skills.golemancy || 0;
|
||||
const golemDuration = getGolemDuration();
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Available Golems */}
|
||||
<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">
|
||||
<span className="text-lg">🗿</span>
|
||||
Available Golems
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{golemancySkill < 1 ? (
|
||||
<div className="text-center text-gray-400 py-8">
|
||||
<span className="text-4xl mb-2 block">🗿</span>
|
||||
<p>Learn Golemancy skill to summon golems</p>
|
||||
<p className="text-xs mt-1">Available through Fabricator attunement</p>
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-72">
|
||||
<div className="space-y-3">
|
||||
{Object.values(GOLEM_DEFS).map(golemDef => {
|
||||
const canSummon = canSummonGolem(golemDef.id);
|
||||
const requiredElement = elements[golemDef.requiredManaType];
|
||||
const hasEnoughMana = requiredElement?.current >= golemDef.summonCost;
|
||||
const isActive = activeGolems.some(g => g.golemId === golemDef.id);
|
||||
const elementDef = ELEMENTS[golemDef.element];
|
||||
|
||||
// Check if golem type is locked
|
||||
const isLocked = !requiredElement?.unlocked;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={golemDef.id}
|
||||
className={`p-3 rounded border transition-all ${
|
||||
isLocked
|
||||
? 'border-gray-800 bg-gray-900/50 opacity-60'
|
||||
: isActive
|
||||
? 'border-green-600 bg-green-900/20'
|
||||
: 'border-gray-700 bg-gray-800/50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<div
|
||||
className="font-semibold flex items-center gap-2"
|
||||
style={{ color: elementDef?.color }}
|
||||
>
|
||||
{isLocked && <span className="text-gray-500">🔒</span>}
|
||||
{golemDef.name}
|
||||
{isActive && <Badge variant="outline" className="text-xs text-green-400 border-green-600">Active</Badge>}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">{golemDef.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLocked ? (
|
||||
<div className="text-xs text-gray-500 mt-2 p-2 bg-gray-900/50 rounded">
|
||||
<span className="text-amber-500">Locked:</span> {golemDef.unlockCondition}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Separator className="bg-gray-700 my-2" />
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 text-xs mb-2">
|
||||
<div className="text-center">
|
||||
<Sword className="w-4 h-4 mx-auto text-red-400 mb-1" />
|
||||
<div className="text-gray-400">Damage</div>
|
||||
<div className="font-semibold">{golemDef.baseDamage}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Heart className="w-4 h-4 mx-auto text-green-400 mb-1" />
|
||||
<div className="text-gray-400">HP</div>
|
||||
<div className="font-semibold">{golemDef.baseHP}</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Zap className="w-4 h-4 mx-auto text-yellow-400 mb-1" />
|
||||
<div className="text-gray-400">Speed</div>
|
||||
<div className="font-semibold">{golemDef.attackSpeed}/hr</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full"
|
||||
size="sm"
|
||||
disabled={!canSummon}
|
||||
onClick={() => summonGolem(golemDef.id)}
|
||||
>
|
||||
{isActive
|
||||
? 'Already Active'
|
||||
: !hasEnoughMana
|
||||
? `Need ${golemDef.summonCost} ${elementDef?.name || golemDef.requiredManaType} Mana`
|
||||
: `Summon - ${golemDef.summonCost} ${elementDef?.name || golemDef.requiredManaType} Mana`
|
||||
}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Active Golems */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 text-sm flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="text-lg">⚡</span>
|
||||
Active Golems ({activeGolems.length})
|
||||
</span>
|
||||
{golemancySkill >= 1 && (
|
||||
<span className="text-xs text-gray-400">Duration: {golemDuration} floors</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{activeGolems.length === 0 ? (
|
||||
<div className="text-center text-gray-400 py-8">
|
||||
<span className="text-4xl mb-2 block">🤖</span>
|
||||
<p>No active golems</p>
|
||||
<p className="text-xs mt-1">Summon a golem to help clear floors!</p>
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="h-72">
|
||||
<div className="space-y-3">
|
||||
{activeGolems.map((golem, index) => {
|
||||
const golemDef = GOLEM_DEFS[golem.golemId];
|
||||
const elementDef = ELEMENTS[golemDef?.element || 'earth'];
|
||||
const variantDef = golem.variant ? GOLEM_VARIANTS[golem.variant] : null;
|
||||
const displayName = variantDef?.name || golemDef?.name || 'Unknown Golem';
|
||||
const instanceId = `${golem.golemId}-${golem.currentFloor}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={instanceId}
|
||||
className="p-3 rounded border border-gray-700 bg-gray-800/50"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<div
|
||||
className="font-semibold flex items-center gap-2"
|
||||
style={{ color: elementDef?.color }}
|
||||
>
|
||||
{displayName}
|
||||
{golem.variant && (
|
||||
<Badge variant="outline" className="text-xs" style={{ borderColor: elementDef?.color }}>
|
||||
{golem.variant}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 text-red-400 hover:text-red-300 hover:bg-red-900/20"
|
||||
onClick={() => dismissGolem(instanceId)}
|
||||
>
|
||||
<Skull className="w-4 h-4 mr-1" />
|
||||
Dismiss
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-xs mb-2">
|
||||
<div>
|
||||
<span className="text-gray-400">Floor:</span>{' '}
|
||||
<span className="font-semibold">{golem.currentFloor}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-400">Remaining:</span>{' '}
|
||||
<span className="font-semibold">{golem.remainingFloors} floors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* HP Bar */}
|
||||
<div className="mb-2">
|
||||
<div className="flex justify-between text-xs mb-1">
|
||||
<span className="text-gray-400">HP</span>
|
||||
<span>{golem.currentHP} / {golem.maxHP}</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={(golem.currentHP / golem.maxHP) * 100}
|
||||
className="h-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-gray-400">
|
||||
<span className="text-green-400">Total Damage:</span> {fmt(golem.damageDealt)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Golem Variants Info */}
|
||||
<Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 text-sm flex items-center gap-2">
|
||||
<span className="text-lg">✨</span>
|
||||
Golem Variants
|
||||
{skills.crystalEmbedding ? (
|
||||
<Badge variant="outline" className="text-xs text-green-400 border-green-600">Unlocked</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs text-gray-500">Requires Crystal Embedding</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{skills.crystalEmbedding ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
{Object.entries(GOLEM_VARIANTS).map(([variantId, variant]) => {
|
||||
const baseGolem = GOLEM_DEFS[variant.baseGolem];
|
||||
const baseElement = ELEMENTS[baseGolem?.element || 'earth'];
|
||||
const requiredElement = ELEMENTS[variant.requiredElement];
|
||||
|
||||
return (
|
||||
<div
|
||||
key={variantId}
|
||||
className="p-3 rounded border border-gray-700 bg-gray-800/50"
|
||||
>
|
||||
<div
|
||||
className="font-semibold mb-1"
|
||||
style={{ color: baseElement?.color }}
|
||||
>
|
||||
{variant.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mb-2">{variant.desc}</div>
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-gray-500">Base: {baseGolem?.name}</span>
|
||||
<span className="text-green-400">+{Math.round((variant.damageMultiplier - 1) * 100)}% dmg</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Requires: <span style={{ color: requiredElement?.color }}>{requiredElement?.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-400 py-4">
|
||||
<span className="text-2xl mb-2 block">🔒</span>
|
||||
<p>Learn Crystal Embedding skill to unlock golem variants</p>
|
||||
<p className="text-xs mt-1">Enchanter attunement level 3+ required</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render Enchanter content (Design, Prepare, Apply)
|
||||
const renderEnchanterContent = () => (
|
||||
<Tabs value={enchanterSubTab} onValueChange={(v) => setEnchanterSubTab(v as typeof enchanterSubTab)}>
|
||||
<TabsList className="bg-gray-800/50 mb-4">
|
||||
<TabsTrigger value="design" className="data-[state=active]:bg-amber-600">
|
||||
<Scroll className="w-4 h-4 mr-1" />
|
||||
Design
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="prepare" className="data-[state=active]:bg-amber-600">
|
||||
<Hammer className="w-4 h-4 mr-1" />
|
||||
Prepare
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="apply" className="data-[state=active]:bg-amber-600">
|
||||
<Sparkles className="w-4 h-4 mr-1" />
|
||||
Apply
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="design" className="mt-0">
|
||||
{renderDesignStage()}
|
||||
</TabsContent>
|
||||
<TabsContent value="prepare" className="mt-0">
|
||||
{renderPrepareStage()}
|
||||
</TabsContent>
|
||||
<TabsContent value="apply" className="mt-0">
|
||||
{renderApplyStage()}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
// Render Fabricator content (Craft, Golemancy)
|
||||
const renderFabricatorContent = () => (
|
||||
<Tabs value={fabricatorSubTab} onValueChange={(v) => setFabricatorSubTab(v as typeof fabricatorSubTab)}>
|
||||
<TabsList className="bg-gray-800/50 mb-4">
|
||||
<TabsTrigger value="craft" className="data-[state=active]:bg-cyan-600">
|
||||
<Anvil className="w-4 h-4 mr-1" />
|
||||
Craft
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="golemancy" className="data-[state=active]:bg-cyan-600">
|
||||
<span className="mr-1">🗿</span>
|
||||
Golemancy
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="craft" className="mt-0">
|
||||
{renderCraftStage()}
|
||||
</TabsContent>
|
||||
<TabsContent value="golemancy" className="mt-0">
|
||||
{renderGolemancyStage()}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
);
|
||||
|
||||
// Determine what to render based on active attunements
|
||||
const renderContent = () => {
|
||||
// If only one attunement is active, skip top-level tabs
|
||||
if (activeAttunementCount === 1) {
|
||||
if (enchanterActive) {
|
||||
return renderEnchanterContent();
|
||||
}
|
||||
if (fabricatorActive) {
|
||||
return renderFabricatorContent();
|
||||
}
|
||||
}
|
||||
|
||||
// If both attunements are active, show top-level tabs
|
||||
if (activeAttunementCount >= 2) {
|
||||
return (
|
||||
<Tabs value={topLevelTab} onValueChange={(v) => setTopLevelTab(v as typeof topLevelTab)}>
|
||||
<TabsList className="bg-gray-800/50 mb-4">
|
||||
{enchanterActive && (
|
||||
<TabsTrigger value="enchanter" className="data-[state=active]:bg-amber-600">
|
||||
<span className="mr-1">✨</span>
|
||||
Enchanter
|
||||
</TabsTrigger>
|
||||
)}
|
||||
{fabricatorActive && (
|
||||
<TabsTrigger value="fabricator" className="data-[state=active]:bg-cyan-600">
|
||||
<span className="mr-1">⚒️</span>
|
||||
Fabricator
|
||||
</TabsTrigger>
|
||||
)}
|
||||
</TabsList>
|
||||
|
||||
{enchanterActive && (
|
||||
<TabsContent value="enchanter" className="mt-0">
|
||||
{renderEnchanterContent()}
|
||||
</TabsContent>
|
||||
)}
|
||||
{fabricatorActive && (
|
||||
<TabsContent value="fabricator" className="mt-0">
|
||||
{renderFabricatorContent()}
|
||||
</TabsContent>
|
||||
)}
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
|
||||
// No attunements active
|
||||
return (
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardContent className="py-8 text-center text-gray-400">
|
||||
<span className="text-4xl mb-4 block">🔒</span>
|
||||
<p className="text-lg font-semibold mb-2">No Crafting Attunements Active</p>
|
||||
<p className="text-sm">Activate an attunement to access crafting features.</p>
|
||||
<p className="text-xs mt-2 text-gray-500">
|
||||
Enchanter: Enchantment design and application<br/>
|
||||
Fabricator: Equipment crafting and golemancy
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Stage Tabs */}
|
||||
<Tabs value={craftingStage} onValueChange={(v) => setCraftingStage(v as typeof craftingStage)}>
|
||||
<TabsList className="bg-gray-800/50">
|
||||
<TabsTrigger value="craft" className="data-[state=active]:bg-cyan-600">
|
||||
<Anvil className="w-4 h-4 mr-1" />
|
||||
Craft
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="design" className="data-[state=active]:bg-amber-600">
|
||||
<Scroll className="w-4 h-4 mr-1" />
|
||||
Design
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="prepare" className="data-[state=active]:bg-amber-600">
|
||||
<Hammer className="w-4 h-4 mr-1" />
|
||||
Prepare
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="apply" className="data-[state=active]:bg-amber-600">
|
||||
<Sparkles className="w-4 h-4 mr-1" />
|
||||
Apply
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="craft" className="mt-4">
|
||||
{renderCraftStage()}
|
||||
</TabsContent>
|
||||
<TabsContent value="design" className="mt-4">
|
||||
{renderDesignStage()}
|
||||
</TabsContent>
|
||||
<TabsContent value="prepare" className="mt-4">
|
||||
{renderPrepareStage()}
|
||||
</TabsContent>
|
||||
<TabsContent value="apply" className="mt-4">
|
||||
{renderApplyStage()}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
{renderContent()}
|
||||
|
||||
{/* Current Activity Indicator */}
|
||||
{currentAction === 'craft' && equipmentCraftingProgress && (
|
||||
@@ -920,59 +1282,18 @@ export function CraftingTab({ store }: CraftingTabProps) {
|
||||
<CardContent className="py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Anvil className="w-5 h-5 text-cyan-400" />
|
||||
<span>Crafting equipment...</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{((equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100).toFixed(0)}%
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{currentAction === 'design' && designProgress && (
|
||||
<Card className="bg-purple-900/30 border-purple-600">
|
||||
<CardContent className="py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Scroll className="w-5 h-5 text-purple-400" />
|
||||
<span>Designing enchantment...</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{((designProgress.progress / designProgress.required) * 100).toFixed(0)}%
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{currentAction === 'prepare' && preparationProgress && (
|
||||
<Card className="bg-blue-900/30 border-blue-600">
|
||||
<CardContent className="py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hammer className="w-5 h-5 text-blue-400" />
|
||||
<span>Preparing equipment...</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{((preparationProgress.progress / preparationProgress.required) * 100).toFixed(0)}%
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{currentAction === 'enchant' && applicationProgress && (
|
||||
<Card className="bg-amber-900/30 border-amber-600">
|
||||
<CardContent className="py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-amber-400" />
|
||||
<span>{applicationProgress.paused ? 'Enchantment paused' : 'Applying enchantment...'}</span>
|
||||
<span className="text-sm">
|
||||
Crafting: {CRAFTING_RECIPES[equipmentCraftingProgress.blueprintId]?.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm text-gray-400">
|
||||
{((applicationProgress.progress / applicationProgress.required) * 100).toFixed(0)}%
|
||||
</div>
|
||||
{applicationProgress.paused ? (
|
||||
<Button size="sm" onClick={resumeApplication}>Resume</Button>
|
||||
) : (
|
||||
<Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
|
||||
)}
|
||||
<Progress
|
||||
value={(equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100}
|
||||
className="w-24 h-2"
|
||||
/>
|
||||
<span className="text-xs text-gray-400">
|
||||
{equipmentCraftingProgress.progress.toFixed(1)}h / {equipmentCraftingProgress.required.toFixed(1)}h
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Separator } from '@/components/ui/separator';
|
||||
import { TooltipProvider } from '@/components/ui/tooltip';
|
||||
import { Swords, BookOpen, ChevronUp, ChevronDown, RotateCcw, X } from 'lucide-react';
|
||||
import type { GameStore } from '@/lib/game/types';
|
||||
import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF } from '@/lib/game/constants';
|
||||
import { ELEMENTS, GUARDIANS, SPELLS_DEF, SKILLS_DEF, GOLEM_DEFS, GOLEM_VARIANTS } from '@/lib/game/constants';
|
||||
import { fmt, fmtDec, getFloorElement, canAffordSpellCost } from '@/lib/game/store';
|
||||
import { getActiveEquipmentSpells, getTotalDPS } from '@/lib/game/computed-stats';
|
||||
import { formatSpellCost, getSpellCostColor, formatStudyTime } from '@/lib/game/formatting';
|
||||
@@ -36,7 +36,9 @@ export function SpireTab({ store }: SpireTabProps) {
|
||||
|
||||
// Get upgrade effects and DPS
|
||||
const upgradeEffects = getUnifiedEffects(store);
|
||||
const totalDPS = getTotalDPS(store, upgradeEffects, floorElem);
|
||||
const spellDPS = getTotalDPS(store, upgradeEffects, floorElem);
|
||||
const golemDPS = store.getActiveGolemDPS();
|
||||
const totalDPS = spellDPS + golemDPS;
|
||||
const studySpeedMult = 1; // Base study speed
|
||||
|
||||
const canCastSpell = (spellId: string): boolean => {
|
||||
@@ -45,6 +47,19 @@ export function SpireTab({ store }: SpireTabProps) {
|
||||
return canAffordSpellCost(spell.cost, store.rawMana, store.elements);
|
||||
};
|
||||
|
||||
// Helper to get golem element color
|
||||
const getGolemElementColor = (element: string): string => {
|
||||
return ELEMENTS[element]?.color || '#F4A261'; // Default to earth color
|
||||
};
|
||||
|
||||
// Helper to get golem element symbol
|
||||
const getGolemElementSymbol = (element: string): string => {
|
||||
return ELEMENTS[element]?.sym || '⛰️';
|
||||
};
|
||||
|
||||
// Get active golems on current floor
|
||||
const activeGolemsOnFloor = store.activeGolems.filter(g => g.currentFloor === store.currentFloor);
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
@@ -87,7 +102,18 @@ export function SpireTab({ store }: SpireTabProps) {
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400 game-mono">
|
||||
<span>{fmt(store.floorHP)} / {fmt(store.floorMaxHP)} HP</span>
|
||||
<span>DPS: {store.currentAction === 'climb' && activeEquipmentSpells.length > 0 ? fmtDec(totalDPS) : '—'}</span>
|
||||
<span>
|
||||
{store.currentAction === 'climb' && (activeEquipmentSpells.length > 0 || activeGolemsOnFloor.length > 0) ? (
|
||||
<span>
|
||||
DPS: {fmtDec(totalDPS)}
|
||||
{activeGolemsOnFloor.length > 0 && (
|
||||
<span className="text-gray-500 ml-1">
|
||||
(Spell: {fmtDec(spellDPS)} | Golem: {fmtDec(golemDPS)})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
) : '—'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -128,6 +154,116 @@ export function SpireTab({ store }: SpireTabProps) {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Active Golems Card */}
|
||||
<Card className="bg-gray-900/80 border-gray-700" style={{ borderColor: activeGolemsOnFloor.length > 0 ? '#F4A26150' : undefined }}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: '#F4A261' }}>
|
||||
<span>🗿 Active Golems</span>
|
||||
{activeGolemsOnFloor.length > 0 && (
|
||||
<Badge className="bg-amber-900/50 text-amber-300 border-amber-600">
|
||||
{activeGolemsOnFloor.length}
|
||||
</Badge>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{activeGolemsOnFloor.length > 0 ? (
|
||||
<>
|
||||
<ScrollArea className="max-h-48">
|
||||
<div className="space-y-2 pr-2">
|
||||
{activeGolemsOnFloor.map((golem, index) => {
|
||||
const golemDef = GOLEM_DEFS[golem.golemId];
|
||||
const variantDef = golem.variant ? GOLEM_VARIANTS[golem.variant] : null;
|
||||
const elementColor = getGolemElementColor(golemDef?.element || 'earth');
|
||||
const elementSymbol = getGolemElementSymbol(golemDef?.element || 'earth');
|
||||
|
||||
// Calculate golem DPS
|
||||
let golemSingleDPS = golemDef?.baseDamage || 0;
|
||||
if (variantDef) {
|
||||
golemSingleDPS *= variantDef.damageMultiplier;
|
||||
}
|
||||
if (store.skills.golemancyMaster === 1) {
|
||||
golemSingleDPS *= 1.5;
|
||||
}
|
||||
if (store.skills.pactBondedGolems === 1) {
|
||||
golemSingleDPS *= 1 + (store.signedPacts.length * 0.1);
|
||||
}
|
||||
if (store.skills.guardianInfusion === 1 && GUARDIANS[store.currentFloor]) {
|
||||
golemSingleDPS *= 1.25;
|
||||
}
|
||||
golemSingleDPS *= golemDef?.attackSpeed || 1;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${golem.golemId}-${index}`}
|
||||
className="p-2 rounded border bg-gray-800/30"
|
||||
style={{ borderColor: `${elementColor}50` }}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span style={{ color: elementColor }}>{elementSymbol}</span>
|
||||
<span className="text-sm font-semibold game-panel-title" style={{ color: elementColor }}>
|
||||
{variantDef?.name || golemDef?.name || 'Unknown Golem'}
|
||||
</span>
|
||||
{golem.variant && !variantDef && (
|
||||
<span className="text-xs text-gray-500">({golem.variant})</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-gray-400">
|
||||
{fmtDec(golemSingleDPS)} DPS
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* HP Bar */}
|
||||
<div className="space-y-0.5 mb-1">
|
||||
<div className="h-2 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${Math.max(0, (golem.currentHP / golem.maxHP) * 100)}%`,
|
||||
background: `linear-gradient(90deg, ${elementColor}99, ${elementColor})`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-500 game-mono">
|
||||
<span>{fmt(golem.currentHP)} / {fmt(golem.maxHP)} HP</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Remaining Floors */}
|
||||
<div className="flex items-center justify-between text-xs text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<RotateCcw className="w-3 h-3" />
|
||||
{golem.remainingFloors} floor{golem.remainingFloors !== 1 ? 's' : ''} remaining
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{fmt(golem.damageDealt)} total dmg
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Total Golem DPS Summary */}
|
||||
<Separator className="bg-gray-700" />
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400">Total Golem DPS</span>
|
||||
<span className="font-semibold game-mono" style={{ color: '#F4A261' }}>
|
||||
{fmtDec(golemDPS)}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="text-gray-500 text-sm py-4 text-center">
|
||||
<p className="mb-2">No golems summoned.</p>
|
||||
<p className="text-xs text-gray-600">Visit the Crafting tab to summon golems.</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Active Spells Card - Shows all spells from equipped weapons */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
@@ -161,7 +297,7 @@ export function SpireTab({ store }: SpireTabProps) {
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 game-mono mb-1">
|
||||
⚔️ {fmt(totalDPS)} DPS •
|
||||
⚔️ {fmt(spellDPS)} DPS •
|
||||
<span style={{ color: getSpellCostColor(spellDef.cost) }}>
|
||||
{' '}{formatSpellCost(spellDef.cost)}
|
||||
</span>
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ELEMENTS, GUARDIANS, SKILLS_DEF } from '@/lib/game/constants';
|
||||
import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
|
||||
import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
|
||||
import { fmt, fmtDec, calcDamage } from '@/lib/game/store';
|
||||
import type { SkillUpgradeChoice, GameStore, UnifiedEffects } from '@/lib/game/types';
|
||||
import { ATTUNEMENTS_DEF, getAttunementXPForLevel, MAX_ATTUNEMENT_LEVEL } from '@/lib/game/data/attunements';
|
||||
import { SKILL_CATEGORIES } from '@/lib/game/constants';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Droplet, Swords, BookOpen, FlaskConical, Trophy, RotateCcw, Star } from 'lucide-react';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
import {
|
||||
Droplet, Swords, BookOpen, FlaskConical, Trophy, RotateCcw, Star,
|
||||
ChevronDown, ChevronRight, Wand2, Heart, Hammer, Golem, Sparkles
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface StatsTabProps {
|
||||
store: GameStore;
|
||||
@@ -37,6 +45,72 @@ export function StatsTab({
|
||||
studySpeedMult,
|
||||
studyCostMult,
|
||||
}: StatsTabProps) {
|
||||
const [expandedAttunements, setExpandedAttunements] = useState<Set<string>>(new Set());
|
||||
|
||||
// Toggle attunement expansion
|
||||
const toggleAttunement = (attunementId: string) => {
|
||||
setExpandedAttunements(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(attunementId)) {
|
||||
newSet.delete(attunementId);
|
||||
} else {
|
||||
newSet.add(attunementId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
// Get active attunements
|
||||
const activeAttunements = Object.entries(store.attunements)
|
||||
.filter(([, state]) => state.active)
|
||||
.map(([id, state]) => ({ id, ...state, def: ATTUNEMENTS_DEF[id] }))
|
||||
.filter(att => att.def);
|
||||
|
||||
// Get skills for an attunement
|
||||
const getSkillsForAttunement = (attunementId: string) => {
|
||||
return Object.entries(SKILLS_DEF)
|
||||
.filter(([, def]) => def.attunement === attunementId && def.cat !== 'combination')
|
||||
.map(([id, def]) => ({
|
||||
id,
|
||||
...def,
|
||||
currentLevel: store.skills[id] || 0,
|
||||
}));
|
||||
};
|
||||
|
||||
// Get combination skills
|
||||
const getCombinationSkills = () => {
|
||||
return Object.entries(SKILLS_DEF)
|
||||
.filter(([, def]) => def.cat === 'combination')
|
||||
.map(([id, def]) => {
|
||||
const requirements = def.reqAttunements || {};
|
||||
const attunementLevels = Object.entries(requirements).map(([attId, reqLevel]) => ({
|
||||
attunementId: attId,
|
||||
requiredLevel: reqLevel,
|
||||
currentLevel: store.attunements[attId]?.level || 0,
|
||||
isMet: (store.attunements[attId]?.level || 0) >= reqLevel,
|
||||
}));
|
||||
|
||||
const allRequirementsMet = attunementLevels.every(r => r.isMet);
|
||||
const isUnlocked = allRequirementsMet &&
|
||||
(!def.req || Object.entries(def.req).every(([skillId, level]) => (store.skills[skillId] || 0) >= level));
|
||||
const isStudied = (store.skills[id] || 0) > 0;
|
||||
|
||||
return {
|
||||
id,
|
||||
...def,
|
||||
attunementRequirements: attunementLevels,
|
||||
allRequirementsMet,
|
||||
isUnlocked,
|
||||
isStudied,
|
||||
currentLevel: store.skills[id] || 0,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const combinationSkills = getCombinationSkills();
|
||||
const unlockedCombinationSkills = combinationSkills.filter(s => s.isUnlocked);
|
||||
const lockedCombinationSkills = combinationSkills.filter(s => !s.isUnlocked);
|
||||
|
||||
// Compute element max
|
||||
const elemMax = (() => {
|
||||
const ea = store.skillTiers?.elemAttune || 1;
|
||||
@@ -69,8 +143,432 @@ export function StatsTab({
|
||||
|
||||
const selectedUpgrades = getAllSelectedUpgrades();
|
||||
|
||||
// Calculate golem stats for Fabricator
|
||||
const golemDuration = store.getGolemDuration();
|
||||
const golemDPS = store.getActiveGolemDPS();
|
||||
const activeGolems = store.activeGolems || [];
|
||||
|
||||
// Capability display names
|
||||
const capabilityNames: Record<string, string> = {
|
||||
enchanting: 'Enchanting',
|
||||
disenchanting: 'Disenchanting',
|
||||
pacts: 'Pact Signing',
|
||||
guardianPowers: 'Guardian Powers',
|
||||
elementalMastery: 'Elemental Mastery',
|
||||
golemCrafting: 'Golemancy',
|
||||
gearCrafting: 'Gear Crafting',
|
||||
earthShaping: 'Earth Shaping',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Active Attunements Card */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Active Attunements ({activeAttunements.length})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{activeAttunements.length === 0 ? (
|
||||
<div className="text-gray-500 text-sm">No attunements active. Visit the Attune tab to unlock your potential.</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{activeAttunements.map(({ id, level, experience, def }) => {
|
||||
const xpForNext = getAttunementXPForLevel(level + 1);
|
||||
const xpProgress = xpForNext > 0 ? (experience / xpForNext) * 100 : 0;
|
||||
const isExpanded = expandedAttunements.has(id);
|
||||
const skills = getSkillsForAttunement(id);
|
||||
const studyingSkills = skills.filter(s =>
|
||||
store.currentStudyTarget?.type === 'skill' && store.currentStudyTarget.id === s.id
|
||||
);
|
||||
|
||||
return (
|
||||
<Collapsible key={id} open={isExpanded} onOpenChange={() => toggleAttunement(id)}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<div
|
||||
className="p-3 rounded-lg border cursor-pointer hover:bg-gray-800/50 transition-colors"
|
||||
style={{
|
||||
borderColor: def.color,
|
||||
backgroundColor: `${def.color}10`,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">{def.icon}</span>
|
||||
<div>
|
||||
<div className="font-semibold" style={{ color: def.color }}>{def.name}</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
Level {level}/{MAX_ATTUNEMENT_LEVEL}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{def.primaryManaType && (
|
||||
<Badge variant="outline" className="text-xs" style={{ color: ELEMENTS[def.primaryManaType]?.color }}>
|
||||
{ELEMENTS[def.primaryManaType]?.sym} {ELEMENTS[def.primaryManaType]?.name}
|
||||
</Badge>
|
||||
)}
|
||||
<Badge variant="outline" className="text-xs text-gray-300">
|
||||
{capabilityNames[def.capabilities[0]] || def.capabilities[0]}
|
||||
</Badge>
|
||||
{isExpanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* XP Progress Bar */}
|
||||
{level < MAX_ATTUNEMENT_LEVEL && (
|
||||
<div className="mt-2">
|
||||
<div className="flex justify-between text-xs text-gray-400 mb-1">
|
||||
<span>XP Progress</span>
|
||||
<span>{fmt(experience)} / {fmt(xpForNext)}</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={xpProgress}
|
||||
className="h-2 bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{level >= MAX_ATTUNEMENT_LEVEL && (
|
||||
<div className="mt-2 text-xs text-amber-400 font-semibold">MAX LEVEL REACHED</div>
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent>
|
||||
<div className="mt-2 ml-4 p-3 bg-gray-800/30 rounded-lg border border-gray-700">
|
||||
<div className="text-xs text-gray-400 mb-2">Available Skills ({skills.length})</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{skills.map(skill => {
|
||||
const isStudying = store.currentStudyTarget?.type === 'skill' && store.currentStudyTarget.id === skill.id;
|
||||
return (
|
||||
<div
|
||||
key={skill.id}
|
||||
className={`p-2 rounded border text-xs ${
|
||||
isStudying
|
||||
? 'border-purple-500 bg-purple-900/20'
|
||||
: skill.currentLevel > 0
|
||||
? 'border-gray-600 bg-gray-800/50'
|
||||
: 'border-gray-700 bg-gray-800/30'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className={skill.currentLevel > 0 ? 'text-gray-200' : 'text-gray-500'}>
|
||||
{skill.name}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
{skill.currentLevel > 0 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
Lv.{skill.currentLevel}/{skill.max}
|
||||
</Badge>
|
||||
)}
|
||||
{isStudying && (
|
||||
<Badge className="bg-purple-600 text-xs">Studying</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-500 mt-1">{skill.desc}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Combination Skills Card */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-purple-400 game-panel-title text-xs flex items-center gap-2">
|
||||
<Wand2 className="w-4 h-4" />
|
||||
Combination Skills
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* Unlocked Skills */}
|
||||
{unlockedCombinationSkills.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<div className="text-xs text-green-400 mb-2">Available to Study ({unlockedCombinationSkills.length})</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{unlockedCombinationSkills.map(skill => (
|
||||
<div
|
||||
key={skill.id}
|
||||
className="p-2 rounded border border-green-600/30 bg-green-900/10"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-green-300 text-sm font-semibold">{skill.name}</span>
|
||||
{skill.currentLevel > 0 && (
|
||||
<Badge variant="outline" className="text-xs text-green-400">
|
||||
Lv.{skill.currentLevel}/{skill.max}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">{skill.desc}</div>
|
||||
<div className="flex gap-1 mt-2 flex-wrap">
|
||||
{skill.attunementRequirements.map((req) => (
|
||||
<Badge key={req.attunementId} variant="outline" className="text-xs text-green-400">
|
||||
{ATTUNEMENTS_DEF[req.attunementId]?.icon} {ATTUNEMENTS_DEF[req.attunementId]?.name} Lv.{req.currentLevel}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Locked Skills */}
|
||||
{lockedCombinationSkills.length > 0 && (
|
||||
<div>
|
||||
<div className="text-xs text-gray-400 mb-2">Requires Level 5+ in Multiple Attunements</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{lockedCombinationSkills.map(skill => (
|
||||
<div
|
||||
key={skill.id}
|
||||
className="p-2 rounded border border-gray-700 bg-gray-800/30 opacity-75"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-400 text-sm">{skill.name}</span>
|
||||
<Badge variant="outline" className="text-xs text-gray-500">Locked</Badge>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">{skill.desc}</div>
|
||||
<div className="flex gap-1 mt-2 flex-wrap">
|
||||
{skill.attunementRequirements.map((req) => (
|
||||
<Badge
|
||||
key={req.attunementId}
|
||||
variant="outline"
|
||||
className={`text-xs ${req.isMet ? 'text-green-400' : 'text-red-400'}`}
|
||||
>
|
||||
{ATTUNEMENTS_DEF[req.attunementId]?.icon} Lv.{req.requiredLevel} ({req.currentLevel}/{req.requiredLevel})
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{combinationSkills.length === 0 && (
|
||||
<div className="text-gray-500 text-sm">No combination skills available yet.</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Enchanter Stats */}
|
||||
{store.attunements.enchanter?.active && (
|
||||
<Card className="bg-gray-900/80 border-gray-700" style={{ borderTop: `2px solid ${ATTUNEMENTS_DEF.enchanter.color}` }}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: ATTUNEMENTS_DEF.enchanter.color }}>
|
||||
<Wand2 className="w-4 h-4" />
|
||||
Enchanter Stats {ATTUNEMENTS_DEF.enchanter.icon}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Enchantment Capacity:</span>
|
||||
<span className="text-gray-200">
|
||||
{(() => {
|
||||
const base = 100 + (store.skills.enchanting || 0) * 10;
|
||||
const bonus = (store.skills.ancientEcho || 0) * Math.floor((store.attunements.enchanter?.level || 0) / 2);
|
||||
return `${base + bonus} (+${bonus} from Ancient Echo)`;
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Efficiency Bonus:</span>
|
||||
<span className="text-teal-300">-{(store.skills.efficientEnchant || 0) * 5}% cost</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Designs Created:</span>
|
||||
<span className="text-teal-300">{store.enchantmentDesigns?.length || 0}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Effects Unlocked:</span>
|
||||
<span className="text-teal-300">{store.unlockedEffects?.length || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Disenchant Recovery:</span>
|
||||
<span className="text-teal-300">{20 + (store.skills.disenchanting || 0) * 20}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Enchant Speed:</span>
|
||||
<span className="text-teal-300">+{(store.skills.enchantSpeed || 0) * 10}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Invoker Stats */}
|
||||
{store.attunements.invoker?.active && (
|
||||
<Card className="bg-gray-900/80 border-gray-700" style={{ borderTop: `2px solid ${ATTUNEMENTS_DEF.invoker.color}` }}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: ATTUNEMENTS_DEF.invoker.color }}>
|
||||
<Heart className="w-4 h-4" />
|
||||
Invoker Stats {ATTUNEMENTS_DEF.invoker.icon}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Pacts Signed:</span>
|
||||
<span className="text-purple-300">{store.signedPacts.length}/10</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Pact Multiplier:</span>
|
||||
<span className="text-purple-300">
|
||||
×{fmtDec(store.signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Pact Mastery Bonus:</span>
|
||||
<span className="text-purple-300">+{(store.skills.pactMastery || 0) * 10}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Guardian Affinity:</span>
|
||||
<span className="text-purple-300">-{(store.skills.guardianAffinity || 0) * 15}% time</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Elemental Bond:</span>
|
||||
<span className="text-purple-300">+{(store.skills.elementalBond || 0) * 20} cap/pact</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Pact Synergy:</span>
|
||||
<span className="text-purple-300">+{(store.skills.pactSynergy || 0) * 5}%/pact</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Signed Pacts List */}
|
||||
{store.signedPacts.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<Separator className="bg-gray-700 my-2" />
|
||||
<div className="text-xs text-gray-400 mb-2">Signed Pacts:</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-2">
|
||||
{store.signedPacts.map((floor) => {
|
||||
const guardian = GUARDIANS[floor];
|
||||
if (!guardian) return null;
|
||||
return (
|
||||
<div
|
||||
key={floor}
|
||||
className="p-2 rounded border text-center"
|
||||
style={{ borderColor: guardian.color, backgroundColor: `${guardian.color}15` }}
|
||||
>
|
||||
<div className="text-xs font-semibold" style={{ color: guardian.color }}>
|
||||
{guardian.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">×{guardian.pact}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Fabricator Stats */}
|
||||
{store.attunements.fabricator?.active && (
|
||||
<Card className="bg-gray-900/80 border-gray-700" style={{ borderTop: `2px solid ${ATTUNEMENTS_DEF.fabricator.color}` }}>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="game-panel-title text-xs flex items-center gap-2" style={{ color: ATTUNEMENTS_DEF.fabricator.color }}>
|
||||
<Hammer className="w-4 h-4" />
|
||||
Fabricator Stats {ATTUNEMENTS_DEF.fabricator.icon}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Golems Active:</span>
|
||||
<span className="text-amber-300">{activeGolems.length}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Golem DPS:</span>
|
||||
<span className="text-amber-300">{fmtDec(golemDPS, 1)}/hr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Golem Duration:</span>
|
||||
<span className="text-amber-300">{golemDuration} floors</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Golem Vitality:</span>
|
||||
<span className="text-amber-300">+{(store.skills.golemVitality || 0) * 20}% HP</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Crafting Speed:</span>
|
||||
<span className="text-amber-300">+{(store.skills.efficientCrafting || 0) * 10}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Earth Conversion:</span>
|
||||
<span className="text-amber-300">+{(store.skills.earthShaping || 0) * 25}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Golems List */}
|
||||
{activeGolems.length > 0 && (
|
||||
<div className="mt-3">
|
||||
<Separator className="bg-gray-700 my-2" />
|
||||
<div className="text-xs text-gray-400 mb-2">Active Golems:</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{activeGolems.map((golem, idx) => {
|
||||
const elemColor = ELEMENTS[golem.variant || 'earth']?.color || '#F4A261';
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-2 rounded border"
|
||||
style={{ borderColor: elemColor, backgroundColor: `${elemColor}10` }}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm font-semibold" style={{ color: elemColor }}>
|
||||
{golem.variant ? `${golem.variant} Golem` : 'Earth Golem'}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs">{golem.remainingFloors} floors left</Badge>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400 mt-1">
|
||||
<span>HP: {fmt(golem.currentHP)}/{fmt(golem.maxHP)}</span>
|
||||
<span>DMG: {fmt(golem.damageDealt)}</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={(golem.currentHP / golem.maxHP) * 100}
|
||||
className="h-1 mt-1 bg-gray-700"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Mana Stats */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
@@ -449,49 +947,6 @@ export function StatsTab({
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pact Bonuses */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
|
||||
<Trophy className="w-4 h-4" />
|
||||
Signed Pacts ({store.signedPacts.length}/10)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{store.signedPacts.length === 0 ? (
|
||||
<div className="text-gray-500 text-sm">No pacts signed yet. Defeat guardians to earn pacts.</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{store.signedPacts.map((floor) => {
|
||||
const guardian = GUARDIANS[floor];
|
||||
if (!guardian) return null;
|
||||
return (
|
||||
<div
|
||||
key={floor}
|
||||
className="flex items-center justify-between p-2 rounded border"
|
||||
style={{ borderColor: guardian.color, backgroundColor: `${guardian.color}15` }}
|
||||
>
|
||||
<div>
|
||||
<div className="font-semibold text-sm" style={{ color: guardian.color }}>
|
||||
{guardian.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Floor {floor}</div>
|
||||
</div>
|
||||
<Badge className="bg-amber-900/50 text-amber-300">
|
||||
{guardian.pact}x multiplier
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2 mt-2">
|
||||
<span className="text-gray-300">Combined Pact Multiplier:</span>
|
||||
<span className="text-amber-400">×{fmtDec(store.signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Loop Stats */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
|
||||
@@ -692,9 +692,9 @@ export const SKILLS_DEF: Record<string, SkillDef> = {
|
||||
enchantSpeed: { name: "Enchant Speed", desc: "-10% enchantment time", cat: "enchant", attunement: 'enchanter', attunementLevel: 1, max: 5, base: 300, studyTime: 4, req: { enchanting: 2 } },
|
||||
|
||||
// Advanced Enchanting (Lv 3)
|
||||
scrollCrafting: { name: "Scroll Crafting", desc: "Create scrolls to store enchantment designs", cat: "enchant", attunement: 'enchanter', attunementLevel: 3, max: 3, base: 500, studyTime: 8, req: { enchanting: 5 } },
|
||||
essenceRefining: { name: "Essence Refining", desc: "+10% enchantment effect power", cat: "enchant", attunement: 'enchanter', attunementLevel: 3, max: 5, base: 450, studyTime: 7, req: { enchanting: 4 } },
|
||||
transferenceMastery: { name: "Transference Mastery", desc: "+25% transference mana conversion", cat: "enchant", attunement: 'enchanter', attunementLevel: 3, max: 3, base: 600, studyTime: 10, req: { enchanting: 5 } },
|
||||
crystalEmbedding: { name: "Crystal Embedding", desc: "Embed elemental crystals in golems for variants", cat: "enchant", attunement: 'enchanter', attunementLevel: 3, max: 1, base: 600, studyTime: 12, req: { enchanting: 4 } },
|
||||
|
||||
// Master Enchanting (Lv 5+)
|
||||
soulBinding: { name: "Soul Binding", desc: "Enchantments persist through loops", cat: "enchant", attunement: 'enchanter', attunementLevel: 5, max: 2, base: 1500, studyTime: 24, req: { essenceRefining: 3 } },
|
||||
@@ -785,6 +785,24 @@ export const SKILLS_DEF: Record<string, SkillDef> = {
|
||||
// Legendary Fabrication (Lv 8+)
|
||||
legendaryCraft: { name: "Legendary Crafting", desc: "Chance for crafted items to gain +1 tier", cat: "fabrication", attunement: 'fabricator', attunementLevel: 8, max: 1, base: 2500, studyTime: 30, req: { alloyMastery: 1, runicCarving: 3 } },
|
||||
awakenedHand: { name: "Awakened Hand", desc: "Craft time -50%, +25% quality", cat: "fabrication", attunement: 'fabricator', attunementLevel: 8, max: 1, base: 3000, studyTime: 36, req: { legendaryCraft: 1 } },
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COMBINATION SKILLS (Require Level 5+ in two attunements)
|
||||
// Powerful multi-attunement abilities
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
// Enchanter + Fabricator: Enchanted Golems & Superior Gear
|
||||
enchantedGolems: { name: "Enchanted Golems", desc: "Embed spell crystals in golems for elemental variants", cat: "combination", attunement: 'fabricator', attunementLevel: 5, max: 1, base: 2000, studyTime: 24, req: { golemancy: 1 }, reqAttunements: { enchanter: 5, fabricator: 5 } },
|
||||
capacityOverflow: { name: "Capacity Overflow", desc: "+25% enchantment capacity on fabricated gear", cat: "combination", attunement: 'fabricator', attunementLevel: 5, max: 3, base: 1500, studyTime: 16, req: { fabrication: 5 }, reqAttunements: { enchanter: 5, fabricator: 5 } },
|
||||
runicGolems: { name: "Runic Golems", desc: "Golems gain +50% damage, +30% duration", cat: "combination", attunement: 'fabricator', attunementLevel: 6, max: 1, base: 2500, studyTime: 30, req: { enchantedGolems: 1 }, reqAttunements: { enchanter: 6, fabricator: 6 } },
|
||||
|
||||
// Invoker + Fabricator: Pact-Bonded Golems
|
||||
pactBondedGolems: { name: "Pact-Bonded Golems", desc: "Golems gain bonuses from your signed pacts", cat: "combination", attunement: 'fabricator', attunementLevel: 5, max: 1, base: 2000, studyTime: 24, req: { golemancy: 1 }, reqAttunements: { invoker: 5, fabricator: 5 } },
|
||||
guardianInfusion: { name: "Guardian Infusion", desc: "Golems deal +25% damage to guardian floors", cat: "combination", attunement: 'fabricator', attunementLevel: 6, max: 1, base: 2500, studyTime: 30, req: { pactBondedGolems: 1 }, reqAttunements: { invoker: 6, fabricator: 6 } },
|
||||
|
||||
// Invoker + Enchanter: Pact-Based Enchantments
|
||||
pactEnchantments: { name: "Pact Enchantments", desc: "Unlock pact-specific enchantment effects", cat: "combination", attunement: 'enchanter', attunementLevel: 5, max: 1, base: 2000, studyTime: 24, req: { enchanting: 5 }, reqAttunements: { invoker: 5, enchanter: 5 } },
|
||||
elementalResonance: { name: "Elemental Resonance", desc: "Enchantments gain +20% power per signed pact", cat: "combination", attunement: 'enchanter', attunementLevel: 6, max: 1, base: 2500, studyTime: 30, req: { pactEnchantments: 1 }, reqAttunements: { invoker: 6, enchanter: 6 } },
|
||||
};
|
||||
|
||||
// ─── Prestige Upgrades ────────────────────────────────────────────────────────
|
||||
@@ -831,6 +849,11 @@ export const SKILL_CATEGORIES = [
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
{ id: 'fabrication', name: 'Fabrication', icon: '⚒️', attunement: 'fabricator' },
|
||||
{ id: 'golemancy', name: 'Golemancy', icon: '🗿', attunement: 'fabricator' },
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// COMBINATION (Requires 2+ attunements at level 5+)
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
{ id: 'combination', name: 'Combination', icon: '🔮', attunement: null },
|
||||
];
|
||||
|
||||
// ─── Rarity Colors ───────────────────────────────────────────────────────────
|
||||
@@ -936,3 +959,104 @@ export const ELEMENT_ICON_NAMES: Record<string, string> = {
|
||||
void: 'CircleDot',
|
||||
raw: 'Circle',
|
||||
};
|
||||
|
||||
// ─── Golem Definitions ─────────────────────────────────────────────────────────
|
||||
// Golems are channeling summons that deal damage over time with mana drain
|
||||
// Duration = 1 floor base + 1 floor per Fabricator level (max 10)
|
||||
export const GOLEM_DEFS: Record<string, import('./types').GolemDef> = {
|
||||
// Basic Earth Golem - Unlocked with Fabricator attunement
|
||||
earthGolem: {
|
||||
id: 'earthGolem',
|
||||
name: 'Earth Golem',
|
||||
desc: 'A sturdy golem of compacted earth and stone. Slow but powerful.',
|
||||
element: 'earth',
|
||||
baseDamage: 15,
|
||||
baseHP: 100,
|
||||
summonCost: 50,
|
||||
drainRate: 2, // 2 earth mana per hour
|
||||
attackSpeed: 1.5, // 1.5 attacks per hour
|
||||
unlockCondition: 'Unlock Fabricator attunement',
|
||||
requiredManaType: 'earth',
|
||||
},
|
||||
|
||||
// Metal Golem - Requires metal mana (fire + earth)
|
||||
metalGolem: {
|
||||
id: 'metalGolem',
|
||||
name: 'Metal Golem',
|
||||
desc: 'A gleaming construct of forged metal. Faster and deadlier than earth.',
|
||||
element: 'metal',
|
||||
baseDamage: 25,
|
||||
baseHP: 150,
|
||||
summonCost: 100,
|
||||
drainRate: 3, // 3 metal mana per hour
|
||||
attackSpeed: 2, // 2 attacks per hour
|
||||
unlockCondition: 'Unlock Metal mana (fire + earth) and Metalworking skill',
|
||||
requiredManaType: 'metal',
|
||||
},
|
||||
|
||||
// Crystal Golem - Requires crystal mana (advanced)
|
||||
crystalGolem: {
|
||||
id: 'crystalGolem',
|
||||
name: 'Crystal Golem',
|
||||
desc: 'A shimmering guardian of crystallized mana. Fires piercing bolts.',
|
||||
element: 'crystal',
|
||||
baseDamage: 40,
|
||||
baseHP: 120,
|
||||
summonCost: 200,
|
||||
drainRate: 5, // 5 crystal mana per hour
|
||||
attackSpeed: 2.5, // 2.5 attacks per hour
|
||||
unlockCondition: 'Unlock Crystal mana and Golemancy Master skill',
|
||||
requiredManaType: 'crystal',
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Golem Variants (Combination Skills) ───────────────────────────────────────
|
||||
// These variants are created by embedding elemental crystals in golems
|
||||
export const GOLEM_VARIANTS: Record<string, {
|
||||
baseGolem: string;
|
||||
requiredElement: string;
|
||||
name: string;
|
||||
desc: string;
|
||||
damageMultiplier: number;
|
||||
effect: string;
|
||||
}> = {
|
||||
// Earth Golem + Fire = Lava Golem
|
||||
lavaGolem: {
|
||||
baseGolem: 'earthGolem',
|
||||
requiredElement: 'fire',
|
||||
name: 'Lava Golem',
|
||||
desc: 'Molten earth flows through this golem, burning all it touches.',
|
||||
damageMultiplier: 1.5,
|
||||
effect: 'burn',
|
||||
},
|
||||
|
||||
// Earth Golem + Water = Mud Golem
|
||||
mudGolem: {
|
||||
baseGolem: 'earthGolem',
|
||||
requiredElement: 'water',
|
||||
name: 'Mud Golem',
|
||||
desc: 'A viscous, slowing golem that entraps enemies.',
|
||||
damageMultiplier: 1.2,
|
||||
effect: 'slow',
|
||||
},
|
||||
|
||||
// Metal Golem + Fire = Forge Golem
|
||||
forgeGolem: {
|
||||
baseGolem: 'metalGolem',
|
||||
requiredElement: 'fire',
|
||||
name: 'Forge Golem',
|
||||
desc: 'Glowing hot metal radiates intense heat.',
|
||||
damageMultiplier: 1.6,
|
||||
effect: 'burn',
|
||||
},
|
||||
|
||||
// Metal Golem + Air = Storm Golem
|
||||
stormGolem: {
|
||||
baseGolem: 'metalGolem',
|
||||
requiredElement: 'air',
|
||||
name: 'Storm Golem',
|
||||
desc: 'Lightning arcs between metal plates, shocking enemies.',
|
||||
damageMultiplier: 1.4,
|
||||
effect: 'shock',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
import type { GameState, GameAction, StudyTarget, SpellCost, SkillUpgradeChoice, EquipmentSlot, EquipmentInstance, EnchantmentDesign, DesignEffect, AttunementState } from './types';
|
||||
import type { GameState, GameAction, StudyTarget, SpellCost, SkillUpgradeChoice, EquipmentSlot, EquipmentInstance, EnchantmentDesign, DesignEffect, AttunementState, ActiveGolem } from './types';
|
||||
import {
|
||||
ELEMENTS,
|
||||
GUARDIANS,
|
||||
@@ -22,6 +22,8 @@ import {
|
||||
EFFECT_RESEARCH_MAPPING,
|
||||
BASE_UNLOCKED_EFFECTS,
|
||||
ENCHANTING_UNLOCK_EFFECTS,
|
||||
GOLEM_DEFS,
|
||||
GOLEM_VARIANTS,
|
||||
} from './constants';
|
||||
import { computeEffects, hasSpecial, SPECIAL_EFFECTS, type ComputedEffects } from './upgrade-effects';
|
||||
import {
|
||||
@@ -473,6 +475,12 @@ function makeInitial(overrides: Partial<GameState> = {}): GameState {
|
||||
elementChain: [],
|
||||
decayTimer: 0,
|
||||
},
|
||||
clearedFloors: {},
|
||||
|
||||
// Golemancy (Fabricator summons)
|
||||
activeGolems: [],
|
||||
unlockedGolemTypes: [],
|
||||
golemSummoningProgress: {},
|
||||
|
||||
spells: startSpells,
|
||||
skills: overrides.skills || {},
|
||||
@@ -572,6 +580,13 @@ interface GameStore extends GameState, CraftingActions {
|
||||
// Attunement XP and leveling
|
||||
addAttunementXP: (attunementId: string, amount: number) => void;
|
||||
|
||||
// Golemancy actions
|
||||
summonGolem: (golemId: string, variant?: string) => void;
|
||||
dismissGolem: (golemInstanceId: string) => void;
|
||||
canSummonGolem: (golemId: string) => boolean;
|
||||
getGolemDuration: () => number; // Floors a golem lasts
|
||||
getActiveGolemDPS: () => number; // Total DPS from all active golems
|
||||
|
||||
// Debug functions
|
||||
debugUnlockAttunement: (attunementId: string) => void;
|
||||
debugAddElementalMana: (element: string, amount: number) => void;
|
||||
@@ -1731,6 +1746,125 @@ export const useGameStore = create<GameStore>()(
|
||||
});
|
||||
},
|
||||
|
||||
// Golemancy functions
|
||||
getGolemDuration: () => {
|
||||
const state = get();
|
||||
const fabricatorLevel = state.attunements?.fabricator?.level || 0;
|
||||
// Base 1 floor + 1 floor per fabricator level, max 10
|
||||
return Math.min(10, 1 + fabricatorLevel);
|
||||
},
|
||||
|
||||
canSummonGolem: (golemId: string) => {
|
||||
const state = get();
|
||||
const golemDef = GOLEM_DEFS[golemId];
|
||||
if (!golemDef) return false;
|
||||
|
||||
// Check if player has the golemancy skill
|
||||
if (!state.skills.golemancy) return false;
|
||||
|
||||
// Check if the required mana type is unlocked and has enough
|
||||
const manaType = golemDef.requiredManaType;
|
||||
const elem = state.elements[manaType];
|
||||
if (!elem?.unlocked || elem.current < golemDef.summonCost) return false;
|
||||
|
||||
// Check if we already have this type of golem active (one of each type)
|
||||
if (state.activeGolems.some(g => g.golemId === golemId)) return false;
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
summonGolem: (golemId: string, variant?: string) => {
|
||||
const state = get();
|
||||
const golemDef = GOLEM_DEFS[golemId];
|
||||
if (!golemDef) return;
|
||||
|
||||
// Double-check requirements
|
||||
if (!state.skills.golemancy) return;
|
||||
const manaType = golemDef.requiredManaType;
|
||||
const elem = state.elements[manaType];
|
||||
if (!elem?.unlocked || elem.current < golemDef.summonCost) return;
|
||||
if (state.activeGolems.some(g => g.golemId === golemId)) return;
|
||||
|
||||
// Deduct mana cost
|
||||
const duration = Math.min(10, 1 + (state.attunements?.fabricator?.level || 0));
|
||||
const maxHP = golemDef.baseHP * (1 + (state.skills.golemVitality || 0) * 0.2);
|
||||
const hasGolemancyMaster = state.skills.golemancyMaster === 1;
|
||||
|
||||
const newGolem: ActiveGolem = {
|
||||
golemId,
|
||||
variant,
|
||||
currentFloor: state.currentFloor,
|
||||
remainingFloors: duration,
|
||||
currentHP: hasGolemancyMaster ? maxHP * 1.5 : maxHP,
|
||||
maxHP: hasGolemancyMaster ? maxHP * 1.5 : maxHP,
|
||||
damageDealt: 0,
|
||||
enchantedWith: [],
|
||||
};
|
||||
|
||||
set({
|
||||
elements: {
|
||||
...state.elements,
|
||||
[manaType]: {
|
||||
...elem,
|
||||
current: elem.current - golemDef.summonCost,
|
||||
},
|
||||
},
|
||||
activeGolems: [...state.activeGolems, newGolem],
|
||||
log: [`🗿 Summoned ${variant ? GOLEM_VARIANTS[variant]?.name || golemDef.name : golemDef.name}! Lasts ${duration} floors.`, ...state.log.slice(0, 49)],
|
||||
});
|
||||
},
|
||||
|
||||
dismissGolem: (golemInstanceId: string) => {
|
||||
const state = get();
|
||||
const golem = state.activeGolems.find(g => `${g.golemId}-${g.currentFloor}` === golemInstanceId);
|
||||
if (!golem) return;
|
||||
|
||||
const golemDef = GOLEM_DEFS[golem.golemId];
|
||||
set({
|
||||
activeGolems: state.activeGolems.filter(g => `${g.golemId}-${g.currentFloor}` !== golemInstanceId),
|
||||
log: [`👋 Dismissed ${golemDef?.name || 'golem'}.`, ...state.log.slice(0, 49)],
|
||||
});
|
||||
},
|
||||
|
||||
getActiveGolemDPS: () => {
|
||||
const state = get();
|
||||
let totalDPS = 0;
|
||||
|
||||
for (const golem of state.activeGolems) {
|
||||
if (golem.currentFloor !== state.currentFloor) continue;
|
||||
|
||||
const golemDef = GOLEM_DEFS[golem.golemId];
|
||||
if (!golemDef) continue;
|
||||
|
||||
let damage = golemDef.baseDamage;
|
||||
|
||||
// Apply variant multiplier
|
||||
if (golem.variant && GOLEM_VARIANTS[golem.variant]) {
|
||||
damage *= GOLEM_VARIANTS[golem.variant].damageMultiplier;
|
||||
}
|
||||
|
||||
// Apply golemancy master bonus
|
||||
if (state.skills.golemancyMaster === 1) {
|
||||
damage *= 1.5;
|
||||
}
|
||||
|
||||
// Apply pact bonuses if pactBondedGolems skill
|
||||
if (state.skills.pactBondedGolems === 1) {
|
||||
damage *= 1 + (state.signedPacts.length * 0.1);
|
||||
}
|
||||
|
||||
// Apply guardian bonus if guardianInfusion skill and guardian floor
|
||||
if (state.skills.guardianInfusion === 1 && GUARDIANS[state.currentFloor]) {
|
||||
damage *= 1.25;
|
||||
}
|
||||
|
||||
// DPS = damage * attack speed
|
||||
totalDPS += damage * golemDef.attackSpeed;
|
||||
}
|
||||
|
||||
return totalDPS;
|
||||
},
|
||||
|
||||
// Debug functions
|
||||
debugUnlockAttunement: (attunementId: string) => {
|
||||
const state = get();
|
||||
|
||||
@@ -107,6 +107,7 @@ export interface SkillDef {
|
||||
max: number;
|
||||
base: number; // Mana cost to start studying
|
||||
req?: Record<string, number>;
|
||||
reqAttunements?: Record<string, number>; // Required attunement levels for combination skills
|
||||
studyTime: number; // Hours needed to study
|
||||
level?: number; // Current level (optional, for UI display)
|
||||
tier?: number; // Skill tier (1-5)
|
||||
@@ -323,6 +324,41 @@ export interface ComboState {
|
||||
decayTimer: number; // Hours until decay starts
|
||||
}
|
||||
|
||||
// ─── Golemancy System ─────────────────────────────────────────────────────────
|
||||
|
||||
// Golem types available for summoning
|
||||
export interface GolemDef {
|
||||
id: string;
|
||||
name: string;
|
||||
desc: string;
|
||||
element: string; // Primary element (earth, metal, etc.)
|
||||
baseDamage: number; // Base damage per attack
|
||||
baseHP: number; // Base HP (for durability)
|
||||
summonCost: number; // Initial mana cost to summon
|
||||
drainRate: number; // Ongoing mana drain per hour
|
||||
attackSpeed: number; // Attacks per hour
|
||||
unlockCondition: string; // Description of how to unlock
|
||||
requiredManaType: string; // Mana type needed for this golem
|
||||
variant?: string; // For upgraded variants (e.g., 'lava' for earth+fire)
|
||||
}
|
||||
|
||||
// Active golem state on a floor
|
||||
export interface ActiveGolem {
|
||||
golemId: string; // Type of golem
|
||||
variant?: string; // Current variant (if upgraded)
|
||||
currentFloor: number; // Floor the golem is on
|
||||
remainingFloors: number; // How many more floors this golem will last
|
||||
currentHP: number; // Current HP
|
||||
maxHP: number; // Max HP
|
||||
damageDealt: number; // Total damage dealt so far
|
||||
enchantedWith?: string[]; // Elemental crystals embedded (for combination skills)
|
||||
}
|
||||
|
||||
// Cleared floors tracking
|
||||
export interface ClearedFloors {
|
||||
[floor: number]: boolean;
|
||||
}
|
||||
|
||||
export interface GameState {
|
||||
// Time
|
||||
day: number;
|
||||
@@ -353,6 +389,12 @@ export interface GameState {
|
||||
currentAction: GameAction;
|
||||
castProgress: number; // Progress towards next spell cast (0-1)
|
||||
combo: ComboState; // Combat combo tracking
|
||||
clearedFloors: ClearedFloors; // Track which floors have been cleared
|
||||
|
||||
// Golemancy (Fabricator summons)
|
||||
activeGolems: ActiveGolem[]; // Currently summoned golems
|
||||
unlockedGolemTypes: string[]; // Golem types that have been unlocked
|
||||
golemSummoningProgress: Record<string, number>; // Progress toward summoning each type
|
||||
|
||||
// Spells
|
||||
spells: Record<string, SpellState>;
|
||||
|
||||
166
worklog.md
166
worklog.md
@@ -407,3 +407,169 @@ Stage Summary:
|
||||
- Debug tab enables testing and development
|
||||
- Skills tab is more manageable with collapsible categories
|
||||
- Removed unused features (ComboMeter, scrollCrafting)
|
||||
|
||||
---
|
||||
Task ID: 16
|
||||
Agent: Main
|
||||
Task: Redesign SpireTab to show summoned golems and their damage contribution
|
||||
|
||||
Work Log:
|
||||
- **Added new imports to SpireTab**:
|
||||
- Imported `GOLEM_DEFS` and `GOLEM_VARIANTS` from `@/lib/game/constants`
|
||||
- Using `ELEMENTS` for element colors and symbols
|
||||
|
||||
- **Created new "Active Golems" card**:
|
||||
- Shows list of currently active golems from `store.activeGolems`
|
||||
- Each golem displays:
|
||||
- Name and variant (e.g., "Earth Golem" or "Lava Golem")
|
||||
- HP bar (currentHP / maxHP) with element-colored gradient
|
||||
- Remaining floors countdown
|
||||
- DPS contribution (calculated with all bonuses applied)
|
||||
- Element icon from ELEMENTS constant
|
||||
- Empty state message: "No golems summoned. Visit the Crafting tab to summon golems."
|
||||
- Total golem DPS summary at bottom
|
||||
- Card has earth-colored accent (#F4A261) when golems are active
|
||||
|
||||
- **Updated DPS display in Current Floor card**:
|
||||
- Total DPS now includes both spell DPS and golem DPS
|
||||
- Shows breakdown: "Spell DPS: X | Golem DPS: Y"
|
||||
- Only shows breakdown when golems are active
|
||||
|
||||
- **Calculated individual golem DPS**:
|
||||
- Applies variant damage multiplier
|
||||
- Applies golemancyMaster bonus (+50%)
|
||||
- Applies pactBondedGolems bonus (+10% per pact)
|
||||
- Applies guardianInfusion bonus (+25% on guardian floors)
|
||||
- Multiplies by attack speed
|
||||
|
||||
- **Visual styling**:
|
||||
- Used Card component for the golems section
|
||||
- Used Progress component for HP bars
|
||||
- Matches existing dark theme (bg-gray-900/80, border-gray-700)
|
||||
- Golem cards have element-colored border accent
|
||||
- Used ScrollArea for long golem lists (max-h-48)
|
||||
|
||||
Stage Summary:
|
||||
- New Active Golems card shows all summoned golems with detailed stats
|
||||
- DPS display properly accounts for golem damage contribution
|
||||
- Visual design consistent with existing game theme
|
||||
- All lint checks pass
|
||||
|
||||
---
|
||||
## Task ID: 17 - CraftingTab Redesign
|
||||
### Work Task
|
||||
Redesign the CraftingTab component to have a two-level tab structure based on active attunements, with a new Golemancy sub-tab for summoning golems.
|
||||
|
||||
### Work Summary
|
||||
- **Implemented two-level tab structure**:
|
||||
- Top-level tabs show active attunements (Enchanter ✨, Fabricator ⚒️)
|
||||
- If only one attunement is active, skip top-level tabs and show content directly
|
||||
- If no attunements are active, show locked message
|
||||
|
||||
- **Enchanter attunement** (when active):
|
||||
- Sub-tabs: Design, Prepare, Apply (existing enchantment functionality)
|
||||
- All existing render functions preserved (renderDesignStage, renderPrepareStage, renderApplyStage)
|
||||
|
||||
- **Fabricator attunement** (when active):
|
||||
- Sub-tabs: Craft, Golemancy
|
||||
- Craft sub-tab: existing equipment crafting functionality (renderCraftStage)
|
||||
- Golemancy sub-tab: NEW - summoning and managing golems
|
||||
|
||||
- **New Golemancy features**:
|
||||
- Shows available golem types from `GOLEM_DEFS` with:
|
||||
- Golem name, description, element color
|
||||
- Base damage, HP, and attack speed stats
|
||||
- Summon button with mana cost (e.g., "Summon - 50 Earth Mana")
|
||||
- Shows locked golem types (greyed out) with unlock conditions
|
||||
- Shows active golems with:
|
||||
- HP progress bar
|
||||
- Remaining floor duration
|
||||
- Total damage dealt
|
||||
- Dismiss button
|
||||
- Shows golem variants info (requires Crystal Embedding skill)
|
||||
- Uses store methods: `canSummonGolem()`, `summonGolem()`, `dismissGolem()`, `getGolemDuration()`
|
||||
- Checks attunement status via `store.attunements.enchanter?.active` and `store.attunements.fabricator?.active`
|
||||
|
||||
- **New imports added**:
|
||||
- `GOLEM_DEFS`, `GOLEM_VARIANTS`, `ELEMENTS` from `@/lib/game/constants`
|
||||
- `ActiveGolem` type from `@/lib/game/types`
|
||||
- Additional Lucide icons: `Heart`, `Sword`, `Skull`
|
||||
|
||||
- **Visual styling**:
|
||||
- Maintains existing dark theme (bg-gray-900/80, border-gray-700)
|
||||
- Element-colored accents for golem types
|
||||
- Uses shadcn/ui components: Card, Button, Progress, Badge, ScrollArea, Tabs
|
||||
- Consistent with existing CraftingTab styling
|
||||
|
||||
---
|
||||
## Task ID: 18 - StatsTab Redesign for Attunement-Specific Stats
|
||||
### Work Task
|
||||
Redesign the StatsTab component to better display attunement-specific stats with Active Attunements card, Combination Skills card, and reorganized attunement-specific stat sections.
|
||||
|
||||
### Work Summary
|
||||
- **Added "Active Attunements" card at the top**:
|
||||
- Each active attunement displayed as an expandable card/badge with:
|
||||
- Icon and name (Enchanter ✨, Invoker 💜, Fabricator ⚒️)
|
||||
- Current level and XP progress bar
|
||||
- Primary mana type generated as a badge
|
||||
- Key capability unlocked as a badge
|
||||
- Click to expand reveals:
|
||||
- All available skills for that attunement
|
||||
- Skills currently being studied (highlighted)
|
||||
- Skill levels displayed with badges
|
||||
|
||||
- **Added "Combination Skills" card**:
|
||||
- Shows combination skills that the player has unlocked (level 5+ in both required attunements)
|
||||
- Skills they can unlock shown with requirement badges
|
||||
- Green color scheme for available skills
|
||||
- Greyed out style for locked skills with red/green requirement indicators
|
||||
- Displays attunement level requirements for each skill
|
||||
|
||||
- **Reorganized existing stats into attunement-specific sections**:
|
||||
- **Enchanter Stats** (teal accent border):
|
||||
- Enchantment capacity with Ancient Echo bonus
|
||||
- Efficiency bonus from efficientEnchant skill
|
||||
- Designs created count
|
||||
- Effects unlocked count
|
||||
- Disenchant recovery rate
|
||||
- Enchant speed bonus
|
||||
- **Invoker Stats** (purple accent border):
|
||||
- Pacts signed count (X/10)
|
||||
- Pact multiplier calculation
|
||||
- Pact Mastery bonus
|
||||
- Guardian Affinity time reduction
|
||||
- Elemental Bond capacity per pact
|
||||
- Pact Synergy bonus
|
||||
- Signed pacts list with guardian colors
|
||||
- **Fabricator Stats** (earth/amber accent border):
|
||||
- Golems active count
|
||||
- Golem DPS (using store.getActiveGolemDPS())
|
||||
- Golem duration (using store.getGolemDuration())
|
||||
- Golem Vitality HP bonus
|
||||
- Crafting speed bonus
|
||||
- Earth conversion bonus
|
||||
- Active golems list with HP bars and damage dealt
|
||||
|
||||
- **Import requirements fulfilled**:
|
||||
- Imported `ATTUNEMENTS_DEF` from `@/lib/game/data/attunements`
|
||||
- Imported `SKILL_CATEGORIES` from `@/lib/game/constants`
|
||||
- Uses `store.attunements` to check active attunements
|
||||
- Uses `store.getGolemDuration()` and `store.getActiveGolemDPS()` for Fabricator stats
|
||||
|
||||
- **Visual styling**:
|
||||
- Uses Card, Badge, Progress, Collapsible components from shadcn/ui
|
||||
- Matches existing dark theme (bg-gray-900/80, border-gray-700)
|
||||
- Uses attunement colors from ATTUNEMENTS_DEF:
|
||||
- Enchanter: teal #1ABC9C
|
||||
- Invoker: purple #9B59B6
|
||||
- Fabricator: earth #F4A261
|
||||
- Top border accent for each attunement-specific section
|
||||
- Conditional rendering - only shows attunement sections if that attunement is active
|
||||
|
||||
- **Preserved existing functionality**:
|
||||
- Mana Stats section retained
|
||||
- Combat Stats section retained
|
||||
- Study Stats section retained
|
||||
- Element Stats section retained
|
||||
- Active Skill Upgrades section retained
|
||||
- Loop Stats section retained
|
||||
|
||||
Reference in New Issue
Block a user