241 Commits

Author SHA1 Message Date
Tom Boullay 0e32c76bce add: blocked repair install feedback 2026-05-11 12:56:54 +02:00
Tom Boullay f9340ae57d update: feedback repair model and improve repair case interaction feedback 2026-05-11 12:54:54 +02:00
Tom Boullay 3f26c38e12 Update RepairCaseModel.tsx 2026-05-11 12:48:38 +02:00
Tom Boullay e5dee697f4 fix: clarify repair mission locked flow 2026-05-11 12:10:35 +02:00
Tom Boullay b90f33d9c2 update: stabilize repair mission stage mounting 2026-05-11 11:51:06 +02:00
Tom Boullay e8fefe411e fix: preload repair mission assets 2026-05-11 11:47:20 +02:00
Tom Boullay 105fdac0ca fix repair game suspense boundaries 2026-05-11 11:37:54 +02:00
Tom Boullay 31b5841a6e fix: add tracking + add new models 2026-05-11 11:25:17 +02:00
Tom Boullay 2753e15ec7 add: loading 2026-05-11 11:11:46 +02:00
Tom Boullay a2adcc3eda add: reusable world video prompt billboard 2026-05-09 01:28:06 +01:00
Tom Boullay cfae8cd734 fix repair game interaction coordinate spaces 2026-05-09 01:19:16 +01:00
Tom Boullay 6f9817db6d add: playground in testmap 2026-05-08 03:07:52 +01:00
Tom Boullay ee44b44432 big clean up 2026-05-08 03:02:26 +01:00
Tom Boullay 0b519a20dc add: configure mission-specific repair variants 2026-05-08 02:41:57 +01:00
Tom Boullay 41a3846205 add: animate repair reassembly 2026-05-08 02:40:31 +01:00
Tom Boullay 1589298b09 add: require broken part deposit before repair 2026-05-08 02:36:14 +01:00
Tom Boullay b42af7279a add: snap repair parts to case placeholders 2026-05-08 02:33:06 +01:00
Tom Boullay d243872862 add: focus repair case view 2026-05-08 02:22:15 +01:00
Tom Boullay 19dbcf6d15 fix: track Logger filename casing 2026-05-08 02:20:14 +01:00
Tom Boullay 692a9ae7dd add: show broken part prompt during scan 2026-05-08 02:18:00 +01:00
Tom Boullay e88be06077 add: highlight broken repair parts during scan 2026-05-08 02:16:13 +01:00
Tom Boullay aa1284445c add: scan fragmented repair parts sequentially 2026-05-08 02:12:58 +01:00
Tom Boullay 80bc74c3a8 add: animation on repair case 2026-05-08 02:10:19 +01:00
Tom Boullay 1a4c5cdc5e clean: remove obsolete repair debug code + unused core utilities 2026-05-08 02:07:03 +01:00
Tom Boullay 6cf49e2dd1 add: repair mission completion step 2026-05-08 01:48:40 +01:00
Tom Boullay ebca91c82d update: validate correct repair replacement part 2026-05-08 01:47:07 +01:00
Tom Boullay 2a3ba7055c update: require replacement placement before repair completion 2026-05-08 01:45:00 +01:00
Tom Boullay 613c4510b7 add: repair install completion step 2026-05-08 01:41:29 +01:00
Tom Boullay 1096f39fbb add: repair fragmentation and scan flow 2026-05-08 01:39:23 +01:00
Tom Boullay 719f799515 update: enable hand tracking for repair steps (not only when we are close to something) 2026-05-08 01:30:27 +01:00
Tom Boullay c9db2637a6 add: repair game inspection sub state 2026-05-08 01:27:32 +01:00
Tom Boullay f15d08de95 add: physics in game scene 2026-05-08 01:17:35 +01:00
Tom Boullay 1dfbdd1d65 add: repair mission config 2026-05-08 01:14:30 +01:00
Tom Boullay 118e5f3b4a update: add generic repair mission store helpers 2026-05-08 01:09:42 +01:00
Tom Boullay b0bb127459 Merge pull request #7 from La-Fabrik-Durable/feat/main-feature
Feat/main feature
2026-05-08 01:56:18 +02:00
Tom Boullay f84aa748cd Update HandTrackingGlove.tsx 2026-05-08 00:54:42 +01:00
Tom Boullay a1ff534aa7 add hand tracking source debug switch 2026-05-06 23:23:10 +01:00
Tom Boullay 5824ae162a add browser hand tracking source 2026-05-06 23:23:04 +01:00
Tom Boullay d7dd76a853 fix hand tracking glove root transform 2026-05-06 23:22:56 +01:00
Tom Boullay 9a1849b0f8 fix: flickering hands 2026-05-06 23:16:58 +01:00
Tom Boullay 74a901a48b fix; distance grab objetc 2026-05-02 21:34:23 +02:00
Tom Boullay 584a68bce6 add hand tracking glove bone mapping 2026-05-02 11:38:02 +02:00
Tom Boullay 94cea80af4 fix hand tracking glove fallback and loading 2026-05-02 11:35:28 +02:00
Tom Boullay 0b950a4557 fix hand tracking glove rendering 2026-05-02 11:32:00 +02:00
Tom Boullay 442bfbc8d4 update: remove old model elec 2026-05-02 11:02:51 +02:00
Tom Boullay 5bd0680b64 fix three and rapier warning dependencies 2026-05-02 11:01:50 +02:00
Tom Boullay 04ece5b1d2 fix electricienne debug model loading 2026-05-02 10:58:00 +02:00
Tom Boullay 8fbb2e9428 feat add left hand tracking glove model 2026-05-02 00:14:56 +02:00
Tom Boullay 2aa662669f feat add model loading diagnostics 2026-05-02 00:14:47 +02:00
Tom Boullay 4031f0de87 cleaning repo models 2026-05-01 23:54:48 +02:00
Tom Boullay e6d78d203a update: models made them working 2026-05-01 23:45:58 +02:00
Tom Boullay 50ddd35979 update: debug overlay layout controls 2026-05-01 23:39:04 +02:00
Tom Boullay 6f264969ee Update TestMap.tsx 2026-04-30 16:29:56 +02:00
Tom Boullay 106b68d487 connect repair gameplay to zustand progression 2026-04-30 16:25:54 +02:00
Tom Boullay aaedd9e3a4 fix: models 2026-04-30 15:48:45 +02:00
Tom Boullay 1b50fe4f5b Merge branch 'develop' into feat/main-feature 2026-04-30 15:48:35 +02:00
Tom Boullay 4bc385fb09 Update arbre.bin 2026-04-30 15:09:27 +02:00
Tom Boullay 65450d9208 Merge branch 'design' into feat/main-feature 2026-04-30 15:09:22 +02:00
Tom Boullay 9fa4439de8 Merge pull request #11 from La-Fabrik-Durable/feat/zustand
Feat/zustand
2026-04-30 15:07:44 +02:00
Tom Boullay c7128d58ed resolve three component type exports 2026-04-30 15:06:26 +02:00
Tom Boullay 0858525c44 address zustand progression review feedback 2026-04-30 14:59:41 +02:00
Tom Boullay e7bb4d2b63 clarify managers and zustand store responsibilities 2026-04-30 14:38:07 +02:00
Tom Boullay 0f845f28c5 add zustand game state 2026-04-30 14:29:29 +02:00
Tom Boullay d740e2a436 add : some sounds 2026-04-30 14:25:36 +02:00
Tom Boullay cf20aa8ea4 connect game progression state to world 2026-04-30 14:24:59 +02:00
Tom Boullay 85b91e63cb add zustand game progression store 2026-04-30 14:04:01 +02:00
Tom Boullay 9998fb65f8 chore: align repo health checks and docs 2026-04-30 13:51:39 +02:00
Tom Boullay c5b672cdb5 add: prettier eslint 2026-04-30 13:36:07 +02:00
Tom Boullay fda70bade2 refactor: clean architecture and remove unused code 2026-04-30 13:33:28 +02:00
Tom Boullay c698b9ef78 refactor: split hooks types and utils by domain 2026-04-30 11:49:18 +02:00
Tom Boullay 081e87c96d refactor: organize three components by domain 2026-04-30 11:35:53 +02:00
Tom Boullay ab8376b03e fix: correct repair case open state rotation 2026-04-30 10:42:47 +02:00
Tom Boullay d5f537eb8b feat: add game music loop and mallette sounds 2026-04-30 10:06:00 +02:00
Tom Boullay 475a4c7c5e refactor: prepare main feature gameplay object and use GLB sky model 2026-04-30 10:02:00 +02:00
Tom Boullay d7b77b2f44 feat: expand main feature model catalog 2026-04-29 23:30:40 +02:00
Tom Boullay 793997ed06 feat: add main feature module selection 2026-04-29 23:30:31 +02:00
Tom Boullay 72e4047420 feat: add openable repair case model 2026-04-29 23:30:22 +02:00
Tom Boullay 638e10a132 chore: track bin assets with lfs 2026-04-29 17:07:44 +02:00
Tom Boullay 4e594d36fa Merge remote-tracking branch 'origin/feat/main-feature' into feat/main-feature
# Conflicts:
#	src/world/GameMap.tsx
2026-04-29 16:57:58 +02:00
Tom Boullay 3a0639bdaa feat: support glb model assets 2026-04-29 16:18:24 +02:00
Tom Boullay d0361c0a38 Merge branch 'develop' into feat/main-feature 2026-04-29 15:01:17 +02:00
Tom Boullay 471424f83d update: docs 2026-04-29 13:01:10 +02:00
math-pixel 60c966be93 Merge branch 'design' of https://github.com/La-Fabrik-Durable/La-Fabrik into design 2026-04-29 12:16:51 +02:00
math-pixel 62deb6e322 add object 2026-04-29 12:00:11 +02:00
math-pixel bc3f28bdb2 feat: add tree 2026-04-29 11:57:43 +02:00
Tom Boullay 2a3b088294 fix: position perf panel beside debug gui 2026-04-29 11:56:46 +02:00
math-pixel 4e8a68b04a Merge pull request #10 from La-Fabrik-Durable/feat-animation
🔍 Lint / 🪄 Check lint (push) Has been cancelled
🔍 Lint / 🎨 Check format (push) Has been cancelled
🔍 Lint / 🔎 Typecheck (push) Has been cancelled
🔍 Lint / 🏗 Build (push) Has been cancelled
📊 Quality / 🔒 Security Audit (push) Has been cancelled
📊 Quality / 📋 Dependency Freshness (push) Has been cancelled
📊 Quality / 📦 Bundle Size (push) Has been cancelled
Feat/animation
2026-04-29 11:50:07 +02:00
Tom Boullay 5627373752 feat: improve hand grab targeting 2026-04-29 11:40:17 +02:00
math-pixel b997f576c5 fix: pr 2026-04-29 11:35:17 +02:00
math-pixel 20142b7e5f Merge branch 'feat-animation' of https://github.com/La-Fabrik-Durable/La-Fabrik into feat-animation 2026-04-29 11:23:57 +02:00
math-pixel 2b6b045f4a fix: pr issues 2026-04-29 11:23:40 +02:00
Tom Boullay 5b14a1d971 fix: decouple hand tracking from crosshair focus 2026-04-29 11:13:11 +02:00
math-pixel 29cd03fc21 Update src/hooks/useCharacterAnimation.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2026-04-29 11:07:40 +02:00
math-pixel 7c5d7f3834 update: animation doc 2026-04-29 11:00:32 +02:00
Tom Boullay 7a3dd976e7 update: upload-gltf add a new model -> createurdepluie
📦 Model
   model.gltf

🎨 Textures (color)
   color_bac_eau.png (compressed)
   color_cable_1.png (compressed)
   color_cable_2.png (compressed)
   color_refroidisseur.png (compressed)
   color_resistance.png (compressed)
   color_shell.png (compressed)
   color_tuyau.png (compressed)

🧭 Textures (normal)
   normal_bac_eau.png (compressed)
   normal_cable_1.png (compressed)
   normal_cable_2.png (compressed)
   normal_refroidisseur.png (compressed)
   normal_resistance.png (compressed)
   normal_shell.png (compressed)
   normal_tuyau.png (compressed)

🧱 Textures (orm)
   orm_bac_eau.png (compressed)
   orm_cable_1.png (compressed)
   orm_cable_2.png (compressed)
   orm_refroidisseur.png (compressed)
   orm_resistance.png (compressed)
   orm_shell.png (compressed)
   orm_tuyau.png (compressed)

🧩 Assets
   createurdepluie2.bin
2026-04-29 11:00:08 +02:00
Tom Boullay fffabc01c2 feat: improve fist grab depth tracking 2026-04-29 10:52:35 +02:00
math-pixel 93744b15f7 fix : comflic 2026-04-29 10:51:40 +02:00
Tom Boullay c5bf10a7fb update: upload-gltf add a new model -> hand_l
📦 Model
   model.gltf

🎨 Textures (color)
   color_gant.png (compressed)

🧭 Textures (normal)
   normal_gant.png (compressed)

🧱 Textures (orm)
   orm_gant.png (compressed)

🧩 Assets
   hanf_l.bin
2026-04-29 10:45:16 +02:00
Tom Boullay d9fc9d0a15 feat: grab objects with closed fist raycast 2026-04-29 10:40:48 +02:00
Tom Boullay d4dd0fa283 refactor: replace pinch gesture with fist gesture 2026-04-29 10:34:11 +02:00
Tom Boullay e42c06b888 update: upload-gltf add a new model -> gant_r
📦 Model
   model.gltf

🎨 Textures (color)
   color_gant.png (compressed)

🧭 Textures (normal)
   normal_gant.png (compressed)

🧱 Textures (orm)
   orm_gant.png (compressed)

🧩 Assets
   gant_r.bin
2026-04-29 10:03:04 +02:00
Tom Boullay 3230b644e4 update: upload-gltf add a new model -> gant_r_pad
📦 Model
   model.gltf

🎨 Textures (color)
   color_galet.png (compressed)
   color_gant.png (compressed)

🧭 Textures (normal)
   normal_galet.png (compressed)
   normal_gant.png (compressed)

🧱 Textures (orm)
   orm_galet.png (compressed)
   orm_gant.png (compressed)

🧩 Assets
   gant_r_pad.bin
2026-04-29 10:02:21 +02:00
Tom Boullay 3503ff52ed fix: guard hand landmark visualization 2026-04-29 09:52:46 +02:00
Tom Boullay a8ece3a448 Create model.gltf 2026-04-29 09:05:04 +02:00
Tom Boullay 3f1e15f616 Merge branch 'design' into feat/main-feature 2026-04-29 09:05:00 +02:00
Tom Boullay b0f0f3cb91 update: upload-gltf add a new model -> talkie
📦 Model
   model.gltf

🎨 Textures (color)
   color_boutonb.png (compressed)
   color_e_cran.png (compressed)
   color_boutona.png (compressed)
   color_cadre.png (compressed)
   color_hautparleur.png (compressed)
   color_touches.png (compressed)
   color_cable2.png (compressed)
   color_talkie.png (compressed)
   color_antenne.png (compressed)
   color_prise.png (compressed)
   color_cable1.png (compressed)

🪶 Textures (roughness)
   roughness_talkie.png (compressed)
   roughness_antenne.png (compressed)
   roughness_touches.png (compressed)
   roughness_prise.png (compressed)
   roughness_hautparleur.png (compressed)
   roughness_cable2.png (compressed)
   roughness_cable1.png (compressed)
   roughness_cadre.png (compressed)
   roughness_boutonb.png (compressed)
   roughness_e_cran.png (compressed)
   roughness_boutona.png (compressed)

🧭 Textures (normal)
   cadre_normal_opengl.png (compressed)
   talkie_normal_opengl.png (compressed)
   hautparleur_normal_opengl.png (compressed)
   hautparleur_normal.png (compressed)
   prise_normal_opengl.png (compressed)
   boutonb_normal_opengl.png (compressed)
   touches_normal.png (compressed)
   antenne_normal.png (compressed)
   boutona_normal_opengl.png (compressed)
   cadre_normal.png (compressed)
   touches_normal_opengl.png (compressed)
   e_cran_normal.png (compressed)
   cable2_normal.png (compressed)
   boutona_normal.png (compressed)
   talkie_normal.png (compressed)
   cable1_normal.png (compressed)
   boutonb_normal.png (compressed)
   prise_normal.png (compressed)
   cable2_normal_opengl.png (compressed)
   antenne_normal_opengl.png (compressed)
   cable1_normal_opengl.png (compressed)
   e_cran_normal_opengl.png (compressed)

🔩 Textures (metalness)
   metalness_cable1.png (compressed)
   metalness_boutonb.png (compressed)
   metalness_touches.png (compressed)
   metalness_e_cran.png (compressed)
   metalness_boutona.png (compressed)
   metalness_talkie.png (compressed)
   metalness_antenne.png (compressed)
   metalness_hautparleur.png (compressed)
   metalness_cadre.png (compressed)
   metalness_cable2.png (compressed)
   metalness_prise.png (compressed)

⛰ Textures (height)
   height_hautparleur.png (compressed)
   height_touches.png (compressed)
   height_antenne.png (compressed)
   height_cadre.png (compressed)
   height_e_cran.png (compressed)
   height_cable2.png (compressed)
   height_boutona.png (compressed)
   height_talkie.png (compressed)
   height_cable1.png (compressed)
   height_boutonb.png (compressed)
   height_prise.png (compressed)

🌑 Textures (ao)
   ao_cable1.png (compressed)
   ao_e_cran.png (compressed)
   ao_boutonb.png (compressed)
   ao_touches.png (compressed)
   ao_antenne.png (compressed)
   ao_talkie.png (compressed)
   ao_boutona.png (compressed)
   ao_cable2.png (compressed)
   ao_prise.png (compressed)
   ao_hautparleur.png (compressed)
   ao_cadre.png (compressed)

🧩 Assets
   model.bin
2026-04-29 08:44:37 +02:00
Tom Boullay 35cd3c7c64 update: upload-gltf add a new model -> refroidisseur
📦 Model
   model.gltf

🎨 Textures (color)
   color_refroidisseur.png (compressed)

🪶 Textures (roughness)
   roughness_refroidisseur.png (compressed)

🧭 Textures (normal)
   refroidisseur_normal.png (compressed)
   refroidisseur_normal_opengl.png (compressed)

🔩 Textures (metalness)
   metalness_refroidisseur.png (compressed)

⛰ Textures (height)
   height_refroidisseur.png (compressed)

🌑 Textures (ao)
   ao_refroidisseur.png (compressed)

🧩 Assets
   model.bin
2026-04-29 08:42:35 +02:00
Tom Boullay cfa1bd9e16 update: upload-gltf add a new model -> immeuble1
📦 Model
   model.gltf

🎨 Textures (color)
   color_buisson.png (compressed)
   color_fenetre.png (compressed)
   color_feuilles.png (compressed)
   color_maison.png (compressed)
   color_panneau.png (compressed)
   color_porte.png (compressed)
   color_tronc.png (compressed)

🧭 Textures (normal)
   normal_buisson.png (compressed)
   normal_fenetre.png (compressed)
   normal_feuilles.png (compressed)
   normal_maison.png (compressed)
   normal_panneau.png (compressed)
   normal_porte.png (compressed)
   normal_tronc.png (compressed)

🧱 Textures (orm)
   orm_buisson.png (compressed)
   orm_fenetre.png (compressed)
   orm_feuilles.png (compressed)
   orm_maison.png (compressed)
   orm_panneau.png (compressed)
   orm_porte.png (compressed)
   orm_tronc.png (compressed)

🧩 Assets
   immeuble1-2.bin
2026-04-28 20:18:56 +02:00
math-pixel 359417ecd4 feat: animator 2026-04-28 20:14:37 +02:00
Tom Boullay b9a3fbfc99 update: upload-gltf add a new model -> maison1
📦 Model
   model.gltf

🎨 Textures (color)
   color_buisson.png (compressed)
   color_contours.png (compressed)
   color_fenetre.png (compressed)
   color_maison.png (compressed)
   color_panneau.png (compressed)
   color_porte.png (compressed)
   color_toit.png (compressed)

🧭 Textures (normal)
   normal_buisson.png (compressed)
   normal_contours.png (compressed)
   normal_fenetre.png (compressed)
   normal_maison.png (compressed)
   normal_panneau.png (compressed)
   normal_porte.png (compressed)
   normal_toit.png (compressed)

🧱 Textures (orm)
   orm_buisson.png (compressed)
   orm_contours.png (compressed)
   orm_fenetre.png (compressed)
   orm_maison.png (compressed)
   orm_panneau.png (compressed)
   orm_porte.png (compressed)
   orm_toit.png (compressed)

🧩 Assets
   maison.bin
2026-04-28 20:07:17 +02:00
Tom Boullay 9d814c9924 update: upload-gltf add a new model -> persoprincipal
📦 Model
   model.gltf

🎨 Textures (color)
   color_defaultmaterial.png (compressed)

🧭 Textures (normal)
   normal_defaultmaterial.png (compressed)

🧱 Textures (orm)
   orm_defaultmaterial.png (compressed)

🧩 Assets
   mc.bin
2026-04-28 20:02:25 +02:00
Tom Boullay eb875068eb update: upload-gltf add a new model -> fermier
📦 Model
   model.gltf

🎨 Textures (color)
   color_defaultmaterial.png (compressed)

🧭 Textures (normal)
   normal_defaultmaterial.png (compressed)

🧱 Textures (orm)
   orm_defaultmaterial.png (compressed)

🧩 Assets
   fermier.bin
2026-04-28 19:58:21 +02:00
Tom Boullay e8a5a44218 update: upload-gltf add a new model -> gerant
📦 Model
   model.gltf

🎨 Textures (color)
   defaultmaterial_basecolor.png (compressed)
   defaultmaterial_base_color.png (compressed)

🪶 Textures (roughness)
   roughness_defaultmaterial.png (compressed)

🧭 Textures (normal)
   defaultmaterial_normal.png (compressed)
   defaultmaterial_normal_opengl.png (compressed)

🔩 Textures (metalness)
   metalness_defaultmaterial.png (compressed)

⛰ Textures (height)
   height_defaultmaterial.png (compressed)

🧱 Textures (orm)
   orm_defaultmaterial.png (compressed)

🧩 Assets
   gerant.bin
2026-04-28 19:56:34 +02:00
Tom Boullay 9c12c7a9e5 update: upload-gltf add a new model -> sapin
📦 Model
   model.gltf

🎨 Textures (color)
   color_mat.1.png (compressed)
   color_mat.png (compressed)

🧭 Textures (normal)
   normal_mat.1.png (compressed)
   normal_mat.png (compressed)

🧱 Textures (orm)
   orm_mat.1.png (compressed)
   orm_mat.png (compressed)

🧩 Assets
   sapin.bin
2026-04-28 19:54:38 +02:00
Tom Boullay 1907f2623b update: upload-gltf add a new model -> eolienne
📦 Model
   model.gltf

🎨 Textures (color)
   color_feuilles1st.png (compressed)
   color_he_lisse.png (compressed)
   color_pied.png (compressed)
   color_tiges1st.png (compressed)
   color_moteur.png (compressed)
   color_feuilles2nd.png (compressed)
   color_tiges2nd.png (compressed)
   color_cul.png (compressed)

🪶 Textures (roughness)
   roughness_tiges2nd.png (compressed)
   roughness_moteur.png (compressed)
   roughness_feuilles2nd.png (compressed)
   roughness_tiges1st.png (compressed)
   roughness_he_lisse.png (compressed)
   roughness_cul.png (compressed)
   roughness_pied.png (compressed)
   roughness_feuilles1st.png (compressed)

🧭 Textures (normal)
   pied_normal.png (compressed)
   feuilles2nd_normal.png (compressed)
   tiges1st_normal.png (compressed)
   tiges1st_normal_opengl.png (compressed)
   cul_normal.png (compressed)
   he_lisse_normal.png (compressed)
   tiges2nd_normal_opengl.png (compressed)
   pied_normal_opengl.png (compressed)
   cul_normal_opengl.png (compressed)
   feuilles2nd_normal_opengl.png (compressed)
   feuilles1st_normal_opengl.png (compressed)
   tiges2nd_normal.png (compressed)
   moteur_normal_opengl.png (compressed)
   feuilles1st_normal.png (compressed)
   moteur_normal.png (compressed)
   he_lisse_normal_opengl.png (compressed)

🔩 Textures (metalness)
   metalness_feuilles2nd.png (compressed)
   metalness_feuilles1st.png (compressed)
   metalness_cul.png (compressed)
   metalness_he_lisse.png (compressed)
   metalness_tiges1st.png (compressed)
   metalness_moteur.png (compressed)
   metalness_tiges2nd.png (compressed)
   metalness_pied.png (compressed)

⛰ Textures (height)
   height_pied.png (compressed)
   height_feuilles2nd.png (compressed)
   height_tiges1st.png (compressed)
   height_cul.png (compressed)
   height_he_lisse.png (compressed)
   height_tiges2nd.png (compressed)
   height_feuilles1st.png (compressed)
   height_moteur.png (compressed)

🪟 Textures (opacity)
   opacity_he_lisse.png (compressed)

🌑 Textures (ao)
   ao_feuilles2nd.png (compressed)
   ao_cul.png (compressed)
   ao_feuilles1st.png (compressed)
   ao_moteur.png (compressed)
   ao_tiges1st.png (compressed)
   ao_he_lisse.png (compressed)
   ao_pied.png (compressed)
   ao_tiges2nd.png (compressed)
2026-04-28 19:19:25 +02:00
Tom Boullay cf5be3d45d update: upload-gltf add a new model -> packderelance
📦 Model
   model.gltf

🎨 Textures (color)
   color_tetemart.png (compressed)
   color_charnie_res.png (compressed)
   color_mousse.png (compressed)
   color_patinf.png (compressed)
   color_lock.png (compressed)
   color_cabledroit.png (compressed)
   color_cablegauche.png (compressed)
   color_puces.png (compressed)
   color_manchemart.png (compressed)
   color_mousse_bas.png (compressed)
   color_patsup.png (compressed)

🪶 Textures (roughness)
   roughness_mousse.png (compressed)
   roughness_charnie_res.png (compressed)
   roughness_cablegauche.png (compressed)
   roughness_patsup.png (compressed)
   roughness_mousse_bas.png (compressed)
   roughness_manchemart.png (compressed)
   roughness_cabledroit.png (compressed)
   roughness_patinf.png (compressed)
   roughness_lock.png (compressed)
   roughness_puces.png (compressed)
   roughness_tetemart.png (compressed)

🧭 Textures (normal)
   patsup_normal.png (compressed)
   mousse_normal_opengl.png (compressed)
   patinf_normal_opengl.png (compressed)
   cablegauche_normal.png (compressed)
   cablegauche_normal_opengl.png (compressed)
   lock_normal.png (compressed)
   patinf_normal.png (compressed)
   patsup_normal_opengl.png (compressed)
   mousse_bas_normal.png (compressed)
   mousse_normal.png (compressed)
   cabledroit_normal_opengl.png (compressed)
   cabledroit_normal.png (compressed)
   manchemart_normal.png (compressed)
   tetemart_normal_opengl.png (compressed)
   tetemart_normal.png (compressed)
   manchemart_normal_opengl.png (compressed)
   puces_normal.png (compressed)
   charnie_res_normal.png (compressed)
   lock_normal_opengl.png (compressed)
   mousse_bas_normal_opengl.png (compressed)
   puces_normal_opengl.png (compressed)
   charnie_res_normal_opengl.png (compressed)

🔩 Textures (metalness)
   metalness_mousse.png (compressed)
   metalness_puces.png (compressed)
   metalness_tetemart.png (compressed)
   metalness_charnie_res.png (compressed)
   metalness_mousse_bas.png (compressed)
   metalness_cabledroit.png (compressed)
   metalness_manchemart.png (compressed)
   metalness_lock.png (compressed)
   metalness_patinf.png (compressed)
   metalness_patsup.png (compressed)
   metalness_cablegauche.png (compressed)

⛰ Textures (height)
   height_patsup.png (compressed)
   height_cablegauche.png (compressed)
   height_lock.png (compressed)
   height_patinf.png (compressed)
   height_mousse_bas.png (compressed)
   height_mousse.png (compressed)
   height_cabledroit.png (compressed)
   height_manchemart.png (compressed)
   height_tetemart.png (compressed)
   height_puces.png (compressed)
   height_charnie_res.png (compressed)

🌑 Textures (ao)
   ao_puces.png (compressed)
   ao_mousse.png (compressed)
   ao_charnie_res.png (compressed)
   ao_mousse_bas.png (compressed)
   ao_cabledroit.png (compressed)
   ao_tetemart.png (compressed)
   ao_manchemart.png (compressed)
   ao_lock.png (compressed)
   ao_patinf.png (compressed)
   ao_patsup.png (compressed)
   ao_cablegauche.png (compressed)
2026-04-28 19:14:52 +02:00
math-pixel 9ada4298c3 wip 2026-04-28 16:54:00 +02:00
Tom Boullay 9ff75e0516 fix: persist debug modes and skip missing map models 2026-04-28 16:35:33 +02:00
Tom Boullay 3b8c59db87 Merge branch 'develop' into feat/main-feature 2026-04-28 16:27:05 +02:00
Tom Boullay 5e0125e05a update: upload-gltf add a new model -> gants
📦 Model
   model.gltf

🎨 Textures (color)
   color_galet.png (compressed)
   color_gant.png (compressed)

🧭 Textures (normal)
   normal_galet.png (compressed)
   normal_gant.png (compressed)

🧱 Textures (orm)
   orm_galet.png (compressed)
   orm_gant.png (compressed)

🧩 Assets
   gants.bin
2026-04-28 16:07:26 +02:00
Tom Boullay b81f85cd50 update: upload-gltf add a new model -> galet
📦 Model
   model.gltf

🎨 Textures (color)
   color_galet.png (compressed)

🧭 Textures (normal)
   normal_galet.png (compressed)

🧱 Textures (orm)
   orm_galet.png (compressed)

🧩 Assets
   galet.bin
2026-04-28 16:02:46 +02:00
Tom Boullay 8f1a553601 update: upload-gltf add a new model -> gant
📦 Model
   model.gltf

🎨 Textures (color)
   color_gant.png (compressed)

🧭 Textures (normal)
   normal_gant.png (compressed)

🧱 Textures (orm)
   orm_gant.png (compressed)

🧩 Assets
   gant.bin
2026-04-28 16:01:41 +02:00
Tom Boullay 9b8bb1a182 Merge pull request #6 from La-Fabrik-Durable/feat/docs-routing
Feat/docs-routing
2026-04-28 15:04:29 +02:00
Tom Boullay a8c6fafbcd address docs routing review feedback 2026-04-28 15:02:50 +02:00
Tom Boullay 14a55e8dd1 clean docs router declarations 2026-04-28 14:53:28 +02:00
Tom Boullay 2dd5bfeda1 move debug components out of utils 2026-04-28 14:47:26 +02:00
Tom Boullay e20ead88e1 standardize source naming conventions 2026-04-28 14:46:27 +02:00
Tom Boullay 7e99d455b4 fix runtime map loading lifecycle 2026-04-28 14:42:49 +02:00
Tom Boullay 8c6af0ed6d rename pages 2026-04-28 14:25:29 +02:00
Tom Boullay 324aa9dc0f clean branch-scoped code quality issues 2026-04-28 14:23:37 +02:00
Tom Boullay 356bb5ef88 organize data configs by domain 2026-04-28 14:17:21 +02:00
Tom Boullay ece9b1268f refactor feature folders by code type 2026-04-28 14:14:15 +02:00
Tom Boullay d2735b72a0 refactor docs into feature folder 2026-04-28 13:54:41 +02:00
Tom Boullay fc5e4acba4 group docs navigation by audience 2026-04-28 13:48:03 +02:00
Tom Boullay a3db0b2f0d add editor documentation pages 2026-04-28 13:47:56 +02:00
Tom Boullay f9a0480121 fix react three peer dependencies 2026-04-28 13:47:49 +02:00
Tom Boullay aa7db176e6 update: app and main 2026-04-28 13:32:54 +02:00
Tom Boullay 0f83f57e23 Merge branch 'develop' into feat/docs-routing 2026-04-28 13:31:40 +02:00
Tom Boullay d4e7edaa89 Merge pull request #4 from La-Fabrik-Durable/feat-editor
Feat/editor
2026-04-28 13:22:44 +02:00
Tom Boullay ab21df18cb fix editor map reliability 2026-04-28 11:06:09 +02:00
Tom Boullay 7e067ecccd Update Map.tsx 2026-04-28 10:53:57 +02:00
Tom Boullay 3fac43d5f1 Create Map.tsx 2026-04-28 10:52:05 +02:00
Tom Boullay abfbb284f5 Update debugConfig.ts 2026-04-28 10:48:42 +02:00
math-pixel e3162d6588 Merge pull request #9 from La-Fabrik-Durable/feat/deploy-test
Feat/deploy test
2026-04-28 10:45:25 +02:00
math-pixel 7588f7f736 Merge pull request #8 from La-Fabrik-Durable/feat/deploy-test
Feat/deploy test
2026-04-28 10:44:12 +02:00
Tom Boullay 5ff5b89302 Merge branch 'feat-editor' of https://github.com/La-Fabrik-Durable/La-Fabrik into feat-editor 2026-04-28 10:43:08 +02:00
Tom Boullay af35150452 cleaaning 2026-04-28 10:42:57 +02:00
math-pixel 31a99902dd Delete test-editor.html 2026-04-28 10:39:58 +02:00
Tom Boullay a259c3d2e2 fix: style 2026-04-28 10:30:31 +02:00
Tom Boullay e19cc72ad5 tyle: refresh editor controls with monochrome UI 2026-04-28 10:08:17 +02:00
Tom Boullay e1d2bfdc75 refactor: move game map into world folder 2026-04-28 09:47:09 +02:00
Tom Boullay 8f40bb8133 docs: document editor architecture and user features 2026-04-28 09:43:51 +02:00
Tom Boullay 7b38f04a0d refactor: move editor page and types to conventional folders 2026-04-28 09:29:18 +02:00
Tom Boullay 7dea0f99a8 add: stylesheet 2026-04-28 09:07:56 +02:00
math-pixel eade051241 update: deploy file 2026-04-27 20:46:52 +02:00
math-pixel e868e72402 update: deploy file 2026-04-27 20:40:05 +02:00
math-pixel 4783784fb3 feat: change version 2026-04-27 20:27:21 +02:00
math-pixel bfe8c49323 fix :editor 2026-04-27 17:25:56 +02:00
Tom Boullay 06e59a972f docs: clarify backend virtual environment setup 2026-04-27 17:11:08 +02:00
math-pixel 1a91fcaca0 fix: main model map 2026-04-27 16:38:05 +02:00
Tom Boullay 055e7b2e63 fix: address docs routing review 2026-04-27 16:32:23 +02:00
Tom Boullay 149f9aa26c clean: package json 2026-04-27 16:27:57 +02:00
math-pixel 21d91f1de1 update models loading in /editor 2026-04-27 16:27:56 +02:00
Tom Boullay 68b0ceb593 feat: add localized docs pages 2026-04-27 16:27:08 +02:00
math-pixel 868f7a1cfd fix: load all models/ 2026-04-27 16:07:57 +02:00
Tom Boullay e25152b3e5 feat move debug cube with remote hand tracking 2026-04-27 16:07:54 +02:00
Tom Boullay 641d2f8871 feat add remote hand tracking backend 2026-04-27 15:49:02 +02:00
Tom Boullay 7fd39f58d8 feat: add docs routing 2026-04-27 15:35:56 +02:00
Tom Boullay 2b6bcc4d92 update: upload-gltf add a new model -> pylone
📦 Model
   model.gltf

