3c79e66b87
All checks were successful
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 3m31s
- Add attunementLevel field to SkillDef type - Organize skills into Core, Enchanter, Invoker, and Fabricator trees - Core skills (mana, study, ascension) available to all players - Enchanter skills require Enchanter attunement and scale with level - Invoker skills for pact mastery and invocation (requires Invoker attunement) - Fabricator skills for golemancy and fabrication (requires Fabricator attunement) - Add attunement level requirements for advanced skills (Lv 3, 5, 7, 8) - Update SkillsTab UI to show attunement requirements - Update store to validate attunement requirements before studying
390 lines
18 KiB
TypeScript
Executable File
390 lines
18 KiB
TypeScript
Executable File
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { SKILLS_DEF, SKILL_CATEGORIES, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/constants';
|
||
import { SKILL_EVOLUTION_PATHS, getUpgradesForSkillAtMilestone, getNextTierSkill, getTierMultiplier } from '@/lib/game/skill-evolution';
|
||
import { getUnifiedEffects, hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
|
||
import { getAvailableSkillCategories } from '@/lib/game/data/attunements';
|
||
import { fmt, fmtDec } from '@/lib/game/store';
|
||
import { formatStudyTime } from '@/lib/game/formatting';
|
||
import type { SkillUpgradeChoice, GameStore } from '@/lib/game/types';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||
import { StudyProgress } from './StudyProgress';
|
||
import { UpgradeDialog } from './UpgradeDialog';
|
||
import { ChevronDown, ChevronRight } from 'lucide-react';
|
||
|
||
export interface SkillsTabProps {
|
||
store: GameStore;
|
||
}
|
||
|
||
// Check if skill has milestone available
|
||
function hasMilestoneUpgrade(
|
||
skillId: string,
|
||
level: number,
|
||
skillTiers: Record<string, number>,
|
||
skillUpgrades: Record<string, string[]>
|
||
): { milestone: 5 | 10; hasUpgrades: boolean; selectedCount: number } | null {
|
||
const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
|
||
const path = SKILL_EVOLUTION_PATHS[baseSkillId];
|
||
if (!path) return null;
|
||
|
||
// Check level 5 milestone
|
||
if (level >= 5) {
|
||
const upgrades5 = getUpgradesForSkillAtMilestone(skillId, 5, skillTiers);
|
||
const selected5 = (skillUpgrades[skillId] || []).filter(id => id.includes('_l5'));
|
||
if (upgrades5.length > 0 && selected5.length < 2) {
|
||
return { milestone: 5, hasUpgrades: true, selectedCount: selected5.length };
|
||
}
|
||
}
|
||
|
||
// Check level 10 milestone
|
||
if (level >= 10) {
|
||
const upgrades10 = getUpgradesForSkillAtMilestone(skillId, 10, skillTiers);
|
||
const selected10 = (skillUpgrades[skillId] || []).filter(id => id.includes('_l10'));
|
||
if (upgrades10.length > 0 && selected10.length < 2) {
|
||
return { milestone: 10, hasUpgrades: true, selectedCount: selected10.length };
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
export function SkillsTab({ store }: SkillsTabProps) {
|
||
const [upgradeDialogSkill, setUpgradeDialogSkill] = useState<string | null>(null);
|
||
const [upgradeDialogMilestone, setUpgradeDialogMilestone] = useState<5 | 10>(5);
|
||
const [pendingUpgradeSelections, setPendingUpgradeSelections] = useState<string[]>([]);
|
||
const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(new Set());
|
||
|
||
const studySpeedMult = getStudySpeedMultiplier(store.skills);
|
||
const upgradeEffects = getUnifiedEffects(store);
|
||
|
||
// Toggle category collapse
|
||
const toggleCategory = (categoryId: string) => {
|
||
setCollapsedCategories(prev => {
|
||
const newSet = new Set(prev);
|
||
if (newSet.has(categoryId)) {
|
||
newSet.delete(categoryId);
|
||
} else {
|
||
newSet.add(categoryId);
|
||
}
|
||
return newSet;
|
||
});
|
||
};
|
||
|
||
// Get upgrade choices for dialog
|
||
const getUpgradeChoices = () => {
|
||
if (!upgradeDialogSkill) return { available: [] as SkillUpgradeChoice[], selected: [] as string[] };
|
||
return store.getSkillUpgradeChoices(upgradeDialogSkill, upgradeDialogMilestone);
|
||
};
|
||
|
||
const { available, selected: alreadySelected } = getUpgradeChoices();
|
||
|
||
// Toggle selection
|
||
const toggleUpgrade = (upgradeId: string) => {
|
||
const currentSelections = pendingUpgradeSelections.length > 0 ? pendingUpgradeSelections : alreadySelected;
|
||
if (currentSelections.includes(upgradeId)) {
|
||
setPendingUpgradeSelections(currentSelections.filter(id => id !== upgradeId));
|
||
} else if (currentSelections.length < 2) {
|
||
setPendingUpgradeSelections([...currentSelections, upgradeId]);
|
||
}
|
||
};
|
||
|
||
// Commit selections and close
|
||
const handleConfirm = () => {
|
||
const currentSelections = pendingUpgradeSelections.length > 0 ? pendingUpgradeSelections : alreadySelected;
|
||
if (currentSelections.length === 2 && upgradeDialogSkill) {
|
||
store.commitSkillUpgrades(upgradeDialogSkill, currentSelections);
|
||
}
|
||
setPendingUpgradeSelections([]);
|
||
setUpgradeDialogSkill(null);
|
||
};
|
||
|
||
// Cancel and close
|
||
const handleCancel = () => {
|
||
setPendingUpgradeSelections([]);
|
||
setUpgradeDialogSkill(null);
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Upgrade Selection Dialog */}
|
||
<UpgradeDialog
|
||
open={!!upgradeDialogSkill}
|
||
skillId={upgradeDialogSkill}
|
||
milestone={upgradeDialogMilestone}
|
||
pendingSelections={pendingUpgradeSelections}
|
||
available={available}
|
||
alreadySelected={alreadySelected}
|
||
onToggle={toggleUpgrade}
|
||
onConfirm={handleConfirm}
|
||
onCancel={handleCancel}
|
||
onOpenChange={(open) => {
|
||
if (!open) {
|
||
setPendingUpgradeSelections([]);
|
||
setUpgradeDialogSkill(null);
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{/* Current Study Progress */}
|
||
{store.currentStudyTarget && store.currentStudyTarget.type === 'skill' && (
|
||
<Card className="bg-gray-900/80 border-purple-600/50">
|
||
<CardContent className="pt-4">
|
||
<StudyProgress
|
||
currentStudyTarget={store.currentStudyTarget}
|
||
skills={store.skills}
|
||
studySpeedMult={studySpeedMult}
|
||
cancelStudy={store.cancelStudy}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* Get available skill categories based on attunements */}
|
||
{(() => {
|
||
const availableCategories = getAvailableSkillCategories(store.attunements || {});
|
||
|
||
return SKILL_CATEGORIES
|
||
.filter(cat => availableCategories.includes(cat.id))
|
||
.map((cat) => {
|
||
const skillsInCat = Object.entries(SKILLS_DEF).filter(([, def]) => def.cat === cat.id);
|
||
if (skillsInCat.length === 0) return null;
|
||
|
||
const isCollapsed = collapsedCategories.has(cat.id);
|
||
|
||
return (
|
||
<Card key={cat.id} className="bg-gray-900/80 border-gray-700">
|
||
<CardHeader className="pb-2 cursor-pointer" onClick={() => toggleCategory(cat.id)}>
|
||
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center justify-between">
|
||
<span>{cat.icon} {cat.name}</span>
|
||
<div className="flex items-center gap-2">
|
||
<Badge variant="outline" className="text-xs">{skillsInCat.length} skills</Badge>
|
||
{isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
||
</div>
|
||
</CardTitle>
|
||
</CardHeader>
|
||
{!isCollapsed && (
|
||
<CardContent>
|
||
<div className="space-y-2">
|
||
{skillsInCat.map(([id, def]) => {
|
||
// Get tier info
|
||
const currentTier = store.skillTiers?.[id] || 1;
|
||
const tieredSkillId = currentTier > 1 ? `${id}_t${currentTier}` : id;
|
||
const tierMultiplier = getTierMultiplier(tieredSkillId);
|
||
|
||
// Get the actual level from the tiered skill
|
||
const level = store.skills[tieredSkillId] || store.skills[id] || 0;
|
||
const maxed = level >= def.max;
|
||
|
||
// Check if studying this skill
|
||
const isStudying = (store.currentStudyTarget?.id === id || store.currentStudyTarget?.id === tieredSkillId) && store.currentStudyTarget?.type === 'skill';
|
||
|
||
// Get tier name for display
|
||
const tierDef = SKILL_EVOLUTION_PATHS[id]?.tiers.find(t => t.tier === currentTier);
|
||
const skillDisplayName = tierDef?.name || def.name;
|
||
|
||
// Check attunement requirements
|
||
let attunementMet = true;
|
||
let attunementReqText = '';
|
||
if (def.attunement) {
|
||
const attState = store.attunements?.[def.attunement];
|
||
const requiredLevel = def.attunementLevel || 1;
|
||
if (!attState?.active) {
|
||
attunementMet = false;
|
||
attunementReqText = `Requires ${def.attunement.charAt(0).toUpperCase() + def.attunement.slice(1)} attunement`;
|
||
} else if ((attState.level || 1) < requiredLevel) {
|
||
attunementMet = false;
|
||
attunementReqText = `Requires ${def.attunement.charAt(0).toUpperCase() + def.attunement.slice(1)} Lv.${requiredLevel}`;
|
||
}
|
||
}
|
||
|
||
// Check prerequisites
|
||
let prereqMet = true;
|
||
if (def.req) {
|
||
for (const [r, rl] of Object.entries(def.req)) {
|
||
if ((store.skills[r] || 0) < rl) {
|
||
prereqMet = false;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Apply skill modifiers
|
||
const costMult = getStudyCostMultiplier(store.skills);
|
||
const speedMult = getStudySpeedMultiplier(store.skills);
|
||
const studyEffects = getUnifiedEffects(store);
|
||
const effectiveSpeedMult = speedMult * studyEffects.studySpeedMultiplier;
|
||
|
||
// Study time scales with tier
|
||
const tierStudyTime = def.studyTime * currentTier;
|
||
const effectiveStudyTime = tierStudyTime / effectiveSpeedMult;
|
||
|
||
// Cost scales with tier
|
||
const baseCost = def.base * (level + 1) * currentTier;
|
||
const cost = Math.floor(baseCost * costMult);
|
||
|
||
// Can start studying?
|
||
const canStudy = !maxed && attunementMet && prereqMet && store.rawMana >= cost && !isStudying;
|
||
|
||
// Check for milestone upgrades
|
||
const milestoneInfo = hasMilestoneUpgrade(tieredSkillId, level, store.skillTiers || {}, store.skillUpgrades);
|
||
|
||
// Check for tier up
|
||
const nextTierSkill = getNextTierSkill(tieredSkillId);
|
||
const canTierUp = maxed && nextTierSkill;
|
||
|
||
// Get selected upgrades
|
||
const selectedUpgrades = store.skillUpgrades[tieredSkillId] || [];
|
||
const selectedL5 = selectedUpgrades.filter(u => u.includes('_l5'));
|
||
const selectedL10 = selectedUpgrades.filter(u => u.includes('_l10'));
|
||
|
||
return (
|
||
<div
|
||
key={id}
|
||
className={`flex flex-col sm:flex-row sm:items-center justify-between p-3 rounded border gap-2 ${
|
||
isStudying ? 'border-purple-500 bg-purple-900/20' :
|
||
milestoneInfo ? 'border-amber-500/50 bg-amber-900/10' :
|
||
'border-gray-700 bg-gray-800/30'
|
||
}`}
|
||
>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className="font-semibold text-sm">{skillDisplayName}</span>
|
||
{currentTier > 1 && (
|
||
<Badge className="bg-purple-600/50 text-purple-200 text-xs">Tier {currentTier} ({fmtDec(tierMultiplier, 0)}x)</Badge>
|
||
)}
|
||
{level > 0 && <span className="text-purple-400 text-sm">Lv.{level}</span>}
|
||
{selectedUpgrades.length > 0 && (
|
||
<div className="flex gap-1">
|
||
{selectedL5.length > 0 && (
|
||
<Badge className="bg-amber-700/50 text-amber-200 text-xs">L5: {selectedL5.length}</Badge>
|
||
)}
|
||
{selectedL10.length > 0 && (
|
||
<Badge className="bg-purple-700/50 text-purple-200 text-xs">L10: {selectedL10.length}</Badge>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="text-xs text-gray-400 italic">{def.desc}{currentTier > 1 && ` (Tier ${currentTier}: ${fmtDec(tierMultiplier, 0)}x effect)`}</div>
|
||
{!attunementMet && attunementReqText && (
|
||
<div className="text-xs text-orange-400 mt-1">
|
||
🔒 {attunementReqText}
|
||
</div>
|
||
)}
|
||
{!prereqMet && def.req && (
|
||
<div className="text-xs text-red-400 mt-1">
|
||
Requires: {Object.entries(def.req).map(([r, rl]) => `${SKILLS_DEF[r]?.name} Lv.${rl}`).join(', ')}
|
||
</div>
|
||
)}
|
||
<div className="text-xs text-gray-500 mt-1">
|
||
<span className={effectiveSpeedMult > 1 ? 'text-green-400' : ''}>
|
||
Study: {formatStudyTime(effectiveStudyTime)}{effectiveSpeedMult > 1 && <span className="text-xs ml-1">({Math.round(effectiveSpeedMult * 100)}% speed)</span>}
|
||
</span>
|
||
{' • '}
|
||
<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>}
|
||
</span>
|
||
</div>
|
||
|
||
{milestoneInfo && (
|
||
<div className="text-xs text-amber-400 mt-1 flex items-center gap-1">
|
||
⭐ Level {milestoneInfo.milestone} milestone: {milestoneInfo.selectedCount}/2 upgrades selected
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 flex-wrap sm:flex-nowrap">
|
||
{/* Level dots */}
|
||
<div className="flex gap-1 shrink-0">
|
||
{Array.from({ length: def.max }).map((_, i) => (
|
||
<div
|
||
key={i}
|
||
className={`w-2 h-2 rounded-full border ${
|
||
i < level ? 'bg-purple-500 border-purple-400' :
|
||
i === 4 || i === 9 ? 'border-amber-500' :
|
||
'border-gray-600'
|
||
}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{isStudying ? (
|
||
<div className="text-xs text-purple-400">
|
||
{formatStudyTime(store.currentStudyTarget?.progress || 0)}/{formatStudyTime(tierStudyTime)}
|
||
</div>
|
||
) : milestoneInfo ? (
|
||
<Button
|
||
size="sm"
|
||
className="bg-amber-600 hover:bg-amber-700"
|
||
onClick={() => {
|
||
setUpgradeDialogSkill(tieredSkillId);
|
||
setUpgradeDialogMilestone(milestoneInfo.milestone);
|
||
}}
|
||
>
|
||
Choose Upgrades
|
||
</Button>
|
||
) : canTierUp ? (
|
||
<Button
|
||
size="sm"
|
||
className="bg-purple-600 hover:bg-purple-700"
|
||
onClick={() => store.tierUpSkill(tieredSkillId)}
|
||
>
|
||
⬆️ Tier Up
|
||
</Button>
|
||
) : maxed ? (
|
||
<Badge className="bg-green-900/50 text-green-300">Maxed</Badge>
|
||
) : (
|
||
<div className="flex gap-1">
|
||
<Button
|
||
size="sm"
|
||
variant={canStudy ? 'default' : 'outline'}
|
||
disabled={!canStudy}
|
||
className={canStudy ? 'bg-purple-600 hover:bg-purple-700' : 'opacity-50'}
|
||
onClick={() => store.startStudyingSkill(tieredSkillId)}
|
||
>
|
||
Study ({fmt(cost)})
|
||
</Button>
|
||
{/* Parallel Study button */}
|
||
{hasSpecial(upgradeEffects, SPECIAL_EFFECTS.PARALLEL_STUDY) &&
|
||
store.currentStudyTarget &&
|
||
!store.parallelStudyTarget &&
|
||
store.currentStudyTarget.id !== tieredSkillId &&
|
||
canStudy && (
|
||
<TooltipProvider>
|
||
<Tooltip>
|
||
<TooltipTrigger asChild>
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-cyan-500 text-cyan-400 hover:bg-cyan-900/30"
|
||
onClick={() => store.startParallelStudySkill(tieredSkillId)}
|
||
>
|
||
⚡
|
||
</Button>
|
||
</TooltipTrigger>
|
||
<TooltipContent>
|
||
<p>Study in parallel (50% speed)</p>
|
||
</TooltipContent>
|
||
</Tooltip>
|
||
</TooltipProvider>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</CardContent>
|
||
)}
|
||
</Card>
|
||
);
|
||
});
|
||
})()}
|
||
</div>
|
||
);
|
||
}
|