Structure des fichiers, stack technologique et flux de données - Projet Mille et Une Nuits (Astro + React)

📄 src/pages/

astroindex.astroPage d'accueil

astroprologue.astroRécit-cadre + micro-choix de rôle

astropalais.astroHub de navigation visuel

astropecheur.astroConte du Pêcheur et du Génie

astrosinbad.astroConte des Voyages de Sinbad

astrosinbad/carte.astroCarte exploratoire des 7 îles

astrosinbad/voyage-2.astroVoyage II - récit complet (Roc)

🗂 src/content/

jsonprologue.jsonSéquences et textes du prologue

jsonpecheur.jsonSéquences scrollytellées du Pêcheur

jsonsinbad.jsonDonnées des 7 voyages + résumés

jsoncadre/ · encyclo/Données complémentaires

💾 src/stores/

jsprogression.jsZustand - rôle choisi, îles visitées, badges

jsaudio.jsZustand - état mute, piste active

🎨 src/styles/

scss_tokens.scssVariables de design (palette, typo, espacements)

scssglobal.scssReset, body, liens, scrollbar

scsslayouts/layout-a/b/c/d.scss - 4 layouts scrollytelling

scsscomponents/chrome, micro-choix, scène génie…

scsspages/accueil, palais, prologue, sinbad-carte

⚛️ src/components/

core/ - composants narratifs principaux

jsxSequence.jsxMoteur scrollytelling - orchestre les layouts

jsxMicroChoix.jsxBifurcations narratives interactives

jsxObjetCliquable.jsxObjets SVG interactifs dans les scènes

jsxProgressBar.jsxIndicateur de progression dans le conte

jsxBadgeNuit.jsxAffichage du numéro de nuit

jsxAmbientAudio.jsxLecture audio ambiant par page

jsxSceneGenie.jsxAnimation fumée GSAP - sortie du Génie

jsxSceneConfrontation.jsxScène confrontation Pêcheur/Génie

jsxIllustrationSVG.jsxWrapper illustration SVG animée

jsxChrome.jsxUI persistante : nav, retour palais

jsxFiletPersistant.jsxFil narratif affiché entre les séquences

layouts/ - 4 types de mise en page

jsxLayoutA.jsxContemplatif - texte centré, fond immersif

jsxLayoutB.jsxFull-bleed - illustration + texte superposé

jsxLayoutC.jsxTexte flottant organique sur image

jsxLayoutD.jsxCadre gigogne - récit dans le récit

sinbad/ - composants spécifiques

jsxCarteSinbad.jsxCarte SVG interactive des 7 îles

jsxVoyageRunner.jsxAffichage modal d'un voyage au clic

jsxSinbadPrologue.jsxIntro scrollytellée - Hindbad/Sinbad

palais/ · prologue/ · special/

jsxPalaisHub.jsxHub de navigation - objets cliquables

jsxPrologueScroll.jsxSéquence scrollytellée du prologue

jsxSceneQuatreSiecles.jsxScène spéciale - captivité du Génie

📁 public/

svg/pngillustrations/cadre/Accueil, background, logo, texte

svg/pngillustrations/hub/Palais, Shéhérazade, objets des contes

svg/pngillustrations/pecheur/11 assets - pêcheur, vase, génie, fumée…

svgillustrations/sinbad/carte/7 îles + créatures marines + rose des vents

mp3audio/ambient/5 pistes ambiantes par page

mp3audio/sfx/7 effets sonores narratifs

Contenu narratif (JSON → Composant)

Les fichiers pecheur.json, prologue.json et sinbad.json décrivent les séquences narratives. Le composant Sequence.jsx lit ces données et instancie le Layout correspondant (A, B, C ou D) pour chaque séquence. Le contenu textuel et les références aux illustrations SVG sont entièrement pilotés par le JSON.

État global (Zustand → localStorage)

Le store progression.js (Zustand) mémorise le rôle choisi par le lecteur (Dinarzade ou Sultan), les îles de Sinbad visitées, et les badges de nuit débloqués. Ces données sont persistées dans le localStorage du navigateur, ce qui permet de conserver la progression entre les sessions.

Audio (AudioManager → AmbientAudio)

Le store audio.js gère l'état mute global et la piste active. AmbientAudio.jsx lit la piste ambiante correspondant à la page courante (accueil.mp3, prologue.mp3…). Les effets sonores narratifs (sfx-smoke-rush.mp3, sfx-seal-break.mp3…) sont déclenchés par les animations GSAP au scroll.

Source : structure_projet.txt - Prototype Les Mille et Une Nuits (Mounga Tchamo J., 2026) · Stack : Astro + React + Sass + Zustand + GSAP