// PARCOURS D'IDENTIFICATION DE TERRAIN // On part de ce qu'un promeneur observe — couleur de la fleur, mois, hauteur — // et on resserre vers une courte liste de fiches candidates. Chaque critère est // sautable (« Peu importe ») et le nombre de candidates descend en direct. // // ── Extension : ajouter un critère « Emplacement du jardin » plus tard ── // Les critères sont une simple liste de config (CRITERES). Pour en ajouter un : // 1. exposer le champ dans api/list.js (light list), // 2. pousser un objet { key, numero, question, kind, options(), matches() } ici. // Rien d'autre à toucher (le tunnel, le compteur live et la grille s'adaptent). // Aujourd'hui l'emplacement est différé : données encore creuses (47 fiches dans // le même « Jardin Médicinal »), donc sans pouvoir discriminant. (function () { // Minuscules + sans accents, pour comparer les libellés couleur sales en base. function norm(s) { return (s == null ? "" : String(s)).normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim(); } // — Couleur — palette de base + table de normalisation des valeurs composites // réellement présentes en base (« blanc rosé » → blanc, « mauve » → violet…). const PALETTE = [ { key: "jaune", label: "Jaune", sw: "#e0bd3a" }, { key: "orange", label: "Orange", sw: "#dd8a3c" }, { key: "rouge", label: "Rouge", sw: "#b5402f" }, { key: "rose", label: "Rose", sw: "#d98aab" }, { key: "violet", label: "Violet / mauve", sw: "#8a6bb0" }, { key: "bleu", label: "Bleu", sw: "#5b7fb0" }, { key: "vert", label: "Vert", sw: "#7a9750" }, { key: "blanc", label: "Blanc", sw: "#f4f0e4" }, { key: "brun", label: "Brun", sw: "#8a6a4a" }, ]; const COULEUR_BASE = { "mauve": "violet", "blanc rose": "blanc", "jaune-vert": "jaune", "vert-bleute": "vert", "jaune pale": "jaune", "vert argente": "vert", }; // Ramène une couleur de fiche à une couleur de base (ou null si inclassable). function baseColor(raw) { const n = norm(raw); if (!n) return null; if (COULEUR_BASE[n]) return COULEUR_BASE[n]; for (const c of PALETTE) if (n.includes(c.key)) return c.key; // filet pour futurs composites return null; } const MOIS = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]; function enFleurAuMois(plant, mois) { const f = plant.floraison; if (Array.isArray(f)) return f.includes(mois); return typeof f === "string" && f.includes(mois); } // — Hauteur — tranches observables (cm). hMax vient d'api/list (parsé serveur). const TRANCHES = [ { key: "basse", label: "Basse", hint: "moins de 30 cm", test: (cm) => cm < 30 }, { key: "moyenne", label: "Moyenne", hint: "30 cm à 1 m", test: (cm) => cm >= 30 && cm <= 100 }, { key: "haute", label: "Haute", hint: "1 à 3 m", test: (cm) => cm > 100 && cm <= 300 }, { key: "arbre", label: "Arbre", hint: "plus de 3 m", test: (cm) => cm > 300 }, ]; // — Critères feuille (mode avancé) — silhouettes SVG cliquables. // Les données viennent de p.feuille (backfill scripts/seed-feuilles.mjs), // tableaux multi-valeurs : une plante peut être « rosette ET alterne ». // Petite feuille d'appoint pour les schémas de disposition sur la tige. const fol = (cx, cy, rot) => ( ); const FORMES_FEUILLE = [ { key: "lineaire", label: "Linéaire", svg: }, { key: "lanceolee", label: "Lancéolée", svg: }, { key: "ovale", label: "Ovale", svg: }, { key: "elliptique", label: "Elliptique", svg: }, { key: "spatulee", label: "Spatulée", svg: }, { key: "cordiforme", label: "Cordiforme", svg: }, { key: "reniforme", label: "Réniforme", svg: }, { key: "decoupee", label: "Découpée", svg: }, { key: "composee", label: "Composée", svg: {fol(12, 4.5, -90)}{fol(7.8, 10, -35)}{fol(16.2, 10, 35)}{fol(7.8, 16, -35)}{fol(16.2, 16, 35)}{fol(7.8, 22, -35)}{fol(16.2, 22, 35)} }, { key: "ecaille-aiguille", label: "Aiguille", svg: }, ]; const MARGES_FEUILLE = [ { key: "entiere", label: "Entière", svg: }, { key: "dentee", label: "Dentée", svg: }, { key: "crenelee", label: "Crénelée", svg: }, { key: "lobee", label: "Lobée", svg: }, { key: "epineuse", label: "Épineuse", svg: }, ]; const NERVATIONS_FEUILLE = [ { key: "pennee", label: "Pennée", svg: }, { key: "palmee", label: "Palmée", svg: }, { key: "parallele", label: "Parallèle", svg: }, ]; const DISPOSITIONS_FEUILLE = [ { key: "alterne", label: "Alterne", svg: {fol(8.2, 8, -38)}{fol(15.8, 13, 38)}{fol(8.2, 18, -38)}{fol(15.8, 23, 38)} }, { key: "opposee", label: "Opposée", svg: {fol(8.2, 9, -38)}{fol(15.8, 9, 38)}{fol(8.2, 18, -38)}{fol(15.8, 18, 38)} }, { key: "verticillee", label: "Verticillée", svg: {fol(7.8, 10, 0)}{fol(16.2, 10, 0)}{fol(8.8, 7.4, -45)}{fol(15.2, 7.4, 45)}{fol(7.8, 21, 0)}{fol(16.2, 21, 0)}{fol(8.8, 18.4, -45)}{fol(15.2, 18.4, 45)} }, { key: "rosette", label: "Rosette", svg: {fol(12, 21.5, -90)}{fol(7.5, 23.5, -45)}{fol(16.5, 23.5, 45)}{fol(5, 27, -12)}{fol(19, 27, 12)} }, ]; const CRITERES_FEUILLE = [ { key: "feuille-forme", numero: "04", question: "Quelle silhouette de feuille ?", kind: "svg", champ: "forme", defs: FORMES_FEUILLE }, { key: "feuille-marge", numero: "05", question: "Quel bord de feuille ?", kind: "svg", champ: "marge", defs: MARGES_FEUILLE }, { key: "feuille-nervation", numero: "06", question: "Quelles nervures ?", kind: "svg", champ: "nervation", defs: NERVATIONS_FEUILLE }, { key: "feuille-disposition", numero: "07", question: "Comment les feuilles s'attachent-elles ?", kind: "svg", champ: "disposition", defs: DISPOSITIONS_FEUILLE }, ].map((c) => ({ ...c, options: (plants) => { const present = new Set(); for (const p of plants) for (const v of (p.feuille && p.feuille[c.champ]) || []) present.add(v); return c.defs.filter((o) => present.has(o.key)); }, matches: (p, value) => !!(p.feuille && Array.isArray(p.feuille[c.champ]) && p.feuille[c.champ].includes(value)), })); // — Définition modulaire des critères du parcours — // options(plants) ne renvoie que les choix réellement présents dans le recueil // (pas de chip morte). matches(plant, value) = prédicat de filtrage. const CRITERES = [ { key: "couleur", numero: "01", question: "De quelle couleur est la fleur ?", kind: "swatch", options: (plants) => { const present = new Set(plants.map((p) => baseColor(p.couleur)).filter(Boolean)); return PALETTE.filter((c) => present.has(c.key)); }, matches: (p, value) => baseColor(p.couleur) === value, }, { key: "mois", numero: "02", question: "À quel mois l'avez-vous observée ?", kind: "chip", options: (plants) => { const present = new Set(); for (const p of plants) for (const m of MOIS) if (enFleurAuMois(p, m)) present.add(m); return MOIS.filter((m) => present.has(m)).map((m) => ({ key: m, label: m })); }, matches: (p, value) => enFleurAuMois(p, value), }, { key: "hauteur", numero: "03", question: "Quelle taille fait la plante ?", kind: "chip", options: (plants) => { const present = new Set(); for (const p of plants) { if (typeof p.hMax !== "number") continue; for (const t of TRANCHES) if (t.test(p.hMax)) present.add(t.key); } return TRANCHES.filter((t) => present.has(t.key)).map((t) => ({ key: t.key, label: t.label, hint: t.hint })); }, matches: (p, value) => { if (typeof p.hMax !== "number") return false; const t = TRANCHES.find((x) => x.key === value); return t ? t.test(p.hMax) : false; }, }, // ⇩ Futur : { key:"emplacement", numero:"04", question:"Dans quel carré du jardin ?", … } ]; function ClassicParcours({ setRoute, setPlantId }) { const isMobile = useMobile(); const plants = window.PLANTS || []; const [sel, setSel] = React.useState({}); // { couleur:"jaune", mois:"Juin", "feuille-forme":"ovale", … } // Mode avancé : critères botaniques de la feuille (replié par défaut). const [avance, setAvance] = React.useState(false); const goFiche = (id) => { setPlantId(id); setRoute("fiche"); }; const choisir = (cle, valeur) => setSel((s) => ({ ...s, [cle]: s[cle] === valeur ? null : valeur })); const reset = () => setSel({}); // Refermer le mode avancé efface ses sélections — sinon des filtres // invisibles resteraient actifs et les résultats seraient incompréhensibles. const toggleAvance = () => { setAvance((a) => { if (a) setSel((s) => { const c = { ...s }; for (const cr of CRITERES_FEUILLE) c[cr.key] = null; return c; }); return !a; }); }; // Filtrage cumulatif (dans l'ordre des critères) → compteur live par étape. // Les critères feuille sont toujours dans la chaîne : leurs sélections sont // nulles quand le mode avancé est fermé (remises à zéro au toggle). const TOUS = [...CRITERES, ...CRITERES_FEUILLE]; const { filtered, stepCounts } = React.useMemo(() => { let running = plants; const counts = {}; for (const c of TOUS) { if (sel[c.key] != null) running = running.filter((p) => c.matches(p, sel[c.key])); counts[c.key] = running.length; } const sorted = [...running].sort((a, b) => a.nom.localeCompare(b.nom, "fr")); return { filtered: sorted, stepCounts: counts }; }, [sel, plants.length]); const nbActifs = TOUS.filter((c) => sel[c.key] != null).length; const pad = isMobile ? "0 20px" : "0 40px"; return (
{/* En-tête */}
Parcours · Identification de terrain

