This commit is contained in:
Z User
2026-03-25 16:35:56 +00:00
parent 3b2e89db74
commit 7c5f2f30f0
11 changed files with 2929 additions and 10 deletions

View File

@@ -18,9 +18,14 @@ import { ScrollArea } from '@/components/ui/scroll-area';
import { Separator } from '@/components/ui/separator';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
import { Sparkles, Swords, BookOpen, FlaskConical, Trophy, RotateCcw, Pause, Play, Zap, Clock, Target, Flame, Droplet, Wind, Mountain, Sun, Moon, Leaf, Skull, Brain, Link, Wind as Force, Droplets, TreeDeciduous, Hourglass, Gem, Star, CircleDot, X, Circle, BarChart3 } from 'lucide-react';
import { Sparkles, Swords, BookOpen, FlaskConical, Trophy, RotateCcw, Pause, Play, Zap, Clock, Target, Flame, Droplet, Wind, Mountain, Sun, Moon, Leaf, Skull, Brain, Link, Wind as Force, Droplets, TreeDeciduous, Hourglass, Gem, Star, CircleDot, X, Circle, BarChart3, Award, Package, Heart } from 'lucide-react';
import type { GameAction } from '@/lib/game/types';
import { CraftingTab } from '@/components/game/tabs/CraftingTab';
import { FamiliarTab } from '@/components/game/tabs/FamiliarTab';
import { ComboMeter } from '@/components/game/ComboMeter';
import { LootInventoryDisplay } from '@/components/game/LootInventory';
import { AchievementsDisplay } from '@/components/game/AchievementsDisplay';
import { ACHIEVEMENTS } from '@/lib/game/data/achievements';
// Helper to get active spells from equipped caster weapons
function getActiveEquipmentSpells(
@@ -647,6 +652,9 @@ export default function ManaLoopGame() {
</CardContent>
</Card>
{/* Combo Meter - Shows when climbing or has active combo */}
<ComboMeter combo={store.combo} isClimbing={store.currentAction === 'climb'} />
{/* Current Study (if any) */}
{store.currentStudyTarget && (
<Card className="bg-gray-900/80 border-purple-600/50 lg:col-span-2">
@@ -2246,7 +2254,10 @@ export default function ManaLoopGame() {
<TabsTrigger value="spells" className="data-[state=active]:bg-gray-700 shrink-0">📖 Spells</TabsTrigger>
<TabsTrigger value="lab" className="data-[state=active]:bg-gray-700 shrink-0">🧪 Lab</TabsTrigger>
<TabsTrigger value="crafting" className="data-[state=active]:bg-gray-700 shrink-0"> Crafting</TabsTrigger>
<TabsTrigger value="familiars" className="data-[state=active]:bg-gray-700 shrink-0">🔮 Familiars</TabsTrigger>
<TabsTrigger value="skills" className="data-[state=active]:bg-gray-700 shrink-0">📚 Skills</TabsTrigger>
<TabsTrigger value="loot" className="data-[state=active]:bg-gray-700 shrink-0">💎 Loot</TabsTrigger>
<TabsTrigger value="achievements" className="data-[state=active]:bg-gray-700 shrink-0">🏆 Achievements</TabsTrigger>
<TabsTrigger value="grimoire" className="data-[state=active]:bg-gray-700 shrink-0"> Grimoire</TabsTrigger>
<TabsTrigger value="stats" className="data-[state=active]:bg-gray-700 shrink-0">📊 Stats</TabsTrigger>
</TabsList>
@@ -2289,10 +2300,150 @@ export default function ManaLoopGame() {
/>
</TabsContent>
<TabsContent value="familiars">
<FamiliarTab store={store} />
</TabsContent>
<TabsContent value="skills">
{renderSkillsTab()}
</TabsContent>
<TabsContent value="loot">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<LootInventoryDisplay inventory={store.lootInventory} />
<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">
<Package className="w-4 h-4" />
Loot Information
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3 text-sm">
<p className="text-gray-400">
As you climb the Spire, you'll discover valuable loot from defeated floors and guardians.
</p>
<div className="space-y-2">
<div className="text-gray-300 font-semibold">Loot Types:</div>
<ul className="text-gray-400 space-y-1 list-disc list-inside">
<li><span className="text-gray-300">Materials</span> - Used for advanced crafting</li>
<li><span className="text-gray-300">Essence</span> - Grants elemental mana</li>
<li><span className="text-gray-300">Mana Orbs</span> - Direct mana boost</li>
<li><span className="text-gray-300">Blueprints</span> - New equipment designs</li>
</ul>
</div>
<div className="space-y-2">
<div className="text-gray-300 font-semibold">Drop Rates:</div>
<ul className="text-gray-400 space-y-1 list-disc list-inside">
<li>Higher floors = better loot</li>
<li>Guardians have 2x drop rate</li>
<li>Rare drops from floor 50+</li>
<li>Legendary items from floor 75+</li>
</ul>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
<CardHeader className="pb-2">
<CardTitle className="text-amber-400 game-panel-title text-xs">Loot Statistics</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="p-3 bg-gray-800/50 rounded text-center">
<div className="text-xl font-bold text-amber-400 game-mono">
{Object.values(store.lootInventory.materials).reduce((a, b) => a + b, 0)}
</div>
<div className="text-xs text-gray-400">Materials Found</div>
</div>
<div className="p-3 bg-gray-800/50 rounded text-center">
<div className="text-xl font-bold text-purple-400 game-mono">
{store.lootInventory.blueprints.length}
</div>
<div className="text-xs text-gray-400">Blueprints</div>
</div>
<div className="p-3 bg-gray-800/50 rounded text-center">
<div className="text-xl font-bold text-blue-400 game-mono">
{store.totalSpellsCast || 0}
</div>
<div className="text-xs text-gray-400">Spells Cast</div>
</div>
<div className="p-3 bg-gray-800/50 rounded text-center">
<div className="text-xl font-bold text-green-400 game-mono">
{store.combo?.maxCombo || 0}
</div>
<div className="text-xs text-gray-400">Max Combo</div>
</div>
</div>
</CardContent>
</Card>
</div>
</TabsContent>
<TabsContent value="achievements">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<AchievementsDisplay
achievements={store.achievements}
gameState={{
maxFloorReached: store.maxFloorReached,
totalManaGathered: store.totalManaGathered,
signedPacts: store.signedPacts,
totalSpellsCast: store.totalSpellsCast || 0,
totalDamageDealt: store.totalDamageDealt || 0,
totalCraftsCompleted: store.totalCraftsCompleted || 0,
combo: store.combo,
}}
/>
<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">
<Award className="w-4 h-4" />
Achievement Progress
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
<div className="grid grid-cols-2 gap-3">
<div className="p-3 bg-gray-800/50 rounded">
<div className="text-xl font-bold text-amber-400 game-mono">
{store.achievements?.unlocked?.length || 0}
</div>
<div className="text-xs text-gray-400">Unlocked</div>
</div>
<div className="p-3 bg-gray-800/50 rounded">
<div className="text-xl font-bold text-purple-400 game-mono">
{(store.achievements?.unlocked || [])
.reduce((sum: number, id: string) => sum + (ACHIEVEMENTS[id]?.reward?.insight || 0), 0)}
</div>
<div className="text-xs text-gray-400">Insight Earned</div>
</div>
</div>
<Separator className="bg-gray-700" />
<div className="text-sm text-gray-400">
Achievements provide permanent bonuses and insight rewards. Track your progress and unlock special titles!
</div>
<div className="space-y-2">
<div className="text-gray-300 font-semibold text-sm">Categories:</div>
<div className="flex flex-wrap gap-2">
<Badge className="bg-red-900/50 text-red-300">Combat</Badge>
<Badge className="bg-amber-900/50 text-amber-300">Progression</Badge>
<Badge className="bg-purple-900/50 text-purple-300">Crafting</Badge>
<Badge className="bg-blue-900/50 text-blue-300">Magic</Badge>
<Badge className="bg-pink-900/50 text-pink-300">Special</Badge>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</TabsContent>
<TabsContent value="grimoire">
{renderGrimoireTab()}
</TabsContent>