🎨 Textures (color)
   pied_base_color.png (compressed)
   panneaux_base_color.png (compressed)
   cable2_base_color.png (compressed)
   chap_base_color.png (compressed)
   puces_base_color.png (compressed)
   lampe_base_color.png (compressed)
   cable1_base_color.png (compressed)

🪶 Textures (roughness)
   lampe_roughness.png (compressed)
   panneaux_roughness.png (compressed)
   cable2_roughness.png (compressed)
   cable1_roughness.png (compressed)
   chap_roughness.png (compressed)
   puces_roughness.png (compressed)
   pied_roughness.png (compressed)

🧭 Textures (normal)
   panneaux_normal.png (compressed)
   pied_normal.png (compressed)
   chap_normal.png (compressed)
   lampe_normal.png (compressed)
   chap_normal_opengl.png (compressed)
   panneaux_normal_opengl.png (compressed)
   lampe_normal_opengl.png (compressed)
   cable2_normal.png (compressed)
   cable1_normal.png (compressed)
   pied_normal_opengl.png (compressed)
   cable2_normal_opengl.png (compressed)
   puces_normal.png (compressed)
   cable1_normal_opengl.png (compressed)
   puces_normal_opengl.png (compressed)

🔩 Textures (metalness)
   lampe_metallic.png (compressed)
   cable1_metallic.png (compressed)
   puces_metallic.png (compressed)
   panneaux_metallic.png (compressed)
   chap_metallic.png (compressed)
   cable2_metallic.png (compressed)
   pied_metallic.png (compressed)

🧩 Assets
   cable1_mixed_ao.png (compressed)
   puces_mixed_ao.png (compressed)
   panneaux_height.png (compressed)
   chap_height.png (compressed)
   lampe_opacity.png (compressed)
   lampe_mixed_ao.png (compressed)
   pied_height.png (compressed)
   lampe_height.png (compressed)
   cable2_height.png (compressed)
   cable1_height.png (compressed)
   panneaux_mixed_ao.png (compressed)
   cable2_mixed_ao.png (compressed)
   puces_height.png (compressed)
   pied_mixed_ao.png (compressed)
   chap_mixed_ao.png (compressed)
2026-04-27 14:35:33 +02:00
math-pixel 2001955625 fix: address code review comments
- vite.config.ts: fix __dirname for ESM, add 1MB payload limit + JSON validation
- MapViewer.tsx: remove broken window.isTransforming checks, fix callback order
- EditorPage.tsx: derive undoCount from historyManager in handleTransformEnd
- package.json: support Node 20 or 22 in engines
2026-04-27 14:21:50 +02:00
math-pixel 3254291ba7 fix: lint 2026-04-27 14:19:26 +02:00
math-pixel 753a767662 fix: format 2026-04-27 13:57:17 +02:00
math-pixel bcf3a63fc5 Merge branch 'develop' into feat-editor 2026-04-27 13:55:13 +02:00
math-pixel ab8c84e006 Merge remote-tracking branch 'origin/develop' into feat-editor 2026-04-27 13:52:08 +02:00
Tom Boullay 8abc69ebc3 Merge branch 'develop' of https://github.com/La-Fabrik-Durable/La-Fabrik into develop 2026-04-27 13:50:50 +02:00
math-pixel b63412de13 update: map & update: package json for CI 2026-04-27 13:44:14 +02:00
Tom Boullay 9fdf065c1d Update model.gltf
🔍 Lint / 🪄 Check lint (push) Has been cancelled
🔍 Lint / 🎨 Check format (push) Has been cancelled
🔍 Lint / 🔎 Typecheck (push) Has been cancelled
🔍 Lint / 🏗 Build (push) Has been cancelled
📊 Quality / 🔒 Security Audit (push) Has been cancelled
📊 Quality / 📋 Dependency Freshness (push) Has been cancelled
📊 Quality / 📦 Bundle Size (push) Has been cancelled
2026-04-27 13:43:59 +02:00
Tom Boullay 4a697ab790 cleaning: repo + model 2026-04-27 13:36:35 +02:00
Tom Boullay 29144f8844 Merge pull request #3 from La-Fabrik-Durable/design
upload: models
2026-04-27 13:31:21 +02:00
Tom Boullay 74b9bf57c8 Merge pull request #2 from La-Fabrik-Durable/feat/implem-map-scene-physique
Feat/implem map scene physique
2026-04-27 11:58:38 +02:00
Tom Boullay 5402c343fa fix: docs update debug project tree 2026-04-27 11:57:21 +02:00
Tom Boullay 5569da07c1 Create .prettierignore 2026-04-27 11:23:29 +02:00
Tom Boullay 38abeb3b49 fix: format & lint 2026-04-27 11:20:59 +02:00
Tom Boullay eb0db21d29 clean 2026-04-27 11:14:43 +02:00
Tom Boullay 393b653cca fix: archi 2026-04-27 10:53:50 +02:00
Tom Boullay e87004652f update: upload-gltf update -> lafabrik
📦 Model
  ↔️ model.glb (compressed)

🎨 Textures (color)
  🔄 anneaux_base_color.png (compressed)

🪶 Textures (roughness)
  🔄 anneaux_roughness.png (compressed)
   verre_fenetre_roughness.png (compressed)

🧭 Textures (normal)
  🔄 anneaux_normal.png (compressed)
  🔄 anneaux_normal_opengl.png (compressed)

🔩 Textures (metalness)
  🔄 anneaux_metallic.png (compressed)

🧩 Assets
  🔄 anneaux_mixed_ao.png (compressed)
  🔄 anneaux_height.png (compressed)
2026-04-24 17:55:13 +02:00
Tom Boullay 9d6693b5b6 update: upload-gltf update -> lafabrik
📦 Model
  ↔️ model.glb (compressed)

🎨 Textures (color)
  🔄 bat_base_color.png (compressed)
  🔄 comptoir_base_color.png (compressed)
  🔄 porte_base_color.png (compressed)

🪶 Textures (roughness)
  🔄 bat_roughness.png (compressed)
  🔄 anneaux_roughness.png (compressed)
  🔄 porte_roughness.png (compressed)
  🔄 tiges_roughness.png (compressed)

🧭 Textures (normal)
  🔄 tiges_normal.png (compressed)
  🔄 porte_normal.png (compressed)
  🔄 porte_normal_opengl.png (compressed)
  🔄 anneaux_normal.png (compressed)
  🔄 bat_normal.png (compressed)
  🔄 anneaux_normal_opengl.png (compressed)
  🔄 bat_normal_opengl.png (compressed)

🔩 Textures (metalness)
  🔄 porte_metallic.png (compressed)
  🔄 tiges_metallic.png (compressed)
  🔄 comptoir_metallic.png (compressed)
  🔄 anneaux_metallic.png (compressed)
  🔄 bat_metallic.png (compressed)

🧩 Assets
  🔄 comptoir_height.png (compressed)
  🔄 porte_height.png (compressed)
  🔄 porte_mixed_ao.png (compressed)
  🔄 tiges_mixed_ao.png (compressed)
  🔄 anneaux_mixed_ao.png (compressed)
  🔄 bat_height.png (compressed)
  🔄 bat_mixed_ao.png (compressed)

🗑 Deleted
   verre_fenetre_roughness.png
2026-04-24 17:44:02 +02:00
Tom Boullay 1db7c22a90 update: upload-gltf add a new model -> lafabrik
📦 Model
   model.glb (compressed)
🎨 Textures
   tiges_normal.png
   comptoir_normal_opengl.png
   porte_metallic.png
   tiges_height.png
   comptoir_mixed_ao.png
   tiges_metallic.png
   tiges_normal_opengl.png
   comptoir_roughness.png
   fenetre_0_base_color.png
   bat_roughness.png
   tiges_base_color.png
   comptoir_normal.png
   porte_normal.png
   toit_roughness.png
   comptoir_height.png
   porte_height.png
   porte_mixed_ao.png
   comptoir_metallic.png
   tiges_mixed_ao.png
   porte_normal_opengl.png
   dashboard_metallic.png
   anneaux_metallic.png
   anneaux_base_color.png
   panneau_normal_opengl.png
   toit_mixed_ao.png
   anneaux_roughness.png
   porte_stock_base_color.png
   tuyaux_mixed_ao.png
   fenetre_0_mixed_ao.png
   dashboard_base_color.png
   anneaux_mixed_ao.png
   dashboard_mixed_ao.png
   bat_base_color.png
   tuyaux_height.png
   tuyaux_metallic.png
   verre_fenetre_base_color.png
   bat_height.png
   anneaux_normal.png
   toit_metallic.png
   porte_stock_height.png
   bat_normal.png
   porte_stock_roughness.png
   tuyaux_normal.png
   fenetre_0_metallic.png
   porte_stock_normal.png
   tuyaux_roughness.png
   anneaux_height.png
   comptoir_base_color.png
   panneau_height.png
   panneau_base_color.png
   porte_stock_mixed_ao.png
   panneau_normal.png
   bat_mixed_ao.png
   anneaux_normal_opengl.png
   stock_0_mixed_ao.png
   tuyaux_base_color.png
   fenetre_0_normal_opengl.png
   porte_roughness.png
   porte_base_color.png
   toit_normal_opengl.png
   plan_de_travail_normal.png
   plan_de_travail_roughness.png
   plan_de_travail_height.png
   porte_stock_metallic.png
   toit_base_color.png
   stock_0_metallic.png
   stock_0_normal.png
   verre_fenetre_normal.png
   plan_de_travail_normal_opengl.png
   bat_metallic.png
   stock_0_base_color.png
   stock_0_height.png
   tiges_roughness.png
   fenetre_0_roughness.png
   verre_fenetre_height.png
   panneau_roughness.png
   fenetre_0_normal.png
   plan_de_travail_metallic.png
   dashboard_normal_opengl.png
   tuyaux_normal_opengl.png
   plan_de_travail_base_color.png
   fenetre_0_height.png
   porte_stock_normal_opengl.png
   panneau_mixed_ao.png
   dashboard_height.png
   verre_fenetre_normal_opengl.png
   toit_normal.png
   dashboard_normal.png
   bat_normal_opengl.png
   verre_fenetre_metallic.png
   toit_height.png
   plan_de_travail_mixed_ao.png
   stock_0_roughness.png
   panneau_metallic.png
   dashboard_roughness.png
   stock_0_normal_opengl.png
   verre_fenetre_roughness.png
   verre_fenetre_mixed_ao.png
2026-04-24 16:44:54 +02:00
Tom Boullay bf858645fd update: upload-gltf add a new model -> lafabrik
📦 Model
   model.glb (compressed)
🎨 Textures
   tiges_normal.png
   comptoir_normal_opengl.png
   porte_metallic.png
   tiges_height.png
   comptoir_mixed_ao.png
   tiges_metallic.png
   tiges_normal_opengl.png
   comptoir_roughness.png
   fenetre_0_base_color.png
   bat_roughness.png
   tiges_base_color.png
   comptoir_normal.png
   porte_normal.png
   toit_roughness.png
   comptoir_height.png
   porte_height.png
   porte_mixed_ao.png
   comptoir_metallic.png
   tiges_mixed_ao.png
   porte_normal_opengl.png
   dashboard_metallic.png
   anneaux_metallic.png
   anneaux_base_color.png
   panneau_normal_opengl.png
   toit_mixed_ao.png
   anneaux_roughness.png
   porte_stock_base_color.png
   tuyaux_mixed_ao.png
   fenetre_0_mixed_ao.png
   dashboard_base_color.png
   anneaux_mixed_ao.png
   dashboard_mixed_ao.png
   bat_base_color.png
   tuyaux_height.png
   tuyaux_metallic.png
   verre_fenetre_base_color.png
   bat_height.png
   anneaux_normal.png
   toit_metallic.png
   porte_stock_height.png
   bat_normal.png
   porte_stock_roughness.png
   tuyaux_normal.png
   fenetre_0_metallic.png
   porte_stock_normal.png
   tuyaux_roughness.png
   anneaux_height.png
   comptoir_base_color.png
   panneau_height.png
   panneau_base_color.png
   porte_stock_mixed_ao.png
   panneau_normal.png
   bat_mixed_ao.png
   anneaux_normal_opengl.png
   stock_0_mixed_ao.png
   tuyaux_base_color.png
   fenetre_0_normal_opengl.png
   porte_roughness.png
   porte_base_color.png
   toit_normal_opengl.png
   plan_de_travail_normal.png
   plan_de_travail_roughness.png
   plan_de_travail_height.png
   porte_stock_metallic.png
   toit_base_color.png
   stock_0_metallic.png
   stock_0_normal.png
   verre_fenetre_normal.png
   plan_de_travail_normal_opengl.png
   bat_metallic.png
   stock_0_base_color.png
   stock_0_height.png
   tiges_roughness.png
   fenetre_0_roughness.png
   verre_fenetre_height.png
   panneau_roughness.png
   fenetre_0_normal.png
   plan_de_travail_metallic.png
   dashboard_normal_opengl.png
   tuyaux_normal_opengl.png
   plan_de_travail_base_color.png
   fenetre_0_height.png
   porte_stock_normal_opengl.png
   panneau_mixed_ao.png
   dashboard_height.png
   verre_fenetre_normal_opengl.png
   toit_normal.png
   dashboard_normal.png
   bat_normal_opengl.png
   verre_fenetre_metallic.png
   toit_height.png
   plan_de_travail_mixed_ao.png
   stock_0_roughness.png
   panneau_metallic.png
   dashboard_roughness.png
   stock_0_normal_opengl.png
   verre_fenetre_roughness.png
   verre_fenetre_mixed_ao.png
2026-04-24 16:44:44 +02:00
Tom Boullay 8c84663472 add: a logger utils 2026-04-24 14:02:16 +02:00
math-pixel 6b8ba3d58d feat : save map.json on project 2026-04-23 15:40:10 +02:00
math-pixel d0cf876372 feat editor 2026-04-23 15:24:40 +02:00
Tom Boullay 38f9f087d1 Create package-lock.json 2026-04-19 16:51:10 +02:00
Tom Boullay dcbc1c73f5 refacto : cleaning the codebasebase again 2026-04-19 16:50:11 +02:00
Tom Boullay f9c4495610 refacto: cleanning the codebase 2026-04-17 16:03:29 +02:00
Tom Boullay 23d4291458 update: upload-gltf add a new model -> general/electricienne
📦 Model
   model.gltf
🎨 Textures
   roughness (manquant)
   normal (manquant)
   metalness (manquant)
   color (manquant)
   displace (manquant)
2026-04-17 15:58:30 +02:00
Tom Boullay 638022339e update : put every constante in the data folder 2026-04-17 15:42:10 +02:00
Tom Boullay 20fbaf05e1 update : add map model + octree algo 2026-04-17 11:36:03 +02:00
Tom Boullay ed7681a293 update: add a physic scenne 2026-04-17 10:48:18 +02:00
Tom Boullay b26da614f0 refacto: enleve la map 2026-04-16 16:11:20 +02:00
Tom Boullay 106727256b update: upload-gltf add a new model -> workshop/lafabrik
📦 Model
   model.gltf
🎨 Textures
   roughness (manquant)
   normal (manquant)
   metalness (manquant)
   color (manquant)
   displace (manquant)
2026-04-16 15:43:42 +02:00
Tom Boullay 86e9860121 update: upload-gltf add a new model -> general/blocking
📦 Model
   model.gltf
🎨 Textures
   roughness (manquant)
   normal (manquant)
   metalness (manquant)
   color (manquant)
   displace (manquant)
2026-04-16 11:04:48 +02:00
Tom Boullay 1eed905e8b fix: archi player 2026-04-16 11:00:08 +02:00
Tom Boullay 7769959135 refactor: tighten project structure and strengthen tooling 2026-04-16 10:45:05 +02:00
Tom Boullay fd7571fbe1 Update hero.png 2026-04-16 09:25:23 +02:00
Tom Boullay 3506858c96 fix: lint 2026-04-15 16:42:06 +02:00
Tom Boullay 61d7495ec9 feat: add player camera 2026-04-15 16:40:52 +02:00
Tom Boullay d486f6f381 feat: add the map 2026-04-15 16:09:02 +02:00
Tom Boullay f67799db30 feat: add map blocking and cleanup 2026-04-15 13:36:53 +02:00
Tom Boullay 76dc306d4d Merge branch 'main' into design 2026-04-15 13:32:38 +02:00
Tom Boullay 8300ff844f cleaning 2026-04-15 13:32:21 +02:00
Tom Boullay 4c9594e260 fix ci 2026-04-15 13:30:04 +02:00
Tom Boullay 27214b02c1 update: add more CI 2026-04-15 11:17:48 +02:00
Tom Boullay 3da749c73e update : docs and skills 2026-04-15 11:06:41 +02:00
Tom Boullay 922df5b2b4 update: upload-gltf add a new model -> general/coffeetest
📦 Model
   model.gltf
🎨 Textures
   roughness.jpg
   normal.jpg
   metalness.jpg
   color.jpg
   displace.jpg
2026-04-15 09:51:23 +02:00
Tom Boullay cd1abd504e update: upload-gltf add a new model -> general/coffeetest
📦 Model
   model.gltf
🎨 Textures
   roughness.jpg
   normal.jpg
   metalness.jpg
   color.jpg
   displace.jpg
2026-04-15 09:51:21 +02:00
Tom Boullay 648c6d9992 update: upload-gltf add a new model -> map/blocking
📦 Model
   model.gltf
🎨 Textures
   roughness (manquant)
   normal (manquant)
   metalness (manquant)
   color (manquant)
   displace (manquant)
2026-04-15 09:48:07 +02:00
Tom Boullay 361a52d84b update: remove eveything 2026-04-15 09:41:46 +02:00
Tom Boullay d07e7ac62a update: upload-gltf update -> general/vase
📦 Model
  ↔️ model.gltf (inchange)
🎨 Textures
   normal.jpg
2026-04-15 09:25:02 +02:00
Tom Boullay 726c9abae8 update: upload-gltf update -> general/vase
📦 Model
  ↔️ model.gltf (inchange)
🎨 Textures
  🔄 roughness.jpg
  🔄 metalness.jpg
  🔄 color.jpg
  🔄 displace.jpg
   normal.jpg (supprime)
2026-04-15 09:18:02 +02:00
Tom Boullay 0fc4b5ecbe upatde: add models 2026-04-15 09:02:33 +02:00
Tom Boullay 0c7eca9396 Merge branch 'design' of https://github.com/La-Fabrik-Durable/La-Fabrik into design 2026-04-15 09:02:24 +02:00
Tom Boullay d3102d4e1c update : add models 2026-04-15 09:02:15 +02:00
Tom Boullay a72d312494 update: upload-gltf update -> general/vase
📦 Model
  🔄 model.gltf (compressed)
🎨 Textures
   color.jpg
2026-04-14 16:41:58 +02:00
Tom Boullay 455071ed40 update: upload-gltf update -> general/vase
📦 Model
  🔄 model.gltf (compressed)
🎨 Textures
   color.jpg (supprime)
2026-04-14 16:40:55 +02:00
Tom Boullay 283efef321 update: upload-gltf add a new model -> general/vase
📦 Model
   model.gltf (compressed)
🎨 Textures
   roughness.jpg
   normal.jpg
   metalness.jpg
   color.jpg
   displace.jpg
2026-04-14 16:23:19 +02:00
Tom Boullay 0c49d63bbf update: upload-gltf update -> general/coffeetest
🎨 Textures
   metalness.jpg
2026-04-14 13:56:37 +02:00
Tom Boullay 1e3832454c update: upload-gltf replace model -> general/coffeetest
📦 Model
  🔄 model.gltf (compressed)
🎨 Textures
  🔄 roughness.jpg
  🔄 normal.jpg
   metalness (manquant)
  🔄 color.jpg
  🔄 displace.jpg
2026-04-14 13:43:44 +02:00
Tom Boullay 47572d3793 update: upload-gltf add a new model -> general/coffeetest
📦 Model
   model.gltf (compressed)
🎨 Textures
   roughness.jpg
   normal.jpg
   metalness.jpg
   color.jpg
   displace.jpg
2026-04-14 13:30:53 +02:00
Tom Boullay ff6bb8b986 update: from upload-gltf add a new model -> general/coffeetest
📦 Model
   model.gltf

🎨 Textures
   roughness.jpg
   normal.jpg
   metalness.jpg
   color.jpg
   displace.jpg
