Initial commit
This commit is contained in:
Z User
341
src/components/game/tabs/GolemancyTab.tsx
Executable file
341
src/components/game/tabs/GolemancyTab.tsx
Executable file
@@ -0,0 +1,341 @@
|
||||
'use client';
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import {
|
||||
Golem, Zap, Clock, Swords, Shield, Target, Sparkles, Lock, Check, X
|
||||
} from 'lucide-react';
|
||||
import { GOLEMS_DEF, getGolemSlots, isGolemUnlocked, getGolemDamage, getGolemAttackSpeed, getGolemFloorDuration } from '@/lib/game/data/golems';
|
||||
import { ELEMENTS } from '@/lib/game/constants';
|
||||
import { fmt } from '@/lib/game/store';
|
||||
import type { GameStore } from '@/lib/game/store';
|
||||
import type { GolemancyState, AttunementState, ElementState } from '@/lib/game/types';
|
||||
|
||||
export interface GolemancyTabProps {
|
||||
store: GameStore;
|
||||
}
|
||||
|
||||
export function GolemancyTab({ store }: GolemancyTabProps) {
|
||||
const attunements = store.attunements;
|
||||
const elements = store.elements;
|
||||
const skills = store.skills;
|
||||
const golemancy = store.golemancy;
|
||||
const currentFloor = store.currentFloor;
|
||||
const currentRoom = store.currentRoom;
|
||||
const toggleGolem = store.toggleGolem;
|
||||
|
||||
// Get Fabricator level and golem slots
|
||||
const fabricatorLevel = attunements.fabricator?.level || 0;
|
||||
const fabricatorActive = attunements.fabricator?.active || false;
|
||||
const maxSlots = getGolemSlots(fabricatorLevel);
|
||||
|
||||
// Get unlocked elements
|
||||
const unlockedElements = Object.entries(elements)
|
||||
.filter(([, e]) => e.unlocked)
|
||||
.map(([id]) => id);
|
||||
|
||||
// Get all unlocked golems
|
||||
const unlockedGolems = Object.values(GOLEMS_DEF).filter(golem =>
|
||||
isGolemUnlocked(golem.id, attunements, unlockedElements)
|
||||
);
|
||||
|
||||
// Check if golemancy is available
|
||||
const hasGolemancy = fabricatorActive && fabricatorLevel >= 2;
|
||||
|
||||
// Check if currently in combat (not puzzle)
|
||||
const inCombat = currentRoom.roomType !== 'puzzle';
|
||||
|
||||
// Get element info helper
|
||||
const getElementInfo = (elementId: string) => {
|
||||
return ELEMENTS[elementId];
|
||||
};
|
||||
|
||||
// Render a golem card
|
||||
const renderGolemCard = (golemId: string, isUnlocked: boolean) => {
|
||||
const golem = GOLEMS_DEF[golemId];
|
||||
if (!golem) return null;
|
||||
|
||||
const isEnabled = golemancy.enabledGolems.includes(golemId);
|
||||
const isSelected = golemancy.summonedGolems.some(g => g.golemId === golemId);
|
||||
|
||||
// Calculate effective stats
|
||||
const damage = getGolemDamage(golemId, skills);
|
||||
const attackSpeed = getGolemAttackSpeed(golemId, skills);
|
||||
const floorDuration = getGolemFloorDuration(skills);
|
||||
|
||||
// Get element color
|
||||
const primaryElement = getElementInfo(golem.baseManaType);
|
||||
const elementColor = primaryElement?.color || '#888';
|
||||
|
||||
if (!isUnlocked) {
|
||||
// Locked golem card
|
||||
return (
|
||||
<Card key={golemId} className="bg-gray-900/80 border-gray-700 opacity-50">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm flex items-center gap-2">
|
||||
<Lock className="w-4 h-4" />
|
||||
<span className="text-gray-500">???</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-xs text-gray-500">
|
||||
{golem.unlockCondition.type === 'attunement_level' && (
|
||||
<div>Requires Fabricator Level {golem.unlockCondition.level}</div>
|
||||
)}
|
||||
{golem.unlockCondition.type === 'mana_unlocked' && (
|
||||
<div>Requires {ELEMENTS[golem.unlockCondition.manaType || '']?.name || golem.unlockCondition.manaType} Mana</div>
|
||||
)}
|
||||
{golem.unlockCondition.type === 'dual_attunement' && (
|
||||
<div>Requires Enchanter & Fabricator Level 5</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={golemId}
|
||||
className={`bg-gray-900/80 border-2 transition-all cursor-pointer ${
|
||||
isEnabled
|
||||
? 'border-green-500 bg-green-900/10'
|
||||
: 'border-gray-700 hover:border-gray-600'
|
||||
}`}
|
||||
onClick={() => toggleGolem(golemId)}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Golem className="w-4 h-4" style={{ color: elementColor }} />
|
||||
<span style={{ color: elementColor }}>{golem.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{golem.isAoe && (
|
||||
<Badge variant="outline" className="text-xs">AOE {golem.aoeTargets}</Badge>
|
||||
)}
|
||||
<Badge variant="outline" className="text-xs">T{golem.tier}</Badge>
|
||||
{isEnabled ? (
|
||||
<Check className="w-4 h-4 text-green-400" />
|
||||
) : (
|
||||
<X className="w-4 h-4 text-gray-500" />
|
||||
)}
|
||||
</div>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<p className="text-xs text-gray-400">{golem.description}</p>
|
||||
|
||||
<Separator className="bg-gray-700" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Swords className="w-3 h-3 text-red-400" />
|
||||
<span className="text-gray-400">DMG:</span>
|
||||
<span className="text-white">{damage}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Zap className="w-3 h-3 text-yellow-400" />
|
||||
<span className="text-gray-400">Speed:</span>
|
||||
<span className="text-white">{attackSpeed.toFixed(1)}/hr</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Target className="w-3 h-3 text-blue-400" />
|
||||
<span className="text-gray-400">Pierce:</span>
|
||||
<span className="text-white">{Math.floor(golem.armorPierce * 100)}%</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3 text-purple-400" />
|
||||
<span className="text-gray-400">Duration:</span>
|
||||
<span className="text-white">{floorDuration} floor(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="bg-gray-700" />
|
||||
|
||||
{/* Summon Cost */}
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">Summon Cost:</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{golem.summonCost.map((cost, idx) => {
|
||||
const elem = getElementInfo(cost.element || '');
|
||||
const available = cost.type === 'raw'
|
||||
? store.rawMana
|
||||
: elements[cost.element || '']?.current || 0;
|
||||
const canAfford = available >= cost.amount;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
key={idx}
|
||||
variant="outline"
|
||||
className={`text-xs ${canAfford ? 'border-green-500' : 'border-red-500'}`}
|
||||
style={{ borderColor: canAfford ? undefined : '#ef4444' }}
|
||||
>
|
||||
<span style={{ color: elem?.color }}>{elem?.sym || '💎'}</span>
|
||||
{' '}{cost.amount}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Maintenance Cost */}
|
||||
<div>
|
||||
<div className="text-xs text-gray-500 mb-1">Maintenance/hr:</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{golem.maintenanceCost.map((cost, idx) => {
|
||||
const elem = getElementInfo(cost.element || '');
|
||||
|
||||
return (
|
||||
<Badge key={idx} variant="outline" className="text-xs">
|
||||
<span style={{ color: elem?.color }}>{elem?.sym || '💎'}</span>
|
||||
{' '}{cost.amount}/hr
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
{isSelected && (
|
||||
<div className="mt-2 text-xs text-green-400 flex items-center gap-1">
|
||||
<Sparkles className="w-3 h-3" />
|
||||
Active on Floor {currentFloor}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Golem className="w-5 h-5 text-amber-500" />
|
||||
Golemancy
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!hasGolemancy ? (
|
||||
<div className="text-center text-gray-400 py-4">
|
||||
<Lock className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||
<p>Unlock the Fabricator attunement and reach Level 2 to summon golems.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-400">Golem Slots:</span>
|
||||
<span className="text-sm font-semibold">
|
||||
<span className="text-amber-400">{golemancy.enabledGolems.length}</span>
|
||||
<span className="text-gray-500"> / {maxSlots}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-400">Fabricator Level:</span>
|
||||
<span className="text-sm font-semibold text-amber-400">{fabricatorLevel}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-400">Floor Duration:</span>
|
||||
<span className="text-sm font-semibold">{getGolemFloorDuration(skills)} floor(s)</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-400">Status:</span>
|
||||
<span className={`text-sm ${inCombat ? 'text-green-400' : 'text-yellow-400'}`}>
|
||||
{inCombat ? '⚔️ Combat Active' : '🧩 Puzzle Room (No Golems)'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Golems are automatically summoned at the start of each combat floor.
|
||||
They cost mana to maintain and will be dismissed if you run out.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Active Golems */}
|
||||
{hasGolemancy && golemancy.summonedGolems.length > 0 && (
|
||||
<Card className="bg-gray-900/80 border-green-600">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm text-green-400 flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Active Golems ({golemancy.summonedGolems.length})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{golemancy.summonedGolems.map(sg => {
|
||||
const golem = GOLEMS_DEF[sg.golemId];
|
||||
const elem = getElementInfo(golem?.baseManaType || '');
|
||||
|
||||
return (
|
||||
<Badge key={sg.golemId} variant="outline" className="text-sm py-1 px-2">
|
||||
<Golem className="w-3 h-3 mr-1" style={{ color: elem?.color }} />
|
||||
{golem?.name}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Golem Selection */}
|
||||
{hasGolemancy && (
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">Select Golems to Summon</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ScrollArea className="h-96">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 pr-4">
|
||||
{/* Unlocked Golems */}
|
||||
{unlockedGolems.map(golem => renderGolemCard(golem.id, true))}
|
||||
|
||||
{/* Locked Golems */}
|
||||
{Object.values(GOLEMS_DEF)
|
||||
.filter(g => !isGolemUnlocked(g.id, attunements, unlockedElements))
|
||||
.map(golem => renderGolemCard(golem.id, false))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Golemancy Skills Info */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">Golemancy Skills</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-xs text-gray-400 space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<span>Golem Mastery:</span>
|
||||
<span className="text-white">+{skills.golemMastery || 0}0% damage</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Golem Efficiency:</span>
|
||||
<span className="text-white">+{(skills.golemEfficiency || 0) * 5}% attack speed</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Golem Longevity:</span>
|
||||
<span className="text-white">+{skills.golemLongevity || 0} floor duration</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span>Golem Siphon:</span>
|
||||
<span className="text-white">-{(skills.golemSiphon || 0) * 10}% maintenance</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user