Refactor large files into modular components

- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted - Refactored StatsTab.tsx (584→92 lines) with section components - Refactored SkillsTab.tsx (434→54 lines) with sub-components - Created modular structure for GameContext, LootInventory, and other components - All extracted components organized into feature directories
2026-05-02 17:35:03 +02:00
parent c9ae2576f4
commit d2d28887b1
194 changed files with 16862 additions and 15729 deletions
@@ -0,0 +1,57 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { GameStore } from '@/lib/game/store';
+
+interface GameOverScreenProps {
+  store: GameStore;
+}
+
+export function GameOverScreen({ store }: GameOverScreenProps) {
+  return (
+    <div className="fixed inset-0 game-overlay flex items-center justify-center z-50">
+      <Card className="bg-gray-900 border-gray-600 max-w-md w-full mx-4 shadow-2xl">
+        <CardHeader>
+          <CardTitle className={`text-3xl text-center game-title ${store.victory ? 'text-amber-400' : 'text-red-400'}`}>
+            {store.victory ? 'VICTORY!' : 'LOOP ENDS'}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-center text-gray-400">
+            {store.victory
+              ? 'The Awakened One falls! Your power echoes through eternity.'
+              : 'The time loop resets... but you remember.'}
+          </p>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-amber-400 game-mono">{store.fmt(store.loopInsight)}</div>
+              <div className="text-xs text-gray-400">Insight Gained</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-blue-400 game-mono">{store.maxFloorReached}</div>
+              <div className="text-xs text-gray-400">Best Floor</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-purple-400 game-mono">{store.signedPacts.length}</div>
+              <div className="text-xs text-gray-400">Pacts Signed</div>
+            </div>
+            <div className="p-3 bg-gray-800 rounded">
+              <div className="text-xl font-bold text-green-400 game-mono">{store.loopCount + 1}</div>
+              <div className="text-xs text-gray-400">Total Loops</div>
+            </div>
+          </div>
+
+          <Button
+            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
+            size="lg"
+            onClick={() => store.startNewLoop()}
+          >
+            Begin New Loop
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}