feat: add prestige system and skill upgrades with comprehensive documentation
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 5m57s
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 5m57s
This commit is contained in:
Refactoring Agent
@@ -0,0 +1,253 @@
|
||||
// ─── Prestige/Grimoire Tab ──────────────────────────
|
||||
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useGameStore, useGameLoop } from '@/lib/game/store';
|
||||
import { getUnifiedEffects } from '@/lib/game/effects';
|
||||
import {
|
||||
ELEMENTS,
|
||||
GUARDIANS,
|
||||
PRESTIGE_DEF,
|
||||
getStudySpeedMultiplier,
|
||||
} from '@/lib/game/constants';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { fmt } from '@/lib/game/computed-stats';
|
||||
|
||||
export function PrestigeTab() {
|
||||
const [selectedManaType, setSelectedManaType] = useState<string>('');
|
||||
|
||||
const store = useGameStore();
|
||||
const gameLoop = useGameLoop();
|
||||
const upgradeEffects = getUnifiedEffects(store);
|
||||
|
||||
// Get unlocked elements for mana type selector
|
||||
const unlockedElements = Object.entries(ELEMENTS)
|
||||
.filter(([id]) => store.elements[id]?.unlocked)
|
||||
.map(([id, elem]) => ({
|
||||
id,
|
||||
name: elem.name,
|
||||
sym: elem.sym,
|
||||
color: elem.color,
|
||||
}));
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Loop Stats */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs">
|
||||
Loop Stats
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-amber-400 game-mono">
|
||||
{store.loopCount}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Loops Completed</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-purple-400 game-mono">
|
||||
{fmt(store.insight)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Current Insight</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-blue-400 game-mono">
|
||||
{fmt(store.totalInsight)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Total Insight</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800/50 rounded">
|
||||
<div className="text-2xl font-bold text-green-400 game-mono">
|
||||
{store.memorySlots}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">Memory Slots</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Signed Pacts */}
|
||||
<Card className="bg-gray-900/80 border-gray-700">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-amber-400 game-panel-title text-xs">
|
||||
Signed Pacts
|
||||
</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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Prestige Upgrades */}
|
||||
<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">
|
||||
Insight Upgrades (Permanent)
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{Object.entries(PRESTIGE_DEF).map(([id, def]) => {
|
||||
const level = store.prestigeUpgrades[id] || 0;
|
||||
const maxed = level >= def.max;
|
||||
const canBuy = !maxed && store.insight >= def.cost;
|
||||
const isUnlockedManaTypeCapacity =
|
||||
id === 'unlockedManaTypeCapacity';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className="p-3 rounded border border-gray-700 bg-gray-800/50"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="font-semibold text-amber-400 text-sm">
|
||||
{def.name}
|
||||
</div>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{level}/{def.max}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 italic mb-2">
|
||||
{def.desc}
|
||||
</div>
|
||||
|
||||
{/* Mana type selector for unlockedManaTypeCapacity */}
|
||||
{isUnlockedManaTypeCapacity && !maxed && (
|
||||
<div className="mb-2">
|
||||
<div className="text-xs text-gray-400 mb-1">
|
||||
Select mana type:
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{unlockedElements.map(
|
||||
({ id: elemId, name, sym, color }) => (
|
||||
<Button
|
||||
key={elemId}
|
||||
size="sm"
|
||||
variant={
|
||||
selectedManaType === elemId
|
||||
? 'default'
|
||||
: 'outline'
|
||||
}
|
||||
className="text-xs h-7"
|
||||
style={{
|
||||
borderColor:
|
||||
selectedManaType === elemId
|
||||
? color
|
||||
: undefined,
|
||||
backgroundColor:
|
||||
selectedManaType === elemId
|
||||
? color + '40'
|
||||
: undefined,
|
||||
}}
|
||||
onClick={() => setSelectedManaType(elemId)}
|
||||
>
|
||||
{sym} {name}
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant={canBuy ? 'default' : 'outline'}
|
||||
className="w-full"
|
||||
disabled={
|
||||
!canBuy ||
|
||||
(isUnlockedManaTypeCapacity && !selectedManaType)
|
||||
}
|
||||
onClick={() =>
|
||||
store.doPrestige(id, selectedManaType)
|
||||
}
|
||||
>
|
||||
{maxed
|
||||
? 'Maxed'
|
||||
: `Upgrade (${fmt(def.cost)} insight)`}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Reset Game Button */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Reset All Progress
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Clear all data and start fresh
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-red-600/50 text-red-400 hover:bg-red-900/20"
|
||||
onClick={() => {
|
||||
if (
|
||||
confirm(
|
||||
'Are you sure you want to reset ALL progress? This cannot be undone!'
|
||||
)
|
||||
) {
|
||||
store.resetGame();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 mr-1" />
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user