From 6f9817db6d00340125a3755c9ba6b25e77b2ac27 Mon Sep 17 00:00:00 2001 From: Tom Boullay Date: Fri, 8 May 2026 03:07:52 +0100 Subject: [PATCH] add: playground in testmap --- docs/technical/architecture.md | 3 ++- docs/user/features.md | 3 ++- docs/user/main-feature.md | 2 ++ src/data/debug/testSceneConfig.ts | 29 +++++++++++++++++++++ src/data/docs/docsTranslations.ts | 6 +++-- src/world/debug/TestMap.tsx | 43 +++++++++++++++++++++++++++++++ 6 files changed, 82 insertions(+), 4 deletions(-) diff --git a/docs/technical/architecture.md b/docs/technical/architecture.md index f368e91..78ad9e4 100644 --- a/docs/technical/architecture.md +++ b/docs/technical/architecture.md @@ -16,7 +16,7 @@ This document describes the code that exists today in the repository. - the player rig when the active camera mode is `player` - `src/world/GameMap.tsx` loads map nodes from `public/map.json`, resolves available models, and builds the collision octree. - `src/world/GameStageContent.tsx` is wrapped in Rapier `Physics` in the production game scene so stage gameplay objects can use physics without moving the map or player to Rapier. It now mounts reusable `RepairGame` instances for `bike`, `pylone`, and `ferme` mission states. -- `src/world/debug/TestMap.tsx` provides a debug-oriented interaction and physics map. +- `src/world/debug/TestMap.tsx` provides a debug-oriented interaction and physics map with the existing grab/trigger/model-preview objects plus separate `Bike`, `Pylone`, and `Farm` repair playground zones. - `src/world/player/Player.tsx` mounts the camera and controller. - `src/world/player/PlayerController.tsx` owns pointer lock movement, jump handling, and interaction input. @@ -26,6 +26,7 @@ The project currently uses two collision layers with separate responsibilities: - `GameMap` builds an octree used by the player controller for map collision. - `GameStageContent` is wrapped in Rapier `Physics` for gameplay objects such as repair triggers, cases, grabbables, and future mission-specific objects. +- `TestMap` owns its own Rapier `Physics` playground so repair gameplay can be tuned per mission state without depending on the production map layout. Keep the player and map octree outside the Rapier provider until there is a deliberate migration plan. This avoids mixing player movement rules with object physics before the gameplay systems need it. diff --git a/docs/user/features.md b/docs/user/features.md index 07e5ba0..c86c1b0 100644 --- a/docs/user/features.md +++ b/docs/user/features.md @@ -6,7 +6,7 @@ This document lists features that are implemented in the current codebase. - Fullscreen React Three Fiber scene - Main map scene loaded from `public/map.json` and matching `public/models/{name}/model.glb` or `model.gltf` assets -- Debug physics test scene selectable from the debug panel +- Debug physics test scene selectable from the debug panel, including grab/trigger tests, an animated model preview, and separate repair playground zones for `bike`, `pylone`, and `ferme` - Rapier physics context available for production stage gameplay objects - Ambient and directional lighting - Environment background setup @@ -30,6 +30,7 @@ This document lists features that are implemented in the current codebase. ## Repair Gameplay - Reusable production `RepairGame` mounted for `bike`, `pylone`, and `ferme` mission states +- Debug physics playground mounts the same reusable `RepairGame` in `Bike`, `Pylone`, and `Farm` zones so each state can be tuned with isolated positioning before moving placement into the production map - Repair mission config shared through `src/data/gameplay/repairMissions.ts`, including per-mission broken nodes, placeholder targets, scan timing, and reassembly timing - Repair-game flow supports `waiting -> inspected -> fragmented -> scanning -> repairing -> reassembling -> done -> next mission` with `.webm` prompts, repair case spawn/opening/exit, focused repair-case view, case placeholder traversal, snap-to-placeholder placement, broken-part deposit, `E`, two-fists hold input, exploded and inverse reassembly transitions, completion particles, per-part scan visuals, persistent red broken-part markers, centered broken-part UI videos, multiple grabbable replacement choices, correct-part install validation, and mission completion diff --git a/docs/user/main-feature.md b/docs/user/main-feature.md index b192aac..994e5be 100644 --- a/docs/user/main-feature.md +++ b/docs/user/main-feature.md @@ -86,6 +86,8 @@ Debug URL for state switching and inspection: http://localhost:5173/?debug ``` +The debug physics scene keeps the existing grab, trigger, and animated model tests, and also exposes separate `Bike`, `Pylone`, and `Farm` repair playground zones. Use the debug game-state panel to switch `mainState`; the matching repair zone mounts the same reusable `RepairGame` flow with that mission's model, broken parts, replacement parts, prompts, and timings. + ## Related Hand Tracking Hand tracking can move grabbable physics objects with webcam input in debug scenes. In the production repair flow, it is also used for the `inspected -> fragmented` transition through the two-fists hold gesture. diff --git a/src/data/debug/testSceneConfig.ts b/src/data/debug/testSceneConfig.ts index 568967b..3edd84b 100644 --- a/src/data/debug/testSceneConfig.ts +++ b/src/data/debug/testSceneConfig.ts @@ -19,3 +19,32 @@ export const TEST_SCENE_TRIGGER_SEGMENTS = 32; export const TEST_SCENE_TRIGGER_COLOR = "#3b82f6"; export const TEST_SCENE_TRIGGER_ROUGHNESS = 0.3; export const TEST_SCENE_TRIGGER_METALNESS = 0.5; + +export const TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS = 1.65; +export const TEST_SCENE_REPAIR_ZONE_MARKER_TUBE_RADIUS = 0.045; + +export const TEST_SCENE_REPAIR_ZONES = [ + { + mission: "bike", + label: "Bike", + color: "#38bdf8", + position: [-12, 0, -12], + }, + { + mission: "pylone", + label: "Pylone", + color: "#facc15", + position: [0, 0, -12], + }, + { + mission: "ferme", + label: "Farm", + color: "#86efac", + position: [12, 0, -12], + }, +] as const satisfies readonly { + mission: "bike" | "pylone" | "ferme"; + label: string; + color: string; + position: Vector3Tuple; +}[]; diff --git a/src/data/docs/docsTranslations.ts b/src/data/docs/docsTranslations.ts index 889d5a6..22ec2a0 100644 --- a/src/data/docs/docsTranslations.ts +++ b/src/data/docs/docsTranslations.ts @@ -99,7 +99,7 @@ Ce document décrit le code réellement présent aujourd'hui dans le dépôt. - le rig joueur quand le mode caméra actif est \`player\` - \`src/world/GameMap.tsx\` charge les modèles de carte disponibles et construit l'octree de collision. - \`src/world/GameStageContent.tsx\` est enveloppé dans le contexte Rapier \`Physics\` dans la scène de jeu de production afin que les objets gameplay de stage puissent utiliser la physique sans migrer la carte ou le joueur vers Rapier. Il monte maintenant des instances réutilisables de \`RepairGame\` pour les états de mission \`bike\`, \`pylone\` et \`ferme\`. -- \`src/world/debug/TestMap.tsx\` fournit une carte orientée debug pour les interactions et la physique. +- \`src/world/debug/TestMap.tsx\` fournit une carte orientée debug pour les interactions et la physique, avec les objets existants de grab, trigger et preview de modèle, plus des zones playground de réparation séparées \`Bike\`, \`Pylone\` et \`Farm\`. - \`src/world/player/Player.tsx\` monte la caméra et le contrôleur. - \`src/world/player/PlayerController.tsx\` gère le mouvement pointer lock, le saut et les inputs d'interaction. @@ -109,6 +109,7 @@ Le projet utilise actuellement deux couches de collision avec des responsabilit - \`GameMap\` construit une octree utilisée par le contrôleur joueur pour les collisions avec la carte. - \`GameStageContent\` est enveloppé dans Rapier \`Physics\` pour les objets gameplay comme les triggers de réparation, les mallettes, les objets saisissables et les futurs objets spécifiques aux missions. +- \`TestMap\` possède son propre playground Rapier \`Physics\` afin de peaufiner le gameplay de réparation par state de mission sans dépendre du placement de la carte de production. Le joueur et l'octree de carte doivent rester hors du provider Rapier tant qu'il n'existe pas de plan de migration volontaire. Cela évite de mélanger les règles de déplacement joueur avec la physique d'objets avant que les systèmes gameplay en aient besoin. @@ -417,7 +418,7 @@ Ce document liste les fonctionnalités présentes dans le code actuel. - Scène React Three Fiber plein écran - Carte principale chargée depuis \`public/models/{name}/model.glb\`, avec fallback vers \`model.gltf\` -- Scène de test physique debug sélectionnable depuis le panneau debug +- Scène de test physique debug sélectionnable depuis le panneau debug, avec tests grab/trigger, preview de modèle animé et zones playground de réparation séparées pour \`bike\`, \`pylone\` et \`ferme\` - Contexte physique Rapier disponible pour les objets gameplay de stage en production - Éclairage ambiant et directionnel - Configuration de l'environnement de fond @@ -441,6 +442,7 @@ Ce document liste les fonctionnalités présentes dans le code actuel. ## Gameplay de réparation - \`RepairGame\` de production réutilisable monté pour les états de mission \`bike\`, \`pylone\` et \`ferme\` +- Le playground physics debug monte le même \`RepairGame\` réutilisable dans des zones \`Bike\`, \`Pylone\` et \`Farm\`, afin de peaufiner chaque state avec un placement isolé avant déplacement vers la carte de production - Configuration de mission partagée via \`src/data/gameplay/repairMissions.ts\`, avec nodes cassés, placeholders cibles, timing de scan et timing de réassemblage propres à chaque mission - Flow repair-game avec \`waiting -> inspected -> fragmented -> scanning -> repairing -> reassembling -> done -> next mission\`, prompts \`.webm\`, apparition/ouverture/sortie de la mallette, vue focalisée de la mallette, traverse des placeholders de mallette, placement avec snap vers placeholder, dépôt des pièces cassées, touche \`E\`, hold deux poings, transition de modèle explosé, réassemblage inverse avec particules, scan visuel par pièce, marqueur rouge persistant et vidéo UI centrée sur les pièces cassées, plusieurs choix de pièces grabbables, validation de la bonne pièce et complétion de mission diff --git a/src/world/debug/TestMap.tsx b/src/world/debug/TestMap.tsx index 14082af..1c2576e 100644 --- a/src/world/debug/TestMap.tsx +++ b/src/world/debug/TestMap.tsx @@ -2,6 +2,7 @@ import type { ReactNode } from "react"; import { Component, useRef } from "react"; import * as THREE from "three"; import { Physics, RigidBody, CuboidCollider } from "@react-three/rapier"; +import { RepairGame } from "@/components/three/gameplay/RepairGame"; import { GrabbableObject } from "@/components/three/interaction/GrabbableObject"; import { AnimatedModel } from "@/components/three/models/AnimatedModel"; import { TriggerObject } from "@/components/three/interaction/TriggerObject"; @@ -14,6 +15,9 @@ import { TEST_SCENE_GRABBABLE_METALNESS, TEST_SCENE_GRABBABLE_POSITION, TEST_SCENE_GRABBABLE_ROUGHNESS, + TEST_SCENE_REPAIR_ZONE_MARKER_RADIUS, + TEST_SCENE_REPAIR_ZONE_MARKER_TUBE_RADIUS, + TEST_SCENE_REPAIR_ZONES, TEST_SCENE_TRIGGER_COLOR, TEST_SCENE_TRIGGER_METALNESS, TEST_SCENE_TRIGGER_POSITION, @@ -42,6 +46,10 @@ interface ModelPreviewErrorBoundaryState { hasError: boolean; } +interface RepairPlaygroundZoneMarkerProps { + color: string; +} + class ModelPreviewErrorBoundary extends Component< ModelPreviewErrorBoundaryProps, ModelPreviewErrorBoundaryState @@ -132,6 +140,13 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element { /> + + {TEST_SCENE_REPAIR_ZONES.map((zone) => ( + + + + + ))} @@ -145,3 +160,31 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element { ); } + +function RepairPlaygroundZoneMarker({ + color, +}: RepairPlaygroundZoneMarkerProps): React.JSX.Element { + return ( + + + + + + + + + + + ); +}