FeasibleGuide

←→

Contenu de la page /trace-gpx-faisable — les repères pour juger une trace soi-même, puis ce que Pathou en fait ; les chiffres viennent des règles du moteur.

stableÀ valider

Écran ou section propre à Pathou, pas un composant du design system : à ne pas réutiliser ailleurs. Tous les écrans et sections

// Titre : Le guide, tel qu’il apparaît sur /trace-gpx-faisable
import FeasibleGuide from '@pathou/components/FeasibleGuide';

export default function Exemple() {
  return (
    <div className="ip-main" style={{ width: 720, maxHeight: 680, overflowY: 'auto' }}>
      <FeasibleGuide />
    </div>
  );
}

Installation

Copie le fichier dans ton projet, ainsi que les tokens qu’il utilise.

src/components/FeasibleGuide.tsx
import { DOWNHILL_LIMIT, LEVELS, LEVEL_LABEL, PRACTICE_LABEL, RIDE_HOURS, UPHILL_LIMIT } from '../lib/difficulty/rules';
import { formatHours } from '../lib/time';
import { EN_PRATIQUE, EXEMPLES } from '../pages/exemples';
import { LEVEL_PROFILE, PRACTICES, techText } from './LevelInfo';

/** Durée lisible dans une phrase : « 3 h », « 4 h 30 ». */
const hours = (h: number) => (Number.isInteger(h) ? `${h} h` : formatHours(h).replace(' ', ' '));

const vtt = UPHILL_LIMIT.vtt;

/**
 * Guide de la page /trace-gpx-faisable : les repères pour juger une trace soi-même, puis ce que Pathou en fait.
 * Les chiffres viennent des règles du moteur (lib/difficulty/rules.ts) : la page suit toute recalibration.
 */
