filtres sur les mouvements des créatures

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

@@ -52,6 +52,9 @@ export default {
       { label: "Ruines souterraines", value: false },
       { label: "Ruines sous-marines", value: false },
     ],
+    speedFly: undefined,
+    speedSwim: undefined,
+    speedBurrow: undefined,
   },
 
   getters: {
@@ -60,6 +63,9 @@ export default {
     sizes: state => state.sizes,
     environments: state => state.environments,
     dungeonTypes: state => state.dungeonTypes,
+    speedFly: state => state.speedFly,
+    speedSwim: state => state.speedSwim,
+    speedBurrow: state => state.speedBurrow,
   },
 
   actions: {
@@ -69,6 +75,9 @@ export default {
       commit('resetSizes')
       commit('resetEnvironments')
       commit('resetDungeonTypes')
+      commit('resetSpeedFly')
+      commit('resetSpeedSwim')
+      commit('resetSpeedBurrow')
     },
     updateSearch: ({ commit }, payload) => {
       commit('setSearch', payload)
@@ -109,6 +118,15 @@ export default {
     resetDungeonTypes: ({ commit }) => {
       commit('resetDungeonTypes')
     },
+    updateSpeedFly: ({ commit }, payload) => {
+      commit('setSpeedFly', payload)
+    },
+    updateSpeedSwim: ({ commit }, payload) => {
+      commit('setSpeedSwim', payload)
+    },
+    updateSpeedBurrow: ({ commit }, payload) => {
+      commit('setSpeedBurrow', payload)
+    },
   },
 
   mutations: {
@@ -230,6 +248,24 @@ export default {
         { label: "Ruines sous-marines", value: false },
       ]
     },
+    setSpeedFly: (state, payload) => {
+      state.speedFly = payload
+    },
+    resetSpeedFly: (state) => {
+      state.speedFly = undefined
+    },
+    setSpeedSwim: (state, payload) => {
+      state.speedSwim = payload
+    },
+    resetSpeedSwim: (state) => {
+      state.speedSwim = undefined
+    },
+    setSpeedBurrow: (state, payload) => {
+      state.speedBurrow = payload
+    },
+    resetSpeedBurrow: (state) => {
+      state.speedBurrow = undefined
+    },
   }
 
 }

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

@@ -65,6 +65,50 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
 
+      <v-expansion-panel>
+        <v-expansion-panel-header>Déplacements</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <div class="d-flex mt-2 mb-4">
+            <v-btn-toggle v-model="speedFly" @change="switchSpeedFly" dark>
+              <v-btn :value="true" small :color="setColor(speedFly, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(speedFly, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Vol</p>
+          </div>
+
+          <div class="d-flex mb-4">
+            <v-btn-toggle v-model="speedSwim" @change="switchSpeedSwim" dark>
+              <v-btn :value="true" small :color="setColor(speedSwim, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(speedSwim, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Nage</p>
+          </div>
+
+          <div class="d-flex">
+            <v-btn-toggle v-model="speedBurrow" @change="switchSpeedBurrow" dark>
+              <v-btn :value="true" small :color="setColor(speedBurrow, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(speedBurrow, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Fouissement</p>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
     </v-expansion-panels>
 
   </div>
@@ -139,6 +183,33 @@ export default {
         this.$store.commit('monsterFilters/setDungeonTypes', newValue)
       }
     },
+
+    speedFly: {
+      get () {
+        return this.$store.state.monsterFilters.speedFly
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setSpeedFly', newValue)
+      }
+    },
+
+    speedSwim: {
+      get () {
+        return this.$store.state.monsterFilters.speedSwim
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setSpeedSwim', newValue)
+      }
+    },
+
+    speedBurrow: {
+      get () {
+        return this.$store.state.monsterFilters.speedBurrow
+      },
+      set (newValue) {
+        this.$store.commit('monsterFilters/setSpeedBurrow', newValue)
+      }
+    },
   },
 
   methods: {
@@ -194,6 +265,30 @@ export default {
       setUrlParams('donjons', list)
     },
 
+    switchSpeedFly () {
+      let value = []
+      if ((this.speedFly !== undefined)) {
+        value[0] = this.speedFly
+      }
+      setUrlParams('vol', value)
+    },
+
+    switchSpeedSwim () {
+      let value = []
+      if ((this.speedSwim !== undefined)) {
+        value[0] = this.speedSwim
+      }
+      setUrlParams('nage', value)
+    },
+
+    switchSpeedBurrow () {
+      let value = []
+      if ((this.speedBurrow !== undefined)) {
+        value[0] = this.speedBurrow
+      }
+      setUrlParams('fouissement', value)
+    },
+
     setColor (value, compare, color) {
       if (value === compare) {
         return color
@@ -230,6 +325,9 @@ export default {
     let selectedTypes = getUrlParameter(window.location.href, "types").split(",")
     let selectedEnvironments = getUrlParameter(window.location.href, "environnements").split(",")
     let selectedDungeonTypes = getUrlParameter(window.location.href, "donjons").split(",")
+    let speedFly = getUrlParameter(window.location.href, "vol")
+    let speedSwim = getUrlParameter(window.location.href, "nage")
+    let speedBurrow = getUrlParameter(window.location.href, "fouissement")
 
     if (challengeRange && challengeRange[0] != '' && challengeRange[1] != '') {
       let convertedChallengeRange = []
@@ -251,6 +349,10 @@ export default {
     setListMutation(selectedSizes, this.$store, 'monsterFilters/setSizesFromList')
     setListMutation(selectedEnvironments, this.$store, 'monsterFilters/setEnvironmentsFromList')
     setListMutation(selectedDungeonTypes, this.$store, 'monsterFilters/setDungeonTypesFromList')
+
+    setBooleanMutation(speedFly, this.$store, 'monsterFilters/setSpeedFly')
+    setBooleanMutation(speedSwim, this.$store, 'monsterFilters/setSpeedSwim')
+    setBooleanMutation(speedBurrow, this.$store, 'monsterFilters/setSpeedBurrow')
   }
 }
 </script>

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

@@ -208,6 +208,9 @@ export default {
       sizes: state => state.monsterFilters.sizes,
       environments: state => state.monsterFilters.environments,
       dungeonTypes: state => state.monsterFilters.dungeonTypes,
+      speedFly: state => state.monsterFilters.speedFly,
+      speedSwim: state => state.monsterFilters.speedSwim,
+      speedBurrow: state => state.monsterFilters.speedBurrow,
     }),
 
     headers() {
@@ -363,6 +366,41 @@ export default {
         results = classFiltered
       }
 
+      // Filter movement speeds
+      if (this.speedFly !== undefined) {
+        if (this.speedFly === true) {
+          results = results.filter(item => {
+            return item.frontmatter.movement.fly > 0
+          })
+        } else {
+          results = results.filter(item => {
+            return item.frontmatter.movement.fly == null
+          })
+        }
+      }
+      if (this.speedSwim !== undefined) {
+        if (this.speedSwim === true) {
+          results = results.filter(item => {
+            return item.frontmatter.movement.swim > 0
+          })
+        } else {
+          results = results.filter(item => {
+            return item.frontmatter.movement.swim == null
+          })
+        }
+      }
+      if (this.speedBurrow !== undefined) {
+        if (this.speedBurrow === true) {
+          results = results.filter(item => {
+            return item.frontmatter.movement.burrow > 0
+          })
+        } else {
+          results = results.filter(item => {
+            return item.frontmatter.movement.burrow == null
+          })
+        }
+      }
+
       // let json = []
       // for (var monster of results) {
       //   let m = {}