update remove naming step
This commit is contained in:
@@ -20,7 +20,7 @@ export function GameFlow(): null {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (step === "sequence_video" && !isCinematicPlaying) {
|
if (step === "sequence_video" && !isCinematicPlaying) {
|
||||||
setStep("naming");
|
setStep("start-move");
|
||||||
}
|
}
|
||||||
}, [step, isCinematicPlaying, setStep]);
|
}, [step, isCinematicPlaying, setStep]);
|
||||||
|
|
||||||
|
|||||||
@@ -1,101 +1,5 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useGameStore } from "@/managers/stores/useGameStore";
|
import { useGameStore } from "@/managers/stores/useGameStore";
|
||||||
|
|
||||||
export function IntroUI(): React.JSX.Element | null {
|
|
||||||
const step = useGameStore((state) => state.intro.currentStep);
|
|
||||||
const setPlayerName = useGameStore((state) => state.setPlayerName);
|
|
||||||
const setStep = useGameStore((state) => state.setIntroStep);
|
|
||||||
const [inputValue, setInputValue] = useState("");
|
|
||||||
|
|
||||||
if (step !== "naming") return null;
|
|
||||||
|
|
||||||
const handleSubmit = (): void => {
|
|
||||||
if (inputValue.trim() === "") return;
|
|
||||||
|
|
||||||
setPlayerName(inputValue.trim());
|
|
||||||
setStep("start-move");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent): void => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
handleSubmit();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: "fixed",
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
|
||||||
zIndex: 1000,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
backgroundColor: "#1a1a1a",
|
|
||||||
padding: "2rem",
|
|
||||||
borderRadius: "12px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
gap: "1.5rem",
|
|
||||||
minWidth: "300px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
style={{
|
|
||||||
color: "#fff",
|
|
||||||
margin: 0,
|
|
||||||
fontSize: "1.5rem",
|
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Quel est votre prenom ?
|
|
||||||
</h2>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={inputValue}
|
|
||||||
onChange={(e) => setInputValue(e.target.value)}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
placeholder="Votre prenom"
|
|
||||||
autoFocus
|
|
||||||
style={{
|
|
||||||
padding: "0.75rem",
|
|
||||||
fontSize: "1rem",
|
|
||||||
borderRadius: "6px",
|
|
||||||
border: "1px solid #444",
|
|
||||||
backgroundColor: "#2a2a2a",
|
|
||||||
color: "#fff",
|
|
||||||
outline: "none",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
disabled={inputValue.trim() === ""}
|
|
||||||
style={{
|
|
||||||
padding: "0.75rem",
|
|
||||||
fontSize: "1rem",
|
|
||||||
borderRadius: "6px",
|
|
||||||
border: "none",
|
|
||||||
backgroundColor: inputValue.trim() ? "#4a9" : "#444",
|
|
||||||
color: "#fff",
|
|
||||||
cursor: inputValue.trim() ? "pointer" : "not-allowed",
|
|
||||||
transition: "background-color 0.2s",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Valider
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BienvenueDisplay(): React.JSX.Element | null {
|
export function BienvenueDisplay(): React.JSX.Element | null {
|
||||||
const step = useGameStore((state) => state.intro.currentStep);
|
const step = useGameStore((state) => state.intro.currentStep);
|
||||||
const playerName = useGameStore((state) => state.missionFlow.playerName);
|
const playerName = useGameStore((state) => state.missionFlow.playerName);
|
||||||
|
|||||||
+1
-2
@@ -4,7 +4,7 @@ import * as THREE from "three";
|
|||||||
import { DebugPerf } from "@/components/debug/DebugPerf";
|
import { DebugPerf } from "@/components/debug/DebugPerf";
|
||||||
import { DialogMessage } from "@/components/ui/DialogMessage";
|
import { DialogMessage } from "@/components/ui/DialogMessage";
|
||||||
import { GameUI } from "@/components/ui/GameUI";
|
import { GameUI } from "@/components/ui/GameUI";
|
||||||
import { BienvenueDisplay, IntroUI } from "@/components/ui/IntroUI";
|
import { BienvenueDisplay } from "@/components/ui/IntroUI";
|
||||||
import { SceneLoadingOverlay } from "@/components/ui/SceneLoadingOverlay";
|
import { SceneLoadingOverlay } from "@/components/ui/SceneLoadingOverlay";
|
||||||
import { useGameStore } from "@/managers/stores/useGameStore";
|
import { useGameStore } from "@/managers/stores/useGameStore";
|
||||||
import { HandTrackingProvider } from "@/providers/gameplay/HandTrackingProvider";
|
import { HandTrackingProvider } from "@/providers/gameplay/HandTrackingProvider";
|
||||||
@@ -68,7 +68,6 @@ export function HomePage(): React.JSX.Element {
|
|||||||
</Suspense>
|
</Suspense>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
<GameUI />
|
<GameUI />
|
||||||
<IntroUI />
|
|
||||||
<BienvenueDisplay />
|
<BienvenueDisplay />
|
||||||
{dialogMessage ? (
|
{dialogMessage ? (
|
||||||
<DialogMessage
|
<DialogMessage
|
||||||
|
|||||||
+1
-7
@@ -1,16 +1,10 @@
|
|||||||
import type { Vector3Tuple } from "@/types/three/three";
|
import type { Vector3Tuple } from "@/types/three/three";
|
||||||
|
|
||||||
export type GameStep =
|
export type GameStep = "intro" | "sequence_video" | "start-move" | "bike";
|
||||||
| "intro"
|
|
||||||
| "sequence_video"
|
|
||||||
| "naming"
|
|
||||||
| "start-move"
|
|
||||||
| "bike";
|
|
||||||
|
|
||||||
export const GAME_STEPS: readonly GameStep[] = [
|
export const GAME_STEPS: readonly GameStep[] = [
|
||||||
"intro",
|
"intro",
|
||||||
"sequence_video",
|
"sequence_video",
|
||||||
"naming",
|
|
||||||
"start-move",
|
"start-move",
|
||||||
"bike",
|
"bike",
|
||||||
] as const;
|
] as const;
|
||||||
|
|||||||
Reference in New Issue
Block a user