refactor: ♻️ standardize securing steps on typologies files

frontend/src/components/FooterMES.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="footer">
-    <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
+    <div class="fr-col-12 fr-col-lg-6 footer-actions mx-auto">
       <DsfrButton
         class="m-1 flex justify-center"
         icon="ri-arrow-left-line"

frontend/src/icons.ts

@@ -20,4 +20,5 @@ export {
   RiHome3Line,
   RiHome4Line,
   RiCheckboxCircleLine,
+  RiLockLine,
 } from 'oh-vue-icons/icons/ri/index.js'

frontend/src/stores/steps.ts

@@ -3,10 +3,8 @@ import { computed } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
 import { serializer } from '@/utils/storage-utils'
 
-type Step = Record<'1' | '2' | '3', string>
-
 export const useStepsStore = defineStore('steps', () => {
-  const currentOptionStep = useLocalStorage<Partial<Step>>('currentOptionStep', {})
+  const selectedOptions = useLocalStorage<Array<string>>('selectedOptions', [])
 
   const selectedAmmo = useLocalStorage<string | undefined>('selectedAmmo', undefined, { serializer })
   const selectedAlarmGun = useLocalStorage<string | undefined>('selectedAlarmGun', undefined, { serializer })
@@ -20,20 +18,15 @@ export const useStepsStore = defineStore('steps', () => {
     selectedAmmo.value = ammo
   }
 
-  function setOptionStep (step: 1 | 2 | 3, value?: string) {
-    currentOptionStep.value = { ...currentOptionStep.value, [step]: value }
-  }
-
   function $reset () {
     selectedAlarmGun.value = ''
   }
 
   return {
-    currentOptionStep,
+    selectedOptions,
     selectedAmmo,
     selectedAlarmGun,
     tutorialFeedback,
-    setOptionStep,
     isDummy,
     setModalTransparentAmmoOpened (val?: boolean) {
       isModalTransparentAmmoOpened.value = val

frontend/src/utils/firearms-utils/autre-pistolet.ts

@@ -19,58 +19,66 @@ export const autre_pistolet = {
   getCategory: () => 'A, B ou D',
   isDummyTypology: false,
   options_text: '',
-  options: {
-    drulov: {
-      label: 'Drulov',
-      value: 'drulov',
-      text_steps: {
-        1: 'Analyser l’arme en  <span class="font-bold">direction sécurisée</span>',
-        2: '<span class="font-bold">Pivoter l’arrière de la culasse</span> légèrement vers la gauche',
-        3: '<span class="font-bold">Tirer la glissière</span> vers l’arrière pour <span class="font-bold">extraire la munition</span> éventuelle',
-        4: '<span class="font-bold">Actionner la culasse</span> d’avant en arrière',
-        5: '<span class="font-bold">Contrôler visuellement</span> que la chambre est bien vide',
-      },
-      img: autrePistoletDrulovImg,
-      video: autrePistoletDrulovVideo,
+  securingSteps: [
+    {
+      options: [
+        {
+          label: 'Drulov',
+          value: 'drulov',
+          text_steps: [
+            'Analyser l’arme en  <span class="font-bold">direction sécurisée</span>',
+            '<span class="font-bold">Pivoter l’arrière de la culasse</span> légèrement vers la gauche',
+            '<span class="font-bold">Tirer la glissière</span> vers l’arrière pour <span class="font-bold">extraire la munition</span> éventuelle',
+            '<span class="font-bold">Actionner la culasse</span> d’avant en arrière',
+            '<span class="font-bold">Contrôler visuellement</span> que la chambre est bien vide',
+          ],
+          timeVideo: '20 sec',
+          img: autrePistoletDrulovImg,
+          video: autrePistoletDrulovVideo,
+        },
+        {
+          label: 'Derringer',
+          value: 'derringer',
+          text_steps: [
+            'Analyser l’arme en  <span class="font-bold">direction sécurisée</span>',
+            'Pivoter le <span class="font-bold">levier de déverrouillage</span>',
+            'Casser/Basculer les canons vers le haut',
+            'Pencher l’entrée des canons pour <span class="font-bold">extraire les munitions</span> éventuelles',
+            'Contrôler visuellement que la chambre est bien vide',
+          ],
+          timeVideo: '20 sec',
+          img: autrePistoletDerringerImg,
+          video: autrePistoletDerringerVideo,
+        },
+        {
+          label: 'Thompson contender',
+          value: 'thompson_contender',
+          text_steps: [
+            'Analyser l’arme en  <span class="font-bold">direction sécurisée</span> ',
+            'Tirer sur <span class="font-bold">le levier situé sous le pontet</span> avec la main tenant la poignée',
+            'Casser/Basculer le canon vers le bas',
+            'Retourner l’arme pour <span class="font-bold">extraire la munition</span> éventuelle',
+            'Contrôler visuellement que la chambre est bien vide',
+          ],
+          timeVideo: '20 sec',
+          img: autrePistoletThompsonImg,
+          video: autrePistoletThompsonVideo,
+        },
+        {
+          label: 'Ancien fusil à crosse et canon scié',
+          value: 'fusil_crosse_cannon_scie',
+          text_steps: [
+            'Analyser l’arme en  <span class="font-bold">direction sécurisée</span> ',
+            'Pousser sur la clef avec le pouce tenant la poignée de l’arme',
+            'Casser/Basculer le canon de l’arme',
+            '<span class="font-bold">Retirer les munitions</span> éventuelles',
+            'Contrôler visuellement que les chambres sont bien vides',
+          ],
+          timeVideo: '20 sec',
+          img: autrePistoletFusilScieImg,
+          video: autrePistoletFusilScieVideo,
+        },
+      ],
     },
-    derringer: {
-      label: 'Derringer',
-      value: 'derringer',
-      text_steps: {
-        1: 'Analyser l’arme en  <span class="font-bold">direction sécurisée</span>',
-        2: 'Pivoter le <span class="font-bold">levier de déverrouillage</span>',
-        3: 'Casser/Basculer les canons vers le haut',
-        4: 'Pencher l’entrée des canons pour <span class="font-bold">extraire les munitions</span> éventuelles',
-        5: 'Contrôler visuellement que la chambre est bien vide',
-      },
-      img: autrePistoletDerringerImg,
-      video: autrePistoletDerringerVideo,
-    },
-    thompson_contender: {
-      label: 'Thompson contender',
-      value: 'thompson_contender',
-      text_steps: {
-        1: 'Analyser l’arme en  <span class="font-bold">direction sécurisée</span> ',
-        2: 'Tirer sur <span class="font-bold">le levier situé sous le pontet</span> avec la main tenant la poignée',
-        3: 'Casser/Basculer le canon vers le bas',
-        4: 'Retourner l’arme pour <span class="font-bold">extraire la munition</span> éventuelle',
-        5: 'Contrôler visuellement que la chambre est bien vide',
-      },
-      img: autrePistoletThompsonImg,
-      video: autrePistoletThompsonVideo,
-    },
-    fusil_crosse_cannon_scie: {
-      label: 'Ancien fusil à crosse et canon scié',
-      value: 'fusil_crosse_cannon_scie',
-      text_steps: {
-        1: 'Analyser l’arme en  <span class="font-bold">direction sécurisée</span> ',
-        2: 'Pousser sur la clef avec le pouce tenant la poignée de l’arme',
-        3: 'Casser/Basculer le canon de l’arme',
-        4: '<span class="font-bold">Retirer les munitions</span> éventuelles',
-        5: 'Contrôler visuellement que les chambres sont bien vides',
-      },
-      img: autrePistoletFusilScieImg,
-      video: autrePistoletFusilScieVideo,
-    },
-  },
+  ],
 } as const

frontend/src/utils/firearms-utils/epaule-a-levier-sous-garde.ts

@@ -13,33 +13,39 @@ export const epaule_a_levier_sous_garde = {
   getCategory: getCommonCategory,
   isDummyTypology: false,
   options_text: 'En manipulant l’arme avec précaution dans une <span class="font-bold">direction sans risque</span>, inspectez l’<span class="font-bold">extrémité du tube sous le canon</span>. Sélectionnez ce que vous voyez :',
-  options: {
-    front_magazine: {
-      label: 'Embout rugueux',
-      value: 'front_magazine',
-      text_steps: {
-        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution.',
-        2: '<span class="font-bold">Faites très attention à ne pas déclencher l’arme durant cette manipulation</span>. Dévisser la baguette à l’avant du tube magasin.',
-        3: 'Retirer complètement la baguette du magasin.',
-        4: 'Vider le magasin en tapotant l’arme orientée légèrement vers le bas.',
-        5: 'Actionner le levier de sous garde jusqu’en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre.',
-        6: 'Contrôler visuellement que la chambre est vide.',
-      },
-      img: levierSousGardeMagasinAvantImg,
-      video: levierSousGardeMagasinAvantVideo,
+  securingSteps: [
+    {
+      options: [
+        {
+          label: 'Embout rugueux',
+          value: 'front_magazine',
+          text_steps: [
+            'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution.',
+            '<span class="font-bold">Faites très attention à ne pas déclencher l’arme durant cette manipulation</span>. Dévisser la baguette à l’avant du tube magasin.',
+            'Retirer complètement la baguette du magasin.',
+            'Vider le magasin en tapotant l’arme orientée légèrement vers le bas.',
+            'Actionner le levier de sous garde jusqu’en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre.',
+            'Contrôler visuellement que la chambre est vide.',
+          ],
+          timeVideo: '35 sec',
+          img: levierSousGardeMagasinAvantImg,
+          video: levierSousGardeMagasinAvantVideo,
+        },
+        {
+          label: 'Pas d’embout',
+          value: 'fixed_magazine',
+          text_steps: [
+            'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution.',
+            'Abaisser le levier de sous garde en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre.',
+            '<span class="font-bold" style="color:red">Veiller à ne pas appuyer sur la queue de détente pendant cette manipulation !</span> <br> Relever et abaisser le levier de sous garde tout en extrayant les munitions tant qu’il y a toujours des munitions présentes dans le tube magasin.',
+            'Contrôler visuellement que la chambre est vide.',
+          ],
+          timeVideo: '35 sec',
+          img: levierSousGardePasMagasinImg,
+          video: levierSousGardePasMagasinVideo,
+        },
+      ],
     },
-    fixed_magazine: {
-      label: 'Pas d’embout',
-      value: 'fixed_magazine',
-      text_steps: {
-        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution.',
-        2: 'Abaisser le levier de sous garde en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre.',
-        3: '<span class="font-bold" style="color:red">Veiller à ne pas appuyer sur la queue de détente pendant cette manipulation !</span> <br> Relever et abaisser le levier de sous garde tout en extrayant les munitions tant qu’il y a toujours des munitions présentes dans le tube magasin.',
-        4: 'Contrôler visuellement que la chambre est vide.',
-      },
-      img: levierSousGardePasMagasinImg,
-      video: levierSousGardePasMagasinVideo,
-    },
-  },
+  ],
   getDisclaimer: getEpaulLevierVerrouDisclaimer,
 } as const

frontend/src/utils/firearms-utils/epaule-a-pompe.ts

@@ -1,25 +1,30 @@
 import epaulePompeSimpleVideo from '@/assets/guide-mise-en-securite/videos/epaule_a_pompe/epaule_pompe_simple.mp4'
-// import epaulePompeCompliqueVideo from '@/assets/guide-mise-en-securite/videos/epaule_a_pompe/epaule_pompe_complique.mp4'
-/*
-3 - Armes d’épaule à pompe
 
-*/
 export const epaule_a_pompe = {
   displayLabel: "Arme d'épaule à pompe",
   getCategory: (gunLength: number, gunBarrelLength: number) => {
     if (gunLength && gunBarrelLength) { return gunLength > 75 && gunBarrelLength > 55 ? 'C' : 'B' } else { return 'B ou C' }
   },
   isDummyTypology: false,
   options_text: '',
-  text_steps: {
-    1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
-    2: 'Si la pompe est bloquée, <span class="font-bold">appuyer sur le bouton de déverrouillage</span> situé à l’avant ou sous le pontet',
-    3: 'Actionner la pompe doucement d’arrière en avant afin d’<span class="font-bold">extraire toutes les munitions</span>',
-    4: 'Contrôler visuellement que la chambre est vide',
-    5: '<span class="font-bold">Verrouiller l’arme</span> en avançant légèrement la pompe vers l’avant',
-    6: '<span class="font-bold">Contrôler l’orifice du tube magasin</span> et constater que celui-ci est bien vide',
-  },
-  video: epaulePompeSimpleVideo,
+  securingSteps: [
+    {
+      options: [
+        {
+          text_steps: [
+            'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
+            'Si la pompe est bloquée, <span class="font-bold">appuyer sur le bouton de déverrouillage</span> situé à l’avant ou sous le pontet',
+            'Actionner la pompe doucement d’arrière en avant afin d’<span class="font-bold">extraire toutes les munitions</span>',
+            'Contrôler visuellement que la chambre est vide',
+            '<span class="font-bold">Verrouiller l’arme</span> en avançant légèrement la pompe vers l’avant',
+            '<span class="font-bold">Contrôler l’orifice du tube magasin</span> et constater que celui-ci est bien vide',
+          ],
+          timeVideo: '45 sec',
+          video: epaulePompeSimpleVideo,
+        },
+      ],
+    },
+  ],
   getDisclaimer: (category: string) => {
     if (category === 'B ou C') { return '<strong>Catégorie B</strong> si la <strong>capacité maximale</strong> (chambre comprise) est <strong>supérieure à 5</strong>, ou si la <strong>crosse n’est pas fixe</strong>.' }
     if (category === 'C') { return '<strong>Catégorie B</strong> si la <strong>capacité maximale</strong> (chambre comprise) est <strong>supérieure à 5</strong>, ou si la <strong>crosse n’est pas fixe</strong>, ou si le <strong>canon est lisse</strong>.' }

frontend/src/utils/firearms-utils/epaule-a-un-coup-par-canon.ts

@@ -9,53 +9,60 @@ Armes d’épaule à un coup par canon
   Clé de pouce
   Clé Lefaucheux
   Clé Darne
-  */
+*/
 export const epaule_a_un_coup_par_canon = {
   displayLabel: "Arme d'épaule à un coup par canon",
   getCategory: (gunLength: number, gunBarrelLength: number) => {
     if (gunLength && gunBarrelLength) { return (gunLength > 75 && gunBarrelLength > 40) ? 'C' : 'B' } else { return 'B ou C' }
   },
   isDummyTypology: false,
   options_text: 'Sélectionnez ce que vous voyez sur la <span class="font-bold">zone centrale de l’arme</span>',
-  options: {
-    cle_pouce: {
-      label: 'Clé supérieure',
-      value: 'cle_pouce',
-      text_steps: {
-        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
-        2: 'Pousser sur la clef d’ouverture à l’aide de votre pouce, et ouvrir l’arme en la cassant tout en restant appuyé sur la clef',
-        3: '<span class="font-bold">Retirer les munitions</span> éventuelles',
-        4: 'Contrôler visuellement les chambres',
-      },
-      img: epauleAUnCoupParCanonClePouceImg,
-      video: epauleAUnCoupParCanonClePouceVideo,
+  securingSteps: [
+    {
+      options: [
+        {
+          label: 'Clé supérieure',
+          value: 'cle_pouce',
+          text_steps: [
+            'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
+            'Pousser sur la clef d’ouverture à l’aide de votre pouce, et ouvrir l’arme en la cassant tout en restant appuyé sur la clef',
+            '<span class="font-bold">Retirer les munitions</span> éventuelles',
+            'Contrôler visuellement les chambres',
+          ],
+          timeVideo: '30 sec',
+          img: epauleAUnCoupParCanonClePouceImg,
+          video: epauleAUnCoupParCanonClePouceVideo,
+        },
+        {
+          label: 'Grande clé sous le canon',
+          value: 'cle_lefaucheux',
+          text_steps: [
+            'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
+            'Repérer la clef présente sous les canons',
+            '<span class="font-bold"></span>Tourner la clef vers la droite',
+            'Ouvrir l’arme en la cassant',
+            '<span class="font-bold">Retirer les munitions</span> éventuelles',
+            'Contrôler visuellement les chambres',
+          ],
+          timeVideo: '30 sec',
+          img: epauleAUnCoupParCanonCleLechaufeuxImg,
+          video: epauleAUnCoupParCanonCleLefaucheuxVideo,
+        },
+        {
+          label: 'Clé à oreilles',
+          value: 'cle_darne',
+          text_steps: [
+            'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
+            'Tirer sur les oreilles vers l’arrière',
+            'Tirez pour faire coulisser la culasse vers l’arrière',
+            '<span class="font-bold">Retirer les munitions</span> éventuelles',
+            'Contrôler visuellement que la chambre est vide',
+          ],
+          timeVideo: '30 sec',
+          img: epauleAUnCoupParCanonCleDarneImg,
+          video: epauleAUnCoupParCanonCleDarneVideo,
+        },
+      ],
     },
-    cle_lefaucheux: {
-      label: 'Grande clé sous le canon',
-      value: 'cle_lefaucheux',
-      text_steps: {
-        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
-        2: 'Repérer la clef présente sous les canons',
-        3: '<span class="font-bold"></span>Tourner la clef vers la droite',
-        4: 'Ouvrir l’arme en la cassant',
-        5: '<span class="font-bold">Retirer les munitions</span> éventuelles',
-        6: 'Contrôler visuellement les chambres',
-      },
-      img: epauleAUnCoupParCanonCleLechaufeuxImg,
-      video: epauleAUnCoupParCanonCleLefaucheuxVideo,
-    },
-    cle_darne: {
-      label: 'Clé à oreilles',
-      value: 'cle_darne',
-      text_steps: {
-        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
-        2: 'Tirer sur les oreilles vers l’arrière',
-        3: 'Tirez pour faire coulisser la culasse vers l’arrière',
-        4: '<span class="font-bold">Retirer les munitions</span> éventuelles',
-        5: 'Contrôler visuellement que la chambre est vide',
-      },
-      img: epauleAUnCoupParCanonCleDarneImg,
-      video: epauleAUnCoupParCanonCleDarneVideo,
-    },
-  },
+  ],
 } as const