ajout d'un range slider pour filter les monstres par ID

docs/.vuepress/store/modules/monsterFilters.js

@@ -5,6 +5,7 @@ export default {
 
   state: {
     search: '',
+    challengeRange: [0, 30],
     types: [
       { label: "Aberration", value: false },
       { label: "Bête", value: false },
@@ -117,6 +118,12 @@ export default {
     resetSearch: (state) => {
       state.search = ''
     },
+    setChallengeRange: (state, payload) => {
+      state.challengeRange = payload
+    },
+    resetChallengeRange: (state, payload) => {
+      state.challengeRange = [0, 30]
+    },
     setTypes: (state, payload) => {
       state.types = payload
     },

docs/.vuepress/theme/components/MagicItemFilters.vue

@@ -7,6 +7,7 @@
       label="Filtrer"
       single-line
       hide-details
+      clearable
       color="accent"
       ></v-text-field>
 

docs/.vuepress/theme/components/MonsterFilters.vue

@@ -2,16 +2,33 @@
   <div class="monster-filters pa-1">
 
     <v-text-field
-      class="mb-1"
+      class="mb-1 mx-2"
       v-model="search"
       label="Filtrer"
       single-line
       hide-details
+      clearable
       color="accent"
       ></v-text-field>
 
     <v-expansion-panels multiple flat hover v-model="panels">
 
+      <v-expansion-panel>
+        <v-expansion-panel-header>Tranche d'ID</v-expansion-panel-header>
+        <v-expansion-panel-content class="pt-4">
+          <v-range-slider
+            class="mt-6"
+            v-model="challengeRange"
+            min="0"
+            max="30"
+            thumb-size="24"
+            thumb-label="always"
+            hide-details
+            @end="onEndChallengeRange"
+          ></v-range-slider>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
       <v-expansion-panel>
         <v-expansion-panel-header>Types</v-expansion-panel-header>
         <v-expansion-panel-content>
@@ -58,7 +75,7 @@ export default {
 
   data () {
     return {
-      panels: [],
+      panels: []
     }
   },
 
@@ -72,6 +89,15 @@ export default {
       }
     },
 
+    challengeRange: {
+      get () {
+        return this.$store.state.monsterFilters.challengeRange
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setChallengeRange', newValue)
+      }
+    },
+
     types: {
       get () {
         return this.$store.state.monsterFilters.types
@@ -111,6 +137,10 @@ export default {
 
   methods: {
 
+    onEndChallengeRange () {
+      setUrlParams('trancheID', this.challengeRange)
+    },
+
     switchType () {
       let list = []
       for (var i = 0; i < this.types.length; i++) {
@@ -182,11 +212,15 @@ export default {
   mounted () {
     this.$store.dispatch('monsterFilters/reset')
 
+    let challengeRange = getUrlParameter(window.location.href, "trancheID").split(",")
     let selectedSizes = getUrlParameter(window.location.href, "tailles").split(",")
     let selectedTypes = getUrlParameter(window.location.href, "types").split(",")
     let selectedEnvironments = getUrlParameter(window.location.href, "environnements").split(",")
     let selectedDungeonTypes = getUrlParameter(window.location.href, "donjons").split(",")
 
+    if (challengeRange && challengeRange[0] != '') {
+      this.$store.commit('monsterFilters/setChallengeRange', challengeRange)
+    }
     setListMutation(selectedTypes, this.$store, 'monsterFilters/setTypesFromList')
     setListMutation(selectedSizes, this.$store, 'monsterFilters/setSizesFromList')
     setListMutation(selectedEnvironments, this.$store, 'monsterFilters/setEnvironmentsFromList')

docs/.vuepress/theme/components/SpellFilters.vue

@@ -7,6 +7,7 @@
       label="Filtrer"
       single-line
       hide-details
+      clearable
       color="accent"
       ></v-text-field>
 

docs/.vuepress/theme/layouts/MonstersLayout.vue

@@ -106,6 +106,7 @@ export default {
   computed: {
     ...mapState({
       search: state => state.monsterFilters.search,
+      challengeRange: state => state.monsterFilters.challengeRange,
       types: state => state.monsterFilters.types,
       sizes: state => state.monsterFilters.sizes,
       environments: state => state.monsterFilters.environments,
@@ -115,6 +116,17 @@ export default {
     monsters() {
       let results = this.$pagination.pages
 
+      // Filter ID
+      let minID = this.challengeRange[0]
+      let maxID = this.challengeRange[1]
+      if (this.challengeRange[0] > this.challengeRange[1]) {
+        minID = this.challengeRange[1]
+        maxID = this.challengeRange[0]
+      }
+      results = results.filter(item => {
+        return item.frontmatter.challenge >= minID && item.frontmatter.challenge <= maxID
+      })
+
       // Filter types
       let selectedTypes = []
       for (var i = 0; i < this.types.length; i++) {

docs/pieges/README.md

@@ -170,7 +170,7 @@ Le DD est de 15 pour repérer la plaque de pression et de légères traces de br
 
 Le piège s'active quand un poids de 10 kilos ou plus appuie sur la plaque de pression. La statue crache alors un cône de feu de 9 mètres. Chaque créature située dans le cône doit faire un [jet de sauvegarde](/utiliser-les-caracteristiques/#jets-de-sauvegarde) de Dextérité DD 13. Celles qui échouent subissent 22 (4d10) dégâts de feu, les autres la moitié seulement.
 
-Il suffit de glisser une pointe de fer ou un autre objet sous la plaque de pression pour empêcher le piège de s'activer. Si quelqu'un lance [_dissipation de la magie_](/grimoire/dissipation-de-la-magie) (DD 13) avec succès sur la (statue, il détruit le piège.
+Il suffit de glisser une pointe de fer ou un autre objet sous la plaque de pression pour empêcher le piège de s'activer. Si quelqu'un lance [_dissipation de la magie_](/grimoire/dissipation-de-la-magie) (DD 13) avec succès sur la statue, il détruit le piège.
 
 ### Zone de gravité inversée
 _Piège magique_