* Ajout de raccourcis sur la page d'accueil

* Ajout de feedback au changement de page

docs/.vuepress/theme/layouts/GlobalLayout.vue

@@ -1,6 +1,10 @@
 <template>
   <v-app class="srd">
 
+    <v-overlay :value="$store.state.loading">
+      <v-progress-circular indeterminate size="64"></v-progress-circular>
+    </v-overlay>
+
     <NavDrawer class="d-print-none" />
     <RightDrawer class="d-print-none" v-if="hasRightDrawer" />
 
@@ -84,6 +88,7 @@ export default {
   },
 
   mounted () {
+    this.$store.commit('setLoading', false) // Page chargée
     this.$store.commit('setDrawer', this.$vuetify.breakpoint.lgAndUp)
 
     // Cookie consent
@@ -103,22 +108,17 @@ export default {
     this.$store.commit('myMonsters/initialiseStore')
     this.$store.commit('myMagicItems/initialiseStore')
 
-    // this.$vuetify.theme.dark = this.$store.state.isThemeDark
+    // Loading feedback
+    this.$router.beforeEach((to, from, next) => {
+      if (to.path !== from.path && !Vue.component(to.name)) {
+        this.$store.commit('setLoading', true)
+      }
+      next()
+    })
 
-    // let conditionLinks = document.links
-    // conditionLinks.forEach((link, idx) => {
-    //   if (link.hash == "#a-terre") {
-    //     let RTClass = Vue.extend(RuleTooltip)
-    //     let rtInstance = new RTClass({
-    //       propsData: { l: link.text, t: link.hash.substring(1, link.hash.length) },
-    //       parent: this.$root
-    //     })
-    //     rtInstance.$mount()
-    //     console.log(link)
-    //     link = rtInstance.$el
-    //     console.log(link)
-    //   }
-    // })
+    this.$router.afterEach(() => {
+      this.$store.commit('setLoading', false)
+    })
   },
 
   methods: {

docs/.vuepress/theme/layouts/MagicItemLayout.vue

@@ -5,7 +5,7 @@
       <div class="d-flex flex-wrap align-center">
         <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
         <v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-4 mb-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
-        <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mes objets magiques</v-btn>
+        <MyMagicItemsButton />
       </div>
     </div>
     <MagicItem :magicItem="$page" />
@@ -16,6 +16,7 @@
 <script>
 import Breadcrumb from '@theme/components/Breadcrumb'
 import MagicItem from '@theme/components/MagicItem'
+import MyMagicItemsButton from '@theme/global-components/MyMagicItemsButton'
 import Edit from '@theme/components/Edit'
 
 export default {
@@ -24,6 +25,7 @@ export default {
   components: {
     Breadcrumb,
     MagicItem,
+    MyMagicItemsButton,
     Edit
   },
 

docs/.vuepress/theme/layouts/MagicItemsLayout.vue

@@ -5,12 +5,26 @@
       <Breadcrumb class="mr-auto mb-4" />
       <div class="d-flex flex-wrap align-center">
         <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
-        <v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
+        <MyMagicItemsButton />
       </div>
     </div>
 
     <h1>Liste des objets magiques</h1>
 
+    <div class="active-filters mb-2">
+      <div class="types-filter mb-1" v-if="selectedTypes.length > 0">
+        <strong>Types</strong> : <v-chip class="mr-1" v-for="(type, idx) in selectedTypes">{{ type }}</v-chip>
+      </div>
+      <div class="levels-filter mb-1" v-if="selectedRarities.length > 0">
+        <strong>Rareté</strong> : <v-chip class="mr-1" v-for="(rarity, idx) in selectedRarities">{{ rarity }}</v-chip>
+      </div>
+      <div class="attunement-filter mb-1" v-if="hasAttunement !== undefined">
+        <strong>Harmonisation</strong> :
+        <v-chip class="mr-1" v-if="hasAttunement === true" dark color="green">oui</v-chip>
+        <v-chip class="mr-1" v-if="hasAttunement === false" dark color="red">non</v-chip>
+      </div>
+    </div>
+
     <v-data-table
       class="data-table"
       :headers="headers"
@@ -64,9 +78,10 @@ import { mapState } from 'vuex'
 import Breadcrumb from '@theme/components/Breadcrumb'
 import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
 import MagicItem from '@theme/components/MagicItem'
+import MyMagicItemsButton from '@theme/global-components/MyMagicItemsButton'
 
 export default {
-  components: { Breadcrumb, MagicItem },
+  components: { Breadcrumb, MagicItem, MyMagicItemsButton },
 
   data () {
     return {
@@ -99,6 +114,26 @@ export default {
       hasAttunement: state => state.magicItemFilters.hasAttunement,
     }),
 
+    selectedTypes() {
+      let result = []
+      for (let type of this.types) {
+        if (type.value) {
+          result.push(type.label)
+        }
+      }
+      return result
+    },
+
+    selectedRarities() {
+      let result = []
+      for (let rarity of this.rarities) {
+        if (rarity.value) {
+          result.push(rarity.label)
+        }
+      }
+      return result
+    },
+
     magicitems() {
       let results = this.$pagination.pages
 

docs/.vuepress/theme/layouts/MonsterLayout.vue

@@ -5,7 +5,7 @@
       <div class="d-flex flex-wrap align-center">
         <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
         <v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4 mb-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
-        <v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
+        <MyMonstersButton />
       </div>
     </div>
     <Monster :monster="$page" />
@@ -16,6 +16,7 @@
 <script>
 import Breadcrumb from '@theme/components/Breadcrumb'
 import Monster from '@theme/components/Monster'
+import MyMonstersButton from '@theme/global-components/MyMonstersButton'
 import Edit from '@theme/components/Edit'
 
 export default {
@@ -24,6 +25,7 @@ export default {
   components: {
     Breadcrumb,
     Monster,
+    MyMonstersButton,
     Edit
   },
 

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

@@ -5,12 +5,30 @@
       <Breadcrumb class="mr-auto mb-4" />
       <div class="d-flex flex-wrap align-center">
         <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
-        <v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire</v-btn>
+        <MyMonstersButton />
       </div>
     </div>
 
     <h1>Bestiaire</h1>
 
+    <div class="active-filters mb-2">
+      <div class="challengeRange-filter" v-if="Number(challengeRange[0]) >= 0 && Number(challengeRange[1]) <= 30">
+        <strong>Indice de dangerosité</strong> entre {{ challengeRange[0] }} et {{ challengeRange[1]}}
+      </div>
+      <div class="types-filter mb-1" v-if="selectedTypes.length > 0">
+        <strong>Types</strong> : <v-chip class="mr-1" v-for="(type, idx) in selectedTypes">{{ type }}</v-chip>
+      </div>
+      <div class="sizes-filter mb-1" v-if="selectedSizes.length > 0">
+        <strong>Tailles</strong> : <v-chip class="mr-1" v-for="(size, idx) in selectedSizes">{{ size }}</v-chip>
+      </div>
+      <div class="environments-filter mb-1" v-if="selectedEnvironments.length > 0">
+        <strong>Environnements</strong> : <v-chip class="mr-1" v-for="(env, idx) in selectedEnvironments">{{ env }}</v-chip>
+      </div>
+      <div class="dungeon-types-filter mb-1" v-if="selectedDungeonTypes.length > 0">
+        <strong>Types de donjons</strong> : <v-chip class="mr-1" v-for="(dType, idx) in selectedDungeonTypes">{{ dType }}</v-chip>
+      </div>
+    </div>
+
     <v-data-table
       class="data-table"
       :headers="headers"
@@ -73,9 +91,10 @@ import Breadcrumb from '@theme/components/Breadcrumb'
 import { displayChallenge } from '@theme/util/monsterHelpers'
 import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
 import Monster from '@theme/components/Monster'
+import MyMonstersButton from '@theme/global-components/MyMonstersButton'
 
 export default {
-  components: { Breadcrumb, Monster },
+  components: { Breadcrumb, Monster, MyMonstersButton },
 
   data () {
     return {
@@ -99,7 +118,7 @@ export default {
         { text: "Sous-type", align: 'start', sortable: false, value: 'frontmatter.subtype' },
         { text: "Environnements", align: 'start', sortable: false, value: 'frontmatter.environments' },
         { text: "Type de donjons", align: 'start', sortable: false, value: 'frontmatter.dungeonTypes' },
-      ],
+      ]
     }
   },
 
@@ -113,6 +132,46 @@ export default {
       dungeonTypes: state => state.monsterFilters.dungeonTypes,
     }),
 
+    selectedTypes() {
+      let result = []
+      for (let type of this.types) {
+        if (type.value) {
+          result.push(type.label)
+        }
+      }
+      return result
+    },
+
+    selectedSizes() {
+      let result = []
+      for (let size of this.sizes) {
+        if (size.value) {
+          result.push(size.label)
+        }
+      }
+      return result
+    },
+
+    selectedEnvironments() {
+      let result = []
+      for (let env of this.environments) {
+        if (env.value) {
+          result.push(env.label)
+        }
+      }
+      return result
+    },
+
+    selectedDungeonTypes() {
+      let result = []
+      for (let dType of this.dungeonTypes) {
+        if (dType.value) {
+          result.push(dType.label)
+        }
+      }
+      return result
+    },
+
     monsters() {
       let results = this.$pagination.pages
 

docs/.vuepress/theme/layouts/SpellLayout.vue

@@ -5,7 +5,7 @@
       <div class="d-flex flex-wrap align-center">
         <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
         <v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-4 mb-4" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
-        <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
+        <MySpellsButton />
       </div>
     </div>
     <Spell :spell="$page" />
@@ -16,6 +16,7 @@
 <script>
 import Breadcrumb from '@theme/components/Breadcrumb'
 import Spell from '@theme/components/Spell'
+import MySpellsButton from '@theme/global-components/MySpellsButton'
 import Edit from '@theme/components/Edit'
 
 export default {
@@ -24,6 +25,7 @@ export default {
   components: {
     Breadcrumb,
     Spell,
+    MySpellsButton,
     Edit
   },
 

docs/.vuepress/theme/layouts/SpellsLayout.vue

@@ -5,12 +5,44 @@
       <Breadcrumb class="mr-auto mb-4" />
       <div class="d-flex flex-wrap align-center">
         <v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
-        <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire</v-btn>
+        <MySpellsButton />
       </div>
     </div>
 
     <h1>Grimoire</h1>
 
+    <div class="active-filters mb-2">
+      <div class="classes-filter mb-1" v-if="selectedClasses.length > 0">
+        <strong>Classes</strong> : <v-chip class="mr-1" v-for="(c, idx) in selectedClasses">{{ c }}</v-chip>
+      </div>
+      <div class="levels-filter mb-1" v-if="selectedLevels.length > 0">
+        <strong>Niveaux de sorts</strong> : <v-chip class="mr-1" v-for="(level, idx) in selectedLevels" v-html="level"></v-chip>
+      </div>
+      <div class="schools-filter mb-1" v-if="selectedSchools.length > 0">
+        <strong>Écoles de magie</strong> : <v-chip class="mr-1" v-for="(school, idx) in selectedSchools">{{ school }}</v-chip>
+      </div>
+      <div class="compoments-filter mb-1" v-if="componentVerbal !== undefined || componentSomatic !== undefined || componentMaterial !== undefined">
+        <strong>Composantes d'incantation</strong> :
+        <v-chip class="mr-1" v-if="componentVerbal === true" dark color="green">verbales</v-chip>
+        <v-chip class="mr-1" v-if="componentVerbal === false" dark color="red">verbales</v-chip>
+
+        <v-chip class="mr-1" v-if="componentSomatic === true" dark color="green">somatiques</v-chip>
+        <v-chip class="mr-1" v-if="componentSomatic === false" dark color="red">somatiques</v-chip>
+
+        <v-chip class="mr-1" v-if="componentMaterial === true" dark color="green">matérielles</v-chip>
+        <v-chip class="mr-1" v-if="componentMaterial === false" dark color="red">matérielles</v-chip>
+      </div>
+      <div class="concentration-filter mb-1" v-if="mustBeConcentration !== undefined">
+        <strong>Concentration</strong> :
+        <v-chip class="mr-1" v-if="mustBeConcentration === true" dark color="green">oui</v-chip>
+        <v-chip class="mr-1" v-if="mustBeConcentration === false" dark color="red">non</v-chip>
+      </div>
+      <div class="concentration-filter mb-1" v-if="mustBeRitual !== undefined">
+        <strong>Rituel</strong> :
+        <v-chip class="mr-1" v-if="mustBeRitual === true" dark color="green">oui</v-chip>
+        <v-chip class="mr-1" v-if="mustBeRitual === false" dark color="red">non</v-chip>
+      </div>
+    </div>
 
     <v-data-table
       class="data-table"
@@ -86,9 +118,10 @@ import { mapState } from 'vuex'
 import Breadcrumb from '@theme/components/Breadcrumb'
 import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
 import Spell from '@theme/components/Spell'
+import MySpellsButton from '@theme/global-components/MySpellsButton'
 
 export default {
-  components: { Breadcrumb, Spell },
+  components: { Breadcrumb, Spell, MySpellsButton },
 
   data () {
     return {
@@ -131,6 +164,36 @@ export default {
       componentMaterial: state => state.spellFilters.componentMaterial,
     }),
 
+    selectedClasses() {
+      let result = []
+      for (let c of this.classes) {
+        if (c.value) {
+          result.push(c.label)
+        }
+      }
+      return result
+    },
+
+    selectedLevels() {
+      let result = []
+      for (let level of this.levels) {
+        if (level.value) {
+          result.push(this.levelDisplay(level))
+        }
+      }
+      return result
+    },
+
+    selectedSchools() {
+      let result = []
+      for (let school of this.schools) {
+        if (school.value) {
+          result.push(school.label)
+        }
+      }
+      return result
+    },
+
     spells() {
       let results = this.$pagination.pages
 
@@ -245,7 +308,16 @@ export default {
 
     onClickRow (row, item) {
       item.expand(!item.isExpanded)
-    }
+    },
+
+    levelDisplay (level) {
+      if (level.level == 0) {
+        return 'Tour de magie'
+      } else if (level.level == 1) {
+        return level.level.toString() + '<sup>er</sup>'
+      }
+      return level.level.toString() + '<sup>ème</sup>'
+    },
   },
 
   mounted () {