2026-04-14 12:24:24 +02:00
Tom Boullay 8dae23acc3 add some folder 2026-04-14 12:22:20 +02:00
Tom Boullay 82c4b612bf update: add agent.md + skills 2026-04-14 09:20:30 +02:00
Tom Boullay afd72b9f6c Create ci.yml 2026-04-14 09:02:12 +02:00
Tom Boullay dbb3c46e35 upatde: add prettier 2026-04-14 08:59:36 +02:00
Tom Boullay 25e3d503b2 update: add basic structure 2026-04-14 08:39:09 +02:00
Tom Boullay c12026a331 add : finish readme, git lfs and gitignore 2026-04-13 23:30:33 +02:00
Tom Boullay 9966bb8e25 Update README.md 2026-04-13 23:17:59 +02:00
Tom Boullay 96976de21b Update README.md 2026-04-13 22:59:56 +02:00
Tom Boullay 86b889e2fc add: license + v1 archi 2026-04-13 22:24:20 +02:00
Tom Boullay b55e60bb16 add readme 2026-04-13 16:37:37 +02:00
Tom Boullay dfd46d420b Initial commit 2026-04-13 16:12:21 +02:00
63 changed files with 74 additions and 6060 deletions
-1
View File
@@ -8,7 +8,6 @@ __pycache__/
# Build
dist/
dist-ssr/
.vite/
*.local
# Environment
+4 -44
View File
@@ -20,7 +20,7 @@ This document describes the code that exists today in the repository.
- `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 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, repair-step movement locking, and interaction input.
- `src/world/player/PlayerController.tsx` owns pointer lock movement, jump handling, and interaction input.
## Physics Boundaries
@@ -44,44 +44,8 @@ Keep the player and map octree outside the Rapier provider until there is a deli
## Audio
- `src/managers/AudioManager.ts` provides pooled one-shot playback, looped music playback, category volumes, and optional stereo pan for one-shot sounds.
- Supported audio categories are `music`, `sfx`, and `dialogue`.
- Trigger interactions may play SFX directly through `AudioManager`.
## Settings Menu
- `src/managers/stores/useSettingsStore.ts` stores settings for music volume, SFX volume, dialogue volume, subtitle visibility, subtitle language, repair runtime, and menu visibility.
- `src/components/ui/GameSettingsMenu.tsx` renders the in-game options menu.
- `src/components/ui/GameUI.tsx` mounts the settings menu as an HTML overlay outside the canvas.
- `Esc` opens and closes the menu, and `src/world/player/PlayerController.tsx` ignores player input while the menu is open.
- Volume changes are forwarded to `AudioManager` by category.
## Dialogues And Subtitles
- `public/sounds/dialogue/dialogues.json` is the runtime dialogue manifest.
- Dialogue audio files live under `public/sounds/dialogue/`.
- Subtitle files live under `public/sounds/dialogue/subtitles/{fr|en}/`.
- The current subtitle model is one SRT file per voice and language.
- `src/types/dialogues/dialogues.ts` contains the dialogue manifest types.
- `src/utils/dialogues/dialogueManifestValidation.ts` validates manifest shape at runtime.
- `src/utils/dialogues/loadDialogueManifest.ts` loads the manifest and SRT cues, with French fallback when the selected language is missing.
- `src/utils/subtitles/parseSrt.ts` parses SRT blocks and timecodes.
- `src/utils/dialogues/playDialogue.ts` plays dialogue audio and synchronizes the active subtitle against the audio element time.
- `src/managers/stores/useSubtitleStore.ts` stores the currently displayed subtitle cue.
- `src/components/ui/Subtitles.tsx` renders the subtitle overlay.
- `src/world/GameDialogues.tsx` currently triggers dialogue entries that define a `timecode`.
- Dialogue playback is queued so multiple dialogue requests do not overlap.
## Cinematics
- `public/cinematics.json` is the runtime cinematic manifest.
- `src/types/cinematics/cinematics.ts` contains cinematic manifest types.
- `src/utils/cinematics/cinematicManifestValidation.ts` validates manifest shape at runtime.
- `src/utils/cinematics/loadCinematicManifest.ts` loads `/cinematics.json`.
- `src/world/GameCinematics.tsx` triggers cinematics that define a global `timecode`.
- Cinematics use GSAP timelines to animate the active camera position and look target.
- `dialogueCues` on a cinematic trigger dialogue IDs at times relative to the cinematic start.
- `src/managers/stores/useGameStore.ts` exposes `isCinematicPlaying`, used to lock player input during cinematics.
- `src/managers/AudioManager.ts` currently provides pooled one-shot sound playback and looped music playback.
- Trigger interactions may play audio directly through `AudioManager`.
## Debug System
@@ -110,9 +74,6 @@ Keep the player and map octree outside the Rapier provider until there is a deli
- `src/pages/editor/page.tsx` is the route-level editor page for `/editor`.
- `src/components/editor/EditorControls.tsx` renders the HTML editor control panel.
- `src/components/editor/EditorDialogueManifestPanel.tsx` edits `public/sounds/dialogue/dialogues.json`.
- `src/components/editor/EditorCinematicManifestPanel.tsx` edits `public/cinematics.json`.
- `src/components/editor/EditorSrtPanel.tsx` renders the dialogue SRT editor inside the editor control panel.
- `src/components/editor/scene/EditorScene.tsx` composes the editor canvas scene, camera controls, lights, shortcuts, and map rendering.
- `src/components/editor/scene/EditorMap.tsx` renders map nodes, fallback cubes, selection highlighting, and transform controls.
- `src/controls/editor/FlyController.tsx` provides player-style editor navigation.
@@ -136,7 +97,6 @@ Keep the player and map octree outside the Rapier provider until there is a deli
- The repository is a prototype, not the full intended game runtime.
- `src/world/debug/TestMap.tsx` is part of the active scene composition.
- There is no central gameplay orchestrator such as `GameManager`.
- Mission state exists in Zustand and the repair flow is implemented as a prototype for the current repair missions.
- Cinematics and dialogues exist as prototype timecode-driven systems; dialogue branching and broader gameplay orchestration are still limited.
- The mission state exists in Zustand, but zones, cinematics, dialogue, and the full repair sequence are not implemented.
- The player uses octree collision and simple movement rules, not a complete gameplay physics stack.
- Editor save-to-server is implemented as a Vite dev-server plugin, not a production backend API.
+2 -90
View File
@@ -23,9 +23,6 @@ src/
├── components/
│ └── editor/
│ ├── EditorControls.tsx
│ ├── EditorCinematicManifestPanel.tsx
│ ├── EditorDialogueManifestPanel.tsx
│ ├── EditorSrtPanel.tsx
│ └── scene/
│ ├── EditorMap.tsx
│ └── EditorScene.tsx
@@ -40,14 +37,10 @@ src/
│ └── editor/
│ └── editor.ts
└── utils/
├── dialogues/
│ └── loadDialogueManifest.ts
├── editor/
│ └── loadEditorScene.ts
── map/
└── loadMapSceneData.ts
└── subtitles/
└── parseSrt.ts
── map/
└── loadMapSceneData.ts
```
## Responsibilities
@@ -64,12 +57,6 @@ src/
`src/components/editor/EditorControls.tsx` renders the HTML control panel outside the canvas.
`src/components/editor/EditorDialogueManifestPanel.tsx` renders the dialogue manifest editor. It loads `dialogues.json`, edits dialogue entries, previews selected dialogue playback, creates missing French SRT cues, and saves the manifest through a dev-server endpoint.
`src/components/editor/EditorCinematicManifestPanel.tsx` renders the cinematic manifest editor. It loads `cinematics.json`, edits camera keyframes and dialogue cues, previews selected cinematics in the editor canvas, and saves the manifest through a dev-server endpoint.
`src/components/editor/EditorSrtPanel.tsx` renders the dialogue subtitle editor inside the control panel. It loads the dialogue manifest, loads one SRT file per voice/language, validates cue structure, previews dialogue audio, and can save SRT files through a dev-server endpoint.
`src/controls/editor/FlyController.tsx` provides editor movement controls for player-style navigation.
`src/utils/map/loadMapSceneData.ts` is shared by the game map and editor. It loads `/map.json` and resolves available `public/models/{name}/model.glb` files first, then falls back to `public/models/{name}/model.gltf`.
@@ -147,78 +134,6 @@ The editor supports two output paths:
The dev-only `/api/save-map` endpoint is implemented by the Vite plugin in `vite.config.ts`. It writes to `public/map.json` and enforces a maximum payload size.
## Dialogue SRT Editing
Dialogue subtitle editing is part of the `/editor` side panel.
Runtime dialogue files are grouped under `public/sounds/dialogue/`:
```txt
public/
└── sounds/
└── dialogue/
├── dialogues.json
└── subtitles/
├── fr/
│ ├── narrateur.srt
│ ├── fermier.srt
│ └── electricienne.srt
└── en/
└── ...
```
The current model is one SRT file per voice and language. A dialogue entry references the cue it needs through `subtitleCueIndex`; it does not own a dedicated SRT file.
`EditorSrtPanel` uses:
- `loadDialogueManifest()` to read `/sounds/dialogue/dialogues.json`
- `parseSrt()` to validate local textarea content and find active cues during audio preview
- `/api/save-srt` to write edited SRT files during local development
- `/api/validate-dialogues` to validate the manifest, linked audio, French SRT files, and referenced cue indexes
SRT timecodes are relative to the dialogue audio file being previewed, not to the global game timeline.
Missing English SRT files are warnings, not errors, because runtime loading falls back to French subtitles when the selected language is not available. Keep this behavior until the English translation workflow is ready.
## Dialogue Manifest Editing
`EditorDialogueManifestPanel` edits `public/sounds/dialogue/dialogues.json` in memory and persists it through `/api/save-dialogues`.
The panel supports:
- adding a dialogue entry
- deleting a dialogue entry
- editing `id`, `voice`, `audio`, `subtitleCueIndex`, and optional `timecode`
- previewing the selected dialogue through `playDialogueById()`
- creating a missing French SRT cue through `/api/save-srt`
When a dialogue is added, the editor computes the next `subtitleCueIndex` for the selected voice from the manifest. The generated SRT cue is a valid placeholder block and should be edited later in the SRT panel.
`/api/save-dialogues` is implemented in `vite.config.ts`. It validates manifest shape before writing to `public/sounds/dialogue/dialogues.json`.
## Cinematic Manifest Editing
`EditorCinematicManifestPanel` edits `public/cinematics.json` in memory and persists it through `/api/save-cinematics`.
The manifest shape is:
```ts
interface CinematicDefinition {
id: string;
timecode?: number;
cameraKeyframes: CinematicCameraKeyframe[];
dialogueCues?: CinematicDialogueCue[];
}
```
`cameraKeyframes` are relative to the cinematic start. At least two keyframes are required and keyframe times must increase.
`dialogueCues` are also relative to the cinematic start and reference dialogue IDs from `dialogues.json`. They are used by `GameCinematics` to synchronize dialogue playback with camera timelines. A dialogue synchronized this way should not also define a global `timecode` in `dialogues.json`.
The editor preview sends the selected `CinematicDefinition` to `EditorScene`, where GSAP animates the current editor camera. Orbit and fly controls are disabled during preview.
`/api/save-cinematics` is implemented in `vite.config.ts`. It validates manifest shape before writing to `public/cinematics.json`.
## Styling
Editor styles are in `src/index.css` under the `/* Editor page */` section. Classes are prefixed with `editor-` to avoid collisions with the game UI.
@@ -229,6 +144,3 @@ Editor styles are in `src/index.css` under the `/* Editor page */` section. Clas
- Large `map.json` files are not virtualized, culled, or LOD-managed.
- There is no snap-to-grid, duplication, material editing, or object creation workflow.
- Save to Server is a Vite dev-server helper, not a production backend API.
- SRT Save is also a Vite dev-server helper, not a production backend API.
- Dialogue and cinematic manifest saves are Vite dev-server helpers, not production backend APIs.
- Dialogue creation still uses placeholder audio paths until real MP3 files are added.
+1 -1
View File
@@ -37,7 +37,7 @@ The production repair activation conditions are:
This keeps the webcam off during `waiting`, `fragmented`, and `scanning`, then enables hand input only when the repair flow is expected to use hands.
In the current production repair flow, `inspected` uses a two-fists hold gesture to advance to `fragmented`. The hold must last one second and is independent from local object interaction distance once the mission is in the correct state. Keyboard input for the same transition is handled separately by the repair case trigger, so pressing `E` requires the case to be focused through the shared interaction system.
In the current production repair flow, `inspected` uses a two-fists hold gesture to advance to `fragmented`. The hold must last one second and is independent from local object interaction distance once the mission is in the correct state.
## Backend
-1
View File
@@ -170,7 +170,6 @@ Current overlays:
- `GameStateDebugPanel`: compact debug UI for viewing and switching main/sub states, stepping backward or forward, and resetting the store
- `Crosshair`: player aiming helper
- `InteractPrompt`: interaction prompt
- `RepairMovementLockIndicator`: player-facing indicator shown while repair steps temporarily disable movement
`src/pages/page.tsx` should stay thin and mount only the canvas and `GameUI`.
-83
View File
@@ -74,87 +74,6 @@ This is useful for checking numeric transform values before saving or exporting.
The button is hidden in production builds because production persistence is not implemented.
## Editing Dialogue Subtitles
The side panel also includes dialogue tools for the dialogue manifest and SRT subtitles.
### Dialogue Manifest
Use the `Dialogues` panel to edit `public/sounds/dialogue/dialogues.json` without opening the JSON file manually.
Available actions:
- `Reload` reloads the manifest from disk.
- `Add` creates a local dialogue entry for the current voice and assigns the next available SRT cue index.
- `Save` writes the manifest through the local Vite dev server.
- `Preview dialogue` plays the selected dialogue and shows subtitles in the editor overlay.
- `Create FR SRT cue` creates the matching French SRT cue if it is missing.
- `Delete dialogue` removes the selected entry locally.
After using `Add`, save the manifest to keep the new dialogue entry. The generated SRT cue is written immediately to the French SRT file, but the dialogue manifest is still only local until `Save` is clicked.
New dialogue audio paths start as placeholders such as `/sounds/dialogue/new_dialogue_24.mp3`. Replace them with real MP3 paths before validating the final asset set.
### SRT Editor
Use the `SRT` panel to edit one subtitle file at a time.
1. Choose a voice: `narrateur`, `fermier`, or `electricienne`.
2. Choose a language: `FR` or `EN`.
3. Edit the SRT text directly in the textarea.
4. Use the audio preview to check the selected dialogue.
5. Use `Set start`, `Set end`, `-100ms`, and `+100ms` to adjust the selected cue timing against the audio.
6. Use `Save SRT` during local development, or `Export SRT` to download the file manually.
Each SRT file belongs to one voice, not one dialogue. Cue indexes must match the `subtitleCueIndex` values referenced by the dialogue manifest.
## Validating Dialogue Assets
Use `Validate` in the SRT panel to check the dialogue manifest and linked assets.
The validation checks:
- `public/sounds/dialogue/dialogues.json`
- referenced dialogue audio files
- French SRT files
- subtitle cue indexes referenced by the manifest
Missing English SRT files are warnings, not errors, because the runtime falls back to French subtitles. This is intentional until the English translation workflow is ready.
## Editing Cinematics
Use the `Cinematics` panel to edit `public/cinematics.json`.
Each cinematic contains:
- an `id`
- an optional global `timecode`
- two or more camera keyframes
- optional dialogue cues synchronized to the cinematic timeline
Camera keyframes define:
- `time`: seconds relative to the cinematic start
- `position`: camera position `[x, y, z]`
- `target`: point the camera looks at `[x, y, z]`
Dialogue cues define:
- `time`: seconds relative to the cinematic start
- `dialogueId`: an entry from `public/sounds/dialogue/dialogues.json`
Available actions:
- `Reload` reloads the cinematic manifest from disk.
- `Add` creates a new local cinematic with two camera keyframes.
- `Save` writes `public/cinematics.json` through the local Vite dev server.
- `Preview cinematic` plays the selected camera animation in the editor canvas.
- `Add keyframe` and `Remove` edit the camera path.
- `Add dialogue` and `Remove` edit dialogue cues linked to the cinematic.
- `Delete cinematic` removes the selected cinematic locally.
Cinematic dialogue cues are the preferred way to synchronize a dialogue with a cinematic. Avoid also giving the same dialogue a global `timecode`, or it can be triggered twice.
## Current Limitations
- The editor only modifies existing nodes.
@@ -162,5 +81,3 @@ Cinematic dialogue cues are the preferred way to synchronize a dialogue with a c
- It does not edit model files or textures.
- It does not provide production persistence.
- Fallback cubes indicate missing models; they are editor placeholders, not exported assets.
- SRT saving is a local Vite dev-server helper, not a production backend feature.
- Dialogue and cinematic saves are local Vite dev-server helpers, not production backend features.
+5 -43
View File
@@ -18,7 +18,6 @@ This document lists features that are implemented in the current codebase.
- Pointer lock mouse look
- Movement with `ZQSD`
- Jumping
- Movement lock during active repair steps, with an on-screen indicator while keeping trigger interactions available
- Octree-based collision against dedicated map collision nodes, currently scoped to `terrain`
## Interactions
@@ -34,48 +33,18 @@ This document lists features that are implemented in the current codebase.
- 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, movement lock indicator during active repair, repair-case trigger interaction, case placeholder traversal, snap-to-placeholder placement, broken-part deposit feedback, `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 feedback, and mission completion
- 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
## Audio
- Category-based volumes for music, SFX, and dialogue
- Looped background music playback through `AudioManager`
- One-shot sound playback for SFX and dialogue, with simple per-sound pooling
- Optional stereo pan for one-shot sounds
## Dialogue And Subtitles
- Dialogue manifest in `public/sounds/dialogue/dialogues.json`
- Dialogue audio loaded from `public/sounds/dialogue/`
- One SRT subtitle file per voice and language
- French subtitle fallback when the selected language file is missing
- Runtime subtitle overlay with speaker-specific colors
- Timecoded dialogue trigger support for dialogue entries that define `timecode`
- Dialogue queueing to avoid overlapping dialogue playback
## Cinematics
- Cinematic manifest in `public/cinematics.json`
- Timecoded cinematic trigger support
- GSAP camera keyframe playback
- Optional dialogue cues synchronized to cinematic timelines
- Player input lock while a cinematic is active
## Game Options Menu
- `Esc` opens and closes the in-game options menu
- Music, SFX, and dialogue volume sliders
- Subtitle visibility toggle
- Subtitle language choice between French and English
- Repair runtime choice between local JavaScript and Python server mode
- Quit action that clears browser-accessible cookies and returns to `/`
- One-shot sound playback for trigger interactions
- Simple per-sound pooling through `AudioManager`
## Debug Tooling
- `?debug` query param enables the debug panel
- `lil-gui` controls for camera mode, scene mode, `R3F Perf`, `Debug Overlay`, and interaction tuning
- Compact debug overlay for game state controls and hand tracking status
- Debug game-state mission switching unlocks locked repair missions at `waiting` for faster testing
- Debug scene helpers
- Free debug camera
- `r3f-perf` overlay
@@ -93,20 +62,13 @@ This document lists features that are implemented in the current codebase.
- Player-style navigation mode with `WASD`, `ZQSD`, arrow keys, `Space`, and `Shift`
- JSON export for downloading the edited map
- Dev-server save endpoint for writing changes back to `public/map.json`
- SRT editor for dialogue subtitles
- Audio preview and timing helpers for SRT cues
- Dev-server save endpoint for SRT files
- Dialogue manifest editor with preview and assisted French SRT cue creation
- Cinematic manifest editor with camera keyframes, dialogue cues, and canvas preview
- Dialogue manifest validation from the editor UI
## Not Implemented Yet
- complete mission system
- zone system
- full cinematic system beyond current timecode prototype
- gameplay-triggered dialogue branches beyond current prototype triggers
- loading flow
- cinematic system
- dialogue system
- minimap and mission HUD
- full production separation between gameplay and debug scenes
- production backend persistence for editor saves
+9 -11
View File
@@ -12,15 +12,15 @@ The current user flow is:
2. Move close to the active repair object in the game scene.
3. Aim at the object and press the interaction key when prompted.
4. The mission step moves from `waiting` to `inspected`.
5. The repair case appears near the mission object, the player movement controls are locked, and the case can float when the player approaches it.
6. Aim at the repair case and press `E`, or hold both fists closed for one second, to move from `inspected` to `fragmented`.
5. The repair case appears near the mission object and can float when the player approaches it.
6. Press `E` or hold both fists closed for one second to move from `inspected` to `fragmented`.
7. The mission object uses an exploded-model transition, then moves to `scanning`.
8. The scan visual moves across the fragmented model one part at a time and keeps a red marker plus the `cassé.webm` prompt centered on any configured broken part once it has been found.
9. In `repairing`, the case opens in a larger focused view and several grabbable replacement parts appear on the case placeholders.
10. Move the correct replacement part close to a placeholder. When released near a placeholder, it snaps into place with a short animation.
11. Move each scanned broken part into a compatible placeholder so the damaged parts are stored in the case.
12. Press `E` on the green install target to move to `reassembling`. Wrong parts turn the target red and cannot finish the repair.
13. The exploded object animates back into its assembled form with completion particles, then moves to `done` and restores player movement controls.
13. The exploded object animates back into its assembled form with completion particles, then moves to `done`.
14. Press `E` on the completion target. The repair case closes, returns to the ground, disappears, then `completeMission` moves to the next mission or to `outro` after `ferme`.
## Why It Matters
@@ -31,11 +31,11 @@ This feature validates the repair loop before a full mission system exists. It t
In `waiting`, the active mission renders its repair object and the `interagir.webm` prompt in the game scene. The interaction uses the shared focus/raycast interaction system, so the player still gets the normal `E` prompt.
When the player inspects the object, `RepairGame` writes `inspected` through the generic mission store action. The repair case then appears from the mission config with a small pop animation, player movement is locked while the repair sequence is active, and a small HTML indicator confirms that movement is temporarily unavailable. When the player is close enough, the existing case model floats upward and rotates gently to signal interactivity.
When the player inspects the object, `RepairGame` writes `inspected` through the generic mission store action. The repair case then appears from the mission config with a small pop animation. When the player is close enough, the existing case model floats upward and rotates gently to signal interactivity.
In `inspected`, `RepairGame` can also move to `fragmented`. Keyboard input goes through the shared focus/raycast interaction system on the repair case, so the player must be close enough and aim at the case before pressing `E`. The hand-tracking path still uses a two-fists hold gesture and is state-based, so it does not depend on being inside a local object interaction radius.
In `inspected`, `RepairGame` can also move to `fragmented`. The player can use the interaction key or hold both fists closed for one second. The hand-tracking path is state-based, so it does not depend on being inside a local object interaction radius.
In `fragmented`, the repair object is rendered with `ExplodableModel`, then automatically advances to `scanning`. In `scanning`, the exploded model remains visible, a blue scan visual moves from part to part, and a red halo/wire marker plus the configured broken UI video stay attached to configured broken parts after the scanner reaches them. The scan can match a specific `nodeName` when mission data provides one, otherwise it falls back to the first scanned parts as placeholder broken parts. In `repairing`, the case opens in a larger focused transform, `RepairCaseModel` traverses the case GLTF for empty nodes named `placeholder_*`, several grabbable replacement parts appear on those placeholder positions, and releasing a part near a placeholder snaps it into place with a short GSAP animation. Scanned broken parts are also rendered as grabbable objects and must be deposited into a compatible placeholder before the final install target validates. If `brokenParts[].placeholderName` is configured, that broken part snaps only to the matching placeholder; otherwise it can use any available placeholder. If the current case asset has no placeholder nodes, the flow keeps using fallback focus positions. Replacement parts show green or red placement feedback after snapping, broken parts show stored feedback after deposit, and the install target gives a short blocked feedback if the player tries to validate too early. The install target only validates when the configured correct replacement part is placed and all scanned broken parts have been deposited. Player movement stays locked through `inspected`, `fragmented`, `scanning`, `repairing`, and `reassembling`, while trigger interactions remain available. In `reassembling`, the exploded model animates back into its assembled position with green completion particles before the flow moves to `done`. In `done`, player movement is available again and the repaired object remains visible with a completion target; validating closes the repair case first, then plays the case exit animation before advancing the global mission progression.
In `fragmented`, the repair object is rendered with `ExplodableModel`, then automatically advances to `scanning`. In `scanning`, the exploded model remains visible, a blue scan visual moves from part to part, and a red halo/wire marker plus the configured broken UI video stay attached to configured broken parts after the scanner reaches them. The scan can match a specific `nodeName` when mission data provides one, otherwise it falls back to the first scanned parts as placeholder broken parts. In `repairing`, the case opens in a larger focused transform, `RepairCaseModel` traverses the case GLTF for empty nodes named `placeholder_*`, several grabbable replacement parts appear on those placeholder positions, and releasing a part near a placeholder snaps it into place with a short GSAP animation. Scanned broken parts are also rendered as grabbable objects and must be deposited into a compatible placeholder before the final install target validates. If `brokenParts[].placeholderName` is configured, that broken part snaps only to the matching placeholder; otherwise it can use any available placeholder. If the current case asset has no placeholder nodes, the flow keeps using fallback focus positions. The install target only validates when the configured correct replacement part is placed and all scanned broken parts have been deposited. In `reassembling`, the exploded model animates back into its assembled position with green completion particles before the flow moves to `done`. In `done`, the repaired object remains visible with a completion target that plays the case exit animation before advancing the global mission progression.
The mission config now carries the mission-specific variations. `bike` repairs one cooling core, `pylone` scans and stores both the lamp relay and a damaged panel with slower scan/reassembly timing, and `ferme` scans and stores an irrigation pump plus humidity sensor with faster scan/reassembly timing.
@@ -54,10 +54,8 @@ The mission config now carries the mission-specific variations. `bike` repairs o
- `src/components/three/gameplay/RepairPromptVideo.tsx` renders `.webm` prompts inside the 3D scene.
- `src/components/three/gameplay/RepairScanSequence.tsx` keeps the exploded model visible and advances the scan from part to part.
- `src/components/three/gameplay/RepairScanVisual.tsx` renders the scan halo and scan line around the active part.
- `src/components/ui/RepairMovementLockIndicator.tsx` renders the HTML indicator shown while repair movement is locked.
- `src/hooks/gameplay/useRepairFragmentationInput.ts` handles the `inspected -> fragmented` two-fists input and can optionally bind keyboard input for non-trigger flows.
- `src/hooks/gameplay/useRepairFragmentationInput.ts` handles the `inspected -> fragmented` keyboard and hand-tracking input.
- `src/hooks/gameplay/useRepairMissionStep.ts` reads the active mission step from the game store.
- `src/hooks/gameplay/useRepairMovementLocked.ts` exposes the shared repair movement-lock rule used by the player controller and UI indicator.
- `src/hooks/handTracking/useBothFistsHold.ts` detects the reusable two-fists hold gesture.
- `src/components/three/gameplay/RepairCaseModel.tsx` renders and animates the case model, and exposes `placeholder_*` transforms when the GLTF provides them.
- `src/components/three/models/ExplodableModel.tsx` renders selectable models with split/exploded visualization.
@@ -88,7 +86,7 @@ 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`; selecting a locked repair mission in that panel opens it at `waiting`, and the matching repair zone mounts the same reusable `RepairGame` flow with that mission's model, broken parts, replacement parts, prompts, and timings.
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
@@ -106,5 +104,5 @@ python -m backend.main
- The reusable production `RepairGame` currently covers `waiting -> inspected -> fragmented -> scanning -> repairing -> reassembling -> done -> next mission`.
- Mission progression is wired through Zustand using `completeMission` at the end of each repair.
- There is no central `GameManager` in this branch.
- Hand tracking is available for the two-fists input and grabbable repair parts; case interaction and final installation still use the shared `E` trigger path.
- Hand tracking is available for the two-fists input and grabbable replacement parts; final installation still uses the shared `E` trigger path.
- The repair-game content is configured statically in `src/data/gameplay/`.
-27
View File
@@ -1,27 +0,0 @@
{
"version": 1,
"cinematics": [
{
"id": "intro_overview",
"timecode": 0,
"dialogueCues": [
{
"time": 0,
"dialogueId": "narrateur_bienvenueaaltera"
}
],
"cameraKeyframes": [
{
"time": 0,
"position": [8, 5, 12],
"target": [0, 2, 0]
},
{
"time": 4,
"position": [12, 4, -6],
"target": [10, 1.4, -8]
}
]
}
]
}
-187
View File
@@ -1,187 +0,0 @@
{
"version": 1,
"voices": [
{
"id": "narrateur",
"speaker": "Narrateur",
"subtitles": {
"fr": "/sounds/dialogue/subtitles/fr/narrateur.srt",
"en": "/sounds/dialogue/subtitles/en/narrateur.srt"
}
},
{
"id": "fermier",
"speaker": "Fermier",
"subtitles": {
"fr": "/sounds/dialogue/subtitles/fr/fermier.srt",
"en": "/sounds/dialogue/subtitles/en/fermier.srt"
}
},
{
"id": "electricienne",
"speaker": "Electricienne",
"subtitles": {
"fr": "/sounds/dialogue/subtitles/fr/electricienne.srt",
"en": "/sounds/dialogue/subtitles/en/electricienne.srt"
}
}
],
"dialogues": [
{
"id": "narrateur_bienvenueaaltera",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_bienvenueaaltera.mp3",
"subtitleCueIndex": 1
},
{
"id": "narrateur_intro_prenom",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_intro_prenom.mp3",
"subtitleCueIndex": 2
},
{
"id": "narrateur_intro_apresprenom",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_intro_apresprenom.mp3",
"subtitleCueIndex": 3
},
{
"id": "narrateur_ordreebike",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_ordreebike.mp3",
"subtitleCueIndex": 4
},
{
"id": "narrateur_ebikecasse",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_ebikecassé.mp3",
"subtitleCueIndex": 5
},
{
"id": "narrateur_galetscan",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_galetscan.mp3",
"subtitleCueIndex": 6
},
{
"id": "narrateur_ebikerepare",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_ebikeréparé.mp3",
"subtitleCueIndex": 7
},
{
"id": "narrateur_ordredemandedelaide",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_ordredemandedelaide.mp3",
"subtitleCueIndex": 8
},
{
"id": "narrateur_coupureelec",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_coupureélec.mp3",
"subtitleCueIndex": 9
},
{
"id": "narrateur_poteaueleccasse",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_poteauéleccassé.mp3",
"subtitleCueIndex": 10
},
{
"id": "narrateur_courantrepare",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_courantréparé.mp3",
"subtitleCueIndex": 11
},
{
"id": "narrateur_routeversferme",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_routeversferme.mp3",
"subtitleCueIndex": 12
},
{
"id": "narrateur_arriveferme",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_arrivéferme.mp3",
"subtitleCueIndex": 13
},
{
"id": "narrateur_fouillelecentre",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_fouillelecentre.mp3",
"subtitleCueIndex": 14
},
{
"id": "narrateur_interactiontuyauxlac",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_interactiontuyauxlac.mp3",
"subtitleCueIndex": 15
},
{
"id": "narrateur_interactionrefroidisseur",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_interactionrefroidisseur.mp3",
"subtitleCueIndex": 16
},
{
"id": "narrateur_refroidisseurcasse",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_refroidisseurcassé.mp3",
"subtitleCueIndex": 17
},
{
"id": "narrateur_createurdepluiecree",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_createurdepluiecréé.mp3",
"subtitleCueIndex": 18
},
{
"id": "narrateur_remerciement",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_remerciement.mp3",
"subtitleCueIndex": 19
},
{
"id": "narrateur_bonnechance",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_bonnechance.mp3",
"subtitleCueIndex": 20
},
{
"id": "narrateur_presentationatelier",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_présentationatelier.mp3",
"subtitleCueIndex": 21
},
{
"id": "narrateur_presentationoutils",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_présentationoutils.mp3",
"subtitleCueIndex": 22
},
{
"id": "narrateur_histoireelectricienne",
"voice": "narrateur",
"audio": "/sounds/dialogue/narrateur_histoireelectricienne.mp3",
"subtitleCueIndex": 23
},
{
"id": "fermier_coupdemain",
"voice": "fermier",
"audio": "/sounds/dialogue/fermier_coupdemain.mp3",
"subtitleCueIndex": 1
},
{
"id": "fermier_coupdemain_2",
"voice": "fermier",
"audio": "/sounds/dialogue/fermier_coupdemain_2.mp3",
"subtitleCueIndex": 2
},
{
"id": "fermier_findemission",
"voice": "fermier",
"audio": "/sounds/dialogue/fermier_findemission.mp3",
"subtitleCueIndex": 3
}
]
}
@@ -1,11 +0,0 @@
# English Subtitle Fallback
English SRT files are intentionally optional for now.
The dialogue runtime first tries the selected subtitle language, then falls back to French. Missing English files should therefore remain validation warnings, not blocking errors, until the English translation workflow is ready.
Expected future files:
- `narrateur.srt`
- `fermier.srt`
- `electricienne.srt`
@@ -1,11 +0,0 @@
1
00:00:00,000 --> 00:00:08,000
Hey!! How are you? Do you need help placing the rollers?
2
00:00:00,000 --> 00:00:08,000
Don't hesitate if you need anything else!
3
00:00:00,000 --> 00:00:08,000
See you next time!
@@ -1,11 +0,0 @@
1
00:00:00,000 --> 00:00:04,032
Wait, wait, young man! I'll give you a hand.
2
00:00:00,000 --> 00:00:03,744
I did puzzles all through my youth. Try this!
3
00:00:00,000 --> 00:00:07,104
If you need anything else, don't hesitate, my boy. I'm getting old, but my mind is still sharp, hehehe!
@@ -1,91 +0,0 @@
1
00:00:00,000 --> 00:00:02,760
Hello there, future resident of Altera! Today, you are going to discover the technician role at La Fabrik, which handles Low-Tech technologies and repairs.
2
00:00:00,000 --> 00:00:11,592
Before we start, what's your name?
3
00:00:00,000 --> 00:00:10,824
Very good! We'll begin step by step to show you how the workshop works. Then you'll start your day and see the positive impact La Fabrik has on the community and the neighborhood.
4
00:00:00,000 --> 00:00:06,072
Let's go! You need to head to the farm, we're looking to improve something! Hop on your E-Bike.
5
00:00:00,000 --> 00:00:12,720
What? Your E-Bike is broken? Well, that's not too serious, it happens! Use the two rollers on your gloves. They're real technological gems. Place one under the bike, and one above it.
6
00:00:00,000 --> 00:00:08,064
So? Pretty amazing, right? Anyway, these rollers will scan the components to find out what we need to repair and/or replace.
7
00:00:00,000 --> 00:00:04,992
Perfect! The cooler gave out, you can replace it with one of the components from your pack. Aaaand there we go! It runs like clockwork! Go on, hurry!
8
00:00:00,000 --> 00:00:04,512
Don't hesitate to ask for help if you need it, everyone is super welcoming here.
9
00:00:00,000 --> 00:00:08,880
Oh woooow!! Did you see that???? All the traffic lights, computers and lights went out!! Hurry to the Energy Center, we can't even send repaired devices back out!
10
00:00:00,000 --> 00:00:09,840
Ah! A power pole fell down! Damn! Aaah, those little moles, they cause so much trouble... But they're so cuuuute!
11
00:00:00,000 --> 00:00:07,632
Woohoo! Great! Power is back across the whole neighborhood! Well done! Now head to the farm.
12
00:00:00,000 --> 00:00:05,352
Well, thanks to you I was able to finish my emergency! Oh, you're almost at the farm!
13
00:00:00,000 --> 00:00:11,760
Okay, enough of the emotional moment haha! For the farm, as I told you, we need to change the irrigation here. During drought periods, residents complain about an issue. See what you can do.
14
00:00:00,000 --> 00:00:04,560
Okay, perfect, you're there! Search the Center to find where the problem is coming from.
15
00:00:00,000 --> 00:00:06,864
Yeees! That's it! We'd like to stop pumping water from the lake, otherwise we'll drain all its reserves. What do you suggest?
16
00:00:00,000 --> 00:00:10,944
The old cooler from your E-Bike?? Yes!! Hahaha, great idea! Combined with the old lake pipes, we'll be able to make something cool! Put all that between your pads!
17
00:00:00,000 --> 00:00:05,712
The cooler from your E-Bike is broken, but we can still make something useful out of it.
18
00:00:00,000 --> 00:00:10,032
Ma-gni-fi-cent! I can see Gilbert helped you haha, he's such a sweetheart! You did a great job! And thanks to you, the neighborhood has been improved.
19
00:00:00,000 --> 00:00:11,520
Thank you so much for what you've brought to the community. The electrician and Gilbert really enjoyed helping you and told me they're looking forward to the next village party to get to know you better.
20
00:00:00,000 --> 00:00:02,352
Good luck! I've got work to do!
21
00:00:00,000 --> 00:00:33,600
Welcome to your workshop!! So? Pretty impressive, right? Okay, quick tour of what's here: this is your workbench. In the pipes are items from neighborhood residents that broke down and are waiting to be repaired. Once repaired, you put the item in this pipe and it goes back to the right person.
22
00:00:00,000 --> 00:00:14,760
Here, this is a dashboard. You can imagine that if your fridge or oven breaks down, you won't be able to put it in the pipe haha! So here, it tells you when residents have a bulky item that broke down, or when there's a problem in the city. Uh oh... I've got an emergency, I'll have to leave you soon! So here, take your tools to repair most things: a mini 3D printer powered by electronic waste, Push-Parts gloves to disassemble objects, and a Relaunch pack!
23
00:00:00,000 --> 00:00:54,000
The electrician helped you at the Power Plant? Aaaaah, that's what I love here: everyone helps each other, nobody judges anyone, it's like a real little family. You should know the electrician has quite a special story. She was born in the north of the continent, in the city of Kalska. She grew up happily with her mother Edith, her father Jordan, and her two little brothers, Malo and Justin. A few years ago, as you know, the northern countries were, quite unexpectedly, the first ones forced to migrate. So they began their journey, country by country, city by city, village by village. On a day of walking like so many others after several months, a climate storm caught them off guard. Having split up to find food in the village, her father and one of her two brothers sadly disappeared. It's tragic. But one day, they happened upon this place during their journey. We welcomed them with open arms, and they were slowly able to rebuild their lives among us. Today, they are an integral part of the community.
@@ -1,11 +0,0 @@
1
00:00:00,000 --> 00:00:08,000
Hey !! Comment ça va ? Tu as besoin d'aide pour poser les galets ?
2
00:00:00,000 --> 00:00:08,000
N'hésite pas, si tu as besoin d'autre chose !
3
00:00:00,000 --> 00:00:08,000
À la prochaine !
@@ -1,11 +0,0 @@
1
00:00:00,000 --> 00:00:04,032
Attendez attendez jeune homme ! Je vais vous filer un coup de main.
2
00:00:00,000 --> 00:00:03,744
J'ai fait des puzzles toute ma jeunesse. Essayez donc ça !
3
00:00:00,000 --> 00:00:07,104
Si vous avez besoin d'autre chose hésitez pas mon grand. Je me fais vieux mais j'ai encore toute ma tête hehehe !
@@ -1,91 +0,0 @@
1
00:00:00,000 --> 00:00:02,760
Bonjour à toi, futur habitant d'Altéra ! Aujourd'hui tu vas découvrir le rôle de technicien au sein de La Fabrik qui s'occupe des technologies et réparation Low-Tech.
2
00:00:00,000 --> 00:00:11,592
Avant de commencer, comment tu t'appelles ?
3
00:00:00,000 --> 00:00:10,824
Très bien ! On va commencer pas à pas pour te montrer comment fonctionne l'atelier. Ensuite, tu commenceras ta journée et tu pourras te rendre compte de l'impact positif qu'a la Fabrik sur la communauté et le quartier.
4
00:00:00,000 --> 00:00:06,072
Allez go ! Il faudrait que tu ailles à la ferme, on cherche à améliorer quelque chose ! Monte sur ton E-Bike.
5
00:00:00,000 --> 00:00:12,720
Quoi ? Ton E-Bike est cassé ? Bon c'est pas très grave, ça arrive ! Utilise les deux galets qui sont sur tes gants. Ce sont de véritables bijoux technologiques. Poses en un en-dessous du vélo, et un au-dessus.
6
00:00:00,000 --> 00:00:08,064
Alors ? Pas magnifique ça ? Enfin bref, ces galets vont scanner les composants pour savoir ce qu'on doit réparer et / ou changer.
7
00:00:00,000 --> 00:00:04,992
Parfait ! C'est le refroidisseur qui a lâché, tu peux le remplacer avec un des composants de ton pack. Eeeet voilà ! Il fonctionne comme une horloge ! Allez fonce !
8
00:00:00,000 --> 00:00:04,512
N'hésite pas à aller demander de l'aide si tu as besoin, tout le monde est super accueillant ici.
9
00:00:00,000 --> 00:00:08,880
Oh woooow !! T'as vu ça ???? Tous les feux, ordinateurs et lumières se sont éteints !! Faut vite que t'aille au Centre de l'Énergie, on ne peut même plus renvoyer les appareils réparés !
10
00:00:00,000 --> 00:00:09,840
Ah ! C'est un poteau d'alimentation qui est tombé ! Mince ! Alalaaa, ces petites taupes, elles en font des bêtises... Mais elles sont si chouuuu !
11
00:00:00,000 --> 00:00:07,632
Wouuuuhouuu ! Super ! Le courant est revenu dans tout le quartier ! Bien joué ! Allez, fonce à la ferme.
12
00:00:00,000 --> 00:00:05,352
Booon, grâce à toi j'ai pu finir mon urgence ! Oh mais t'arrives bientôt à la ferme !
13
00:00:00,000 --> 00:00:11,760
Bon, fini le moment émotion haha ! Pour la ferme, comme je te l'ai dis, ici, il faut qu'on change l'irrigation. Durant les périodes de sécheresse, les habitants se plaignent d'un souci. Vois ce que tu peux faire.
14
00:00:00,000 --> 00:00:04,560
Ok parfait tu y es ! Fouille le Centre pour voir d'où vient le problème.
15
00:00:00,000 --> 00:00:06,864
Ouiii ! C'est ça ! On aimerait ne plus pomper l'eau dans le lac, sinon on va épuiser toutes ses réserves. Qu'est-ce que tu proposes ?
16
00:00:00,000 --> 00:00:10,944
L'ancien refroidisseur de ton E-Bike ?? Mais oui !! Hahaha, très bonne idée ! Combiné aux anciens tuyaux du lac, on va pouvoir faire quelque chose de cool ! Met tout ça entre tes pads !
17
00:00:00,000 --> 00:00:05,712
Le refroidisseur de ton E-Bike est cassé, mais on peut encore en faire quelque chose d'utile.
18
00:00:00,000 --> 00:00:10,032
Ma-gni-fique ! Je vois que Gilbert t'as aidé haha, il est adorable celui-là ! Tu as fait du super boulot ! Et grâce à toi, le quartier est amélioré.
19
00:00:00,000 --> 00:00:11,520
Merci beaucoup pour ce que tu as apporté à la communauté. L'électricienne et Gilbert ont beaucoup apprécié t'aider et m'ont dit qu'ils avaient hâte de la prochaine fête de village pour mieux apprendre à te connaître.
20
00:00:00,000 --> 00:00:02,352
Allez bonne chance ! J'ai du boulot !
21
00:00:00,000 --> 00:00:33,600
Bienvenue dans ton atelier !! Alors ? Ça claque hein ? Bon je te présente en rapide tout ce qu'il y a : ici c'est ton plan de travail. Dans les tuyaux, ce sont des objets des résidents du quartier qui sont tombés en panne qui attendent d'être réparés. Une fois réparé, tu mets l'objet dans ce tuyau et ça repart chez la bonne personne.
22
00:00:00,000 --> 00:00:14,760
Ici, c'est un tableau de bord. T'imagines bien que si ton frigo ou ton four tombe en panne, tu ne vas pas pouvoir le mettre dans le tuyau haha ! Donc ici, ça te signale quand des résidents ont un objet volumineux tombé en panne, ou quand il y a un problème dans la ville. Oh oh... j'ai une urgence, il va bientôt falloir que je te laisse ! Donc tiens, tes outils pour pouvoir réparer la plupart des choses : une mini imprimante 3D à base de déchets électroniques, des gants Pousse Pièces pour désassembler les objets, ainsi qu'un pack de Relance !
23
00:00:00,000 --> 00:00:54,000
L'électricienne t'a aidé à la Centrale ? Aaaaah c'est ça que j'adore ici, tout le monde s'entraide, personne se juge, une vraie petite famille. Sache que l'électricienne a une histoire assez particulière. Elle est née au nord du continent, dans la ville de Kalska. Elle a grandit heureuse, avec sa mère Edith, son père Jordan et ses deux petits frères Malo et Justin. Il y a quelques années de ça, comme tu le sais, c'est les pays du Nord, qui par grande surprise, ont été obligés de migrer en premier. Ils ont alors entamé leur périple, pays par pays, ville par ville, village par village. Un jour de marche comme les autres depuis plusieurs mois, une tempête climatique les a pris de court. S'étant séparés pour trouver des vivres dans le village, le père et un des deux frères sont malheureusement partis. C'est tragique. Mais un beau jour, ils sont tombés ici, par hasard dans leur périple. On les a accueillis les bras ouverts et ils ont pu se reconstruire doucement parmi nous et font partie intégrante de la communauté aujourd'hui.
@@ -1,665 +0,0 @@
import { useEffect, useState } from "react";
import { Play, Plus, RefreshCw, Save, Trash2 } from "lucide-react";
import type {
CinematicCameraKeyframe,
CinematicDefinition,
CinematicDialogueCue,
CinematicManifest,
} from "@/types/cinematics/cinematics";
import type {
DialogueDefinition,
DialogueManifest,
} from "@/types/dialogues/dialogues";
import type { Vector3Tuple } from "@/types/three/three";
import { loadCinematicManifest } from "@/utils/cinematics/loadCinematicManifest";
import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
type CinematicPatch = Partial<Omit<CinematicDefinition, "timecode">> & {
timecode?: number | undefined;
};
type VectorAxis = 0 | 1 | 2;
const VECTOR_AXES: { label: "X" | "Y" | "Z"; axis: VectorAxis }[] = [
{ label: "X", axis: 0 },
{ label: "Y", axis: 1 },
{ label: "Z", axis: 2 },
];
function createCinematic(index: number): CinematicDefinition {
return {
id: `new_cinematic_${index}`,
cameraKeyframes: [
{ time: 0, position: [0, 3, 8], target: [0, 1.5, 0] },
{ time: 3, position: [6, 3, 8], target: [0, 1.5, 0] },
],
};
}
function createKeyframe(
previousKeyframe: CinematicCameraKeyframe,
): CinematicCameraKeyframe {
return {
time: previousKeyframe.time + 3,
position: [...previousKeyframe.position],
target: [...previousKeyframe.target],
};
}
function createDialogueCue(
dialogues: DialogueDefinition[],
previousCue: CinematicDialogueCue | null,
): CinematicDialogueCue {
return {
time: previousCue ? previousCue.time + 1 : 0,
dialogueId: dialogues[0]?.id ?? "",
};
}
function getManifestErrors(
manifest: CinematicManifest | null,
dialogueIds: Set<string>,
): string[] {
if (!manifest) return ["Manifeste absent."];
const errors: string[] = [];
const ids = new Set<string>();
manifest.cinematics.forEach((cinematic, cinematicIndex) => {
const label = cinematic.id || `Cinematique ${cinematicIndex + 1}`;
if (!cinematic.id.trim()) errors.push(`${label}: id obligatoire.`);
if (ids.has(cinematic.id)) errors.push(`${label}: id duplique.`);
ids.add(cinematic.id);
if (
cinematic.timecode !== undefined &&
(!Number.isFinite(cinematic.timecode) || cinematic.timecode < 0)
) {
errors.push(`${label}: timecode invalide.`);
}
if (cinematic.cameraKeyframes.length < 2) {
errors.push(`${label}: au moins deux keyframes camera sont requises.`);
}
cinematic.cameraKeyframes.forEach((keyframe, keyframeIndex) => {
const previousKeyframe = cinematic.cameraKeyframes[keyframeIndex - 1];
if (!Number.isFinite(keyframe.time) || keyframe.time < 0) {
errors.push(`${label}: keyframe ${keyframeIndex + 1} time invalide.`);
}
if (previousKeyframe && keyframe.time <= previousKeyframe.time) {
errors.push(`${label}: les temps des keyframes doivent augmenter.`);
}
});
cinematic.dialogueCues?.forEach((cue, cueIndex) => {
if (!Number.isFinite(cue.time) || cue.time < 0) {
errors.push(`${label}: dialogue cue ${cueIndex + 1} time invalide.`);
}
if (!cue.dialogueId.trim()) {
errors.push(`${label}: dialogue cue ${cueIndex + 1} id obligatoire.`);
} else if (dialogueIds.size > 0 && !dialogueIds.has(cue.dialogueId)) {
errors.push(`${label}: dialogue cue ${cueIndex + 1} dialogue inconnu.`);
}
});
});
return errors;
}
async function saveCinematicManifest(
manifest: CinematicManifest,
): Promise<void> {
const response = await fetch("/api/save-cinematics", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(manifest),
});
if (!response.ok) {
const body = (await response.json().catch(() => null)) as {
error?: string;
} | null;
throw new Error(body?.error ?? "Sauvegarde des cinematics impossible");
}
}
function getPatchedCinematic(
cinematic: CinematicDefinition,
patch: CinematicPatch,
): CinematicDefinition {
const nextCinematic: CinematicDefinition = {
id: patch.id ?? cinematic.id,
cameraKeyframes: patch.cameraKeyframes ?? cinematic.cameraKeyframes,
};
const dialogueCues = patch.dialogueCues ?? cinematic.dialogueCues;
if (dialogueCues) {
nextCinematic.dialogueCues = dialogueCues;
}
if ("timecode" in patch) {
if (patch.timecode !== undefined) nextCinematic.timecode = patch.timecode;
} else if (cinematic.timecode !== undefined) {
nextCinematic.timecode = cinematic.timecode;
}
return nextCinematic;
}
function updateVector(
vector: Vector3Tuple,
axis: VectorAxis,
value: number,
): Vector3Tuple {
const nextVector: Vector3Tuple = [...vector];
nextVector[axis] = value;
return nextVector;
}
interface EditorCinematicManifestPanelProps {
onPreviewCinematic?: ((cinematic: CinematicDefinition) => void) | undefined;
}
export function EditorCinematicManifestPanel({
onPreviewCinematic,
}: EditorCinematicManifestPanelProps): React.JSX.Element {
const [manifest, setManifest] = useState<CinematicManifest | null>(null);
const [dialogueManifest, setDialogueManifest] =
useState<DialogueManifest | null>(null);
const [selectedCinematicId, setSelectedCinematicId] = useState("");
const [status, setStatus] = useState("Chargement des cinematics...");
const [isSaving, setIsSaving] = useState(false);
const dialogueIds = new Set(
dialogueManifest?.dialogues.map((dialogue) => dialogue.id) ?? [],
);
const errors = getManifestErrors(manifest, dialogueIds);
const selectedCinematic =
manifest?.cinematics.find(
(cinematic) => cinematic.id === selectedCinematicId,
) ??
manifest?.cinematics[0] ??
null;
async function handleLoad(): Promise<void> {
setStatus("Chargement des cinematics...");
try {
const [loadedManifest, loadedDialogueManifest] = await Promise.all([
loadCinematicManifest(),
loadDialogueManifest(),
]);
setManifest(loadedManifest);
setDialogueManifest(loadedDialogueManifest);
setSelectedCinematicId(loadedManifest?.cinematics[0]?.id ?? "");
setStatus(
loadedManifest
? `Manifeste charge: ${loadedManifest.cinematics.length} cinematics.`
: "Manifeste cinematics introuvable ou invalide.",
);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
setManifest(null);
}
}
async function handleSave(): Promise<void> {
if (!manifest) return;
if (errors.length > 0) {
setStatus("Corrige les erreurs avant de sauvegarder.");
return;
}
setIsSaving(true);
setStatus("Sauvegarde des cinematics...");
try {
await saveCinematicManifest(manifest);
setStatus("Manifeste sauvegarde dans public/cinematics.json.");
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
} finally {
setIsSaving(false);
}
}
function handleAddCinematic(): void {
if (!manifest) return;
const cinematic = createCinematic(manifest.cinematics.length + 1);
setManifest({
...manifest,
cinematics: [...manifest.cinematics, cinematic],
});
setSelectedCinematicId(cinematic.id);
setStatus("Nouvelle cinematic ajoutee localement.");
}
function handleRemoveCinematic(cinematicId: string): void {
if (!manifest) return;
const nextCinematics = manifest.cinematics.filter(
(cinematic) => cinematic.id !== cinematicId,
);
setManifest({ ...manifest, cinematics: nextCinematics });
setSelectedCinematicId(nextCinematics[0]?.id ?? "");
setStatus("Cinematic supprimee localement.");
}
function updateSelectedCinematic(
patch: CinematicPatch,
nextId = selectedCinematicId,
): void {
if (!manifest || !selectedCinematic) return;
setManifest({
...manifest,
cinematics: manifest.cinematics.map((cinematic) =>
cinematic.id === selectedCinematic.id
? getPatchedCinematic(cinematic, patch)
: cinematic,
),
});
setSelectedCinematicId(nextId);
}
function updateKeyframe(
keyframeIndex: number,
patch: Partial<CinematicCameraKeyframe>,
): void {
if (!selectedCinematic) return;
updateSelectedCinematic({
cameraKeyframes: selectedCinematic.cameraKeyframes.map(
(keyframe, index) =>
index === keyframeIndex ? { ...keyframe, ...patch } : keyframe,
),
});
}
function handleAddKeyframe(): void {
if (!selectedCinematic) return;
const previousKeyframe =
selectedCinematic.cameraKeyframes[
selectedCinematic.cameraKeyframes.length - 1
];
if (!previousKeyframe) return;
updateSelectedCinematic({
cameraKeyframes: [
...selectedCinematic.cameraKeyframes,
createKeyframe(previousKeyframe),
],
});
setStatus("Keyframe ajoutee localement.");
}
function handleRemoveKeyframe(keyframeIndex: number): void {
if (!selectedCinematic) return;
updateSelectedCinematic({
cameraKeyframes: selectedCinematic.cameraKeyframes.filter(
(_keyframe, index) => index !== keyframeIndex,
),
});
setStatus("Keyframe supprimee localement.");
}
function updateDialogueCue(
cueIndex: number,
patch: Partial<CinematicDialogueCue>,
): void {
if (!selectedCinematic) return;
const dialogueCues = selectedCinematic.dialogueCues ?? [];
updateSelectedCinematic({
dialogueCues: dialogueCues.map((cue, index) =>
index === cueIndex ? { ...cue, ...patch } : cue,
),
});
}
function handleAddDialogueCue(): void {
if (!selectedCinematic) return;
const dialogueCues = selectedCinematic.dialogueCues ?? [];
const previousCue = dialogueCues[dialogueCues.length - 1] ?? null;
updateSelectedCinematic({
dialogueCues: [
...dialogueCues,
createDialogueCue(dialogueManifest?.dialogues ?? [], previousCue),
],
});
setStatus("Dialogue cue ajoutee localement.");
}
function handleRemoveDialogueCue(cueIndex: number): void {
if (!selectedCinematic) return;
updateSelectedCinematic({
dialogueCues: (selectedCinematic.dialogueCues ?? []).filter(
(_cue, index) => index !== cueIndex,
),
});
setStatus("Dialogue cue supprimee localement.");
}
useEffect(() => {
let mounted = true;
void Promise.all([loadCinematicManifest(), loadDialogueManifest()])
.then(([loadedManifest, loadedDialogueManifest]) => {
if (!mounted) return;
setManifest(loadedManifest);
setDialogueManifest(loadedDialogueManifest);
setSelectedCinematicId(loadedManifest?.cinematics[0]?.id ?? "");
setStatus(
loadedManifest
? `Manifeste charge: ${loadedManifest.cinematics.length} cinematics.`
: "Manifeste cinematics introuvable ou invalide.",
);
})
.catch((err: unknown) => {
if (!mounted) return;
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
setManifest(null);
});
return () => {
mounted = false;
};
}, []);
return (
<section
className="editor-cinematic-manifest-section"
aria-labelledby="cinematic-manifest-heading"
>
<div className="editor-section-heading">
<h3 id="cinematic-manifest-heading">Cinematics</h3>
<span>{manifest?.cinematics.length ?? 0} items</span>
</div>
<div className="editor-cinematic-manifest-actions">
<button type="button" onClick={() => void handleLoad()}>
<RefreshCw size={14} aria-hidden="true" />
Reload
</button>
<button type="button" disabled={!manifest} onClick={handleAddCinematic}>
<Plus size={14} aria-hidden="true" />
Add
</button>
<button
type="button"
disabled={!manifest || errors.length > 0 || isSaving}
onClick={() => void handleSave()}
>
<Save size={14} aria-hidden="true" />
{isSaving ? "Saving..." : "Save"}
</button>
</div>
{manifest && (
<label className="editor-cinematic-manifest-select">
Cinematic
<select
value={selectedCinematic?.id ?? ""}
onChange={(event) => setSelectedCinematicId(event.target.value)}
>
{manifest.cinematics.map((cinematic) => (
<option key={cinematic.id} value={cinematic.id}>
{cinematic.id || "Cinematic sans id"}
</option>
))}
</select>
</label>
)}
{selectedCinematic && (
<div className="editor-cinematic-manifest-form">
<label>
ID
<input
value={selectedCinematic.id}
onChange={(event) =>
updateSelectedCinematic(
{ id: event.target.value },
event.target.value,
)
}
/>
</label>
<label>
Timecode global optionnel
<input
type="number"
min="0"
step="0.1"
value={selectedCinematic.timecode ?? ""}
placeholder="Aucun"
onChange={(event) => {
const value = event.target.value.trim();
updateSelectedCinematic({
timecode: value === "" ? undefined : Number(value),
});
}}
/>
</label>
<div className="editor-cinematic-keyframes">
<div className="editor-cinematic-keyframes-heading">
<strong>Camera keyframes</strong>
<button type="button" onClick={handleAddKeyframe}>
<Plus size={13} aria-hidden="true" />
Add keyframe
</button>
</div>
{selectedCinematic.cameraKeyframes.map(
(keyframe, keyframeIndex) => (
<div
className="editor-cinematic-keyframe"
key={`${selectedCinematic.id}-${keyframeIndex}`}
>
<div className="editor-cinematic-keyframe-heading">
<strong>Keyframe {keyframeIndex + 1}</strong>
<button
type="button"
disabled={selectedCinematic.cameraKeyframes.length <= 2}
onClick={() => handleRemoveKeyframe(keyframeIndex)}
>
<Trash2 size={13} aria-hidden="true" />
Remove
</button>
</div>
<label>
Time
<input
type="number"
min="0"
step="0.1"
value={keyframe.time}
onChange={(event) =>
updateKeyframe(keyframeIndex, {
time: Number(event.target.value),
})
}
/>
</label>
<VectorInputs
label="Position"
value={keyframe.position}
onChange={(axis, value) =>
updateKeyframe(keyframeIndex, {
position: updateVector(keyframe.position, axis, value),
})
}
/>
<VectorInputs
label="Target"
value={keyframe.target}
onChange={(axis, value) =>
updateKeyframe(keyframeIndex, {
target: updateVector(keyframe.target, axis, value),
})
}
/>
</div>
),
)}
</div>
<div className="editor-cinematic-dialogue-cues">
<div className="editor-cinematic-dialogue-cues-heading">
<strong>Dialogue cues</strong>
<button type="button" onClick={handleAddDialogueCue}>
<Plus size={13} aria-hidden="true" />
Add dialogue
</button>
</div>
{(selectedCinematic.dialogueCues ?? []).length === 0 ? (
<p>Aucun dialogue synchronise avec cette cinematic.</p>
) : (
(selectedCinematic.dialogueCues ?? []).map((cue, cueIndex) => (
<div
className="editor-cinematic-dialogue-cue"
key={`${selectedCinematic.id}-dialogue-${cueIndex}`}
>
<div className="editor-cinematic-dialogue-cue-heading">
<strong>Dialogue {cueIndex + 1}</strong>
<button
type="button"
onClick={() => handleRemoveDialogueCue(cueIndex)}
>
<Trash2 size={13} aria-hidden="true" />
Remove
</button>
</div>
<label>
Time
<input
type="number"
min="0"
step="0.1"
value={cue.time}
onChange={(event) =>
updateDialogueCue(cueIndex, {
time: Number(event.target.value),
})
}
/>
</label>
<label>
Dialogue
<select
value={cue.dialogueId}
onChange={(event) =>
updateDialogueCue(cueIndex, {
dialogueId: event.target.value,
})
}
>
{dialogueManifest?.dialogues.length ? (
dialogueManifest.dialogues.map((dialogue) => (
<option key={dialogue.id} value={dialogue.id}>
{dialogue.id}
</option>
))
) : (
<option value={cue.dialogueId}>
{cue.dialogueId || "Aucun dialogue disponible"}
</option>
)}
</select>
</label>
</div>
))
)}
</div>
<button
className="editor-cinematic-manifest-preview"
type="button"
disabled={errors.length > 0 || !onPreviewCinematic}
onClick={() => onPreviewCinematic?.(selectedCinematic)}
>
<Play size={14} aria-hidden="true" />
Preview cinematic
</button>
<button
className="editor-cinematic-manifest-delete"
type="button"
onClick={() => handleRemoveCinematic(selectedCinematic.id)}
>
<Trash2 size={14} aria-hidden="true" />
Delete cinematic
</button>
</div>
)}
<p className="editor-cinematic-manifest-status">{status}</p>
<div
className={`editor-cinematic-manifest-diagnostic ${errors.length === 0 ? "is-valid" : "is-invalid"}`}
>
<strong>
{errors.length === 0
? "Manifeste local valide."
: `${errors.length} erreur${errors.length > 1 ? "s" : ""} locale${errors.length > 1 ? "s" : ""}.`}
</strong>
{errors.length > 0 && (
<ul>
{errors.map((error) => (
<li key={error}>{error}</li>
))}
</ul>
)}
</div>
</section>
);
}
interface VectorInputsProps {
label: string;
value: Vector3Tuple;
onChange: (axis: VectorAxis, value: number) => void;
}
function VectorInputs({
label,
value,
onChange,
}: VectorInputsProps): React.JSX.Element {
return (
<div className="editor-cinematic-vector-inputs">
<span>{label}</span>
{VECTOR_AXES.map(({ label: axisLabel, axis }) => (
<label key={axisLabel}>
{axisLabel}
<input
type="number"
step="0.1"
value={value[axis]}
onChange={(event) => onChange(axis, Number(event.target.value))}
/>
</label>
))}
</div>
);
}
-10
View File
@@ -12,10 +12,6 @@ import {
Save,
Undo2,
} from "lucide-react";
import { EditorCinematicManifestPanel } from "@/components/editor/EditorCinematicManifestPanel";
import { EditorDialogueManifestPanel } from "@/components/editor/EditorDialogueManifestPanel";
import { EditorSrtPanel } from "@/components/editor/EditorSrtPanel";
import type { CinematicDefinition } from "@/types/cinematics/cinematics";
import type { MapNode, TransformMode } from "@/types/editor/editor";
interface EditorControlsProps {
@@ -32,7 +28,6 @@ interface EditorControlsProps {
onExportJson: () => void;
onSaveToServer?: (() => void | Promise<void>) | undefined;
onPlayerMode?: (() => void) | undefined;
onPreviewCinematic?: ((cinematic: CinematicDefinition) => void) | undefined;
isPlayerMode?: boolean;
}
@@ -64,7 +59,6 @@ export function EditorControls({
onExportJson,
onSaveToServer,
onPlayerMode,
onPreviewCinematic,
isPlayerMode,
}: EditorControlsProps): React.JSX.Element {
const viewModeLabel = isPlayerMode ? "View locked" : "Lock view";
@@ -242,10 +236,6 @@ export function EditorControls({
: `Selected node ${selectedNodeIndex + 1} raw lines`}
</div>
</section>
<EditorCinematicManifestPanel onPreviewCinematic={onPreviewCinematic} />
<EditorDialogueManifestPanel />
<EditorSrtPanel />
</aside>
</>
);
@@ -1,554 +0,0 @@
import { useEffect, useRef, useState } from "react";
import { Play, Plus, RefreshCw, Save, Trash2 } from "lucide-react";
import type {
DialogueDefinition,
DialogueManifest,
DialogueSpeaker,
DialogueVoiceId,
} from "@/types/dialogues/dialogues";
import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
import { playDialogueById } from "@/utils/dialogues/playDialogue";
import { parseSrt } from "@/utils/subtitles/parseSrt";
const DEFAULT_VOICE: DialogueVoiceId = "narrateur";
type DialoguePatch = Partial<Omit<DialogueDefinition, "timecode">> & {
timecode?: number | undefined;
};
function createDialogue(
index: number,
manifest: DialogueManifest,
voice: DialogueVoiceId,
): DialogueDefinition {
return {
id: `new_dialogue_${index}`,
voice,
audio: `/sounds/dialogue/new_dialogue_${index}.mp3`,
subtitleCueIndex: getNextCueIndex(manifest, voice),
};
}
function getNextCueIndex(
manifest: DialogueManifest,
voice: DialogueVoiceId,
): number {
const cueIndexes = manifest.dialogues
.filter((dialogue) => dialogue.voice === voice)
.map((dialogue) => dialogue.subtitleCueIndex);
return Math.max(0, ...cueIndexes) + 1;
}
function getVoiceSpeaker(
manifest: DialogueManifest,
voice: DialogueVoiceId,
): DialogueSpeaker {
return (
manifest.voices.find((item) => item.id === voice)?.speaker ?? "Narrateur"
);
}
function getFrenchSrtPath(voice: DialogueVoiceId): string {
return `/sounds/dialogue/subtitles/fr/${voice}.srt`;
}
function createSrtCueBlock(cueIndex: number, speaker: DialogueSpeaker): string {
return `${cueIndex}\n00:00:00,000 --> 00:00:02,000\n${speaker}: Nouveau sous-titre ${cueIndex} a definir`;
}
function appendSrtCueIfMissing(
content: string,
cueIndex: number,
speaker: DialogueSpeaker,
): string {
const cues = parseSrt(content);
if (cues.some((cue) => cue.index === cueIndex)) return content;
const trimmedContent = content.trim();
const cueBlock = createSrtCueBlock(cueIndex, speaker);
return trimmedContent
? `${trimmedContent}\n\n${cueBlock}\n`
: `${cueBlock}\n`;
}
async function saveSrtFile(
voice: DialogueVoiceId,
content: string,
): Promise<void> {
const response = await fetch("/api/save-srt", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ voice, language: "fr", content }),
});
if (!response.ok) {
const body = (await response.json().catch(() => null)) as {
error?: string;
} | null;
throw new Error(body?.error ?? "Sauvegarde SRT impossible");
}
}
async function createFrenchSrtCue(
manifest: DialogueManifest,
dialogue: DialogueDefinition,
): Promise<void> {
const srtPath = getFrenchSrtPath(dialogue.voice);
const response = await fetch(srtPath);
const content = response.ok ? await response.text() : "";
const nextContent = appendSrtCueIfMissing(
content,
dialogue.subtitleCueIndex,
getVoiceSpeaker(manifest, dialogue.voice),
);
await saveSrtFile(dialogue.voice, nextContent);
}
function getManifestErrors(manifest: DialogueManifest | null): string[] {
if (!manifest) return ["Manifeste absent."];
const errors: string[] = [];
const ids = new Set<string>();
manifest.dialogues.forEach((dialogue, index) => {
const label = dialogue.id || `Dialogue ${index + 1}`;
if (!dialogue.id.trim()) errors.push(`${label}: id obligatoire.`);
if (ids.has(dialogue.id)) errors.push(`${label}: id duplique.`);
ids.add(dialogue.id);
if (!dialogue.audio.startsWith("/sounds/dialogue/")) {
errors.push(`${label}: audio doit commencer par /sounds/dialogue/.`);
}
if (!Number.isInteger(dialogue.subtitleCueIndex)) {
errors.push(`${label}: cue SRT invalide.`);
}
if (
dialogue.timecode !== undefined &&
(!Number.isFinite(dialogue.timecode) || dialogue.timecode < 0)
) {
errors.push(`${label}: timecode invalide.`);
}
});
return errors;
}
async function saveDialogueManifest(manifest: DialogueManifest): Promise<void> {
const response = await fetch("/api/save-dialogues", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(manifest),
});
if (!response.ok) {
const body = (await response.json().catch(() => null)) as {
error?: string;
} | null;
throw new Error(body?.error ?? "Sauvegarde du manifeste impossible");
}
}
function getPatchedDialogue(
dialogue: DialogueDefinition,
patch: DialoguePatch,
): DialogueDefinition {
const nextDialogue: DialogueDefinition = {
id: patch.id ?? dialogue.id,
voice: patch.voice ?? dialogue.voice,
audio: patch.audio ?? dialogue.audio,
subtitleCueIndex: patch.subtitleCueIndex ?? dialogue.subtitleCueIndex,
};
if ("timecode" in patch) {
if (patch.timecode !== undefined) nextDialogue.timecode = patch.timecode;
} else if (dialogue.timecode !== undefined) {
nextDialogue.timecode = dialogue.timecode;
}
return nextDialogue;
}
export function EditorDialogueManifestPanel(): React.JSX.Element {
const previewAudioRef = useRef<HTMLAudioElement | null>(null);
const [manifest, setManifest] = useState<DialogueManifest | null>(null);
const [selectedDialogueId, setSelectedDialogueId] = useState("");
const [status, setStatus] = useState("Chargement du manifeste...");
const [isSaving, setIsSaving] = useState(false);
const [isPreviewing, setIsPreviewing] = useState(false);
const [isCreatingSrtCue, setIsCreatingSrtCue] = useState(false);
const errors = getManifestErrors(manifest);
const selectedDialogue =
manifest?.dialogues.find(
(dialogue) => dialogue.id === selectedDialogueId,
) ??
manifest?.dialogues[0] ??
null;
const voices = manifest?.voices ?? [];
async function handleLoad(): Promise<void> {
setStatus("Chargement du manifeste...");
try {
const loadedManifest = await loadDialogueManifest();
setManifest(loadedManifest);
setSelectedDialogueId(loadedManifest?.dialogues[0]?.id ?? "");
setStatus(
loadedManifest
? `Manifeste charge: ${loadedManifest.dialogues.length} dialogues.`
: "Manifeste introuvable ou invalide.",
);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
setManifest(null);
}
}
async function handleSave(): Promise<void> {
if (!manifest) return;
if (errors.length > 0) {
setStatus("Corrige les erreurs avant de sauvegarder.");
return;
}
setIsSaving(true);
setStatus("Sauvegarde du manifeste...");
try {
await saveDialogueManifest(manifest);
setStatus(
"Manifeste sauvegarde dans public/sounds/dialogue/dialogues.json.",
);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
} finally {
setIsSaving(false);
}
}
async function handleAddDialogue(): Promise<void> {
if (!manifest) return;
const voice = selectedDialogue?.voice ?? DEFAULT_VOICE;
const dialogue = createDialogue(
manifest.dialogues.length + 1,
manifest,
voice,
);
const nextManifest = {
...manifest,
dialogues: [...manifest.dialogues, dialogue],
};
setManifest(nextManifest);
setSelectedDialogueId(dialogue.id);
setIsCreatingSrtCue(true);
setStatus("Nouveau dialogue ajoute localement. Creation de la cue FR...");
try {
await createFrenchSrtCue(nextManifest, dialogue);
setStatus(
`Nouveau dialogue ajoute avec cue FR ${dialogue.subtitleCueIndex}. Sauvegarde le manifeste pour le garder.`,
);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(
`Dialogue ajoute localement, mais cue FR non creee: ${message}`,
);
} finally {
setIsCreatingSrtCue(false);
}
}
function handleRemoveDialogue(dialogueId: string): void {
if (!manifest) return;
const nextDialogues = manifest.dialogues.filter(
(dialogue) => dialogue.id !== dialogueId,
);
setManifest({ ...manifest, dialogues: nextDialogues });
setSelectedDialogueId(nextDialogues[0]?.id ?? "");
setStatus("Dialogue supprime localement.");
}
function updateSelectedDialogue(
patch: DialoguePatch,
nextId = selectedDialogueId,
): void {
if (!manifest || !selectedDialogue) return;
setManifest({
...manifest,
dialogues: manifest.dialogues.map((dialogue) =>
dialogue.id === selectedDialogue.id
? getPatchedDialogue(dialogue, patch)
: dialogue,
),
});
setSelectedDialogueId(nextId);
}
async function handlePreviewDialogue(): Promise<void> {
if (!manifest || !selectedDialogue) return;
if (errors.length > 0) {
setStatus("Corrige les erreurs avant de lancer la preview.");
return;
}
previewAudioRef.current?.pause();
previewAudioRef.current = null;
setIsPreviewing(true);
setStatus(`Preview dialogue: ${selectedDialogue.id}`);
try {
const audio = await playDialogueById(manifest, selectedDialogue.id);
previewAudioRef.current = audio;
if (!audio) {
setStatus("Dialogue introuvable pour la preview.");
return;
}
const handleFinish = (): void => {
audio.removeEventListener("ended", handleFinish);
audio.removeEventListener("pause", handleFinish);
if (previewAudioRef.current === audio) previewAudioRef.current = null;
setIsPreviewing(false);
};
audio.addEventListener("ended", handleFinish);
audio.addEventListener("pause", handleFinish);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
setIsPreviewing(false);
}
}
async function handleCreateFrenchSrtCue(): Promise<void> {
if (!manifest || !selectedDialogue) return;
setIsCreatingSrtCue(true);
setStatus(`Creation de la cue FR ${selectedDialogue.subtitleCueIndex}...`);
try {
await createFrenchSrtCue(manifest, selectedDialogue);
setStatus(`Cue FR ${selectedDialogue.subtitleCueIndex} prete.`);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
} finally {
setIsCreatingSrtCue(false);
}
}
useEffect(() => {
let mounted = true;
void loadDialogueManifest()
.then((loadedManifest) => {
if (!mounted) return;
setManifest(loadedManifest);
setSelectedDialogueId(loadedManifest?.dialogues[0]?.id ?? "");
setStatus(
loadedManifest
? `Manifeste charge: ${loadedManifest.dialogues.length} dialogues.`
: "Manifeste introuvable ou invalide.",
);
})
.catch((err: unknown) => {
if (!mounted) return;
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(message);
setManifest(null);
});
return () => {
mounted = false;
previewAudioRef.current?.pause();
previewAudioRef.current = null;
};
}, []);
return (
<section
className="editor-dialogue-manifest-section"
aria-labelledby="dialogue-manifest-heading"
>
<div className="editor-section-heading">
<h3 id="dialogue-manifest-heading">Dialogues</h3>
<span>{manifest?.dialogues.length ?? 0} items</span>
</div>
<div className="editor-dialogue-manifest-actions">
<button type="button" onClick={() => void handleLoad()}>
<RefreshCw size={14} aria-hidden="true" />
Reload
</button>
<button
type="button"
disabled={!manifest || isCreatingSrtCue}
onClick={() => void handleAddDialogue()}
>
<Plus size={14} aria-hidden="true" />
{isCreatingSrtCue ? "Adding..." : "Add"}
</button>
<button
type="button"
disabled={!manifest || errors.length > 0 || isSaving}
onClick={() => void handleSave()}
>
<Save size={14} aria-hidden="true" />
{isSaving ? "Saving..." : "Save"}
</button>
</div>
{manifest && (
<label className="editor-dialogue-manifest-select">
Dialogue
<select
value={selectedDialogue?.id ?? ""}
onChange={(event) => setSelectedDialogueId(event.target.value)}
>
{manifest.dialogues.map((dialogue) => (
<option key={dialogue.id} value={dialogue.id}>
{dialogue.id || "Dialogue sans id"}
</option>
))}
</select>
</label>
)}
{selectedDialogue && (
<div className="editor-dialogue-manifest-form">
<label>
ID
<input
value={selectedDialogue.id}
onChange={(event) =>
updateSelectedDialogue(
{ id: event.target.value },
event.target.value,
)
}
/>
</label>
<label>
Voix
<select
value={selectedDialogue.voice}
onChange={(event) =>
updateSelectedDialogue({
voice: event.target.value as DialogueVoiceId,
})
}
>
{voices.map((voice) => (
<option key={voice.id} value={voice.id}>
{voice.speaker}
</option>
))}
</select>
</label>
<label>
Audio
<input
value={selectedDialogue.audio}
onChange={(event) =>
updateSelectedDialogue({ audio: event.target.value })
}
/>
</label>
<label>
Cue SRT
<input
type="number"
min="1"
step="1"
value={selectedDialogue.subtitleCueIndex}
onChange={(event) =>
updateSelectedDialogue({
subtitleCueIndex: Math.max(1, Number(event.target.value)),
})
}
/>
</label>
<label>
Timecode global optionnel
<input
type="number"
min="0"
step="0.1"
value={selectedDialogue.timecode ?? ""}
placeholder="Aucun"
onChange={(event) => {
const value = event.target.value.trim();
updateSelectedDialogue({
timecode: value === "" ? undefined : Number(value),
});
}}
/>
</label>
<button
className="editor-dialogue-manifest-srt-cue"
type="button"
disabled={isCreatingSrtCue}
onClick={() => void handleCreateFrenchSrtCue()}
>
<Plus size={14} aria-hidden="true" />
{isCreatingSrtCue ? "Creating..." : "Create FR SRT cue"}
</button>
<button
className="editor-dialogue-manifest-preview"
type="button"
disabled={errors.length > 0 || isPreviewing}
onClick={() => void handlePreviewDialogue()}
>
<Play size={14} aria-hidden="true" />
{isPreviewing ? "Playing..." : "Preview dialogue"}
</button>
<button
className="editor-dialogue-manifest-delete"
type="button"
onClick={() => handleRemoveDialogue(selectedDialogue.id)}
>
<Trash2 size={14} aria-hidden="true" />
Delete dialogue
</button>
</div>
)}
<p className="editor-dialogue-manifest-status">{status}</p>
<div
className={`editor-dialogue-manifest-diagnostic ${errors.length === 0 ? "is-valid" : "is-invalid"}`}
>
<strong>
{errors.length === 0
? "Manifeste local valide."
: `${errors.length} erreur${errors.length > 1 ? "s" : ""} locale${errors.length > 1 ? "s" : ""}.`}
</strong>
{errors.length > 0 && (
<ul>
{errors.map((error) => (
<li key={error}>{error}</li>
))}
</ul>
)}
</div>
</section>
);
}
-743
View File
@@ -1,743 +0,0 @@
import { useEffect, useRef, useState } from "react";
import { Download, RefreshCw, Save } from "lucide-react";
import type { SubtitleLanguage } from "@/managers/stores/useSettingsStore";
import type {
DialogueDefinition,
DialogueManifest,
DialogueSpeaker,
DialogueVoiceId,
} from "@/types/dialogues/dialogues";
import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
import { parseSrt } from "@/utils/subtitles/parseSrt";
interface SrtVoiceOption {
id: DialogueVoiceId;
label: DialogueSpeaker;
}
interface SrtDiagnostic {
cueCount: number;
expectedCueCount: number;
errors: string[];
}
interface TextRange {
start: number;
end: number;
}
interface DialogueValidationResult {
valid: boolean;
errors: string[];
warnings: string[];
}
type CueTimeEdge = "start" | "end";
const CUE_NUDGE_SECONDS = 0.1;
const SRT_VOICES: SrtVoiceOption[] = [
{ id: "narrateur", label: "Narrateur" },
{ id: "fermier", label: "Fermier" },
{ id: "electricienne", label: "Electricienne" },
];
const DEFAULT_SRT_VOICE: SrtVoiceOption = {
id: "narrateur",
label: "Narrateur",
};
const SRT_LANGUAGES: SubtitleLanguage[] = ["fr", "en"];
const SRT_TIME_LINE_PATTERN =
/^\d{2}:\d{2}:\d{2},\d{3} --> \d{2}:\d{2}:\d{2},\d{3}$/;
function getSrtPath(
voice: DialogueVoiceId,
language: SubtitleLanguage,
): string {
return `/sounds/dialogue/subtitles/${language}/${voice}.srt`;
}
function createSrtTemplate(
speaker: DialogueSpeaker,
expectedCueIndexes: number[],
): string {
const cueIndexes = expectedCueIndexes.length > 0 ? expectedCueIndexes : [1];
return `${cueIndexes
.map((cueIndex, index) => {
const startTime = index * 3;
const endTime = startTime + 2;
return `${cueIndex}\n${formatSrtTime(startTime)} --> ${formatSrtTime(endTime)}\n${speaker}: Sous-titre ${cueIndex} a definir`;
})
.join("\n\n")}\n`;
}
function formatSrtTime(totalSeconds: number): string {
const safeSeconds = Math.max(0, totalSeconds);
const totalMilliseconds = Math.round(safeSeconds * 1000);
const milliseconds = totalMilliseconds % 1000;
const totalWholeSeconds = Math.floor(totalMilliseconds / 1000);
const hours = Math.floor(totalWholeSeconds / 3600);
const minutes = Math.floor((totalWholeSeconds % 3600) / 60);
const seconds = totalWholeSeconds % 60;
return `${padTime(hours)}:${padTime(minutes)}:${padTime(seconds)},${padMilliseconds(milliseconds)}`;
}
function formatPreviewTime(totalSeconds: number): string {
return `${Math.max(0, totalSeconds).toFixed(1)}s`;
}
function parseSrtTime(value: string): number | null {
const match = value.match(/^(\d{2}):(\d{2}):(\d{2}),(\d{3})$/);
if (!match) return null;
const [, hours, minutes, seconds, milliseconds] = match;
if (!hours || !minutes || !seconds || !milliseconds) return null;
return (
Number(hours) * 3600 +
Number(minutes) * 60 +
Number(seconds) +
Number(milliseconds) / 1000
);
}
function padTime(value: number): string {
return value.toString().padStart(2, "0");
}
function padMilliseconds(value: number): string {
return value.toString().padStart(3, "0");
}
function getSrtDiagnostic(
content: string,
expectedCueIndexes: number[],
): SrtDiagnostic {
const normalizedContent = content.replace(/^\uFEFF/, "").replace(/\r/g, "");
const blocks = normalizedContent
.trim()
.split(/\n{2,}/)
.filter(Boolean);
const cues = parseSrt(content);
const errors: string[] = [];
const indexes = new Set<number>();
if (blocks.length === 0) {
errors.push("Le fichier SRT est vide.");
}
blocks.forEach((block, blockIndex) => {
const lines = block
.split("\n")
.map((line) => line.trim())
.filter(Boolean);
const displayIndex = blockIndex + 1;
const cueIndex = Number(lines[0]);
if (lines.length < 3) {
errors.push(
`Bloc ${displayIndex}: il manque un index, un timecode ou un texte.`,
);
return;
}
if (!Number.isInteger(cueIndex)) {
errors.push(`Bloc ${displayIndex}: l'index doit etre un nombre entier.`);
} else if (indexes.has(cueIndex)) {
errors.push(`Bloc ${displayIndex}: l'index ${cueIndex} est duplique.`);
} else {
indexes.add(cueIndex);
}
if (!SRT_TIME_LINE_PATTERN.test(lines[1] ?? "")) {
errors.push(
`Bloc ${displayIndex}: le timecode doit utiliser HH:MM:SS,mmm --> HH:MM:SS,mmm.`,
);
}
});
if (blocks.length > 0 && cues.length !== blocks.length) {
errors.push(
"Un ou plusieurs blocs ont une duree invalide ou un timecode illisible.",
);
}
const cueIndexes = new Set(cues.map((cue) => cue.index));
const missingCueIndexes = expectedCueIndexes.filter(
(cueIndex) => !cueIndexes.has(cueIndex),
);
if (missingCueIndexes.length > 0) {
errors.push(
`Cues attendues par le manifeste manquantes: ${missingCueIndexes.join(", ")}.`,
);
}
return {
cueCount: cues.length,
expectedCueCount: expectedCueIndexes.length,
errors,
};
}
function getExpectedCueIndexes(
manifest: DialogueManifest | null,
voice: DialogueVoiceId,
): number[] {
return getExpectedDialogues(manifest, voice)
.map((dialogue) => dialogue.subtitleCueIndex)
.filter(
(cueIndex, index, cueIndexes) => cueIndexes.indexOf(cueIndex) === index,
)
.sort((a, b) => a - b);
}
function getExpectedDialogues(
manifest: DialogueManifest | null,
voice: DialogueVoiceId,
): DialogueDefinition[] {
if (!manifest) return [];
return [...manifest.dialogues]
.filter((dialogue) => dialogue.voice === voice)
.sort((a, b) => a.subtitleCueIndex - b.subtitleCueIndex);
}
function findCueBlockRange(
content: string,
cueIndex: number,
): TextRange | null {
const normalizedContent = content.replace(/\r/g, "");
const cuePattern = new RegExp(`(^|\\n)${cueIndex}\\n`, "m");
const match = normalizedContent.match(cuePattern);
if (!match || match.index === undefined) return null;
const start = match.index + (match[1] ? 1 : 0);
const nextBlockIndex = normalizedContent.indexOf("\n\n", start);
const end = nextBlockIndex === -1 ? normalizedContent.length : nextBlockIndex;
return { start, end };
}
function updateCueTimecode(
content: string,
cueIndex: number,
edge: CueTimeEdge,
time: number,
): string | null {
const range = findCueBlockRange(content, cueIndex);
if (!range) return null;
const block = content.slice(range.start, range.end);
const lines = block.split("\n");
const timecodeLine = lines[1];
if (!timecodeLine) return null;
const [start, end] = timecodeLine.split(" --> ");
if (!start || !end) return null;
lines[1] =
edge === "start"
? `${formatSrtTime(time)} --> ${end}`
: `${start} --> ${formatSrtTime(time)}`;
return `${content.slice(0, range.start)}${lines.join("\n")}${content.slice(range.end)}`;
}
function nudgeCueTimecode(
content: string,
cueIndex: number,
delta: number,
): string | null {
const range = findCueBlockRange(content, cueIndex);
if (!range) return null;
const block = content.slice(range.start, range.end);
const lines = block.split("\n");
const timecodeLine = lines[1];
if (!timecodeLine) return null;
const [start, end] = timecodeLine.split(" --> ");
if (!start || !end) return null;
const startTime = parseSrtTime(start);
const endTime = parseSrtTime(end);
if (startTime === null || endTime === null) return null;
const nextStartTime = Math.max(0, startTime + delta);
const nextEndTime = Math.max(nextStartTime + 0.001, endTime + delta);
lines[1] = `${formatSrtTime(nextStartTime)} --> ${formatSrtTime(nextEndTime)}`;
return `${content.slice(0, range.start)}${lines.join("\n")}${content.slice(range.end)}`;
}
function downloadSrtFile(
voice: DialogueVoiceId,
language: SubtitleLanguage,
content: string,
): void {
const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = `${voice}.${language}.srt`;
link.click();
window.setTimeout(() => URL.revokeObjectURL(url), 0);
}
async function saveSrtFile(
voice: DialogueVoiceId,
language: SubtitleLanguage,
content: string,
): Promise<void> {
const response = await fetch("/api/save-srt", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ voice, language, content }),
});
if (!response.ok) {
const body = (await response.json().catch(() => null)) as {
error?: string;
} | null;
throw new Error(body?.error ?? "Sauvegarde SRT impossible");
}
}
async function validateDialogueAssets(): Promise<DialogueValidationResult> {
const response = await fetch("/api/validate-dialogues");
const body = (await response.json().catch(() => null)) as
| Partial<DialogueValidationResult>
| { error?: string }
| null;
if (!body) {
throw new Error("Validation dialogues impossible");
}
if (
"valid" in body &&
typeof body.valid === "boolean" &&
Array.isArray(body.errors) &&
Array.isArray(body.warnings)
) {
return {
valid: body.valid,
errors: body.errors.filter((item) => typeof item === "string"),
warnings: body.warnings.filter((item) => typeof item === "string"),
};
}
throw new Error(
"error" in body && body.error
? body.error
: "Validation dialogues impossible",
);
}
export function EditorSrtPanel(): React.JSX.Element {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [voice, setVoice] = useState<DialogueVoiceId>("narrateur");
const [language, setLanguage] = useState<SubtitleLanguage>("fr");
const [content, setContent] = useState("");
const [status, setStatus] = useState("Chargement du SRT...");
const [isSaving, setIsSaving] = useState(false);
const [isValidatingDialogues, setIsValidatingDialogues] = useState(false);
const [dialogueValidationResult, setDialogueValidationResult] =
useState<DialogueValidationResult | null>(null);
const [manifest, setManifest] = useState<DialogueManifest | null>(null);
const [audioCurrentTime, setAudioCurrentTime] = useState(0);
const [selectedDialogueId, setSelectedDialogueId] = useState("");
const selectedVoice =
SRT_VOICES.find((item) => item.id === voice) ?? DEFAULT_SRT_VOICE;
const expectedDialogues = getExpectedDialogues(manifest, voice);
const expectedCueIndexes = getExpectedCueIndexes(manifest, voice);
const parsedCues = parseSrt(content);
const activeCue =
parsedCues.find(
(cue) =>
audioCurrentTime >= cue.startTime && audioCurrentTime < cue.endTime,
) ?? null;
const diagnostic = getSrtDiagnostic(content, expectedCueIndexes);
const isSrtValid = diagnostic.errors.length === 0;
const dialogueValidationClass = dialogueValidationResult
? dialogueValidationResult.valid
? "is-valid"
: "is-invalid"
: "is-idle";
const srtTemplate = createSrtTemplate(
selectedVoice.label,
expectedCueIndexes,
);
const selectedDialogue =
expectedDialogues.find((dialogue) => dialogue.id === selectedDialogueId) ??
expectedDialogues[0] ??
null;
async function handleSave(): Promise<void> {
if (!isSrtValid) {
setStatus("Corrige les erreurs SRT avant de sauvegarder.");
return;
}
setIsSaving(true);
setStatus("Sauvegarde du SRT...");
try {
await saveSrtFile(voice, language, content);
setStatus(`Sauvegarde dans ${getSrtPath(voice, language)}`);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(`${message}. Utilise Export SRT si le serveur dev est absent.`);
} finally {
setIsSaving(false);
}
}
async function handleValidateDialogues(): Promise<void> {
setIsValidatingDialogues(true);
setDialogueValidationResult(null);
try {
const result = await validateDialogueAssets();
setDialogueValidationResult(result);
setStatus(
result.valid
? "Validation dialogues terminee."
: "Validation dialogues terminee avec erreurs.",
);
} catch (err) {
const message = err instanceof Error ? err.message : "Erreur inconnue";
setStatus(`${message}. Verifie que le serveur Vite est lance.`);
} finally {
setIsValidatingDialogues(false);
}
}
function handleJumpToCue(cueIndex: number): void {
const range = findCueBlockRange(content, cueIndex);
if (!range || !textareaRef.current) {
setStatus(`Cue ${cueIndex} introuvable dans le SRT.`);
return;
}
textareaRef.current.focus();
textareaRef.current.setSelectionRange(range.start, range.end);
setStatus(`Cue ${cueIndex} selectionnee dans le SRT.`);
}
function handleSetCueTime(cueIndex: number, edge: CueTimeEdge): void {
const updatedContent = updateCueTimecode(
content,
cueIndex,
edge,
audioCurrentTime,
);
if (!updatedContent) {
setStatus(`Cue ${cueIndex} introuvable ou timecode invalide.`);
return;
}
setContent(updatedContent);
setStatus(
`Cue ${cueIndex}: ${edge === "start" ? "debut" : "fin"} place a ${formatSrtTime(audioCurrentTime)}.`,
);
}
function handleNudgeCue(cueIndex: number, delta: number): void {
const updatedContent = nudgeCueTimecode(content, cueIndex, delta);
if (!updatedContent) {
setStatus(`Cue ${cueIndex} introuvable ou timecode invalide.`);
return;
}
setContent(updatedContent);
setStatus(
`Cue ${cueIndex} decalee de ${delta > 0 ? "+" : ""}${delta.toFixed(1)}s.`,
);
}
useEffect(() => {
let mounted = true;
void loadDialogueManifest()
.then((loadedManifest) => {
if (mounted) setManifest(loadedManifest);
})
.catch(() => {
if (mounted) setManifest(null);
});
return () => {
mounted = false;
};
}, []);
useEffect(() => {
let mounted = true;
const srtPath = getSrtPath(voice, language);
void fetch(srtPath)
.then(async (response) => {
if (!mounted) return;
if (!response.ok) {
setContent(srtTemplate);
setStatus("Fichier absent, template local cree");
return;
}
setContent(await response.text());
setStatus(`Charge depuis ${srtPath}`);
})
.catch(() => {
if (!mounted) return;
setContent(srtTemplate);
setStatus("Erreur de chargement, template local cree");
});
return () => {
mounted = false;
};
}, [language, selectedVoice.label, srtTemplate, voice]);
return (
<section className="editor-srt-section" aria-labelledby="srt-heading">
<div className="editor-section-heading">
<h3 id="srt-heading">SRT</h3>
<span>{language.toUpperCase()}</span>
</div>
<div className="editor-srt-controls">
<label>
Voix
<select
value={voice}
onChange={(event) =>
setVoice(event.target.value as DialogueVoiceId)
}
>
{SRT_VOICES.map((item) => (
<option key={item.id} value={item.id}>
{item.label}
</option>
))}
</select>
</label>
<label>
Langue
<select
value={language}
onChange={(event) =>
setLanguage(event.target.value as SubtitleLanguage)
}
>
{SRT_LANGUAGES.map((item) => (
<option key={item} value={item}>
{item.toUpperCase()}
</option>
))}
</select>
</label>
</div>
<div className="editor-srt-preview">
<label>
Dialogue audio
<select
value={selectedDialogue?.id ?? ""}
onChange={(event) => setSelectedDialogueId(event.target.value)}
disabled={expectedDialogues.length === 0}
>
{expectedDialogues.length === 0 && (
<option value="">Aucun dialogue</option>
)}
{expectedDialogues.map((dialogue) => (
<option key={dialogue.id} value={dialogue.id}>
Cue {dialogue.subtitleCueIndex} - {dialogue.id}
</option>
))}
</select>
</label>
{selectedDialogue && (
<div className="editor-srt-audio-card">
<span>Cue {selectedDialogue.subtitleCueIndex}</span>
<strong>{selectedDialogue.id}</strong>
<audio
key={selectedDialogue.audio}
controls
src={selectedDialogue.audio}
onLoadedMetadata={() => setAudioCurrentTime(0)}
onTimeUpdate={(event) =>
setAudioCurrentTime(event.currentTarget.currentTime)
}
/>
<div className="editor-srt-active-cue">
<span>Temps audio: {formatPreviewTime(audioCurrentTime)}</span>
{activeCue ? (
<p>
<strong>Cue {activeCue.index}</strong> {activeCue.text}
</p>
) : (
<p>Aucune cue active a ce moment.</p>
)}
</div>
<div className="editor-srt-time-actions">
<button
type="button"
onClick={() =>
handleSetCueTime(selectedDialogue.subtitleCueIndex, "start")
}
>
Set start
</button>
<button
type="button"
onClick={() =>
handleSetCueTime(selectedDialogue.subtitleCueIndex, "end")
}
>
Set end
</button>
<button
type="button"
onClick={() =>
handleNudgeCue(
selectedDialogue.subtitleCueIndex,
-CUE_NUDGE_SECONDS,
)
}
>
-100ms
</button>
<button
type="button"
onClick={() =>
handleNudgeCue(
selectedDialogue.subtitleCueIndex,
CUE_NUDGE_SECONDS,
)
}
>
+100ms
</button>
</div>
<button
className="editor-srt-jump-button"
type="button"
onClick={() => handleJumpToCue(selectedDialogue.subtitleCueIndex)}
>
Aller a la cue {selectedDialogue.subtitleCueIndex}
</button>
</div>
)}
</div>
<textarea
ref={textareaRef}
className="editor-srt-textarea"
value={content}
spellCheck={false}
onChange={(event) => setContent(event.target.value)}
onKeyDown={(event) => event.stopPropagation()}
aria-label="SRT content"
/>
<div className="editor-srt-actions">
<button
className="editor-action-button"
type="button"
onClick={() => setContent(srtTemplate)}
>
<RefreshCw size={15} aria-hidden="true" />
Template
</button>
<button
className="editor-action-button editor-action-button-primary"
type="button"
disabled={isSaving || !isSrtValid}
onClick={() => void handleSave()}
>
<Save size={15} aria-hidden="true" />
{isSaving ? "Saving..." : "Save SRT"}
</button>
<button
className="editor-action-button"
type="button"
onClick={() => downloadSrtFile(voice, language, content)}
>
<Download size={15} aria-hidden="true" />
Export SRT
</button>
</div>
<p className="editor-srt-status">{status}</p>
<div className={`editor-dialogue-validation ${dialogueValidationClass}`}>
<div className="editor-dialogue-validation__heading">
<div>
<strong>Manifeste dialogues</strong>
<span>Audio, SRT FR et cues references</span>
</div>
<button
type="button"
disabled={isValidatingDialogues}
onClick={() => void handleValidateDialogues()}
>
<RefreshCw size={14} aria-hidden="true" />
{isValidatingDialogues ? "Validation..." : "Validate"}
</button>
</div>
{dialogueValidationResult && (
<div className="editor-dialogue-validation__result">
<p>
{dialogueValidationResult.valid
? "Manifeste valide."
: `${dialogueValidationResult.errors.length} erreur${dialogueValidationResult.errors.length > 1 ? "s" : ""} detectee${dialogueValidationResult.errors.length > 1 ? "s" : ""}.`}
{dialogueValidationResult.warnings.length > 0 &&
` ${dialogueValidationResult.warnings.length} warning${dialogueValidationResult.warnings.length > 1 ? "s" : ""}.`}
</p>
{dialogueValidationResult.errors.length > 0 && (
<ul className="editor-dialogue-validation__errors">
{dialogueValidationResult.errors.map((error, index) => (
<li key={`${error}-${index}`}>{error}</li>
))}
</ul>
)}
{dialogueValidationResult.warnings.length > 0 && (
<ul className="editor-dialogue-validation__warnings">
{dialogueValidationResult.warnings.map((warning, index) => (
<li key={`${warning}-${index}`}>{warning}</li>
))}
</ul>
)}
</div>
)}
</div>
<div
className={`editor-srt-diagnostic ${isSrtValid ? "is-valid" : "is-invalid"}`}
>
<strong>
{isSrtValid
? `${diagnostic.cueCount} cue${diagnostic.cueCount > 1 ? "s" : ""} valide${diagnostic.cueCount > 1 ? "s" : ""} / ${diagnostic.expectedCueCount} attendue${diagnostic.expectedCueCount > 1 ? "s" : ""}`
: `${diagnostic.errors.length} erreur${diagnostic.errors.length > 1 ? "s" : ""} SRT`}
</strong>
{!isSrtValid && (
<ul>
{diagnostic.errors.map((error) => (
<li key={error}>{error}</li>
))}
</ul>
)}
</div>
</section>
);
}
+2 -96
View File
@@ -1,18 +1,9 @@
import { useEffect, useRef } from "react";
import { useEffect } from "react";
import { OrbitControls } from "@react-three/drei";
import { useThree } from "@react-three/fiber";
import gsap from "gsap";
import * as THREE from "three";
import { EditorMap } from "@/components/editor/scene/EditorMap";
import { FlyController } from "@/controls/editor/FlyController";
import type { CinematicDefinition } from "@/types/cinematics/cinematics";
import type { MapNode, TransformMode, SceneData } from "@/types/editor/editor";
export interface EditorCinematicPreviewRequest {
id: string;
cinematic: CinematicDefinition;
}
interface EditorSceneProps {
sceneData: SceneData;
selectedNodeIndex: number | null;
@@ -27,8 +18,6 @@ interface EditorSceneProps {
onUndo: () => void;
onRedo: () => void;
isPlayerMode?: boolean;
cinematicPreviewRequest?: EditorCinematicPreviewRequest | null;
onCinematicPreviewComplete?: (() => void) | undefined;
}
export function EditorScene({
@@ -45,11 +34,7 @@ export function EditorScene({
onUndo,
onRedo,
isPlayerMode = false,
cinematicPreviewRequest = null,
onCinematicPreviewComplete,
}: EditorSceneProps): React.JSX.Element {
const isCinematicPreviewing = cinematicPreviewRequest !== null;
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.ctrlKey || e.metaKey) {
@@ -89,16 +74,10 @@ export function EditorScene({
return (
<>
<EditorCinematicPreviewPlayer
request={cinematicPreviewRequest}
onComplete={onCinematicPreviewComplete}
/>
{isPlayerMode ? (
<FlyController disabled={isCinematicPreviewing} />
<FlyController disabled={false} />
) : (
<OrbitControls
enabled={!isCinematicPreviewing}
enableDamping
dampingFactor={0.05}
mouseButtons={{
@@ -127,76 +106,3 @@ export function EditorScene({
</>
);
}
interface EditorCinematicPreviewPlayerProps {
request: EditorCinematicPreviewRequest | null;
onComplete?: (() => void) | undefined;
}
function EditorCinematicPreviewPlayer({
request,
onComplete,
}: EditorCinematicPreviewPlayerProps): null {
const camera = useThree((state) => state.camera);
const timelineRef = useRef<gsap.core.Timeline | null>(null);
useEffect(() => {
timelineRef.current?.kill();
timelineRef.current = null;
if (!request) return undefined;
const firstKeyframe = request.cinematic.cameraKeyframes[0];
if (!firstKeyframe) return undefined;
const target = new THREE.Vector3(...firstKeyframe.target);
camera.position.set(...firstKeyframe.position);
camera.lookAt(target);
const timeline = gsap.timeline({
onUpdate: () => camera.lookAt(target),
onComplete: () => {
timelineRef.current = null;
onComplete?.();
},
});
request.cinematic.cameraKeyframes.slice(1).forEach((keyframe, index) => {
const previousKeyframe = request.cinematic.cameraKeyframes[index];
if (!previousKeyframe) return;
const duration = keyframe.time - previousKeyframe.time;
timeline.to(
camera.position,
{
x: keyframe.position[0],
y: keyframe.position[1],
z: keyframe.position[2],
duration,
ease: "power2.inOut",
},
previousKeyframe.time,
);
timeline.to(
target,
{
x: keyframe.target[0],
y: keyframe.target[1],
z: keyframe.target[2],
duration,
ease: "power2.inOut",
},
previousKeyframe.time,
);
});
timelineRef.current = timeline;
return () => {
timeline.kill();
if (timelineRef.current === timeline) timelineRef.current = null;
};
}, [camera, onComplete, request]);
return null;
}
@@ -1,10 +1,8 @@
import { useEffect, useState } from "react";
import { useState } from "react";
import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
import { TriggerObject } from "@/components/three/interaction/TriggerObject";
import { REPAIR_CASE_ANIMATION_DURATION } from "@/data/gameplay/repairCaseConfig";
import { REPAIR_INTERACTION_RADIUS } from "@/data/gameplay/repairGameConfig";
import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
interface RepairCompletionStepProps {
@@ -16,43 +14,28 @@ export function RepairCompletionStep({
config,
onComplete,
}: RepairCompletionStepProps): React.JSX.Element {
const [isClosingCase, setIsClosingCase] = useState(false);
const [isExitingCase, setIsExitingCase] = useState(false);
useEffect(() => {
if (!isClosingCase) return undefined;
const timeoutId = window.setTimeout(() => {
setIsExitingCase(true);
}, REPAIR_CASE_ANIMATION_DURATION * 1000);
return () => {
window.clearTimeout(timeoutId);
};
}, [isClosingCase]);
const [isCompleting, setIsCompleting] = useState(false);
return (
<group>
<RepairMissionCase
config={config}
exiting={isExitingCase}
open={!isClosingCase}
exiting={isCompleting}
onExitComplete={onComplete}
/>
<RepairObjectModel
label={config.label}
modelPath={config.modelPath}
scale={config.modelScale ?? 1}
scale={1}
/>
{!isClosingCase ? (
{!isCompleting ? (
<TriggerObject
position={[0, 1.1, 0]}
colliders="ball"
label={`Valider ${config.label}`}
radius={REPAIR_INTERACTION_RADIUS}
onTrigger={() => setIsClosingCase(true)}
onTrigger={() => setIsCompleting(true)}
>
<mesh>
<torusGeometry args={[1.35, 0.045, 12, 96]} />
@@ -65,7 +48,7 @@ export function RepairCompletionStep({
</TriggerObject>
) : null}
{!isClosingCase ? (
{!isCompleting ? (
<RepairPromptVideo src={config.stageUiPath} position={[0, 2.55, 0]} />
) : null}
</group>
+2 -26
View File
@@ -19,10 +19,7 @@ import {
} from "@/data/gameplay/repairMissions";
import { useRepairFragmentationInput } from "@/hooks/gameplay/useRepairFragmentationInput";
import { useRepairMissionStep } from "@/hooks/gameplay/useRepairMissionStep";
import type {
MissionStep,
RepairMissionId,
} from "@/types/gameplay/repairMission";
import type { RepairMissionId } from "@/types/gameplay/repairMission";
import { useGameStore } from "@/managers/stores/useGameStore";
import type { ModelTransformProps, Vector3Tuple } from "@/types/three/three";
import { toVector3Scale } from "@/utils/three/scale";
@@ -78,19 +75,6 @@ export function RepairGame({
onFragment: () => setMissionStep(mission, "fragmented"),
});
useEffect(() => {
if (mainState === mission && shouldKeepRepairRuntimeState(step)) return;
const timeoutId = window.setTimeout(() => {
setCasePlaceholders([]);
setScannedBrokenParts([]);
}, 0);
return () => {
window.clearTimeout(timeoutId);
};
}, [mainState, mission, step]);
useEffect(() => {
if (mainState !== mission) return undefined;
@@ -122,11 +106,7 @@ export function RepairGame({
/>
) : null}
{step === "fragmented" ? (
<ExplodableModel
modelPath={config.modelPath}
scale={config.modelScale ?? 1}
split
/>
<ExplodableModel modelPath={config.modelPath} split />
) : null}
{step === "scanning" ? (
<RepairScanSequence
@@ -176,10 +156,6 @@ export function RepairGame({
);
}
function shouldKeepRepairRuntimeState(step: MissionStep): boolean {
return step === "repairing" || step === "reassembling" || step === "done";
}
function getRepairMissionModelPaths(config: RepairMissionConfig): string[] {
return [
...new Set([
@@ -1,7 +1,6 @@
import { InteractableObject } from "@/components/three/interaction/InteractableObject";
import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel";
import { RepairPromptVideo } from "@/components/three/gameplay/RepairPromptVideo";
import { REPAIR_INTERACTION_RADIUS } from "@/data/gameplay/repairGameConfig";
import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
import type { Vector3Tuple } from "@/types/three/three";
@@ -21,15 +20,14 @@ export function RepairInspectionObject({
kind="trigger"
label={`Inspecter ${config.label}`}
position={worldPosition}
radius={REPAIR_INTERACTION_RADIUS}
onPress={onInspect}
>
<RepairObjectModel
label={config.label}
modelPath={config.modelPath}
scale={config.modelScale ?? 0.9}
scale={0.9}
/>
<RepairPromptVideo src={config.stageUiPath} />
<RepairPromptVideo src={config.interactUiPath} />
</InteractableObject>
);
}
@@ -9,7 +9,6 @@ import {
REPAIR_CASE_FOCUS_SCALE,
REPAIR_CASE_MODEL_PATH,
} from "@/data/gameplay/repairCaseConfig";
import { REPAIR_INTERACTION_RADIUS } from "@/data/gameplay/repairGameConfig";
import type { RepairMissionConfig } from "@/data/gameplay/repairMissions";
import type { Vector3Tuple } from "@/types/three/three";
@@ -49,7 +48,6 @@ export function RepairMissionCase({
position={casePosition}
colliders="ball"
label={`Ouvrir ${config.label}`}
radius={REPAIR_INTERACTION_RADIUS}
onTrigger={onInteract}
>
<RepairCaseModel
@@ -35,7 +35,6 @@ export function RepairReassemblyStep({
<group>
<ExplodableModel
modelPath={config.modelPath}
scale={config.modelScale ?? 1}
split={split}
splitDistance={1.2}
/>
@@ -11,7 +11,6 @@ import {
REPAIR_CASE_PLACEHOLDER_SNAP_DURATION,
REPAIR_CASE_PLACEHOLDER_SNAP_RADIUS,
} from "@/data/gameplay/repairCaseConfig";
import { REPAIR_INTERACTION_RADIUS } from "@/data/gameplay/repairGameConfig";
import type {
RepairMissionConfig,
RepairMissionPartConfig,
@@ -300,7 +299,6 @@ function RepairInstallTarget({
position={INSTALL_TARGET_POSITION}
colliders="ball"
label={label}
radius={REPAIR_INTERACTION_RADIUS}
onTrigger={() => {
if (!isReadyToInstall) {
onBlocked();
@@ -60,7 +60,6 @@ export function RepairScanSequence({
<group>
<ExplodableModel
modelPath={config.modelPath}
scale={config.modelScale ?? 1}
split
onPartsReady={setParts}
/>
@@ -19,7 +19,6 @@ import type { Vector3Tuple } from "@/types/three/three";
interface InteractableObjectBaseProps {
label: string;
position: Vector3Tuple;
radius?: number;
bodyRef?: RefObject<RapierRigidBody | null>;
onPress: () => void;
children: React.ReactNode;
@@ -65,15 +64,7 @@ function createInteractableHandle(
export function InteractableObject(
props: InteractableObjectProps,
): React.JSX.Element {
const {
kind,
label,
position,
radius = INTERACTION_RADIUS,
bodyRef,
onPress,
children,
} = props;
const { kind, label, position, bodyRef, onPress, children } = props;
const onRelease = props.kind === "grab" ? props.onRelease : null;
const camera = useThree((state) => state.camera);
const groupRef = useRef<THREE.Group>(null);
@@ -165,7 +156,7 @@ export function InteractableObject(
camera.getWorldPosition(_cameraPos);
const dist = _cameraPos.distanceTo(_objectPos);
const isNearby = dist <= radius;
const isNearby = dist <= INTERACTION_RADIUS;
manager.setNearby(handle.current, isNearby);
@@ -178,7 +169,7 @@ export function InteractableObject(
camera.getWorldDirection(_cameraDir);
_raycaster.set(_cameraPos, _cameraDir);
_raycaster.far = radius;
_raycaster.far = INTERACTION_RADIUS;
const hits = group ? _raycaster.intersectObject(group, true) : [];
const validHit = hits.find((h) => h.object !== debugSphereRef.current);
@@ -196,7 +187,7 @@ export function InteractableObject(
<mesh ref={debugSphereRef} visible={false}>
<sphereGeometry
args={[
radius,
INTERACTION_RADIUS,
INTERACTION_DEBUG_SPHERE_SEGMENTS,
INTERACTION_DEBUG_SPHERE_SEGMENTS,
]}
@@ -4,7 +4,6 @@ import type { RapierRigidBody } from "@react-three/rapier";
import { InteractableObject } from "@/components/three/interaction/InteractableObject";
import { useClonedObject } from "@/hooks/three/useClonedObject";
import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
import { INTERACTION_RADIUS } from "@/data/interaction/interactionConfig";
import {
TRIGGER_DEFAULT_COLLIDERS,
TRIGGER_DEFAULT_LABEL,
@@ -24,7 +23,6 @@ interface TriggerObjectProps {
children: React.ReactNode;
colliders?: ColliderShape;
label?: string;
radius?: number;
soundPath?: string;
soundVolume?: number;
spawnModel?: string;
@@ -55,7 +53,6 @@ export function TriggerObject({
children,
colliders = TRIGGER_DEFAULT_COLLIDERS,
label = TRIGGER_DEFAULT_LABEL,
radius = INTERACTION_RADIUS,
soundPath,
soundVolume = TRIGGER_DEFAULT_SOUND_VOLUME,
spawnModel,
@@ -77,13 +74,10 @@ export function TriggerObject({
kind="trigger"
label={label}
position={position}
radius={radius}
bodyRef={rbRef}
onPress={() => {
if (soundPath) {
AudioManager.getInstance().playSound(soundPath, soundVolume, {
category: "sfx",
});
AudioManager.getInstance().playSound(soundPath, soundVolume);
}
onTrigger?.();
-203
View File
@@ -1,203 +0,0 @@
import { useEffect } from "react";
import { X } from "lucide-react";
import { useSettingsStore } from "@/managers/stores/useSettingsStore";
import type {
RepairRuntime,
SubtitleLanguage,
} from "@/managers/stores/useSettingsStore";
function formatPercent(value: number): string {
return `${Math.round(value * 100)}%`;
}
function clearCookies(): void {
document.cookie.split(";").forEach((cookie) => {
const cookieName = cookie.split("=")[0]?.trim();
if (!cookieName) return;
document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
});
}
interface VolumeSliderProps {
id: string;
label: string;
value: number;
onChange: (value: number) => void;
}
function VolumeSlider({
id,
label,
value,
onChange,
}: VolumeSliderProps): React.JSX.Element {
return (
<label className="game-settings-menu__slider" htmlFor={id}>
<span>
{label}
<strong>{formatPercent(value)}</strong>
</span>
<input
id={id}
type="range"
min="0"
max="1"
step="0.01"
value={value}
onChange={(event) => onChange(Number(event.target.value))}
/>
</label>
);
}
export function GameSettingsMenu(): React.JSX.Element | null {
const {
isSettingsMenuOpen,
musicVolume,
sfxVolume,
dialogueVolume,
subtitlesEnabled,
subtitleLanguage,
repairRuntime,
setMusicVolume,
setSfxVolume,
setDialogueVolume,
setSettingsMenuOpen,
setSubtitlesEnabled,
setSubtitleLanguage,
setRepairRuntime,
} = useSettingsStore();
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent): void => {
if (event.key === "Escape") {
event.preventDefault();
event.stopPropagation();
if (!isSettingsMenuOpen) document.exitPointerLock();
setSettingsMenuOpen(!isSettingsMenuOpen);
return;
}
};
window.addEventListener("keydown", handleKeyDown, { capture: true });
return () => {
window.removeEventListener("keydown", handleKeyDown, { capture: true });
};
}, [isSettingsMenuOpen, setSettingsMenuOpen]);
if (!isSettingsMenuOpen) return null;
const handleQuit = (): void => {
clearCookies();
window.location.assign("/");
};
return (
<div className="game-settings-menu" role="dialog" aria-modal="true">
<div className="game-settings-menu__panel">
<header className="game-settings-menu__header">
<div>
<span>Pause</span>
<h2>Options</h2>
</div>
<button
className="game-settings-menu__close"
type="button"
onClick={() => setSettingsMenuOpen(false)}
aria-label="Fermer le menu"
>
<X size={20} aria-hidden="true" />
</button>
</header>
<section
className="game-settings-menu__section"
aria-labelledby="audio-settings-heading"
>
<h3 id="audio-settings-heading">Audio</h3>
<VolumeSlider
id="music-volume"
label="Musique"
value={musicVolume}
onChange={setMusicVolume}
/>
<VolumeSlider
id="sfx-volume"
label="Sound effects"
value={sfxVolume}
onChange={setSfxVolume}
/>
<VolumeSlider
id="dialogue-volume"
label="Dialogue"
value={dialogueVolume}
onChange={setDialogueVolume}
/>
</section>
<section
className="game-settings-menu__section"
aria-labelledby="subtitle-settings-heading"
>
<h3 id="subtitle-settings-heading">Sous-titres</h3>
<label className="game-settings-menu__checkbox">
<input
type="checkbox"
checked={subtitlesEnabled}
onChange={(event) => setSubtitlesEnabled(event.target.checked)}
/>
Afficher sous-titres
</label>
<div
className="game-settings-menu__choice-group"
aria-label="Langue des sous-titres"
>
{(["fr", "en"] satisfies SubtitleLanguage[]).map((language) => (
<button
key={language}
type="button"
className={subtitleLanguage === language ? "active" : undefined}
onClick={() => setSubtitleLanguage(language)}
aria-pressed={subtitleLanguage === language}
>
{language === "fr" ? "Francais" : "English"}
</button>
))}
</div>
</section>
<section
className="game-settings-menu__section"
aria-labelledby="repair-settings-heading"
>
<h3 id="repair-settings-heading">Repair game</h3>
<div className="game-settings-menu__choice-group game-settings-menu__choice-group--stacked">
{(["js", "python"] satisfies RepairRuntime[]).map((runtime) => (
<button
key={runtime}
type="button"
className={repairRuntime === runtime ? "active" : undefined}
onClick={() => setRepairRuntime(runtime)}
aria-pressed={repairRuntime === runtime}
>
{runtime === "js"
? "Repair game en JS (local)"
: "Repair game en Python (server)"}
</button>
))}
</div>
</section>
<button
className="game-settings-menu__quit"
type="button"
onClick={handleQuit}
>
Quitter
</button>
</div>
</div>
);
}
-6
View File
@@ -1,21 +1,15 @@
import { Crosshair } from "@/components/ui/Crosshair";
import { DebugOverlayLayout } from "@/components/ui/debug/DebugOverlayLayout";
import { GameSettingsMenu } from "@/components/ui/GameSettingsMenu";
import { HandTrackingVisualizer } from "@/components/ui/HandTrackingVisualizer";
import { InteractPrompt } from "@/components/ui/InteractPrompt";
import { RepairMovementLockIndicator } from "@/components/ui/RepairMovementLockIndicator";
import { Subtitles } from "@/components/ui/Subtitles";
export function GameUI(): React.JSX.Element {
return (
<>
<DebugOverlayLayout />
<Crosshair />
<RepairMovementLockIndicator />
<InteractPrompt />
<HandTrackingVisualizer />
<Subtitles />
<GameSettingsMenu />
</>
);
}
@@ -1,20 +0,0 @@
import { useCameraMode } from "@/hooks/debug/useCameraMode";
import { useRepairMovementLocked } from "@/hooks/gameplay/useRepairMovementLocked";
export function RepairMovementLockIndicator(): React.JSX.Element | null {
const cameraMode = useCameraMode();
const movementLocked = useRepairMovementLocked();
if (cameraMode !== "player") return null;
if (!movementLocked) return null;
return (
<div className="repair-movement-lock-indicator" aria-live="polite">
<span
className="repair-movement-lock-indicator__dot"
aria-hidden="true"
/>
<span>Déplacement verrouillé pendant la réparation</span>
</div>
);
}
-37
View File
@@ -1,37 +0,0 @@
import { useSettingsStore } from "@/managers/stores/useSettingsStore";
import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
import type { DialogueSpeaker } from "@/types/dialogues/dialogues";
export type SubtitleSpeaker = DialogueSpeaker;
interface SubtitlesProps {
speaker?: SubtitleSpeaker | null;
text?: string | null;
}
export function Subtitles({
speaker = null,
text = null,
}: SubtitlesProps): React.JSX.Element | null {
const subtitlesEnabled = useSettingsStore((state) => state.subtitlesEnabled);
const activeSubtitle = useSubtitleStore((state) => state.activeSubtitle);
const subtitleSpeaker = speaker ?? activeSubtitle?.speaker ?? null;
const content = (text ?? activeSubtitle?.text)?.trim();
if (!subtitlesEnabled || !content) return null;
return (
<div className="subtitles" aria-live="polite">
<p>
{subtitleSpeaker ? (
<span
className={`subtitles__speaker subtitles__speaker--${subtitleSpeaker.toLowerCase()}`}
>
{subtitleSpeaker}:
</span>
) : null}
{content}
</p>
</div>
);
}
@@ -23,9 +23,6 @@ function toPascalCase(value: string): string {
export function GameStateDebugPanel(): React.JSX.Element {
const mainState = useGameStore((state) => state.mainState);
const bikeStep = useGameStore((state) => state.bike.currentStep);
const pyloneStep = useGameStore((state) => state.pylone.currentStep);
const fermeStep = useGameStore((state) => state.ferme.currentStep);
const detail = useGameStore((state) => {
switch (state.mainState) {
case "intro":
@@ -86,24 +83,6 @@ export function GameStateDebugPanel(): React.JSX.Element {
}
}
function setDebugMainState(nextMainState: MainGameState): void {
setMainState(nextMainState);
if (nextMainState === "bike" && bikeStep === "locked") {
setBikeState({ currentStep: "waiting" });
return;
}
if (nextMainState === "pylone" && pyloneStep === "locked") {
setPyloneState({ currentStep: "waiting" });
return;
}
if (nextMainState === "ferme" && fermeStep === "locked") {
setFermeState({ currentStep: "waiting" });
}
}
return (
<section
className="game-state-debug-panel debug-overlay-section"
@@ -129,7 +108,7 @@ export function GameStateDebugPanel(): React.JSX.Element {
aria-pressed={state === mainState}
className={state === mainState ? "is-active" : undefined}
type="button"
onClick={() => setDebugMainState(state)}
onClick={() => setMainState(state)}
>
{toPascalCase(state)}
</button>
+9 -164
View File
@@ -101,7 +101,7 @@ Ce document décrit le code réellement présent aujourd'hui dans le dépôt.
- \`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, 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, le verrouillage de déplacement pendant les étapes repair et les inputs d'interaction.
- \`src/world/player/PlayerController.tsx\` gère le mouvement pointer lock, le saut et les inputs d'interaction.
## Frontières physiques
@@ -124,44 +124,8 @@ Le joueur et l'octree de carte doivent rester hors du provider Rapier tant qu'il
## Audio
- \`src/managers/AudioManager.ts\` fournit la lecture de sons one-shot avec pool, la musique en boucle, les volumes par catégorie et un pan stéréo optionnel pour les sons one-shot.
- Les catégories audio supportées sont \`music\`, \`sfx\` et \`dialogue\`.
- Les interactions trigger peuvent lancer directement des SFX via \`AudioManager\`.
## Menu options
- \`src/managers/stores/useSettingsStore.ts\` stocke les réglages de volume musique, volume SFX, volume dialogue, sous-titres, langue des sous-titres, runtime de réparation et visibilité du menu.
- \`src/components/ui/GameSettingsMenu.tsx\` rend le menu options en jeu.
- \`src/components/ui/GameUI.tsx\` monte le menu comme overlay HTML hors canvas.
- \`Esc\` ouvre et ferme le menu, et \`src/world/player/PlayerController.tsx\` ignore les inputs joueur pendant son ouverture.
- Les changements de volume sont transmis à \`AudioManager\` par catégorie.
## Dialogues et sous-titres
- \`public/sounds/dialogue/dialogues.json\` est le manifeste runtime des dialogues.
- Les fichiers audio de dialogue vivent dans \`public/sounds/dialogue/\`.
- Les fichiers de sous-titres vivent dans \`public/sounds/dialogue/subtitles/{fr|en}/\`.
- Le modèle actuel utilise un fichier SRT par voix et par langue.
- \`src/types/dialogues/dialogues.ts\` contient les types du manifeste.
- \`src/utils/dialogues/dialogueManifestValidation.ts\` valide la forme du manifeste au runtime.
- \`src/utils/dialogues/loadDialogueManifest.ts\` charge le manifeste et les cues SRT, avec fallback français si la langue sélectionnée manque.
- \`src/utils/subtitles/parseSrt.ts\` parse les blocs et timecodes SRT.
- \`src/utils/dialogues/playDialogue.ts\` joue l'audio de dialogue et synchronise le sous-titre actif avec le temps de l'élément audio.
- \`src/managers/stores/useSubtitleStore.ts\` stocke la cue de sous-titre affichée.
- \`src/components/ui/Subtitles.tsx\` rend l'overlay de sous-titres.
- \`src/world/GameDialogues.tsx\` déclenche actuellement les dialogues qui définissent un \`timecode\`.
- La lecture de dialogue est mise en file pour éviter les chevauchements.
## Cinématiques
- \`public/cinematics.json\` est le manifeste runtime des cinématiques.
- \`src/types/cinematics/cinematics.ts\` contient les types du manifeste.
- \`src/utils/cinematics/cinematicManifestValidation.ts\` valide la forme du manifeste.
- \`src/utils/cinematics/loadCinematicManifest.ts\` charge \`/cinematics.json\`.
- \`src/world/GameCinematics.tsx\` déclenche les cinématiques qui définissent un \`timecode\` global.
- Les cinématiques utilisent GSAP pour animer la position caméra et sa cible de regard.
- Les \`dialogueCues\` d'une cinématique déclenchent des dialogues à des temps relatifs au début de la cinématique.
- \`useGameStore.isCinematicPlaying\` sert à bloquer les inputs joueur pendant une cinématique.
- \`src/managers/AudioManager.ts\` fournit actuellement une lecture de sons one-shot avec pool.
- Les interactions trigger peuvent lancer directement un son via \`AudioManager\`.
## Système debug
@@ -190,8 +154,7 @@ Le joueur et l'octree de carte doivent rester hors du provider Rapier tant qu'il
- Le dépôt est encore un prototype, pas le runtime complet du jeu.
- \`src/world/debug/TestMap.tsx\` fait encore partie de la composition active.
- Il n'existe pas encore d'orchestrateur gameplay central comme \`GameManager\`.
- L'état de mission existe dans Zustand et le flow de réparation est implémenté comme prototype pour les missions de réparation actuelles.
- Les cinématiques et dialogues existent comme systèmes prototype pilotés par timecode; les branches de dialogue et l'orchestration gameplay globale restent limitées.
- L'état de mission existe dans Zustand, mais les zones, cinématiques, dialogues et le flow complet de réparation ne sont pas implémentés.
- Le joueur utilise une collision octree et des règles simples, pas une pile physique gameplay complète.
`;
@@ -430,7 +393,6 @@ Overlays actuels :
- \`GameStateDebugPanel\` : panneau de progression debug pour consulter/changer le main state, le sub state, avancer/reculer et reset le store
- \`Crosshair\` : aide de visée joueur
- \`InteractPrompt\` : prompt d'interaction
- \`RepairMovementLockIndicator\` : indicateur joueur affiché quand les étapes repair désactivent temporairement le déplacement
\`src/pages/page.tsx\` doit rester fin et monter seulement le canvas et \`GameUI\`.
@@ -467,7 +429,6 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
- Orientation souris avec pointer lock
- Déplacement avec \`ZQSD\`
- Saut
- Verrouillage du déplacement pendant les étapes repair actives, avec indicateur à l'écran tout en gardant les interactions trigger disponibles
- Collision basée sur une octree contre la carte chargée
## Interactions
@@ -483,74 +444,28 @@ Ce document liste les fonctionnalités présentes dans le code actuel.
- \`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, indicateur de verrouillage de déplacement pendant la réparation active, interaction trigger sur la mallette, traverse des placeholders de mallette, placement avec snap vers placeholder, feedback de 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, feedback de validation de la bonne pièce et complétion de 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
## Audio
- Volumes par catégorie pour la musique, les SFX et les dialogues
- Lecture de musique en boucle via \`AudioManager\`
- Lecture de sons one-shot pour les SFX et les dialogues, avec pool simple par son
- Pan stéréo optionnel pour les sons one-shot
## Dialogues et sous-titres
- Manifeste de dialogues dans \`public/sounds/dialogue/dialogues.json\`
- Audios de dialogue chargés depuis \`public/sounds/dialogue/\`
- Un fichier SRT par voix et par langue
- Fallback vers les sous-titres français quand le fichier de langue sélectionné manque
- Overlay de sous-titres runtime avec couleurs par speaker
- Déclenchement timecodé pour les dialogues qui définissent \`timecode\`
- File d'attente pour éviter les dialogues superposés
## Cinématiques
- Manifeste de cinématiques dans \`public/cinematics.json\`
- Déclenchement timecodé des cinématiques
- Lecture de keyframes caméra via GSAP
- Dialogue cues optionnelles synchronisées avec les timelines de cinématique
- Blocage des inputs joueur pendant une cinématique
## Menu options
- \`Esc\` ouvre et ferme le menu options en jeu
- Sliders de volume musique, SFX et dialogue
- Toggle d'affichage des sous-titres
- Choix de langue des sous-titres entre français et anglais
- Choix du runtime de réparation entre JavaScript local et serveur Python
- Action quitter qui nettoie les cookies accessibles au navigateur et retourne vers \`/\`
- Lecture de sons one-shot pour les interactions trigger
- Pool simple par son via \`AudioManager\`
## Outils debug
- Le paramètre \`?debug\` active le panneau debug
- Contrôles \`lil-gui\` pour le mode caméra, le mode scène, \`R3F Perf\`, \`Debug Overlay\` et le tuning d'interaction
- Overlay debug compact pour les contrôles de game state et le statut hand tracking
- Le changement de mission dans le panneau game-state debug déverrouille les missions repair encore \`locked\` à \`waiting\` pour accélérer les tests
- Helpers de scène debug
- Caméra libre debug
- Overlay \`r3f-perf\`
## Éditeur de carte
- Route \`/editor\` pour inspecter et éditer \`public/map.json\`
- Chargement automatique de \`public/map.json\` quand il existe
- Rendu des modèles disponibles depuis \`public/models/{name}/model.glb\` ou \`model.gltf\`
- Cubes de fallback pour les nodes dont le modèle manque
- Sélection d'objet au clic
- Modes de transformation translation, rotation et scale
- Export JSON pour télécharger la carte modifiée
- Endpoint de sauvegarde dev-server pour écrire \`public/map.json\`
- Éditeur SRT pour les sous-titres de dialogue
- Preview audio et outils de timing pour les cues SRT
- Endpoint de sauvegarde dev-server pour les fichiers SRT
- Validation du manifeste de dialogues depuis l'UI de l'éditeur
- Éditeur de manifeste dialogues avec preview et création assistée de cue SRT FR
- Éditeur de manifeste cinématiques avec keyframes caméra, dialogue cues et preview canvas
## Pas encore implémenté
- système de missions complet
- système de zones
- branches de dialogues gameplay au-delà des déclencheurs prototype actuels
- système de cinématiques
- système de dialogues
- flow de chargement
- minimap et HUD de mission
- séparation complète production / debug pour les scènes gameplay
@@ -609,74 +524,6 @@ Les modèles sont chargés depuis "/public/models". Si un modèle manque, l'édi
Cette action est masquée dans les builds de production car il n'existe pas encore d'API de persistance production.
## Éditer les dialogues et sous-titres
Le panneau latéral contient aussi des outils pour les dialogues et les sous-titres.
### Manifeste dialogues
Le panneau \`Dialogues\` permet d'éditer \`public/sounds/dialogue/dialogues.json\` sans ouvrir le JSON à la main.
- \`Reload\` recharge le manifeste depuis le disque.
- \`Add\` crée un dialogue local pour la voix courante et assigne le prochain index SRT disponible.
- \`Save\` écrit le manifeste via le serveur Vite local.
- \`Preview dialogue\` joue le dialogue sélectionné avec les sous-titres dans l'éditeur.
- \`Create FR SRT cue\` crée la cue française si elle manque.
- \`Delete dialogue\` supprime localement l'entrée sélectionnée.
Après \`Add\`, il faut cliquer \`Save\` pour conserver le dialogue dans le manifeste. La cue SRT FR est écrite directement, mais le manifeste reste local tant qu'il n'est pas sauvegardé.
Les nouveaux dialogues utilisent un chemin audio placeholder comme \`/sounds/dialogue/new_dialogue_24.mp3\`. Remplace-le par un vrai MP3 avant validation finale.
### Éditeur SRT
1. Choisir une voix : \`narrateur\`, \`fermier\` ou \`electricienne\`.
2. Choisir une langue : \`FR\` ou \`EN\`.
3. Modifier le texte SRT directement dans la textarea.
4. Utiliser la preview audio pour vérifier le dialogue sélectionné.
5. Utiliser \`Set start\`, \`Set end\`, \`-100ms\` et \`+100ms\` pour ajuster le timing de la cue sélectionnée avec l'audio.
6. Utiliser \`Save SRT\` en développement local, ou \`Export SRT\` pour télécharger le fichier manuellement.
Chaque fichier SRT appartient à une voix, pas à un dialogue. Les indexes de cue doivent correspondre aux valeurs \`subtitleCueIndex\` référencées par le manifeste de dialogues.
## Valider les assets de dialogue
Utilise \`Validate\` dans le panneau SRT pour vérifier le manifeste et les assets liés.
La validation vérifie :
- \`public/sounds/dialogue/dialogues.json\`
- les fichiers audio de dialogue référencés
- les fichiers SRT français
- les indexes de cue référencés par le manifeste
Les fichiers SRT anglais manquants sont des warnings parce que le runtime retombe sur les sous-titres français.
## Éditer les cinématiques
Le panneau \`Cinematics\` permet d'éditer \`public/cinematics.json\`.
Chaque cinématique contient :
- un \`id\`
- un \`timecode\` global optionnel
- au moins deux keyframes caméra
- des dialogue cues optionnelles synchronisées avec la timeline
Les keyframes caméra définissent un temps relatif, une position caméra et une cible de regard. Les dialogue cues définissent un temps relatif et un \`dialogueId\` issu de \`dialogues.json\`.
Actions disponibles :
- \`Reload\` recharge le manifeste.
- \`Add\` crée une cinématique locale avec deux keyframes.
- \`Save\` écrit \`public/cinematics.json\` via le serveur Vite local.
- \`Preview cinematic\` joue l'animation caméra dans le canvas éditeur.
- \`Add keyframe\` et \`Remove\` modifient le chemin caméra.
- \`Add dialogue\` et \`Remove\` modifient les dialogues synchronisés.
- \`Delete cinematic\` supprime localement la cinématique sélectionnée.
Les dialogue cues sont la manière recommandée de synchroniser un dialogue avec une cinématique. Évite de donner aussi un \`timecode\` global au même dialogue dans \`dialogues.json\`, sinon il peut être lancé deux fois.
## Inspecteur JSON
Le panneau latéral affiche le JSON brut de la carte :
@@ -692,6 +539,4 @@ Utilise-le pour vérifier les valeurs numériques exactes avant export ou sauveg
- Il n'y a pas encore d'interface pour créer ou supprimer des objets.
- La sauvegarde production n'est pas implémentée.
- Les modèles manquants s'affichent comme cubes de fallback au lieu de bloquer tout l'éditeur.
- La sauvegarde SRT est un helper local du serveur Vite, pas une API backend de production.
- Les sauvegardes dialogues et cinématiques sont aussi des helpers locaux du serveur Vite.
`;
-1
View File
@@ -1,5 +1,4 @@
export const REPAIR_FRAGMENTATION_FIST_HOLD_SECONDS = 1;
export const REPAIR_FRAGMENTATION_SEQUENCE_SECONDS = 4;
export const REPAIR_INTERACTION_RADIUS = 10;
export const REPAIR_SCAN_PART_SECONDS = 1.2;
export const REPAIR_REASSEMBLY_SECONDS = 1.4;
+6 -13
View File
@@ -1,9 +1,5 @@
import type { RepairMissionId } from "@/types/gameplay/repairMission";
import type {
ModelTransformProps,
Vector3Scale,
Vector3Tuple,
} from "@/types/three/three";
import type { Vector3Scale, Vector3Tuple } from "@/types/three/three";
export interface RepairMissionCaseConfig {
position: Vector3Tuple;
@@ -24,7 +20,6 @@ export interface RepairMissionConfig {
label: string;
description: string;
modelPath: string;
modelScale?: ModelTransformProps["scale"];
stageUiPath: string;
interactUiPath: string;
brokenUiPath: string;
@@ -45,14 +40,13 @@ const DEFAULT_REPAIR_CASE = {
scale: 1.5,
} satisfies RepairMissionCaseConfig;
export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
export const REPAIR_MISSIONS = {
bike: {
id: "bike",
label: "E-bike",
description:
"Repair the damaged cooling module before relaunching the bike",
modelPath: "/models/ebike/model.gltf",
modelScale: 0.0055,
modelPath: "/models/refroidisseur/model.gltf",
stageUiPath: "/assets/UI/ebike.webm",
interactUiPath: REPAIR_INTERACT_UI_PATH,
brokenUiPath: REPAIR_BROKEN_UI_PATH,
@@ -62,8 +56,7 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
{
id: "bike-cooling-core",
label: "Cooling core",
modelPath: "/models/refroidisseur/model.gltf",
nodeName: "refroidisseur",
nodeName: "Cylinder",
placeholderName: "placeholder_1",
},
],
@@ -81,7 +74,7 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
{
id: "bike-glove-decoy",
label: "Insulation glove",
modelPath: "/models/gant_l/model.gltf",
modelPath: "/models/gant/model.gltf",
},
],
},
@@ -173,4 +166,4 @@ export const REPAIR_MISSIONS: Record<RepairMissionId, RepairMissionConfig> = {
},
],
},
};
} satisfies Record<RepairMissionId, RepairMissionConfig>;
@@ -1,30 +0,0 @@
import { useGameStore } from "@/managers/stores/useGameStore";
import type { MissionStep } from "@/types/gameplay/repairMission";
export function useRepairMovementLocked(): boolean {
return false;
return useGameStore((state) => {
switch (state.mainState) {
case "bike":
return isRepairMovementLocked(state.bike.currentStep);
case "pylone":
return isRepairMovementLocked(state.pylone.currentStep);
case "ferme":
return isRepairMovementLocked(state.ferme.currentStep);
case "intro":
case "outro":
return false;
}
});
}
function isRepairMovementLocked(step: MissionStep): boolean {
return (
step === "inspected" ||
step === "fragmented" ||
step === "scanning" ||
step === "repairing" ||
step === "reassembling"
);
}
-2
View File
@@ -17,8 +17,6 @@ export function useOctreeGraphNode(
}, [rebuildKey]);
useEffect(() => {
if (!enabled) return;
const graphNode = graphNodeRef.current;
if (!enabled || octreeBuilt.current || !graphNode) return;
octreeBuilt.current = true;
-890
View File
@@ -397,35 +397,6 @@ canvas {
letter-spacing: 0.03em;
}
.repair-movement-lock-indicator {
position: fixed;
top: 22px;
left: 50%;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 13px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(5, 9, 16, 0.72);
color: rgba(255, 255, 255, 0.88);
font-size: 12px;
font-weight: 650;
letter-spacing: 0.02em;
pointer-events: none;
transform: translateX(-50%);
backdrop-filter: blur(10px);
}
.repair-movement-lock-indicator__dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #38bdf8;
box-shadow: 0 0 14px rgba(56, 189, 248, 0.86);
}
.scene-loading-overlay {
position: fixed;
inset: 0;
@@ -498,194 +469,6 @@ canvas {
text-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}
/* Subtitles */
.subtitles {
position: fixed;
left: 50%;
bottom: 7vh;
z-index: 15;
width: min(780px, calc(100vw - 32px));
transform: translateX(-50%);
pointer-events: none;
}
.subtitles p {
margin: 0;
padding: 12px 16px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.82);
color: #ffffff;
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 650;
line-height: 1.45;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.subtitles__speaker {
margin-right: 0.35em;
font-weight: 800;
}
.subtitles__speaker--narrateur {
color: #7dd3fc;
}
.subtitles__speaker--fermier {
color: #86efac;
}
.subtitles__speaker--electricienne {
color: #f9a8d4;
}
/* In-game settings menu */
.game-settings-menu {
position: fixed;
inset: 0;
z-index: 40;
display: grid;
place-items: center;
padding: 20px;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
pointer-events: auto;
backdrop-filter: blur(10px);
}
.game-settings-menu__panel {
width: min(460px, 100%);
max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
background: rgba(8, 8, 8, 0.94);
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
}
.game-settings-menu__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 4px 4px 16px;
}
.game-settings-menu__header span {
color: #8f8f8f;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.game-settings-menu__header h2 {
margin: 0.25rem 0 0;
font-size: 1.8rem;
letter-spacing: -0.06em;
}
.game-settings-menu__close {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: #111111;
color: #ffffff;
cursor: pointer;
}
.game-settings-menu__section {
display: grid;
gap: 12px;
padding: 16px 4px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.game-settings-menu__section h3 {
margin: 0;
color: #d7d7d7;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.game-settings-menu__slider {
display: grid;
gap: 8px;
}
.game-settings-menu__slider span,
.game-settings-menu__checkbox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: #f2f2f2;
font-size: 0.9rem;
font-weight: 650;
}
.game-settings-menu__slider strong {
color: #8f8f8f;
font-size: 0.78rem;
}
.game-settings-menu__slider input[type="range"] {
width: 100%;
accent-color: #ffffff;
}
.game-settings-menu__checkbox {
justify-content: flex-start;
cursor: pointer;
}
.game-settings-menu__checkbox input {
width: 18px;
height: 18px;
accent-color: #ffffff;
}
.game-settings-menu__choice-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.game-settings-menu__choice-group--stacked {
grid-template-columns: 1fr;
}
.game-settings-menu__choice-group button,
.game-settings-menu__quit {
width: 100%;
padding: 11px 12px;
border: 1px solid #242424;
border-radius: 14px;
background: #101010;
color: #f2f2f2;
cursor: pointer;
font-size: 0.88rem;
font-weight: 680;
}
.game-settings-menu__choice-group button.active {
border-color: #ffffff;
background: #ffffff;
color: #050505;
}
.game-settings-menu__quit {
margin-top: 8px;
border-color: rgba(248, 113, 113, 0.35);
color: #fecaca;
}
/* Debug overlay panels */
.debug-overlay-layout {
position: fixed;
@@ -1293,12 +1076,6 @@ canvas {
transform: translateY(-1px);
}
.editor-action-button:disabled {
cursor: not-allowed;
opacity: 0.45;
transform: none;
}
.editor-action-button-primary,
.editor-player-button.active {
background: #ffffff;
@@ -1462,673 +1239,6 @@ canvas {
font-size: 0.74rem;
}
/* Editor SRT panel */
.editor-srt-section {
display: grid;
gap: 10px;
padding: 14px 12px 12px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.editor-srt-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.editor-srt-controls label {
display: grid;
gap: 5px;
color: #8d8d8d;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.editor-srt-controls select {
width: 100%;
padding: 9px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
color: #f2f2f2;
}
.editor-srt-textarea {
width: 100%;
min-height: 260px;
resize: vertical;
box-sizing: border-box;
padding: 12px;
border: 1px solid #1f1f1f;
border-radius: 16px;
background: #050505;
color: #d7d7d7;
font-family: "SFMono-Regular", "Courier New", monospace;
font-size: 0.72rem;
line-height: 1.55;
}
.editor-srt-textarea:focus,
.editor-srt-controls select:focus,
.editor-srt-preview select:focus {
border-color: #ffffff;
outline: none;
}
.editor-srt-preview {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid #1f1f1f;
border-radius: 16px;
background: #070707;
}
.editor-srt-preview label {
display: grid;
gap: 5px;
color: #8d8d8d;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.editor-srt-preview select {
width: 100%;
padding: 9px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
color: #f2f2f2;
}
.editor-srt-audio-card {
display: grid;
gap: 6px;
color: #f2f2f2;
}
.editor-srt-audio-card span {
color: #8d8d8d;
font-size: 0.72rem;
}
.editor-srt-audio-card strong {
font-size: 0.78rem;
line-height: 1.3;
word-break: break-word;
}
.editor-srt-audio-card audio {
width: 100%;
height: 34px;
}
.editor-srt-active-cue {
display: grid;
gap: 5px;
padding: 8px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
}
.editor-srt-active-cue span {
color: #8d8d8d;
font-size: 0.7rem;
}
.editor-srt-active-cue p {
margin: 0;
color: #d7d7d7;
font-size: 0.74rem;
line-height: 1.4;
}
.editor-srt-active-cue strong {
margin-right: 4px;
color: #ffffff;
}
.editor-srt-time-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.editor-srt-time-actions button {
padding: 8px 10px;
border: 1px solid rgba(125, 211, 252, 0.24);
border-radius: 12px;
background: rgba(125, 211, 252, 0.08);
color: #bae6fd;
cursor: pointer;
font-size: 0.74rem;
font-weight: 800;
}
.editor-srt-time-actions button:hover {
border-color: #7dd3fc;
background: rgba(125, 211, 252, 0.14);
}
.editor-srt-jump-button {
width: 100%;
padding: 8px 10px;
border: 1px solid #2f2f2f;
border-radius: 12px;
background: #151515;
color: #f2f2f2;
cursor: pointer;
font-size: 0.76rem;
font-weight: 700;
}
.editor-srt-jump-button:hover {
border-color: #ffffff;
background: #202020;
}
.editor-srt-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.editor-srt-actions .editor-action-button + .editor-action-button {
margin-top: 0;
}
.editor-srt-status {
margin: 0;
color: #8d8d8d;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-dialogue-validation {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid #242424;
border-radius: 14px;
background: #101010;
}
.editor-dialogue-validation.is-valid {
border-color: rgba(134, 239, 172, 0.32);
}
.editor-dialogue-validation.is-invalid {
border-color: rgba(248, 113, 113, 0.38);
}
.editor-dialogue-validation__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.editor-dialogue-validation__heading div {
display: grid;
gap: 2px;
}
.editor-dialogue-validation__heading strong {
color: #f2f2f2;
font-size: 0.76rem;
font-weight: 800;
}
.editor-dialogue-validation__heading span {
color: #8d8d8d;
font-size: 0.68rem;
line-height: 1.35;
}
.editor-dialogue-validation__heading button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 92px;
padding: 8px 9px;
border: 1px solid #2f2f2f;
border-radius: 12px;
background: #151515;
color: #f2f2f2;
cursor: pointer;
font-size: 0.72rem;
font-weight: 800;
}
.editor-dialogue-validation__heading button:hover {
border-color: #ffffff;
background: #202020;
}
.editor-dialogue-validation__heading button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.editor-dialogue-validation__result {
display: grid;
gap: 6px;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-dialogue-validation__result p {
margin: 0;
color: #d7d7d7;
}
.editor-dialogue-validation__errors,
.editor-dialogue-validation__warnings {
display: grid;
gap: 4px;
margin: 0;
padding-left: 16px;
}
.editor-dialogue-validation__errors {
color: #fca5a5;
}
.editor-dialogue-validation__warnings {
color: #fde68a;
}
.editor-srt-diagnostic {
display: grid;
gap: 6px;
padding: 9px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-srt-diagnostic.is-valid {
border-color: rgba(134, 239, 172, 0.32);
color: #86efac;
}
.editor-srt-diagnostic.is-invalid {
border-color: rgba(248, 113, 113, 0.38);
color: #fca5a5;
}
.editor-srt-diagnostic strong {
font-size: 0.74rem;
}
.editor-srt-diagnostic ul {
display: grid;
gap: 4px;
margin: 0;
padding-left: 16px;
color: #fca5a5;
}
/* Editor dialogue manifest panel */
.editor-dialogue-manifest-section {
display: grid;
gap: 10px;
padding: 14px 12px 12px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.editor-dialogue-manifest-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.editor-dialogue-manifest-actions button,
.editor-dialogue-manifest-srt-cue,
.editor-dialogue-manifest-preview,
.editor-dialogue-manifest-delete {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 9px;
border: 1px solid #2f2f2f;
border-radius: 12px;
background: #151515;
color: #f2f2f2;
cursor: pointer;
font-size: 0.72rem;
font-weight: 800;
}
.editor-dialogue-manifest-actions button:hover,
.editor-dialogue-manifest-srt-cue:hover,
.editor-dialogue-manifest-preview:hover,
.editor-dialogue-manifest-delete:hover {
border-color: #ffffff;
background: #202020;
}
.editor-dialogue-manifest-actions button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.editor-dialogue-manifest-srt-cue:disabled,
.editor-dialogue-manifest-preview:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.editor-dialogue-manifest-select,
.editor-dialogue-manifest-form label {
display: grid;
gap: 5px;
color: #8d8d8d;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.editor-dialogue-manifest-select select,
.editor-dialogue-manifest-form input,
.editor-dialogue-manifest-form select {
width: 100%;
box-sizing: border-box;
padding: 9px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
color: #f2f2f2;
}
.editor-dialogue-manifest-select select:focus,
.editor-dialogue-manifest-form input:focus,
.editor-dialogue-manifest-form select:focus {
border-color: #ffffff;
outline: none;
}
.editor-dialogue-manifest-form {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid #1f1f1f;
border-radius: 16px;
background: #070707;
}
.editor-dialogue-manifest-delete {
border-color: rgba(248, 113, 113, 0.32);
color: #fca5a5;
}
.editor-dialogue-manifest-preview {
border-color: rgba(125, 211, 252, 0.24);
color: #bae6fd;
}
.editor-dialogue-manifest-srt-cue {
border-color: rgba(134, 239, 172, 0.24);
color: #bbf7d0;
}
.editor-dialogue-manifest-status {
margin: 0;
color: #8d8d8d;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-dialogue-manifest-diagnostic {
display: grid;
gap: 6px;
padding: 9px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-dialogue-manifest-diagnostic.is-valid {
border-color: rgba(134, 239, 172, 0.32);
color: #86efac;
}
.editor-dialogue-manifest-diagnostic.is-invalid {
border-color: rgba(248, 113, 113, 0.38);
color: #fca5a5;
}
.editor-dialogue-manifest-diagnostic ul {
display: grid;
gap: 4px;
margin: 0;
padding-left: 16px;
}
/* Editor cinematic manifest panel */
.editor-cinematic-manifest-section {
display: grid;
gap: 10px;
padding: 14px 12px 12px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.editor-cinematic-manifest-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.editor-cinematic-manifest-actions button,
.editor-cinematic-manifest-preview,
.editor-cinematic-manifest-delete,
.editor-cinematic-keyframes-heading button,
.editor-cinematic-keyframe-heading button,
.editor-cinematic-dialogue-cues-heading button,
.editor-cinematic-dialogue-cue-heading button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 9px;
border: 1px solid #2f2f2f;
border-radius: 12px;
background: #151515;
color: #f2f2f2;
cursor: pointer;
font-size: 0.72rem;
font-weight: 800;
}
.editor-cinematic-manifest-actions button:hover,
.editor-cinematic-manifest-preview:hover,
.editor-cinematic-manifest-delete:hover,
.editor-cinematic-keyframes-heading button:hover,
.editor-cinematic-keyframe-heading button:hover,
.editor-cinematic-dialogue-cues-heading button:hover,
.editor-cinematic-dialogue-cue-heading button:hover {
border-color: #ffffff;
background: #202020;
}
.editor-cinematic-manifest-actions button:disabled,
.editor-cinematic-manifest-preview:disabled,
.editor-cinematic-keyframe-heading button:disabled,
.editor-cinematic-dialogue-cue-heading button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.editor-cinematic-manifest-select,
.editor-cinematic-manifest-form label,
.editor-cinematic-vector-inputs label,
.editor-cinematic-dialogue-cue label {
display: grid;
gap: 5px;
color: #8d8d8d;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.editor-cinematic-manifest-select select,
.editor-cinematic-manifest-form input,
.editor-cinematic-manifest-form select,
.editor-cinematic-vector-inputs input {
width: 100%;
box-sizing: border-box;
padding: 9px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
color: #f2f2f2;
}
.editor-cinematic-manifest-select select:focus,
.editor-cinematic-manifest-form input:focus,
.editor-cinematic-manifest-form select:focus,
.editor-cinematic-vector-inputs input:focus {
border-color: #ffffff;
outline: none;
}
.editor-cinematic-manifest-form,
.editor-cinematic-keyframes,
.editor-cinematic-keyframe,
.editor-cinematic-dialogue-cues,
.editor-cinematic-dialogue-cue {
display: grid;
gap: 8px;
}
.editor-cinematic-manifest-form {
padding: 10px;
border: 1px solid #1f1f1f;
border-radius: 16px;
background: #070707;
}
.editor-cinematic-keyframes,
.editor-cinematic-dialogue-cues {
padding: 10px;
border: 1px solid #242424;
border-radius: 14px;
background: #101010;
}
.editor-cinematic-keyframes-heading,
.editor-cinematic-keyframe-heading,
.editor-cinematic-dialogue-cues-heading,
.editor-cinematic-dialogue-cue-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.editor-cinematic-keyframes-heading strong,
.editor-cinematic-keyframe-heading strong,
.editor-cinematic-dialogue-cues-heading strong,
.editor-cinematic-dialogue-cue-heading strong {
color: #f2f2f2;
font-size: 0.76rem;
font-weight: 800;
}
.editor-cinematic-keyframe,
.editor-cinematic-dialogue-cue {
padding: 9px;
border: 1px solid #1f1f1f;
border-radius: 12px;
background: #070707;
}
.editor-cinematic-vector-inputs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.editor-cinematic-vector-inputs span {
grid-column: 1 / -1;
color: #8d8d8d;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.editor-cinematic-manifest-delete {
border-color: rgba(248, 113, 113, 0.32);
color: #fca5a5;
}
.editor-cinematic-manifest-preview {
border-color: rgba(125, 211, 252, 0.24);
color: #bae6fd;
}
.editor-cinematic-keyframe-heading button,
.editor-cinematic-dialogue-cue-heading button {
padding: 6px 8px;
color: #fca5a5;
}
.editor-cinematic-dialogue-cues p {
margin: 0;
color: #8d8d8d;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-cinematic-manifest-status {
margin: 0;
color: #8d8d8d;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-cinematic-manifest-diagnostic {
display: grid;
gap: 6px;
padding: 9px 10px;
border: 1px solid #242424;
border-radius: 12px;
background: #101010;
font-size: 0.72rem;
line-height: 1.4;
}
.editor-cinematic-manifest-diagnostic.is-valid {
border-color: rgba(134, 239, 172, 0.32);
color: #86efac;
}
.editor-cinematic-manifest-diagnostic.is-invalid {
border-color: rgba(248, 113, 113, 0.38);
color: #fca5a5;
}
.editor-cinematic-manifest-diagnostic ul {
display: grid;
gap: 4px;
margin: 0;
padding-left: 16px;
}
/* Editor responsive layout */
@media (max-width: 768px) {
.editor-error h2 {
+4 -129
View File
@@ -1,53 +1,17 @@
import { logger } from "@/utils/core/Logger";
export type AudioCategory = "music" | "sfx" | "dialogue";
export type OneShotAudioCategory = Exclude<AudioCategory, "music">;
interface AudioContextWindow extends Window {
webkitAudioContext?: typeof AudioContext;
}
const DEFAULT_CATEGORY_VOLUMES: Record<AudioCategory, number> = {
music: 1,
sfx: 1,
dialogue: 1,
};
interface PlaySoundOptions {
category?: OneShotAudioCategory;
pan?: number;
playbackRate?: number;
}
interface StereoNodes {
source: MediaElementAudioSourceNode;
panner: StereoPannerNode;
}
interface OneShotAudioState {
category: OneShotAudioCategory;
volume: number;
}
export class AudioManager {
private static _instance: AudioManager | null = null;
private readonly _audioPools = new Map<string, HTMLAudioElement[]>();
private readonly _stereoNodes = new WeakMap<HTMLAudioElement, StereoNodes>();
private readonly _oneShotStates = new WeakMap<
HTMLAudioElement,
OneShotAudioState
>();
private readonly _categoryVolumes: Record<AudioCategory, number> = {
...DEFAULT_CATEGORY_VOLUMES,
};
private _audioContext: AudioContext | null = null;
private _music: HTMLAudioElement | null = null;
private _musicPath: string | null = null;
private _musicVolume = 1;
private _musicUnlockHandler: (() => void) | null = null;
private static readonly MAX_POOL_SIZE_PER_SOUND = 6;
private static readonly DEFAULT_SOUND_CATEGORY: OneShotAudioCategory = "sfx";
private static readonly IGNORED_PLAYBACK_ERRORS = new Set([
"AbortError",
"NotAllowedError",
@@ -63,38 +27,11 @@ export class AudioManager {
private constructor() {}
setCategoryVolume(category: AudioCategory, volume: number): void {
this._categoryVolumes[category] = AudioManager._clampVolume(volume);
if (category === "music" && this._music) {
this._music.volume = this._getEffectiveVolume("music", this._musicVolume);
return;
}
this._updateOneShotVolumes(category);
}
getCategoryVolume(category: AudioCategory): number {
return this._categoryVolumes[category];
}
playSound(
path: string,
volume = 1,
options: PlaySoundOptions = {},
): HTMLAudioElement {
playSound(path: string, volume = 1, options: PlaySoundOptions = {}): void {
const audio = this._acquireAudio(path);
const category = options.category ?? AudioManager.DEFAULT_SOUND_CATEGORY;
const baseVolume = AudioManager._clampVolume(volume);
this._oneShotStates.set(audio, { category, volume: baseVolume });
audio.volume = this._getEffectiveVolume(category, baseVolume);
audio.volume = Math.max(0, Math.min(1, volume));
audio.playbackRate = options.playbackRate ?? 1;
audio.currentTime = 0;
this._setStereoPan(audio, options.pan ?? 0);
if (this._audioContext?.state === "suspended") {
void this._audioContext.resume();
}
void audio.play().catch((error: unknown) => {
if (
@@ -106,19 +43,14 @@ export class AudioManager {
logger.error("AudioManager", "Failed to play sound", {
path,
category,
error: AudioManager._toLogValue(error),
});
});
return audio;
}
playMusic(path: string, volume = 1): void {
this._musicVolume = AudioManager._clampVolume(volume);
if (this._musicPath === path && this._music) {
this._music.volume = this._getEffectiveVolume("music", this._musicVolume);
this._music.volume = Math.max(0, Math.min(1, volume));
if (!this._music.paused) return;
} else {
this.stopMusic();
@@ -127,7 +59,7 @@ export class AudioManager {
this._musicPath = path;
}
this._music.volume = this._getEffectiveVolume("music", this._musicVolume);
this._music.volume = Math.max(0, Math.min(1, volume));
void this._music.play().catch((error: unknown) => {
if (
@@ -161,8 +93,6 @@ export class AudioManager {
});
});
this._audioPools.clear();
void this._audioContext?.close();
this._audioContext = null;
AudioManager._instance = null;
}
@@ -229,61 +159,6 @@ export class AudioManager {
this._musicUnlockHandler = null;
}
private _setStereoPan(audio: HTMLAudioElement, pan: number): void {
const audioContext = this._getAudioContext();
if (!audioContext || !("createStereoPanner" in audioContext)) return;
let nodes = this._stereoNodes.get(audio);
if (!nodes) {
nodes = {
source: audioContext.createMediaElementSource(audio),
panner: audioContext.createStereoPanner(),
};
nodes.source.connect(nodes.panner).connect(audioContext.destination);
this._stereoNodes.set(audio, nodes);
}
nodes.panner.pan.value = AudioManager._clampPan(pan);
}
private _getAudioContext(): AudioContext | null {
if (this._audioContext) return this._audioContext;
const AudioContextConstructor =
window.AudioContext ??
(window as AudioContextWindow).webkitAudioContext ??
null;
if (!AudioContextConstructor) return null;
this._audioContext = new AudioContextConstructor();
return this._audioContext;
}
private _getEffectiveVolume(category: AudioCategory, volume: number): number {
return AudioManager._clampVolume(volume) * this._categoryVolumes[category];
}
private _updateOneShotVolumes(category: AudioCategory): void {
if (category === "music") return;
this._audioPools.forEach((pool) => {
pool.forEach((audio) => {
const state = this._oneShotStates.get(audio);
if (!state || state.category !== category) return;
audio.volume = this._getEffectiveVolume(category, state.volume);
});
});
}
private static _clampPan(pan: number): number {
return Math.max(-1, Math.min(1, pan));
}
private static _clampVolume(volume: number): number {
return Math.max(0, Math.min(1, volume));
}
private static _toLogValue(error: unknown): Error | DOMException | string {
if (error instanceof Error || error instanceof DOMException) {
return error;
-4
View File
@@ -21,7 +21,6 @@ interface MissionState {
interface GameState {
mainState: MainGameState;
isCinematicPlaying: boolean;
intro: IntroState;
bike: MissionState & {
isRepaired: boolean;
@@ -40,7 +39,6 @@ interface GameState {
interface GameActions {
setMainState: (mainState: MainGameState) => void;
setCinematicPlaying: (isCinematicPlaying: boolean) => void;
setIntroState: (intro: Partial<IntroState>) => void;
setBikeState: (bike: Partial<GameState["bike"]>) => void;
setPyloneState: (pylone: Partial<GameState["pylone"]>) => void;
@@ -224,7 +222,6 @@ function startOutroState(state: GameState): GameStateUpdate {
function createInitialGameState(): GameState {
return {
mainState: "intro",
isCinematicPlaying: false,
intro: {
dialogueAudio: null,
hasCompleted: false,
@@ -255,7 +252,6 @@ function createInitialGameState(): GameState {
export const useGameStore = create<GameStore>()((set) => ({
...createInitialGameState(),
setMainState: (mainState) => set({ mainState }),
setCinematicPlaying: (isCinematicPlaying) => set({ isCinematicPlaying }),
setIntroState: (intro) =>
set((state) => ({ intro: { ...state.intro, ...intro } })),
setBikeState: (bike) =>
-87
View File
@@ -1,87 +0,0 @@
import { create } from "zustand";
import { AudioManager } from "@/managers/AudioManager";
import type { AudioCategory } from "@/managers/AudioManager";
export type SubtitleLanguage = "fr" | "en";
export type RepairRuntime = "js" | "python";
interface SettingsState {
isSettingsMenuOpen: boolean;
musicVolume: number;
sfxVolume: number;
dialogueVolume: number;
subtitlesEnabled: boolean;
subtitleLanguage: SubtitleLanguage;
repairRuntime: RepairRuntime;
}
interface SettingsActions {
setSettingsMenuOpen: (open: boolean) => void;
setMusicVolume: (volume: number) => void;
setSfxVolume: (volume: number) => void;
setDialogueVolume: (volume: number) => void;
setSubtitlesEnabled: (enabled: boolean) => void;
setSubtitleLanguage: (language: SubtitleLanguage) => void;
setRepairRuntime: (runtime: RepairRuntime) => void;
resetSettings: () => void;
}
type SettingsStore = SettingsState & SettingsActions;
const DEFAULT_SETTINGS: SettingsState = {
isSettingsMenuOpen: false,
musicVolume: 1,
sfxVolume: 1,
dialogueVolume: 1,
subtitlesEnabled: true,
subtitleLanguage: "fr",
repairRuntime: "js",
};
function clampVolume(volume: number): number {
return Math.max(0, Math.min(1, volume));
}
function setAudioCategoryVolume(
category: AudioCategory,
volume: number,
): number {
const nextVolume = clampVolume(volume);
AudioManager.getInstance().setCategoryVolume(category, nextVolume);
return nextVolume;
}
function applyDefaultAudioSettings(): void {
AudioManager.getInstance().setCategoryVolume(
"music",
DEFAULT_SETTINGS.musicVolume,
);
AudioManager.getInstance().setCategoryVolume(
"sfx",
DEFAULT_SETTINGS.sfxVolume,
);
AudioManager.getInstance().setCategoryVolume(
"dialogue",
DEFAULT_SETTINGS.dialogueVolume,
);
}
applyDefaultAudioSettings();
export const useSettingsStore = create<SettingsStore>()((set) => ({
...DEFAULT_SETTINGS,
setSettingsMenuOpen: (isSettingsMenuOpen) => set({ isSettingsMenuOpen }),
setMusicVolume: (volume) =>
set({ musicVolume: setAudioCategoryVolume("music", volume) }),
setSfxVolume: (volume) =>
set({ sfxVolume: setAudioCategoryVolume("sfx", volume) }),
setDialogueVolume: (volume) =>
set({ dialogueVolume: setAudioCategoryVolume("dialogue", volume) }),
setSubtitlesEnabled: (subtitlesEnabled) => set({ subtitlesEnabled }),
setSubtitleLanguage: (subtitleLanguage) => set({ subtitleLanguage }),
setRepairRuntime: (repairRuntime) => set({ repairRuntime }),
resetSettings: () => {
applyDefaultAudioSettings();
set(DEFAULT_SETTINGS);
},
}));
-24
View File
@@ -1,24 +0,0 @@
import { create } from "zustand";
import type { DialogueSpeaker } from "@/types/dialogues/dialogues";
interface ActiveSubtitle {
speaker: DialogueSpeaker;
text: string;
}
interface SubtitleState {
activeSubtitle: ActiveSubtitle | null;
}
interface SubtitleActions {
setActiveSubtitle: (subtitle: ActiveSubtitle | null) => void;
clearActiveSubtitle: () => void;
}
type SubtitleStore = SubtitleState & SubtitleActions;
export const useSubtitleStore = create<SubtitleStore>()((set) => ({
activeSubtitle: null,
setActiveSubtitle: (activeSubtitle) => set({ activeSubtitle }),
clearActiveSubtitle: () => set({ activeSubtitle: null }),
}));
-23
View File
@@ -3,11 +3,8 @@ import { Canvas } from "@react-three/fiber";
import { useProgress } from "@react-three/drei";
import { EditorControls } from "@/components/editor/EditorControls";
import { EditorScene } from "@/components/editor/scene/EditorScene";
import type { EditorCinematicPreviewRequest } from "@/components/editor/scene/EditorScene";
import { SceneLoadingOverlay } from "@/components/ui/SceneLoadingOverlay";
import { Subtitles } from "@/components/ui/Subtitles";
import { useEditorHistory } from "@/hooks/editor/useEditorHistory";
import type { CinematicDefinition } from "@/types/cinematics/cinematics";
import { useEditorSceneData } from "@/hooks/editor/useEditorSceneData";
import type { MapNode, SceneData, TransformMode } from "@/types/editor/editor";
import {
@@ -96,8 +93,6 @@ export function EditorPage(): React.JSX.Element {
status: "loading" as const,
}
: sceneLoadingState;
const [cinematicPreviewRequest, setCinematicPreviewRequest] =
useState<EditorCinematicPreviewRequest | null>(null);
const {
undoCount,
@@ -158,20 +153,6 @@ export function EditorPage(): React.JSX.Element {
setIsPlayerMode((prev) => !prev);
}, []);
const handlePreviewCinematic = useCallback(
(cinematic: CinematicDefinition) => {
setCinematicPreviewRequest({
id: window.crypto.randomUUID(),
cinematic,
});
},
[],
);
const handleCinematicPreviewComplete = useCallback(() => {
setCinematicPreviewRequest(null);
}, []);
const handleNodeTransform = useCallback(
(nodeIndex: number, updatedNode: MapNode) => {
setSceneData((prev) => {
@@ -256,8 +237,6 @@ export function EditorPage(): React.JSX.Element {
onUndo={handleUndo}
onRedo={handleRedo}
isPlayerMode={isPlayerMode}
cinematicPreviewRequest={cinematicPreviewRequest}
onCinematicPreviewComplete={handleCinematicPreviewComplete}
/>
</Suspense>
</Canvas>
@@ -283,11 +262,9 @@ export function EditorPage(): React.JSX.Element {
onExportJson={handleExportJson}
onSaveToServer={import.meta.env.DEV ? handleSaveToServer : undefined}
onPlayerMode={handlePlayerMode}
onPreviewCinematic={handlePreviewCinematic}
isPlayerMode={isPlayerMode}
/>
)}
<Subtitles />
</div>
);
}
-24
View File
@@ -1,24 +0,0 @@
import type { Vector3Tuple } from "@/types/three/three";
export interface CinematicCameraKeyframe {
time: number;
position: Vector3Tuple;
target: Vector3Tuple;
}
export interface CinematicDialogueCue {
time: number;
dialogueId: string;
}
export interface CinematicDefinition {
id: string;
timecode?: number;
cameraKeyframes: CinematicCameraKeyframe[];
dialogueCues?: CinematicDialogueCue[];
}
export interface CinematicManifest {
version: 1;
cinematics: CinematicDefinition[];
}
-24
View File
@@ -1,24 +0,0 @@
import type { SubtitleLanguage } from "@/managers/stores/useSettingsStore";
export type DialogueVoiceId = "narrateur" | "fermier" | "electricienne";
export type DialogueSpeaker = "Narrateur" | "Fermier" | "Electricienne";
export interface DialogueVoice {
id: DialogueVoiceId;
speaker: DialogueSpeaker;
subtitles: Partial<Record<SubtitleLanguage, string>>;
}
export interface DialogueDefinition {
id: string;
voice: DialogueVoiceId;
audio: string;
subtitleCueIndex: number;
timecode?: number;
}
export interface DialogueManifest {
version: 1;
voices: DialogueVoice[];
dialogues: DialogueDefinition[];
}
@@ -1,102 +0,0 @@
import type {
CinematicCameraKeyframe,
CinematicDefinition,
CinematicDialogueCue,
CinematicManifest,
} from "@/types/cinematics/cinematics";
import type { Vector3Tuple } from "@/types/three/three";
export function parseCinematicManifest(data: unknown): CinematicManifest {
if (!isRecord(data) || data.version !== 1) {
throw new Error("Invalid cinematic manifest version");
}
if (!Array.isArray(data.cinematics)) {
throw new Error("Cinematic manifest requires a cinematics array");
}
return {
version: 1,
cinematics: data.cinematics.map(parseCinematicDefinition),
};
}
function parseCinematicDefinition(data: unknown): CinematicDefinition {
if (!isRecord(data) || typeof data.id !== "string") {
throw new Error("Invalid cinematic definition");
}
if (!Array.isArray(data.cameraKeyframes)) {
throw new Error(`Cinematic ${data.id} requires cameraKeyframes`);
}
const cameraKeyframes = data.cameraKeyframes.map(parseCameraKeyframe);
if (cameraKeyframes.length < 2) {
throw new Error(`Cinematic ${data.id} requires at least two keyframes`);
}
cameraKeyframes.forEach((keyframe, index) => {
const previousKeyframe = cameraKeyframes[index - 1];
if (previousKeyframe && keyframe.time <= previousKeyframe.time) {
throw new Error(`Cinematic ${data.id} keyframe times must increase`);
}
});
const cinematic: CinematicDefinition = {
id: data.id,
cameraKeyframes,
};
if (typeof data.timecode === "number") {
cinematic.timecode = data.timecode;
}
if (Array.isArray(data.dialogueCues)) {
cinematic.dialogueCues = data.dialogueCues.map(parseDialogueCue);
}
return cinematic;
}
function parseDialogueCue(data: unknown): CinematicDialogueCue {
if (
!isRecord(data) ||
typeof data.time !== "number" ||
typeof data.dialogueId !== "string"
) {
throw new Error("Invalid cinematic dialogue cue");
}
return {
time: data.time,
dialogueId: data.dialogueId,
};
}
function parseCameraKeyframe(data: unknown): CinematicCameraKeyframe {
if (!isRecord(data) || typeof data.time !== "number") {
throw new Error("Invalid cinematic camera keyframe");
}
return {
time: data.time,
position: parseVector3(data.position),
target: parseVector3(data.target),
};
}
function parseVector3(value: unknown): Vector3Tuple {
if (
!Array.isArray(value) ||
value.length !== 3 ||
value.some((item) => typeof item !== "number")
) {
throw new Error("Invalid cinematic vector");
}
return [value[0], value[1], value[2]];
}
function isRecord(value: unknown): value is Record<string, unknown> {
return typeof value === "object" && value !== null;
}
@@ -1,14 +0,0 @@
import type { CinematicManifest } from "@/types/cinematics/cinematics";
import { parseCinematicManifest } from "@/utils/cinematics/cinematicManifestValidation";
const CINEMATIC_MANIFEST_PATH = "/cinematics.json";
export async function loadCinematicManifest(): Promise<CinematicManifest | null> {
const response = await fetch(CINEMATIC_MANIFEST_PATH);
if (!response.ok) {
return null;
}
return parseCinematicManifest(await response.json());
}
@@ -1,140 +0,0 @@
import type {
DialogueDefinition,
DialogueManifest,
DialogueSpeaker,
DialogueVoice,
DialogueVoiceId,
} from "@/types/dialogues/dialogues";
const VALID_VOICE_IDS = new Set<DialogueVoiceId>([
"narrateur",
"fermier",
"electricienne",
]);
const VALID_SPEAKERS = new Set<DialogueSpeaker>([
"Narrateur",
"Fermier",
"Electricienne",
]);
export function parseDialogueManifest(data: unknown): DialogueManifest {
if (!isRecord(data)) {
throw new Error("Dialogue manifest must be an object");
}
if (data.version !== 1) {
throw new Error("Unsupported dialogue manifest version");
}
if (!Array.isArray(data.voices) || !Array.isArray(data.dialogues)) {
throw new Error("Dialogue manifest requires voices and dialogues arrays");
}
const voices = data.voices.map(parseDialogueVoice);
const voiceIds = new Set(voices.map((voice) => voice.id));
const dialogues = data.dialogues.map((dialogue) =>
parseDialogueDefinition(dialogue, voiceIds),
);
return {
version: 1,
voices,
dialogues,
};
}
function parseDialogueVoice(data: unknown): DialogueVoice {
if (!isRecord(data)) {
throw new Error("Dialogue voice must be an object");
}
if (!isDialogueVoiceId(data.id)) {
throw new Error("Dialogue voice has an invalid id");
}
if (!isDialogueSpeaker(data.speaker)) {
throw new Error(`Dialogue voice ${data.id} has an invalid speaker`);
}
if (!isRecord(data.subtitles)) {
throw new Error(`Dialogue voice ${data.id} must define subtitles`);
}
const subtitles: DialogueVoice["subtitles"] = {};
const frSubtitle = getOptionalPath(data.subtitles.fr);
const enSubtitle = getOptionalPath(data.subtitles.en);
if (frSubtitle) subtitles.fr = frSubtitle;
if (enSubtitle) subtitles.en = enSubtitle;
return {
id: data.id,
speaker: data.speaker,
subtitles,
};
}
function parseDialogueDefinition(
data: unknown,
voiceIds: Set<DialogueVoiceId>,
): DialogueDefinition {
if (!isRecord(data)) {
throw new Error("Dialogue definition must be an object");
}
if (typeof data.id !== "string" || data.id.length === 0) {
throw new Error("Dialogue definition has an invalid id");
}
if (!isDialogueVoiceId(data.voice) || !voiceIds.has(data.voice)) {
throw new Error(`Dialogue ${data.id} references an unknown voice`);
}
if (typeof data.audio !== "string" || data.audio.length === 0) {
throw new Error(`Dialogue ${data.id} has an invalid audio path`);
}
const subtitleCueIndex = data.subtitleCueIndex;
if (
typeof subtitleCueIndex !== "number" ||
!Number.isInteger(subtitleCueIndex) ||
subtitleCueIndex < 1
) {
throw new Error(`Dialogue ${data.id} has an invalid subtitle cue index`);
}
const timecode = data.timecode;
if (timecode !== undefined && typeof timecode !== "number") {
throw new Error(`Dialogue ${data.id} has an invalid timecode`);
}
const dialogue: DialogueDefinition = {
id: data.id,
voice: data.voice,
audio: data.audio,
subtitleCueIndex,
};
if (timecode !== undefined) dialogue.timecode = timecode;
return dialogue;
}
function getOptionalPath(value: unknown): string | undefined {
return typeof value === "string" && value.length > 0 ? value : undefined;
}
function isDialogueVoiceId(value: unknown): value is DialogueVoiceId {
return (
typeof value === "string" && VALID_VOICE_IDS.has(value as DialogueVoiceId)
);
}
function isDialogueSpeaker(value: unknown): value is DialogueSpeaker {
return (
typeof value === "string" && VALID_SPEAKERS.has(value as DialogueSpeaker)
);
}
function isRecord(value: unknown): value is Record<string, unknown> {
return typeof value === "object" && value !== null;
}
-116
View File
@@ -1,116 +0,0 @@
import type {
DialogueDefinition,
DialogueManifest,
DialogueVoice,
} from "@/types/dialogues/dialogues";
import type { SubtitleLanguage } from "@/managers/stores/useSettingsStore";
import { parseDialogueManifest } from "@/utils/dialogues/dialogueManifestValidation";
import { parseSrt } from "@/utils/subtitles/parseSrt";
import type { SubtitleCue } from "@/utils/subtitles/parseSrt";
const DIALOGUE_MANIFEST_PATH = "/sounds/dialogue/dialogues.json";
const DEFAULT_SUBTITLE_LANGUAGE: SubtitleLanguage = "fr";
export interface DialogueSubtitleCue {
voice: DialogueVoice;
cue: SubtitleCue;
subtitlePath: string;
}
export async function loadDialogueManifest(): Promise<DialogueManifest | null> {
const response = await fetch(DIALOGUE_MANIFEST_PATH);
if (!response.ok) {
return null;
}
return parseDialogueManifest(await response.json());
}
export function resolveDialogueSubtitlePath(
manifest: DialogueManifest,
dialogue: DialogueDefinition,
language: SubtitleLanguage,
): string | null {
const voice = getDialogueVoice(manifest, dialogue.voice);
if (!voice) return null;
return getVoiceSubtitlePath(voice, language);
}
export function getDialogueVoice(
manifest: DialogueManifest,
voiceId: DialogueDefinition["voice"],
): DialogueVoice | null {
return manifest.voices.find((voice) => voice.id === voiceId) ?? null;
}
export async function loadDialogueSubtitleCue(
manifest: DialogueManifest,
dialogue: DialogueDefinition,
language: SubtitleLanguage,
): Promise<DialogueSubtitleCue | null> {
const voice = getDialogueVoice(manifest, dialogue.voice);
if (!voice) return null;
const subtitles = await loadVoiceSubtitleCues(voice, language);
if (!subtitles) return null;
const cue = subtitles.cues.find(
(item) => item.index === dialogue.subtitleCueIndex,
);
if (!cue) return null;
return {
voice,
cue,
subtitlePath: subtitles.path,
};
}
export async function loadVoiceSubtitleCues(
voice: DialogueVoice,
language: SubtitleLanguage,
): Promise<{ path: string; cues: SubtitleCue[] } | null> {
const paths = getVoiceSubtitlePaths(voice, language);
for (const path of paths) {
const srtContent = await loadSrtContent(path);
if (srtContent !== null) {
return { path, cues: parseSrt(srtContent) };
}
}
return null;
}
async function loadSrtContent(path: string): Promise<string | null> {
const response = await fetch(path);
if (!response.ok) {
return null;
}
return response.text();
}
function getVoiceSubtitlePaths(
voice: DialogueVoice,
language: SubtitleLanguage,
): string[] {
return [voice.subtitles[language], voice.subtitles[DEFAULT_SUBTITLE_LANGUAGE]]
.filter((path): path is string => Boolean(path))
.filter((path, index, paths) => paths.indexOf(path) === index);
}
function getVoiceSubtitlePath(
voice: DialogueVoice,
language: SubtitleLanguage,
): string | null {
return (
voice.subtitles[language] ??
voice.subtitles[DEFAULT_SUBTITLE_LANGUAGE] ??
null
);
}
-162
View File
@@ -1,162 +0,0 @@
import { AudioManager } from "@/managers/AudioManager";
import { useSettingsStore } from "@/managers/stores/useSettingsStore";
import { useSubtitleStore } from "@/managers/stores/useSubtitleStore";
import type { DialogueManifest } from "@/types/dialogues/dialogues";
import {
loadDialogueManifest,
loadDialogueSubtitleCue,
} from "@/utils/dialogues/loadDialogueManifest";
interface QueuedDialogueRequest {
manifest: DialogueManifest;
dialogueId: string;
resolve: (audio: HTMLAudioElement | null) => void;
}
const DIALOGUE_PLAY_START_TIMEOUT_MS = 800;
const dialogueQueue: QueuedDialogueRequest[] = [];
let gameplayDialogueManifestPromise: Promise<DialogueManifest | null> | null =
null;
let isDialogueQueuePlaying = false;
export function queueDialogueById(
manifest: DialogueManifest,
dialogueId: string,
): Promise<HTMLAudioElement | null> {
return new Promise((resolve) => {
dialogueQueue.push({ manifest, dialogueId, resolve });
void playNextQueuedDialogue();
});
}
export function clearQueuedDialogues(): void {
while (dialogueQueue.length > 0) {
dialogueQueue.shift()?.resolve(null);
}
}
export async function playGameplayDialogueById(
dialogueId: string,
): Promise<HTMLAudioElement | null> {
gameplayDialogueManifestPromise ??= loadDialogueManifest();
const manifest = await gameplayDialogueManifestPromise;
if (!manifest) return null;
return queueDialogueById(manifest, dialogueId);
}
export async function playDialogueById(
manifest: DialogueManifest,
dialogueId: string,
): Promise<HTMLAudioElement | null> {
const dialogue = manifest.dialogues.find((item) => item.id === dialogueId);
if (!dialogue) return null;
const subtitleLanguage = useSettingsStore.getState().subtitleLanguage;
const subtitle = await loadDialogueSubtitleCue(
manifest,
dialogue,
subtitleLanguage,
);
const audio = AudioManager.getInstance().playSound(dialogue.audio, 1, {
category: "dialogue",
});
if (!subtitle) return audio;
const clearSubtitle = (): void => {
useSubtitleStore.getState().clearActiveSubtitle();
};
const cleanup = (): void => {
audio.removeEventListener("play", syncSubtitle);
audio.removeEventListener("timeupdate", syncSubtitle);
audio.removeEventListener("ended", cleanup);
audio.removeEventListener("pause", cleanup);
clearSubtitle();
};
const syncSubtitle = (): void => {
const currentTime = audio.currentTime;
const shouldShowSubtitle =
currentTime >= subtitle.cue.startTime &&
currentTime <= subtitle.cue.endTime;
if (shouldShowSubtitle) {
useSubtitleStore.getState().setActiveSubtitle({
speaker: subtitle.voice.speaker,
text: subtitle.cue.text,
});
return;
}
clearSubtitle();
};
audio.addEventListener("play", syncSubtitle);
audio.addEventListener("timeupdate", syncSubtitle);
audio.addEventListener("ended", cleanup);
audio.addEventListener("pause", cleanup);
return audio;
}
async function playNextQueuedDialogue(): Promise<void> {
if (isDialogueQueuePlaying) return;
isDialogueQueuePlaying = true;
while (dialogueQueue.length > 0) {
const request = dialogueQueue.shift();
if (!request) continue;
try {
const audio = await playDialogueById(
request.manifest,
request.dialogueId,
);
request.resolve(audio);
if (audio) await waitForDialogueToFinish(audio);
} catch {
request.resolve(null);
}
}
isDialogueQueuePlaying = false;
}
function waitForDialogueToFinish(audio: HTMLAudioElement): Promise<void> {
if (audio.ended) return Promise.resolve();
return new Promise((resolve) => {
let hasStarted = !audio.paused;
let startTimeout: ReturnType<typeof setTimeout> | null = null;
function cleanup(): void {
if (startTimeout) clearTimeout(startTimeout);
audio.removeEventListener("play", handlePlay);
audio.removeEventListener("ended", finish);
audio.removeEventListener("pause", finish);
audio.removeEventListener("error", finish);
}
function finish(): void {
cleanup();
resolve();
}
function handlePlay(): void {
hasStarted = true;
if (startTimeout) clearTimeout(startTimeout);
}
audio.addEventListener("play", handlePlay);
audio.addEventListener("ended", finish);
audio.addEventListener("pause", finish);
audio.addEventListener("error", finish);
startTimeout = setTimeout(() => {
if (!hasStarted && audio.paused) finish();
}, DIALOGUE_PLAY_START_TIMEOUT_MS);
});
}
-62
View File
@@ -1,62 +0,0 @@
export interface SubtitleCue {
index: number;
startTime: number;
endTime: number;
text: string;
}
const SRT_TIME_SEPARATOR = " --> ";
const SRT_TIME_PATTERN = /^(\d{2}):(\d{2}):(\d{2}),(\d{3})$/;
export function parseSrt(srtContent: string): SubtitleCue[] {
return srtContent
.replace(/^\uFEFF/, "")
.replace(/\r/g, "")
.trim()
.split(/\n{2,}/)
.map(parseSrtBlock)
.filter((cue): cue is SubtitleCue => cue !== null);
}
function parseSrtBlock(block: string): SubtitleCue | null {
const lines = block
.split("\n")
.map((line) => line.trim())
.filter(Boolean);
if (lines.length < 3) return null;
const index = Number(lines[0]);
if (!Number.isInteger(index)) return null;
const [start, end] = lines[1]?.split(SRT_TIME_SEPARATOR) ?? [];
if (!start || !end) return null;
const startTime = parseSrtTime(start);
const endTime = parseSrtTime(end);
if (startTime === null || endTime === null || endTime <= startTime) {
return null;
}
return {
index,
startTime,
endTime,
text: lines.slice(2).join("\n"),
};
}
function parseSrtTime(value: string): number | null {
const match = value.match(SRT_TIME_PATTERN);
if (!match) return null;
const [, hours, minutes, seconds, milliseconds] = match;
if (!hours || !minutes || !seconds || !milliseconds) return null;
return (
Number(hours) * 3600 +
Number(minutes) * 60 +
Number(seconds) +
Number(milliseconds) / 1000
);
}
-170
View File
@@ -1,170 +0,0 @@
import { useEffect, useRef, useState } from "react";
import type { MutableRefObject } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import gsap from "gsap";
import * as THREE from "three";
import { useGameStore } from "@/managers/stores/useGameStore";
import type {
CinematicDefinition,
CinematicManifest,
} from "@/types/cinematics/cinematics";
import type { DialogueManifest } from "@/types/dialogues/dialogues";
import { logger } from "@/utils/core/Logger";
import { loadCinematicManifest } from "@/utils/cinematics/loadCinematicManifest";
import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
import { queueDialogueById } from "@/utils/dialogues/playDialogue";
export function GameCinematics(): null {
const camera = useThree((state) => state.camera);
const [manifest, setManifest] = useState<CinematicManifest | null>(null);
const [dialogueManifest, setDialogueManifest] =
useState<DialogueManifest | null>(null);
const playedCinematicsRef = useRef(new Set<string>());
const timelineRef = useRef<gsap.core.Timeline | null>(null);
const activeAudiosRef = useRef(new Set<HTMLAudioElement>());
useEffect(() => {
let mounted = true;
const activeAudios = activeAudiosRef.current;
void loadCinematicManifest()
.then((loadedManifest) => {
if (mounted) setManifest(loadedManifest);
})
.catch((error: unknown) => {
logger.error("GameCinematics", "Failed to load cinematic manifest", {
error: error instanceof Error ? error : String(error),
});
});
void loadDialogueManifest()
.then((loadedManifest) => {
if (mounted) setDialogueManifest(loadedManifest);
})
.catch((error: unknown) => {
logger.error("GameCinematics", "Failed to load dialogue manifest", {
error: error instanceof Error ? error : String(error),
});
});
return () => {
mounted = false;
stopActiveCinematic(timelineRef);
activeAudios.forEach((audio) => audio.pause());
activeAudios.clear();
useGameStore.getState().setCinematicPlaying(false);
};
}, []);
useFrame(({ clock }) => {
if (!manifest) return;
const elapsedTime = clock.getElapsedTime();
manifest.cinematics.forEach((cinematic) => {
if (cinematic.timecode === undefined) return;
if (cinematic.timecode > elapsedTime) return;
if (cinematic.dialogueCues && !dialogueManifest) return;
if (playedCinematicsRef.current.has(cinematic.id)) return;
playedCinematicsRef.current.add(cinematic.id);
playCinematic(camera, cinematic, timelineRef, {
dialogueManifest,
activeAudiosRef,
});
});
});
return null;
}
function stopActiveCinematic(
timelineRef: MutableRefObject<gsap.core.Timeline | null>,
): void {
timelineRef.current?.kill();
timelineRef.current = null;
}
function playCinematic(
camera: THREE.Camera,
cinematic: CinematicDefinition,
timelineRef: MutableRefObject<gsap.core.Timeline | null>,
dialogueOptions: {
dialogueManifest: DialogueManifest | null;
activeAudiosRef: MutableRefObject<Set<HTMLAudioElement>>;
},
): void {
const firstKeyframe = cinematic.cameraKeyframes[0];
if (!firstKeyframe) return;
document.exitPointerLock();
timelineRef.current?.kill();
useGameStore.getState().setCinematicPlaying(true);
const target = new THREE.Vector3(...firstKeyframe.target);
camera.position.set(...firstKeyframe.position);
camera.lookAt(target);
const timeline = gsap.timeline({
onUpdate: () => camera.lookAt(target),
onComplete: () => {
timelineRef.current = null;
useGameStore.getState().setCinematicPlaying(false);
},
});
cinematic.cameraKeyframes.slice(1).forEach((keyframe, index) => {
const previousKeyframe = cinematic.cameraKeyframes[index];
if (!previousKeyframe) return;
const duration = keyframe.time - previousKeyframe.time;
timeline.to(
camera.position,
{
x: keyframe.position[0],
y: keyframe.position[1],
z: keyframe.position[2],
duration,
ease: "power2.inOut",
},
previousKeyframe.time,
);
timeline.to(
target,
{
x: keyframe.target[0],
y: keyframe.target[1],
z: keyframe.target[2],
duration,
ease: "power2.inOut",
},
previousKeyframe.time,
);
});
cinematic.dialogueCues?.forEach((cue) => {
timeline.call(
() => {
if (!dialogueOptions.dialogueManifest) return;
void queueDialogueById(
dialogueOptions.dialogueManifest,
cue.dialogueId,
).then((audio) => {
if (!audio) return;
dialogueOptions.activeAudiosRef.current.add(audio);
audio.addEventListener(
"ended",
() => dialogueOptions.activeAudiosRef.current.delete(audio),
{ once: true },
);
});
},
undefined,
cue.time,
);
});
timelineRef.current = timeline;
}
-63
View File
@@ -1,63 +0,0 @@
import { useEffect, useRef, useState } from "react";
import { useFrame } from "@react-three/fiber";
import type { DialogueManifest } from "@/types/dialogues/dialogues";
import { loadDialogueManifest } from "@/utils/dialogues/loadDialogueManifest";
import {
clearQueuedDialogues,
queueDialogueById,
} from "@/utils/dialogues/playDialogue";
import { logger } from "@/utils/core/Logger";
export function GameDialogues(): null {
const [manifest, setManifest] = useState<DialogueManifest | null>(null);
const playedDialoguesRef = useRef(new Set<string>());
const activeAudiosRef = useRef(new Set<HTMLAudioElement>());
useEffect(() => {
let mounted = true;
const activeAudios = activeAudiosRef.current;
void loadDialogueManifest()
.then((loadedManifest) => {
if (mounted) setManifest(loadedManifest);
})
.catch((error: unknown) => {
logger.error("GameDialogues", "Failed to load dialogue manifest", {
error: error instanceof Error ? error : String(error),
});
});
return () => {
mounted = false;
clearQueuedDialogues();
activeAudios.forEach((audio) => audio.pause());
activeAudios.clear();
};
}, []);
useFrame(({ clock }) => {
if (!manifest) return;
const elapsedTime = clock.getElapsedTime();
manifest.dialogues.forEach((dialogue) => {
if (dialogue.timecode === undefined) return;
if (dialogue.timecode > elapsedTime) return;
if (playedDialoguesRef.current.has(dialogue.id)) return;
playedDialoguesRef.current.add(dialogue.id);
void queueDialogueById(manifest, dialogue.id).then((audio) => {
if (!audio) return;
activeAudiosRef.current.add(audio);
audio.addEventListener(
"ended",
() => activeAudiosRef.current.delete(audio),
{ once: true },
);
});
});
});
return null;
}
-3
View File
@@ -65,13 +65,11 @@ interface GameMapProps {
onLoaded?: (() => void) | undefined;
onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
onOctreeReady: OctreeReadyHandler;
buildOctree?: boolean;
}
const MAP_RENDER_BATCH_SIZE = 12;
export function GameMap({
buildOctree = true,
onLoaded,
onLoadingStateChange,
onOctreeReady,
@@ -199,7 +197,6 @@ export function GameMap({
))}
</group>
<GameMapCollision
buildOctree={buildOctree}
mapReady={mapReady}
nodes={mapNodes}
onLoaded={onLoaded}
+1 -3
View File
@@ -27,7 +27,6 @@ interface ResolvedGameMapCollisionNode {
}
interface GameMapCollisionProps {
buildOctree?: boolean;
mapReady: boolean;
nodes: readonly GameMapCollisionNode[];
onLoaded?: (() => void) | undefined;
@@ -93,7 +92,6 @@ function isCollisionNode(
}
export function GameMapCollision({
buildOctree = true,
mapReady,
nodes,
onLoaded,
@@ -131,7 +129,7 @@ export function GameMapCollision({
groupRef,
handleOctreeReady,
collisionReady ? collisionNodes.length : 0,
buildOctree && collisionReady && collisionNodes.length > 0,
collisionReady && collisionNodes.length > 0,
);
useEffect(() => {
+8 -27
View File
@@ -12,8 +12,6 @@ import { DebugCameraControls } from "@/components/debug/scene/DebugCameraControl
import { DebugHelpers } from "@/components/debug/scene/DebugHelpers";
import { HandTrackingGlove } from "@/components/three/handTracking/HandTrackingGlove";
import { Environment } from "@/world/Environment";
import { GameCinematics } from "@/world/GameCinematics";
import { GameDialogues } from "@/world/GameDialogues";
import { GameMusic } from "@/world/GameMusic";
import { Lighting } from "@/world/Lighting";
import { GameMap } from "@/world/GameMap";
@@ -26,23 +24,12 @@ interface WorldProps {
onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
}
function hasBootFlag(name: string): boolean {
if (typeof window === "undefined") return false;
return new URLSearchParams(window.location.search).has(name);
}
export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
const cameraMode = useCameraMode();
const sceneMode = useSceneMode();
const { status, usageStatus } = useHandTrackingSnapshot();
const { octree, showGameStage, handleGameMapLoaded, handleOctreeReady } =
useWorldSceneLoading({ sceneMode, onLoadingStateChange });
const noCinematics = hasBootFlag("noCinematics");
const noDialogues = hasBootFlag("noDialogues");
const noMap = hasBootFlag("noMap");
const noMusic = hasBootFlag("noMusic");
const noOctree = hasBootFlag("noOctree");
const noPlayer = hasBootFlag("noPlayer");
const playerSpawnPosition =
sceneMode === "game"
? PLAYER_SPAWN_POSITION_GAME
@@ -65,18 +52,13 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
{cameraMode === "debug" ? <DebugCameraControls /> : null}
{sceneMode === "game" ? (
<>
{noMusic ? null : <GameMusic />}
{noCinematics ? null : <GameCinematics />}
{noDialogues ? null : <GameDialogues />}
{noMap ? null : (
<GameMap
buildOctree={!noOctree}
onLoaded={handleGameMapLoaded}
onLoadingStateChange={onLoadingStateChange}
onOctreeReady={handleOctreeReady}
/>
)}
{noMap || showGameStage ? (
<GameMusic />
<GameMap
onLoaded={handleGameMapLoaded}
onLoadingStateChange={onLoadingStateChange}
onOctreeReady={handleOctreeReady}
/>
{showGameStage ? (
<Physics>
<GameStageContent />
</Physics>
@@ -85,8 +67,7 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
) : (
<TestMap onOctreeReady={handleOctreeReady} />
)}
{cameraMode !== "debug" && !noPlayer ? (
{cameraMode !== "debug" ? (
<Player octree={octree} spawnPosition={playerSpawnPosition} />
) : null}
</>
+4 -51
View File
@@ -23,10 +23,7 @@ import {
PLAYER_WALK_SPEED,
PLAYER_XZ_DAMPING_FACTOR,
} from "@/data/player/playerConfig";
import { useRepairMovementLocked } from "@/hooks/gameplay/useRepairMovementLocked";
import { InteractionManager } from "@/managers/InteractionManager";
import { useGameStore } from "@/managers/stores/useGameStore";
import { useSettingsStore } from "@/managers/stores/useSettingsStore";
import type { Vector3Tuple } from "@/types/three/three";
type Keys = {
@@ -57,13 +54,6 @@ const _up = new THREE.Vector3(0, 1, 0);
const _translateVec = new THREE.Vector3();
const _collisionCorrection = new THREE.Vector3();
function isPlayerInputLocked(): boolean {
return (
useSettingsStore.getState().isSettingsMenuOpen ||
useGameStore.getState().isCinematicPlaying
);
}
function setMovementKey(keys: Keys, key: string, pressed: boolean): boolean {
switch (key.toLowerCase()) {
case MOVE_FORWARD_KEY:
@@ -88,8 +78,6 @@ export function PlayerController({
spawnPosition,
}: PlayerControllerProps): null {
const camera = useThree((state) => state.camera);
const movementLocked = useRepairMovementLocked();
const movementLockedRef = useRef(movementLocked);
const keys = useRef<Keys>({ ...DEFAULT_KEYS });
const velocity = useRef(new THREE.Vector3());
const onFloor = useRef(false);
@@ -116,38 +104,16 @@ export function PlayerController({
camera.position.copy(capsule.current.end);
}, [camera, spawnPosition]);
useEffect(() => {
movementLockedRef.current = movementLocked;
if (!movementLocked) return;
keys.current = { ...DEFAULT_KEYS };
wantsJump.current = false;
velocity.current.setX(0);
velocity.current.setZ(0);
}, [movementLocked]);
useEffect(() => {
const interaction = InteractionManager.getInstance();
const handleKeyDown = (event: KeyboardEvent): void => {
if (isPlayerInputLocked()) return;
if (setMovementKey(keys.current, event.key, true)) {
if (movementLockedRef.current) {
keys.current = { ...DEFAULT_KEYS };
}
event.preventDefault();
return;
}
if (event.key === JUMP_KEY) {
if (movementLockedRef.current) {
wantsJump.current = false;
event.preventDefault();
return;
}
wantsJump.current = true;
event.preventDefault();
return;
@@ -162,15 +128,12 @@ export function PlayerController({
};
const handleKeyUp = (event: KeyboardEvent): void => {
if (isPlayerInputLocked()) return;
if (setMovementKey(keys.current, event.key, false)) {
event.preventDefault();
}
};
const handleMouseDown = (event: MouseEvent): void => {
if (isPlayerInputLocked()) return;
if (event.button !== PRIMARY_INTERACT_MOUSE_BUTTON) return;
if (interaction.getState().focused?.kind === "grab") {
interaction.pressInteract();
@@ -178,7 +141,6 @@ export function PlayerController({
};
const handleMouseUp = (event: MouseEvent): void => {
if (isPlayerInputLocked()) return;
if (event.button !== PRIMARY_INTERACT_MOUSE_BUTTON) return;
if (interaction.getState().holding) {
interaction.releaseInteract();
@@ -200,13 +162,6 @@ export function PlayerController({
}, []);
useFrame((_, delta) => {
if (isPlayerInputLocked()) {
keys.current = { ...DEFAULT_KEYS };
velocity.current.set(0, 0, 0);
wantsJump.current = false;
return;
}
const dt = Math.min(delta, PLAYER_MAX_DELTA);
camera.getWorldDirection(_forward);
@@ -217,12 +172,10 @@ export function PlayerController({
}
_wishDir.set(0, 0, 0);
if (!movementLocked) {
if (keys.current.forward) _wishDir.add(_forward);
if (keys.current.backward) _wishDir.sub(_forward);
if (keys.current.left) _wishDir.sub(_right);
if (keys.current.right) _wishDir.add(_right);
}
if (keys.current.forward) _wishDir.add(_forward);
if (keys.current.backward) _wishDir.sub(_forward);
if (keys.current.left) _wishDir.sub(_right);
if (keys.current.right) _wishDir.add(_right);
if (_wishDir.lengthSq() > 0) _wishDir.normalize();
const accel = onFloor.current
+2 -571
View File
@@ -6,20 +6,12 @@ import { fileURLToPath } from "node:url";
import type { ServerResponse } from "node:http";
import type { Plugin } from "vite";
import { parseMapNodes } from "./src/utils/map/mapNodeValidation";
import { parseSrt } from "./src/utils/subtitles/parseSrt";
const __dirname = fileURLToPath(new URL(".", import.meta.url));
const MAX_MAP_PAYLOAD_BYTES = 1024 * 1024;
const MAX_SRT_PAYLOAD_BYTES = 256 * 1024;
const MAX_DIALOGUE_MANIFEST_PAYLOAD_BYTES = 256 * 1024;
const MAX_CINEMATIC_MANIFEST_PAYLOAD_BYTES = 256 * 1024;
const JSON_HEADERS = { "Content-Type": "application/json" };
type JsonValue = string | number | boolean | null | JsonValue[] | JsonObject;
type JsonObject = { readonly [key: string]: JsonValue };
type JsonResponseBody = Readonly<Record<string, JsonValue>>;
const SRT_VOICES = new Set(["narrateur", "fermier", "electricienne"]);
const SRT_LANGUAGES = new Set(["fr", "en"]);
type JsonResponseBody = Readonly<Record<string, string | boolean>>;
function sendJson(
res: ServerResponse,
@@ -80,569 +72,8 @@ const saveMapPlugin = (): Plugin => ({
},
});
const saveSrtPlugin = (): Plugin => ({
name: "save-srt-api",
configureServer(server) {
server.middlewares.use("/api/save-srt", async (req, res) => {
if (req.method !== "POST") {
sendJson(res, 405, { error: "Method not allowed" }, { Allow: "POST" });
return;
}
const chunks: Buffer[] = [];
let size = 0;
for await (const chunk of req) {
const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
size += buffer.length;
if (size > MAX_SRT_PAYLOAD_BYTES) {
sendJson(res, 413, { error: "Payload too large" });
req.destroy();
return;
}
chunks.push(buffer);
}
try {
const data = JSON.parse(Buffer.concat(chunks).toString()) as unknown;
if (!isSrtPayload(data)) {
sendJson(res, 400, { error: "Invalid SRT payload" });
return;
}
if (!isValidSrtContent(data.content)) {
sendJson(res, 400, { error: "Invalid SRT content" });
return;
}
const subtitlesRoot = path.resolve(
__dirname,
"public/sounds/dialogue/subtitles",
);
const srtPath = path.resolve(
subtitlesRoot,
data.language,
`${data.voice}.srt`,
);
if (!srtPath.startsWith(`${subtitlesRoot}${path.sep}`)) {
sendJson(res, 400, { error: "Invalid SRT path" });
return;
}
await fs.promises.mkdir(path.dirname(srtPath), { recursive: true });
await fs.promises.writeFile(srtPath, data.content, "utf8");
sendJson(res, 200, { success: true });
} catch (err) {
const status = err instanceof SyntaxError ? 400 : 500;
const message = err instanceof Error ? err.message : "Unknown error";
sendJson(res, status, { error: message });
}
});
},
});
const validateDialoguesPlugin = (): Plugin => ({
name: "validate-dialogues-api",
configureServer(server) {
server.middlewares.use("/api/validate-dialogues", async (req, res) => {
if (req.method !== "GET") {
sendJson(res, 405, { error: "Method not allowed" }, { Allow: "GET" });
return;
}
try {
const result = await validateDialogueAssets();
sendJson(res, result.valid ? 200 : 400, result);
} catch (err) {
const message = err instanceof Error ? err.message : "Unknown error";
sendJson(res, 500, { error: message });
}
});
},
});
const saveDialogueManifestPlugin = (): Plugin => ({
name: "save-dialogue-manifest-api",
configureServer(server) {
server.middlewares.use("/api/save-dialogues", async (req, res) => {
if (req.method !== "POST") {
sendJson(res, 405, { error: "Method not allowed" }, { Allow: "POST" });
return;
}
const chunks: Buffer[] = [];
let size = 0;
for await (const chunk of req) {
const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
size += buffer.length;
if (size > MAX_DIALOGUE_MANIFEST_PAYLOAD_BYTES) {
sendJson(res, 413, { error: "Payload too large" });
req.destroy();
return;
}
chunks.push(buffer);
}
try {
const data = JSON.parse(Buffer.concat(chunks).toString()) as unknown;
parseDialogueManifestData(data);
const manifestPath = path.resolve(
__dirname,
"public/sounds/dialogue/dialogues.json",
);
await fs.promises.writeFile(
manifestPath,
`${JSON.stringify(data, null, 2)}\n`,
"utf8",
);
sendJson(res, 200, { success: true });
} catch (err) {
const status = err instanceof SyntaxError ? 400 : 500;
const message = err instanceof Error ? err.message : "Unknown error";
sendJson(res, status, { error: message });
}
});
},
});
const saveCinematicManifestPlugin = (): Plugin => ({
name: "save-cinematic-manifest-api",
configureServer(server) {
server.middlewares.use("/api/save-cinematics", async (req, res) => {
if (req.method !== "POST") {
sendJson(res, 405, { error: "Method not allowed" }, { Allow: "POST" });
return;
}
const chunks: Buffer[] = [];
let size = 0;
for await (const chunk of req) {
const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
size += buffer.length;
if (size > MAX_CINEMATIC_MANIFEST_PAYLOAD_BYTES) {
sendJson(res, 413, { error: "Payload too large" });
req.destroy();
return;
}
chunks.push(buffer);
}
try {
const data = JSON.parse(Buffer.concat(chunks).toString()) as unknown;
const manifest = parseCinematicManifestData(data);
const dialogueManifest = await loadDialogueManifestData();
validateCinematicDialogueCues(manifest, dialogueManifest);
const manifestPath = path.resolve(__dirname, "public/cinematics.json");
await fs.promises.writeFile(
manifestPath,
`${JSON.stringify(data, null, 2)}\n`,
"utf8",
);
sendJson(res, 200, { success: true });
} catch (err) {
const status = err instanceof SyntaxError ? 400 : 500;
const message = err instanceof Error ? err.message : "Unknown error";
sendJson(res, status, { error: message });
}
});
},
});
interface SrtPayload {
voice: string;
language: string;
content: string;
}
interface DialogueManifestData {
voices: DialogueVoiceData[];
dialogues: DialogueData[];
}
interface DialogueVoiceData {
id: string;
speaker: string;
subtitles: Partial<Record<"fr" | "en", string>>;
}
interface DialogueData {
id: string;
voice: string;
audio: string;
subtitleCueIndex: number;
timecode?: number;
}
interface CinematicManifestData {
cinematics: CinematicData[];
}
interface CinematicData {
id: string;
timecode?: number;
dialogueCues?: CinematicDialogueCueData[];
cameraKeyframes: CinematicKeyframeData[];
}
interface CinematicDialogueCueData {
time: number;
dialogueId: string;
}
interface CinematicKeyframeData {
time: number;
position: [number, number, number];
target: [number, number, number];
}
function isSrtPayload(data: unknown): data is SrtPayload {
if (!data || typeof data !== "object") return false;
const payload = data as Partial<SrtPayload>;
return (
typeof payload.voice === "string" &&
SRT_VOICES.has(payload.voice) &&
typeof payload.language === "string" &&
SRT_LANGUAGES.has(payload.language) &&
typeof payload.content === "string"
);
}
function isValidSrtContent(content: string): boolean {
const blocks = content
.replace(/^\uFEFF/, "")
.replace(/\r/g, "")
.trim()
.split(/\n{2,}/)
.filter(Boolean);
const cues = parseSrt(content);
if (blocks.length === 0 || cues.length !== blocks.length) return false;
const cueIndexes = new Set<number>();
for (const cue of cues) {
if (cueIndexes.has(cue.index)) return false;
cueIndexes.add(cue.index);
}
return true;
}
interface DialogueValidationResult extends JsonObject {
valid: boolean;
errors: string[];
warnings: string[];
}
async function validateDialogueAssets(): Promise<DialogueValidationResult> {
const errors: string[] = [];
const warnings: string[] = [];
const manifest = await loadDialogueManifestData();
const subtitleCueCache = new Map<string, Set<number>>();
for (const voice of manifest.voices) {
const frSubtitlePath = voice.subtitles.fr;
if (!frSubtitlePath) {
errors.push(`Voice ${voice.id} must define a French subtitle file`);
} else {
await validateSubtitleFile(frSubtitlePath, errors, subtitleCueCache);
}
const enSubtitlePath = voice.subtitles.en;
if (enSubtitlePath) {
const resolvedEnPath = resolvePublicPath(enSubtitlePath);
if (!resolvedEnPath || !fs.existsSync(resolvedEnPath)) {
warnings.push(
`English subtitle file missing for voice ${voice.id}; runtime will fall back to French`,
);
}
}
}
for (const dialogue of manifest.dialogues) {
const audioPath = resolvePublicPath(dialogue.audio);
if (!audioPath || !fs.existsSync(audioPath)) {
errors.push(`Dialogue ${dialogue.id} audio file is missing`);
}
const voice = manifest.voices.find(
(item: DialogueVoiceData) => item.id === dialogue.voice,
);
const frSubtitlePath = voice?.subtitles.fr;
const cueIndexes = frSubtitlePath
? subtitleCueCache.get(frSubtitlePath)
: undefined;
if (!cueIndexes?.has(dialogue.subtitleCueIndex)) {
errors.push(
`Dialogue ${dialogue.id} references missing cue ${dialogue.subtitleCueIndex}`,
);
}
}
return {
valid: errors.length === 0,
errors,
warnings,
};
}
async function loadDialogueManifestData(): Promise<DialogueManifestData> {
const manifestPath = path.resolve(
__dirname,
"public/sounds/dialogue/dialogues.json",
);
const manifestContent = await fs.promises.readFile(manifestPath, "utf8");
return parseDialogueManifestData(JSON.parse(manifestContent));
}
function parseDialogueManifestData(data: unknown): DialogueManifestData {
if (!isRecord(data) || data.version !== 1) {
throw new Error("Invalid dialogue manifest");
}
if (!Array.isArray(data.voices) || !Array.isArray(data.dialogues)) {
throw new Error("Dialogue manifest requires voices and dialogues arrays");
}
const voices = data.voices.map(parseDialogueVoiceData);
const voiceIds = new Set(voices.map((voice) => voice.id));
const dialogues = data.dialogues.map((dialogue) =>
parseDialogueData(dialogue, voiceIds),
);
return { voices, dialogues };
}
function parseDialogueVoiceData(data: unknown): DialogueVoiceData {
if (!isRecord(data) || typeof data.id !== "string") {
throw new Error("Invalid dialogue voice");
}
if (typeof data.speaker !== "string") {
throw new Error(`Dialogue voice ${data.id} must define a speaker`);
}
if (!isRecord(data.subtitles)) {
throw new Error(`Dialogue voice ${data.id} must define subtitles`);
}
const subtitles: DialogueVoiceData["subtitles"] = {};
if (typeof data.subtitles.fr === "string") subtitles.fr = data.subtitles.fr;
if (typeof data.subtitles.en === "string") subtitles.en = data.subtitles.en;
return {
id: data.id,
speaker: data.speaker,
subtitles,
};
}
function parseDialogueData(data: unknown, voiceIds: Set<string>): DialogueData {
if (!isRecord(data)) {
throw new Error("Invalid dialogue definition");
}
if (
typeof data.id !== "string" ||
typeof data.voice !== "string" ||
!voiceIds.has(data.voice) ||
typeof data.audio !== "string" ||
typeof data.subtitleCueIndex !== "number" ||
!Number.isInteger(data.subtitleCueIndex)
) {
throw new Error("Invalid dialogue definition");
}
const dialogue: DialogueData = {
id: data.id,
voice: data.voice,
audio: data.audio,
subtitleCueIndex: data.subtitleCueIndex,
};
if (data.timecode !== undefined) {
if (typeof data.timecode !== "number") {
throw new Error("Invalid dialogue definition");
}
dialogue.timecode = data.timecode;
}
return dialogue;
}
function parseCinematicManifestData(data: unknown): CinematicManifestData {
if (!isRecord(data) || data.version !== 1) {
throw new Error("Invalid cinematic manifest");
}
if (!Array.isArray(data.cinematics)) {
throw new Error("Cinematic manifest requires a cinematics array");
}
return {
cinematics: data.cinematics.map(parseCinematicData),
};
}
function parseCinematicData(data: unknown): CinematicData {
if (!isRecord(data) || typeof data.id !== "string") {
throw new Error("Invalid cinematic definition");
}
if (!Array.isArray(data.cameraKeyframes)) {
throw new Error(`Cinematic ${data.id} requires cameraKeyframes`);
}
const cameraKeyframes = data.cameraKeyframes.map(parseCinematicKeyframeData);
if (cameraKeyframes.length < 2) {
throw new Error(`Cinematic ${data.id} requires at least two keyframes`);
}
cameraKeyframes.forEach((keyframe, index) => {
const previousKeyframe = cameraKeyframes[index - 1];
if (previousKeyframe && keyframe.time <= previousKeyframe.time) {
throw new Error(`Cinematic ${data.id} keyframe times must increase`);
}
});
const cinematic: CinematicData = {
id: data.id,
cameraKeyframes,
};
if (data.timecode !== undefined) {
if (typeof data.timecode !== "number") {
throw new Error(`Cinematic ${data.id} has an invalid timecode`);
}
cinematic.timecode = data.timecode;
}
if (data.dialogueCues !== undefined) {
if (!Array.isArray(data.dialogueCues)) {
throw new Error(`Cinematic ${data.id} has invalid dialogue cues`);
}
cinematic.dialogueCues = data.dialogueCues.map(
parseCinematicDialogueCueData,
);
}
return cinematic;
}
function validateCinematicDialogueCues(
cinematicManifest: CinematicManifestData,
dialogueManifest: DialogueManifestData,
): void {
const dialogueIds = new Set(
dialogueManifest.dialogues.map((dialogue) => dialogue.id),
);
for (const cinematic of cinematicManifest.cinematics) {
for (const cue of cinematic.dialogueCues ?? []) {
if (!dialogueIds.has(cue.dialogueId)) {
throw new Error(
`Cinematic ${cinematic.id} references unknown dialogue ${cue.dialogueId}`,
);
}
}
}
}
function parseCinematicDialogueCueData(
data: unknown,
): CinematicDialogueCueData {
if (
!isRecord(data) ||
typeof data.time !== "number" ||
typeof data.dialogueId !== "string"
) {
throw new Error("Invalid cinematic dialogue cue");
}
return {
time: data.time,
dialogueId: data.dialogueId,
};
}
function parseCinematicKeyframeData(data: unknown): CinematicKeyframeData {
if (!isRecord(data) || typeof data.time !== "number") {
throw new Error("Invalid cinematic camera keyframe");
}
return {
time: data.time,
position: parseCinematicVector(data.position),
target: parseCinematicVector(data.target),
};
}
function parseCinematicVector(value: unknown): [number, number, number] {
if (
!Array.isArray(value) ||
value.length !== 3 ||
value.some((item) => typeof item !== "number")
) {
throw new Error("Invalid cinematic vector");
}
return [value[0], value[1], value[2]];
}
function isRecord(value: unknown): value is Record<string, unknown> {
return typeof value === "object" && value !== null;
}
async function validateSubtitleFile(
publicPath: string,
errors: string[],
subtitleCueCache: Map<string, Set<number>>,
): Promise<void> {
const subtitlePath = resolvePublicPath(publicPath);
if (!subtitlePath || !fs.existsSync(subtitlePath)) {
errors.push(`Subtitle file ${publicPath} is missing`);
return;
}
const content = await fs.promises.readFile(subtitlePath, "utf8");
if (!isValidSrtContent(content)) {
errors.push(`Subtitle file ${publicPath} is invalid`);
return;
}
subtitleCueCache.set(
publicPath,
new Set(parseSrt(content).map((cue) => cue.index)),
);
}
function resolvePublicPath(publicPath: string): string | null {
if (!publicPath.startsWith("/")) return null;
const publicRoot = path.resolve(__dirname, "public");
const resolvedPath = path.resolve(publicRoot, publicPath.slice(1));
if (!resolvedPath.startsWith(`${publicRoot}${path.sep}`)) return null;
return resolvedPath;
}
export default defineConfig({
plugins: [
react(),
saveMapPlugin(),
saveSrtPlugin(),
saveDialogueManifestPlugin(),
saveCinematicManifestPlugin(),
validateDialoguesPlugin(),
],
plugins: [react(), saveMapPlugin()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),