math-pixel
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Suspense, useEffect } from "react";
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { Crosshair } from "@/components/ui/Crosshair";
|
|
import { InteractPrompt } from "@/components/ui/InteractPrompt";
|
|
import { IntroUI, BienvenueDisplay } from "@/components/ui/IntroUI";
|
|
import { DialogMessage } from "@/components/ui/DialogMessage";
|
|
import { useGameStore } from "@/stores/gameStore";
|
|
import { DebugPerf } from "@/utils/debug/DebugPerf";
|
|
import { World } from "@/world/World";
|
|
|
|
function App(): React.JSX.Element {
|
|
const dialogMessage = useGameStore((state) => state.dialogMessage);
|
|
const hideDialog = useGameStore((state) => state.hideDialog);
|
|
|
|
useEffect(() => {
|
|
if (dialogMessage) {
|
|
const timer = setTimeout(() => {
|
|
hideDialog();
|
|
}, 3000);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [dialogMessage, hideDialog]);
|
|
|
|
return (
|
|
<>
|
|
<Canvas camera={{ position: [85, 60, 85], fov: 42 }} shadows>
|
|
<Suspense fallback={null}>
|
|
<World />
|
|
<DebugPerf />
|
|
</Suspense>
|
|
</Canvas>
|
|
<Crosshair />
|
|
<InteractPrompt />
|
|
<IntroUI />
|
|
<BienvenueDisplay />
|
|
{dialogMessage && (
|
|
<DialogMessage
|
|
message={dialogMessage}
|
|
duration={3000}
|
|
onClose={hideDialog}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|