n8n-gitea
2c4dc82aad
Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 1m17s
- Add DebugTab.tsx as main container with collapsible sections - Add 8 debug section components in DebugTab/ subdirectory: - GameStateDebugSection: reset, mana, time, pause controls - DisciplineDebugSection: activate/deactivate, add XP - AttunementDebugSection: unlock, add XP - ElementDebugSection: unlock all, add elemental mana - GolemDebugSection: enable/disable golems - PactDebugSection: force sign/clear pacts - SpireDebugSection: jump floors, toggle spire mode - AchievementDebugSection: unlock/reset achievements - Add DebugTab to barrel export (tabs/index.ts) - Add lazy-loaded Debug tab to page.tsx - Add DebugTab.test.ts with 45 tests - All files under 400 lines - Uses existing debug context (DebugProvider, DebugName) - Destructive actions require confirmation (double-click pattern)
104 lines
3.4 KiB
TypeScript
104 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react';
|
|
import { DebugName } from '@/components/game/debug/debug-context';
|
|
import { GameStateDebugSection } from './DebugTab/GameStateDebugSection';
|
|
import { DisciplineDebugSection } from './DebugTab/DisciplineDebugSection';
|
|
import { AttunementDebugSection } from './DebugTab/AttunementDebugSection';
|
|
import { ElementDebugSection } from './DebugTab/ElementDebugSection';
|
|
import { GolemDebugSection } from './DebugTab/GolemDebugSection';
|
|
import { PactDebugSection } from './DebugTab/PactDebugSection';
|
|
import { SpireDebugSection } from './DebugTab/SpireDebugSection';
|
|
import { AchievementDebugSection } from './DebugTab/AchievementDebugSection';
|
|
|
|
interface DebugSectionProps {
|
|
title: string;
|
|
color: string;
|
|
children: React.ReactNode;
|
|
defaultOpen?: boolean;
|
|
}
|
|
|
|
function DebugSection({ title, color, children, defaultOpen = false }: DebugSectionProps) {
|
|
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
|
|
return (
|
|
<Card className="bg-gray-900/60 border-gray-700/50">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="w-full px-4 py-3 flex items-center gap-2 text-left hover:bg-gray-800/30 transition-colors"
|
|
>
|
|
{isOpen ? (
|
|
<ChevronDown className="w-4 h-4 text-gray-400" />
|
|
) : (
|
|
<ChevronRight className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
<span className="font-semibold text-sm" style={{ color }}>{title}</span>
|
|
</button>
|
|
{isOpen && (
|
|
<CardContent className="pt-0 pb-4">
|
|
{children}
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export function DebugTab() {
|
|
return (
|
|
<DebugName name="DebugTab">
|
|
<div className="space-y-4">
|
|
{/* Warning Banner */}
|
|
<Card className="bg-amber-900/20 border-amber-600/50">
|
|
<CardContent className="pt-4">
|
|
<div className="flex items-center gap-2 text-amber-400">
|
|
<AlertTriangle className="w-5 h-5" />
|
|
<span className="font-semibold">Debug Mode</span>
|
|
</div>
|
|
<p className="text-sm text-amber-300/70 mt-1">
|
|
These tools are for development and testing. Using them may break game balance or save data.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="space-y-3">
|
|
<DebugSection title="Game State" color="#60A5FA" defaultOpen={true}>
|
|
<GameStateDebugSection />
|
|
</DebugSection>
|
|
|
|
<DebugSection title="Spire" color="#2DD4BF">
|
|
<SpireDebugSection />
|
|
</DebugSection>
|
|
|
|
<DebugSection title="Disciplines" color="#818CF8">
|
|
<DisciplineDebugSection />
|
|
</DebugSection>
|
|
|
|
<DebugSection title="Attunements" color="#C084FC">
|
|
<AttunementDebugSection />
|
|
</DebugSection>
|
|
|
|
<DebugSection title="Elements" color="#4ADE80">
|
|
<ElementDebugSection />
|
|
</DebugSection>
|
|
|
|
<DebugSection title="Golems" color="#FB923C">
|
|
<GolemDebugSection />
|
|
</DebugSection>
|
|
|
|
<DebugSection title="Pacts" color="#F87171">
|
|
<PactDebugSection />
|
|
</DebugSection>
|
|
|
|
<DebugSection title="Achievements" color="#FACC15">
|
|
<AchievementDebugSection />
|
|
</DebugSection>
|
|
</div>
|
|
</div>
|
|
</DebugName>
|
|
);
|
|
}
|
|
|
|
DebugTab.displayName = "DebugTab";
|