Quelle plante avez-vous croisée ?

Renseignez ce que vous voyez — couleur, saison, taille. Chaque réponse resserre la liste. Sautez librement les critères que vous ignorez : c'est une aide à la reconnaissance, pas une clé stricte.

{/* Étapes */}
{(() => { const renderCritere = (c) => { const opts = c.options(plants); const actif = sel[c.key] != null; return (
{c.numero} {c.question} {stepCounts[c.key]} plante{stepCounts[c.key] > 1 ? "s" : ""}
{opts.map((o) => c.kind === "swatch" ? ( choisir(c.key, o.key)} /> ) : c.kind === "svg" ? ( choisir(c.key, o.key)} /> ) : ( choisir(c.key, o.key)} /> ) )} setSel((s) => ({ ...s, [c.key]: null }))} />
); }; return ( <> {CRITERES.map(renderCritere)} {/* Mode avancé — critères botaniques de la feuille */}
{avance && (

Observez une feuille de près — sa silhouette, son bord, ses nervures, son attache sur la tige. Cliquez le dessin qui ressemble le plus.

)}
{avance && CRITERES_FEUILLE.map(renderCritere)} ); })()}
{/* Résultats */}

{filtered.length === 0 ? "Aucune correspondance" : <>{filtered.length} candidate{filtered.length > 1 ? "s" : ""}}

