Files
smugglers-run/app/page.tsx
T
2026-02-08 17:06:59 +01:00

110 lines
3.0 KiB
TypeScript

"use client";
import { useGameEngine } from "@/hooks/useGameEngine";
import HUD from "../components/Hud";
import GalaxyMap from "../components/GalaxyMap";
import EventLog from "../components/EventLog";
import ActionPanel from "../components/ActionPanel";
import StartScreen from "@/components/StartScreen";
import GameOverScreen from "@/components/GameOverScreen";
import VictoryScreen from "@/components/VictoryScreen";
import PowerDistributor from "@/components/PowerDistributor";
import { t } from "@/content/locales";
export default function Home() {
const {
gameStarted,
startGame,
planets,
credits,
hp,
loading,
currentLocationId,
currentPlanet,
selectedPlanet,
setSelectedPlanet,
handleAttack,
executeJump,
handleRepair,
isJumping,
power,
updatePower,
activeEnemy,
executeEscape,
logs,
isGameOver,
restartGame,
isVictory,
isRerouting,
WIN_THRESHOLD,
} = useGameEngine();
if (loading) {
return (
<div className="min-h-screen bg-black flex items-center justify-center font-mono text-yellow-500">
<div className="animate-pulse tracking-[0.3em]">{t.SYSTEM.LOADING}</div>
</div>
);
}
if (!gameStarted) return <StartScreen onStart={startGame} />;
const activeDisplayPlanet = selectedPlanet || currentPlanet;
const isViewingCurrentLocation =
!!currentPlanet && activeDisplayPlanet?.id === currentPlanet.id;
return (
<main className="min-h-screen bg-[#050505] pt-24 px-4 flex flex-col items-center pb-12">
<HUD
credits={credits}
hp={hp}
maxHp={10}
location={currentPlanet?.name || t.SYSTEM.DEEP_SPACE}
targetCredits={WIN_THRESHOLD}
/>
<div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-4 gap-6">
<div className="lg:col-span-3">
<GalaxyMap
planets={planets}
currentLocationId={currentLocationId}
selectedPlanetId={selectedPlanet?.id}
onSelectLocation={setSelectedPlanet}
/>
</div>
<div className="lg:col-span-1">
<PowerDistributor
power={power}
onUpdatePower={updatePower}
disabled={isJumping || isRerouting}
isRerouting={isRerouting}
/>
</div>
</div>
<div className="w-full max-w-4xl animate-in fade-in slide-in-from-bottom-4 duration-700">
<ActionPanel
planet={activeDisplayPlanet}
enemy={activeEnemy}
isCurrentLocation={isViewingCurrentLocation}
isLoading={isJumping}
onAction={activeEnemy ? handleAttack : executeJump}
onEscape={executeEscape}
onRepair={handleRepair}
currentHp={hp}
/>
</div>
<div className="w-full max-w-4xl mt-6">
<EventLog logs={logs} />
</div>
{isVictory && <VictoryScreen credits={credits} onRestart={restartGame} />}
{isGameOver && (
<GameOverScreen credits={credits} onRestart={restartGame} />
)}
</main>
);
}