export default function FeasibleGuide() {
  return (
    <div className="ip-prose">
      <p className="modal-lead">
        Pour savoir si une trace GPX est à ta portée, regarde cinq choses&nbsp;: les pentes, la nature du chemin, sa technicité, les passages délicats et la
        durée en roulant. Le dénivelé total ne suffit pas&nbsp;: 1&nbsp;000&nbsp;m de montée sur une piste roulante et sur un sentier caillouteux ne demandent
        pas le même niveau.
      </p>

      <section aria-labelledby="g-pente">
        <h2 id="g-pente">Quelle pente peux-tu monter sans pousser&nbsp;?</h2>
        <p>
          Le dénivelé dit combien tu montes, pas comment. Ce qui fait poser pied à terre, c’est la pente sur une centaine de mètres, et elle dépend du sol&nbsp;:
          en VTT, un débutant monte environ {vtt.compact[0]}&nbsp;% sur une piste, mais seulement {vtt.sentier[0]}&nbsp;% sur un sentier. Les rampes courtes
          comptent aussi&nbsp;: une moyenne sur 100&nbsp;m peut cacher 50&nbsp;m bien plus raides.
        </p>
        <p>
          Méfie-toi de l’altitude enregistrée par une montre ou un téléphone&nbsp;: elle est souvent fausse de plusieurs dizaines de mètres. L’altitude d’un
          modèle de terrain national (l’IGN en France) est bien plus sûre pour mesurer les pentes.
        </p>
      </section>

      <section aria-labelledby="g-chemin">
        <h2 id="g-chemin">Sur quel type de chemin passe la trace&nbsp;?</h2>
        <p>
          Une route goudronnée, une piste roulante, une piste cassante, un chemin de terre, un sentier ou un sentier technique ne se roulent pas de la même
          façon. La pratique compte autant que le niveau&nbsp;: en VTT, presque tout passe&nbsp;; en gravel, un sentier technique devient difficile&nbsp;; en
          route, tout ce qui n’est pas goudronné devient très difficile, voire inadapté.
        </p>
      </section>

      <section aria-labelledby="g-tech">
        <h2 id="g-tech">Quelle technicité, de S0 à S5&nbsp;?</h2>
        <p>
          L’échelle VTT S0 à S5 cote la difficulté d’un sentier à pilotage égal&nbsp;: S0, un chemin sans obstacle&nbsp;; S1, des racines et des pierres
          isolées&nbsp;; S2, des marches et des pierres plus grosses&nbsp;; S3, des rochers, des marches hautes et des épingles serrées&nbsp;; S4 et S5, des
          passages très raides et très encombrés, réservés aux experts. Cette cotation figure dans OpenStreetMap quand un contributeur l’a renseignée&nbsp;;
          sinon, il faut l’estimer d’après le type de sentier et l’état du sol.
        </p>
      </section>

      <section aria-labelledby="g-passages">
        <h2 id="g-passages">Y a-t-il des passages délicats&nbsp;?</h2>
        <p>
          Un seul passage peut changer la sortie&nbsp;: un obstacle (échalier, gué, escalier), un accès interdit ou privé, un sentier exposé au vide, un sentier
          peu visible, ou un tronçon qui n’existe sur aucune carte. Un court passage à pied se gère&nbsp;; un accès interdit oblige à modifier la trace.
        </p>
      </section>

      <section aria-labelledby="g-duree">
        <h2 id="g-duree">Combien de temps en roulant&nbsp;?</h2>
        <p>
          Une sortie trop longue pour ton niveau n’est pas impossible, puisqu’on peut toujours rouler plus lentement, mais elle use. À titre de repère, une
          sortie reste confortable jusqu’à {hours(RIDE_HOURS[0][0])} en roulant pour un débutant et {hours(RIDE_HOURS[1][0])} pour un intermédiaire, et devient
          très longue au-delà de {hours(RIDE_HOURS[0][1])} et {hours(RIDE_HOURS[1][1])}.
        </p>
      </section>

      <section aria-labelledby="g-reperes">
        <h2 id="g-reperes">Les repères par niveau</h2>
        <ul className="g-profiles">
          {LEVELS.map((l) => (
            <li key={l}>
              <b>{LEVEL_LABEL[l]}</b>&nbsp;: {LEVEL_PROFILE[l]}
            </li>
          ))}
        </ul>
        {PRACTICES.map((p) => (
          <div className="g-table" key={p}>
            <table>
              <caption>{PRACTICE_LABEL[p]}</caption>
              <thead>
                <tr>
                  <th scope="col">Niveau</th>
                  <th scope="col">Technicité à l’aise</th>
                  <th scope="col">Montée sans pousser</th>
                  <th scope="col">Descente engagée dès</th>
                  <th scope="col">Sortie confortable</th>
                </tr>
              </thead>
              <tbody>
                {LEVELS.map((l, li) => (
                  <tr key={l}>
                    <th scope="row">{LEVEL_LABEL[l]}</th>
                    <td>{techText(p, li)}</td>
                    <td>
                      {UPHILL_LIMIT[p].compact[li]}&nbsp;% sur piste · {UPHILL_LIMIT[p].sentier[li]}&nbsp;% sur sentier
                    </td>
                    <td>
                      {DOWNHILL_LIMIT[p].compact[li]}&nbsp;% sur piste · {DOWNHILL_LIMIT[p].sentier[li]}&nbsp;% sur sentier
                    </td>
                    <td>
                      jusqu’à {hours(RIDE_HOURS[li][0])}, très longue au-delà de {hours(RIDE_HOURS[li][1])}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ))}
        <p className="muted small">
          Pentes moyennes sur 100&nbsp;m. Ces repères sont indicatifs&nbsp;: l’état du sol, la météo et la fatigue comptent autant.
        </p>
      </section>

      <section aria-labelledby="g-pathou">
        <h2 id="g-pathou">Ce que Pathou fait de ces repères</h2>
        <p>
          Pathou applique ces repères à chaque point de ta trace, tous les 10&nbsp;m, avec l’altitude du modèle national quand le pays est couvert et la nature
          des chemins d’OpenStreetMap. Il en tire un verdict&nbsp;: adaptée, engagée, exigeante ou non adaptée. Une trace est non adaptée quand plus de
          3&nbsp;% de sa distance dépasse ton niveau, ou quand elle emprunte un accès interdit ou privé. Pour chaque passage trop dur, il cherche un
          contournement sur les chemins voisins.
        </p>
        <p>
          <a className="hp-link strong" href="/methode">
            Le détail de la méthode
          </a>
        </p>
      </section>

      <section aria-labelledby="g-exemples">
        <h2 id="g-exemples">Des traces analysées, niveau par niveau</h2>
        <p>
          Pour voir ces repères appliqués, voici le verdict de Pathou sur des traces de référence, pour chaque pratique et chaque niveau, avec leurs points
          d’attention et la confiance du verdict.
        </p>
        <ul className="g-profiles">
          {EXEMPLES.map((e) => (
            <li key={e.slug}>
              <a className="hp-link strong" href={`/exemples/${e.slug}`}>
                {e.lieu}, {EN_PRATIQUE[e.pratique]}
              </a>
            </li>
          ))}
        </ul>
      </section>

      <section aria-labelledby="g-limites">
        <h2 id="g-limites">Ce qu’aucune trace ne dit</h2>
        <p>
          La boue, la météo, la végétation et ta forme du jour ne se lisent pas dans un fichier GPX. Avant de partir, vérifie les passages signalés sur la
          photo aérienne et sur les photos au sol.
        </p>
      </section>
    </div>
  );
}

Tokens : --panel --text --muted --line --accent --chip

Utilisation

import FeasibleGuide from './components/FeasibleGuide';

<FeasibleGuide />

Guidelines

  • MUST
    Tirer les seuils cités des règles du moteur (lib/difficulty/rules.ts), jamais les recopier ; la page suit ainsi toute recalibration.

Référence de l’API

Aucune prop.