Task 2: SpireTab Overhaul - add Climb the Spire button, implement Spire Mode with exit condition
This commit is contained in:
Refactoring Agent
+178
-134
@@ -12,7 +12,7 @@ import { Button } from '@/components/ui/button';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { RotateCcw } from 'lucide-react';
|
||||
import { RotateCcw, Mountain, ChevronDown } from 'lucide-react';
|
||||
import { TooltipProvider } from '@/components/ui/tooltip';
|
||||
import { DebugName } from '@/lib/game/debug-context';
|
||||
// Non-tab component imports
|
||||
@@ -181,7 +181,7 @@ export default function ManaLoopGame() {
|
||||
<TimeDisplay
|
||||
day={store.day}
|
||||
hour={store.hour}
|
||||
isPaused={store.isPaused}
|
||||
isPaused={store.paused}
|
||||
togglePause={store.togglePause}
|
||||
/>
|
||||
</div>
|
||||
@@ -207,16 +207,34 @@ export default function ManaLoopGame() {
|
||||
/>
|
||||
</DebugName>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<DebugName name="ActionButtons">
|
||||
<ActionButtons
|
||||
currentAction={store.currentAction}
|
||||
designProgress={store.designProgress}
|
||||
preparationProgress={store.preparationProgress}
|
||||
applicationProgress={store.applicationProgress}
|
||||
setAction={store.setAction}
|
||||
/>
|
||||
</DebugName>
|
||||
{/* Climb the Spire Button - only show when not in Spire Mode */}
|
||||
{!store.spireMode && (
|
||||
<DebugName name="ClimbSpireButton">
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
|
||||
size="lg"
|
||||
onClick={() => store.enterSpireMode()}
|
||||
>
|
||||
<Mountain className="w-5 h-5 mr-2" />
|
||||
Climb the Spire
|
||||
</Button>
|
||||
</DebugName>
|
||||
)}
|
||||
|
||||
{/* Action Buttons - only show when not in Spire Mode */}
|
||||
{!store.spireMode && (
|
||||
<DebugName name="ActionButtons">
|
||||
<ActionButtons
|
||||
currentAction={store.currentAction}
|
||||
currentStudyTarget={store.currentStudyTarget}
|
||||
designProgress={store.designProgress}
|
||||
designProgress2={store.designProgress2}
|
||||
preparationProgress={store.preparationProgress}
|
||||
applicationProgress={store.applicationProgress}
|
||||
equipmentCraftingProgress={store.equipmentCraftingProgress}
|
||||
/>
|
||||
</DebugName>
|
||||
)}
|
||||
|
||||
{/* Calendar */}
|
||||
<DebugName name="CalendarDisplay">
|
||||
@@ -230,140 +248,166 @@ export default function ManaLoopGame() {
|
||||
{/* Loot and Achievements moved to tabs */}
|
||||
</div>
|
||||
|
||||
{/* Right Panel - Tabs */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
|
||||
<TabsTrigger value="spire" className="text-xs px-2 py-1">⚔️ Spire</TabsTrigger>
|
||||
<TabsTrigger value="attunements" className="text-xs px-2 py-1">✨ Attune</TabsTrigger>
|
||||
<TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golems</TabsTrigger>
|
||||
<TabsTrigger value="skills" className="text-xs px-2 py-1">📚 Skills</TabsTrigger>
|
||||
<TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
|
||||
<TabsTrigger value="equipment" className="text-xs px-2 py-1">🛡️ Gear</TabsTrigger>
|
||||
<TabsTrigger value="crafting" className="text-xs px-2 py-1">🔧 Craft</TabsTrigger>
|
||||
<TabsTrigger value="loot" className="text-xs px-2 py-1">💎 Loot</TabsTrigger>
|
||||
<TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achieve</TabsTrigger>
|
||||
<TabsTrigger value="lab" className="text-xs px-2 py-1">🔬 Lab</TabsTrigger>
|
||||
<TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
|
||||
<TabsTrigger value="debug" className="text-xs px-2 py-1">🔧 Debug</TabsTrigger>
|
||||
<TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
|
||||
</TabsList>
|
||||
{/* Right Panel - Conditional rendering based on Spire Mode */}
|
||||
{store.spireMode ? (
|
||||
/* Spire Mode - Simplified UI */
|
||||
<div className="flex-1 min-w-0 space-y-4">
|
||||
<DebugName name="SpireModeUI">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-2xl font-bold game-title text-amber-400">
|
||||
🏔️ Spire Mode
|
||||
</h2>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-blue-600/50 text-blue-400 hover:bg-blue-900/20"
|
||||
onClick={() => store.exitSpireMode()}
|
||||
>
|
||||
<ChevronDown className="w-4 h-4 mr-2" />
|
||||
Climb Down
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SpireTab store={store} simpleMode={true} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</div>
|
||||
) : (
|
||||
/* Normal Mode - Tabs */
|
||||
<div className="flex-1 min-w-0">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<TabsList className="flex flex-wrap gap-1 w-full mb-4 h-auto">
|
||||
<TabsTrigger value="spire" className="text-xs px-2 py-1">⚔️ Spire</TabsTrigger>
|
||||
<TabsTrigger value="attunements" className="text-xs px-2 py-1">✨ Attune</TabsTrigger>
|
||||
<TabsTrigger value="golemancy" className="text-xs px-2 py-1">🗿 Golems</TabsTrigger>
|
||||
<TabsTrigger value="skills" className="text-xs px-2 py-1">📚 Skills</TabsTrigger>
|
||||
<TabsTrigger value="spells" className="text-xs px-2 py-1">🔮 Spells</TabsTrigger>
|
||||
<TabsTrigger value="equipment" className="text-xs px-2 py-1">🛡️ Gear</TabsTrigger>
|
||||
<TabsTrigger value="crafting" className="text-xs px-2 py-1">🔧 Craft</TabsTrigger>
|
||||
<TabsTrigger value="loot" className="text-xs px-2 py-1">💎 Loot</TabsTrigger>
|
||||
<TabsTrigger value="achievements" className="text-xs px-2 py-1">🏆 Achieve</TabsTrigger>
|
||||
<TabsTrigger value="lab" className="text-xs px-2 py-1">🔬 Lab</TabsTrigger>
|
||||
<TabsTrigger value="stats" className="text-xs px-2 py-1">📊 Stats</TabsTrigger>
|
||||
<TabsTrigger value="debug" className="text-xs px-2 py-1">🔧 Debug</TabsTrigger>
|
||||
<TabsTrigger value="grimoire" className="text-xs px-2 py-1">📖 Grimoire</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="spire">
|
||||
<DebugName name="SpireTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SpireTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="spire">
|
||||
<DebugName name="SpireTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SpireTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="attunements">
|
||||
<DebugName name="AttunementsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<AttunementsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="attunements">
|
||||
<DebugName name="AttunementsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<AttunementsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="golemancy">
|
||||
<DebugName name="GolemancyTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<GolemancyTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="golemancy">
|
||||
<DebugName name="GolemancyTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<GolemancyTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="skills">
|
||||
<DebugName name="SkillsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SkillsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="skills">
|
||||
<DebugName name="SkillsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SkillsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="spells">
|
||||
<DebugName name="SpellsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SpellsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="spells">
|
||||
<DebugName name="SpellsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<SpellsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="equipment">
|
||||
<DebugName name="EquipmentTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<EquipmentTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="equipment">
|
||||
<DebugName name="EquipmentTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<EquipmentTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="crafting">
|
||||
<DebugName name="CraftingTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<CraftingTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="loot">
|
||||
<DebugName name="LootTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<LootTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="crafting">
|
||||
<DebugName name="CraftingTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<CraftingTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="loot">
|
||||
<DebugName name="LootTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<LootTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="achievements">
|
||||
<DebugName name="AchievementsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<AchievementsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="achievements">
|
||||
<DebugName name="AchievementsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<AchievementsTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="lab">
|
||||
<DebugName name="LabTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<LabTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="lab">
|
||||
<DebugName name="LabTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<LabTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="stats">
|
||||
<DebugName name="StatsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<StatsTab
|
||||
store={store}
|
||||
upgradeEffects={upgradeEffects}
|
||||
maxMana={maxMana}
|
||||
baseRegen={baseRegen}
|
||||
clickMana={clickMana}
|
||||
meditationMultiplier={meditationMultiplier}
|
||||
effectiveRegen={effectiveRegen}
|
||||
incursionStrength={incursionStrength}
|
||||
manaCascadeBonus={manaCascadeBonus}
|
||||
studySpeedMult={studySpeedMult}
|
||||
studyCostMult={studyCostMult}
|
||||
/>
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="stats">
|
||||
<DebugName name="StatsTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<StatsTab
|
||||
store={store}
|
||||
upgradeEffects={upgradeEffects}
|
||||
maxMana={maxMana}
|
||||
baseRegen={baseRegen}
|
||||
clickMana={clickMana}
|
||||
meditationMultiplier={meditationMultiplier}
|
||||
effectiveRegen={effectiveRegen}
|
||||
incursionStrength={incursionStrength}
|
||||
manaCascadeBonus={manaCascadeBonus}
|
||||
studySpeedMult={studySpeedMult}
|
||||
studyCostMult={studyCostMult}
|
||||
/>
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="grimoire">
|
||||
<DebugName name="GrimoireTab">
|
||||
{renderGrimoireTab()}
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
<TabsContent value="grimoire">
|
||||
<DebugName name="GrimoireTab">
|
||||
{renderGrimoireTab()}
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="debug">
|
||||
<DebugName name="DebugTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<DebugTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
<TabsContent value="debug">
|
||||
<DebugName name="DebugTab">
|
||||
<Suspense fallback={<TabLoadingFallback />}>
|
||||
<DebugTab store={store} />
|
||||
</Suspense>
|
||||
</DebugName>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
|
||||
Reference in New Issue
Block a user