math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

wip mission 2

Browse Source
This commit is contained in:
math-pixel
2026-05-11 16:46:22 +02:00
parent 32d644b09d
commit f7b968abe7
19 changed files with 449 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/3d/CentralObject.tsx
+60
View File
@@ -0,0 +1,60 @@
import { InteractableObject } from "@/components/3d/InteractableObject";
import { useGameStore } from "@/stores/gameStore";
import { Debug } from "@/utils/debug/Debug";
import type { Vector3Tuple } from "@/types/3d";
interface CentralObjectProps {
position: Vector3Tuple;
}
export function CentralObject({
position,
}: CentralObjectProps): React.JSX.Element {
const step = useGameStore((state) => state.step);
const setStep = useGameStore((state) => state.setStep);
const setCanMove = useGameStore((state) => state.setCanMove);
const showDialog = useGameStore((state) => state.showDialog);
const debug = Debug.getInstance();
const handlePress = (): void => {
console.log("[CentralObject] handlePress called, current step:", step);
if (step === "helped") {
console.log("[CentralObject] Transitioning to manipulation");
setCanMove(false);
setStep("manipulation");
} else if (step === "searching") {
console.log("[CentralObject] Showing help message");
showDialog(
"Cet objet est trop lourd pour le porter tout seul, trouve de l'aide",
);
} else {
console.log("[CentralObject] Step is not helped or searching, skipping");
}
};
const shouldShow =
step === "helped" || step === "manipulation" || debug.active;
if (!shouldShow) {
return <></>;
}
console.log("[CentralObject] Rendering, step:", step, "position:", position);
return (
<InteractableObject
kind="trigger"
label="central"
position={position}
onPress={handlePress}
>
<group position={position}>
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="orange" />
</mesh>
</group>
</InteractableObject>
);
}
src/components/3d/VillageoisHelperObject.tsx
+53
View File
@@ -0,0 +1,53 @@
import { InteractableObject } from "@/components/3d/InteractableObject";
import { useGameStore } from "@/stores/gameStore";
import { Debug } from "@/utils/debug/Debug";
import type { Vector3Tuple } from "@/types/3d";
interface VillageoisHelperObjectProps {
position: Vector3Tuple;
}
export function VillageoisHelperObject({
position,
}: VillageoisHelperObjectProps): React.JSX.Element {
const step = useGameStore((state) => state.step);
const setStep = useGameStore((state) => state.setStep);
const debug = Debug.getInstance();
const handlePress = (): void => {
console.log("[VillageoisHelper] handlePress called, current step:", step);
if (step === "searching") {
console.log("[VillageoisHelper] Transitioning to helped");
setStep("helped");
}
};
const shouldShow = step === "searching" || debug.active;
if (!shouldShow) {
return <></>;
}
console.log(
"[VillageoisHelper] Rendering, step:",
step,
"position:",
position,
);
return (
<InteractableObject
kind="trigger"
label="villageois_helper"
position={position}
onPress={handlePress}
>
<group position={position}>
<mesh>
<sphereGeometry args={[0.5, 16, 16]} />
<meshStandardMaterial color="cyan" />
</mesh>
</group>
</InteractableObject>
);
}
src/components/game/GameFlow.tsx
+40 -17
View File
@@ -1,28 +1,23 @@
import { useEffect, useRef, useState } from "react";
import { GameStepManager } from "@/stateManager/GameStepManager";
import { useEffect, useRef } from "react";
import { useGameStore } from "@/stores/gameStore";
import { AudioManager } from "@/stateManager/AudioManager";
import { AUDIO_PATHS } from "@/data/audioConfig";
export function GameFlow(): null {
const manager = GameStepManager.getInstance();
const step = useGameStore((state) => state.step);
const setStep = useGameStore((state) => state.setStep);
const setActivityCity = useGameStore((state) => state.setActivityCity);
const setCanMove = useGameStore((state) => state.setCanMove);
const hasInitialized = useRef(false);
const [step, setStep] = useState(manager.getStep());
useEffect(() => {
const unsubscribe = manager.subscribe(() => {
setStep(manager.getStep());
});
return unsubscribe;
}, [manager]);
useEffect(() => {
console.log("[GameFlow] Current step:", step);
if (!hasInitialized.current && step === "intro") {
hasInitialized.current = true;
console.log("[GameFlow] Transition to start-intro");
manager.transitionTo("start-intro");
setStep("start-intro");
}
}, [step, manager]);
}, [step, setStep]);
useEffect(() => {
console.log("[GameFlow] useEffect triggered, step:", step);
@@ -32,7 +27,7 @@ export function GameFlow(): null {
const audio = AudioManager.getInstance();
audio.playSoundWithCallback(AUDIO_PATHS.intro, 0.5, () => {
console.log("[GameFlow] Intro audio ended, transition to naming");
manager.transitionTo("naming");
setStep("naming");
});
return () => {};
@@ -43,15 +38,43 @@ export function GameFlow(): null {
const audio = AudioManager.getInstance();
audio.playSoundWithCallback(AUDIO_PATHS.bienvenue, 0.5, () => {
console.log("[GameFlow] Bienvenue audio ended, enable movement");
manager.setCanMove(true);
manager.transitionTo("star-move");
setCanMove(true);
setStep("star-move");
});
return () => {};
}
if (step === "mission2") {
console.log("[GameFlow] mission2 - setting activityCity to false");
setActivityCity(false);
const audio = AudioManager.getInstance();
audio.playSound(AUDIO_PATHS.alertCentral, 0.5);
}
if (step === "searching") {
console.log("[GameFlow] Playing searching audio");
const audio = AudioManager.getInstance();
audio.playSoundWithCallback(AUDIO_PATHS.searching, 0.5, () => {
console.log("[GameFlow] searching audio ended");
});
return () => {};
}
if (step === "helped") {
console.log("[GameFlow] Playing helped audio");
const audio = AudioManager.getInstance();
audio.playSound(AUDIO_PATHS.helped, 0.5);
}
if (step === "manipulation") {
console.log("[GameFlow] manipulation - blocking movement");
setCanMove(false);
}
return undefined;
}, [step, manager]);
}, [step, setStep, setActivityCity, setCanMove]);
return null;
}
src/components/ui/DialogMessage.tsx
+54
View File
@@ -0,0 +1,54 @@
import { useEffect, useState } from "react";
interface DialogMessageProps {
message: string;
duration?: number;
onClose?: () => void;
}
export function DialogMessage({
message,
duration = 3000,
onClose,
}: DialogMessageProps): React.JSX.Element | null {
const [visible, setVisible] = useState(true);
useEffect(() => {
const timer = setTimeout(() => {
setVisible(false);
onClose?.();
}, duration);
return () => clearTimeout(timer);
}, [duration, onClose]);
if (!visible) return null;
return (
<div
style={{
position: "fixed",
bottom: "20%",
left: "50%",
transform: "translateX(-50%)",
backgroundColor: "rgba(0, 0, 0, 0.9)",
padding: "1rem 2rem",
borderRadius: "8px",
border: "2px solid #fff",
zIndex: 200,
maxWidth: "80%",
}}
>
<p
style={{
color: "#fff",
margin: 0,
fontSize: "1rem",
textAlign: "center",
}}
>
{message}
</p>
</div>
);
}
src/components/ui/IntroUI.tsx
+7 -4
View File
@@ -1,8 +1,10 @@
import { useState } from "react";
import { useGameStep } from "@/hooks/useGameStep";
import { useGameStore } from "@/stores/gameStore";
export function IntroUI(): React.JSX.Element | null {
const { step, setPlayerName, transitionTo } = useGameStep();
const step = useGameStore((state) => state.step);
const setPlayerName = useGameStore((state) => state.setPlayerName);
const setStep = useGameStore((state) => state.setStep);
const [inputValue, setInputValue] = useState("");
if (step !== "naming") return null;
@@ -13,7 +15,7 @@ export function IntroUI(): React.JSX.Element | null {
console.log("[IntroUI] Submitting, name:", inputValue.trim());
setPlayerName(inputValue.trim());
console.log("[IntroUI] Calling transitionTo('bienvenue')");
transitionTo("bienvenue");
setStep("bienvenue");
console.log("[IntroUI] After transitionTo, step should be:", step);
};
@@ -98,7 +100,8 @@ export function IntroUI(): React.JSX.Element | null {
}
export function BienvenueDisplay(): React.JSX.Element | null {
const { step, playerName } = useGameStep();
const step = useGameStore((state) => state.step);
const playerName = useGameStore((state) => state.playerName);
if (step !== "bienvenue") return null;
src/components/zone/ZoneDetection.tsx
+21 -9
View File
@@ -3,16 +3,31 @@ import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { ZONES } from "@/data/zones";
import { GameStepManager } from "@/stateManager/GameStepManager";
import { useGameStore } from "@/stores/gameStore";
import { Debug } from "@/utils/debug/Debug";
import type { GameStep } from "@/types/game";
const _playerPos = new THREE.Vector3();
const _zonePos = new THREE.Vector3();
const GAME_STEPS: GameStep[] = [
"intro",
"start-intro",
"naming",
"bienvenue",
"star-move",
"mission2",
"searching_problem",
"preparation",
"outOfFabrik",
];
export function ZoneDetection(): null {
const camera = useThree((state) => state.camera);
const manager = GameStepManager.getInstance();
const triggeredZones = useRef<Set<string>>(new Set());
const debug = Debug.getInstance();
const step = useGameStore((state) => state.step);
useEffect(() => {
if (!debug.active) return;
@@ -20,20 +35,17 @@ export function ZoneDetection(): null {
const folder = debug.createFolder("Game");
if (!folder) return;
const gameState = { step: manager.getStep() };
const gameState = { step: step };
const playerPos = { x: 0, y: 0, z: 0 };
folder
.add(gameState, "step", ["intro", "bike"])
.name("Game Step")
.disable();
folder.add(gameState, "step", GAME_STEPS).name("Game Step").disable();
folder.add(playerPos, "x").name("Player X").listen().disable();
folder.add(playerPos, "y").name("Player Y").listen().disable();
folder.add(playerPos, "z").name("Player Z").listen().disable();
const unsubManager = manager.subscribe(() => {
gameState.step = manager.getStep();
const unsubStore = useGameStore.subscribe((state) => {
gameState.step = state.step;
folder.controllersRecursive().forEach((c) => c.updateDisplay());
});
@@ -51,9 +63,9 @@ export function ZoneDetection(): null {
return () => {
cancelAnimationFrame(frameId);
debug.destroyFolder("Game");
unsubManager();
unsubStore();
};
}, [debug, manager, camera]);
}, [debug, camera, step]);
useFrame(() => {
camera.getWorldPosition(_playerPos);