{nbActifs > 0 && ( )}
{filtered.length === 0 ? (

Aucune plante du recueil ne réunit ces critères. Élargissez-en un — repassez par exemple une étape en « Peu importe ».

) : (
{filtered.map((p, i) => ( goFiche(p.id)} /> ))}
)}
); } // — Boutons de choix — pilules arrondies, même grammaire que les .tag du site. function SwatchBtn({ sw, label, active, onClick }) { const [hover, setHover] = React.useState(false); return ( ); } function ChipBtn({ label, hint, active, onClick }) { const [hover, setHover] = React.useState(false); return ( ); } // Bouton silhouette (mode avancé) : dessin SVG au trait + libellé dessous. // Le trait suit currentColor → s'inverse proprement sur fond moss à l'état actif. function SvgBtn({ svg, label, active, onClick }) { const [hover, setHover] = React.useState(false); return ( ); } function PeuImporte({ active, onClick }) { return ( ); } // Carte résultat — vignette + nom + latin + famille (réutilise Plate, comme EnFleurCard). function ResultCard({ plant, onClick, delay }) { const [hover, setHover] = React.useState(false); const fromWiki = !!plant.thumbFromWikipedia; const attribution = fromWiki && plant.latin ? `https://fr.wikipedia.org/wiki/${encodeURIComponent(plant.latin.replace(/ /g, "_"))}` : null; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ cursor: "pointer", background: "var(--cream)", border: "1px solid var(--line-soft)", display: "flex", flexDirection: "column" }} >
{plant.famille}

{plant.nom}

{plant.latin}
 ); } // Wrapper : propose le choix entre le parcours classique (déroulé) et le // parcours immersif (Folio clair / Veillée nocturne, components/IdentifierImmersive.jsx). // Immersif par défaut ; pas de mémorisation (on repart sur le défaut à chaque ouverture). function Identifier({ setRoute, setPlantId, theme }) { const [mode, setMode] = React.useState("immersif"); const immersifDispo = !!window.IdentifierImmersive; const showImmersif = mode === "immersif" && immersifDispo; return (
{immersifDispo && (
)} {showImmersif ? : }
); } window.Identifier = Identifier; })();