* Ajout de raccourcis sur la page d'accueil

* Ajout de feedback au changement de page

docs/.vuepress/theme/components/NavDrawer.vue

@@ -77,6 +77,26 @@
             </v-list-item-content>
           </v-list-item>
         </template>
+        <v-list-item v-if="$site.themeConfig.forum" link :href="$site.themeConfig.forum" target="_blank">
+          <v-list-item-icon>
+            <v-icon>mdi-forum</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              Forum
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item v-if="$site.themeConfig.discord" link :href="$site.themeConfig.discord" target="_blank">
+          <v-list-item-icon>
+            <v-icon>mdi-discord</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>
+              Discord
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
         <v-list-item v-if="$site.themeConfig.repository" link :href="$site.themeConfig.repository" target="_blank">
           <v-list-item-icon>
             <v-icon>mdi-github</v-icon>
@@ -87,7 +107,7 @@
             </v-list-item-title>
           </v-list-item-content>
         </v-list-item>
-        <v-list-item v-if="$site.themeConfig.kofi" link :href="$site.themeConfig.kofi" target="_blank">
+        <v-list-item v-if="$site.themeConfig.kofi && $site.themeConfig.patreon" @click.stop="toggleSupportDialog">
           <v-list-item-icon>
             <v-icon>mdi-glass-mug-variant</v-icon>
           </v-list-item-icon>
@@ -132,6 +152,14 @@
           <p><strong><em>Héros & Dragons</em></strong> est un jeu de rôle basé sur les mécaniques de l’<a href="/licence-ogl">OGL5</a> et développé par les talents de la rédaction de <em><a href="https://www.black-book-editions.fr/catalogue.php?id=40" target="_blank">Casus Belli</a></em>, le magazine de référence des jeux de rôle.</p>
           <p>Les textes de cette documentation appartiennent à <a href="https://www.black-book-editions.fr/catalogue.php?id=365" target="_blank">Black Book Éditions</a>.</p>
           <p>Casus Belli et Black Book Éditions sont des marques déposées par <a href="https://www.black-book-editions.fr/" target="_blank">Black Book Éditions</a>. Tous droits réservés.</p>
+          <v-row v-if="$site.themeConfig.kofi && $site.themeConfig.patreon">
+            <v-col class="text-center">
+              <v-btn depressed dark color="#f96854" link :href="$site.themeConfig.patreon" target="_blank"><v-icon class="mr-2">mdi-patreon</v-icon>Patreon</v-btn>
+            </v-col>
+            <v-col class="text-center">
+              <v-btn depressed dark color="#29abe0" link :href="$site.themeConfig.kofi" target="_blank"><v-icon class="mr-2">mdi-coffee</v-icon>Ko-fi</v-btn>
+            </v-col>
+          </v-row>
         </v-card-text>
 
         <v-card-actions>
@@ -139,6 +167,29 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <v-dialog v-model="isOpenSupportDialog" @click:outside="toggleSupportDialog" max-width="600">
+      <v-card>
+        <v-card-title class="headline">Encouragez le développement</v-card-title>
+
+        <v-card-text>
+          <p>Vous souhaitez participer aux frais d'hébergement ? Ou vous voulez encourager le développement de la plateforme ?</p>
+          <p>Votre participation sera appréciée !</p>
+          <v-row v-if="$site.themeConfig.kofi && $site.themeConfig.patreon">
+            <v-col class="text-center">
+              <v-btn depressed dark color="#f96854" link :href="$site.themeConfig.patreon" target="_blank"><v-icon class="mr-2">mdi-patreon</v-icon>Patreon</v-btn>
+            </v-col>
+            <v-col class="text-center">
+              <v-btn depressed dark color="#29abe0" link :href="$site.themeConfig.kofi" target="_blank"><v-icon class="mr-2">mdi-coffee</v-icon>Ko-fi</v-btn>
+            </v-col>
+          </v-row>
+        </v-card-text>
+
+        <v-card-actions>
+          <v-btn color="primary" text @click="toggleSupportDialog">Fermer</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 
@@ -163,6 +214,9 @@ export default {
     },
     isOpenAboutDialog () {
       return this.$store.state.isOpenAboutDialog
+    },
+    isOpenSupportDialog () {
+      return this.$store.state.isOpenSupportDialog
     }
   },
 
@@ -207,6 +261,9 @@ export default {
     toggleAboutDialog () {
       this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
     },
+    toggleSupportDialog () {
+      this.$store.commit('setIsOpenSupportDialog', !this.$store.state.isOpenSupportDialog)
+    },
     setIsThemeDark () {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
       this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)

docs/.vuepress/theme/components/Navbar.vue

@@ -12,6 +12,9 @@
     <v-btn class="hidden-sm-and-down" @click.stop="toggleAboutDialog" icon>
       <v-icon>mdi-information</v-icon>
     </v-btn>
+    <v-btn class="hidden-sm-and-down" @click.stop="toggleSupportDialog" icon>
+      <v-icon>mdi-glass-mug-variant</v-icon>
+    </v-btn>
     <v-btn class="ml-5" @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
       <v-icon>{{ rightDrawerIcon }}</v-icon>
     </v-btn>
@@ -71,6 +74,9 @@ export default {
     toggleAboutDialog () {
       this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
     },
+    toggleSupportDialog () {
+      this.$store.commit('setIsOpenSupportDialog', !this.$store.state.isOpenSupportDialog)
+    },
     setIsThemeDark () {
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark
       this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)

docs/.vuepress/theme/global-components/MyMagicItemsButton.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques<v-chip v-if="$store.state.myMagicItems.magicItems.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.myMagicItems.magicItems.length }}</v-chip></v-btn>
+</template>
+
+<script>
+export default {
+  name: 'MyMagicItemsButton'
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/global-components/MyMonstersButton.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire<v-chip v-if="$store.state.myMonsters.monsters.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.myMonsters.monsters.length }}</v-chip></v-btn>
+</template>
+
+<script>
+export default {
+  name: 'MyMontersButton'
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/global-components/MySpellsButton.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire<v-chip v-if="$store.state.mySpells.spells.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.mySpells.spells.length }}</v-chip></v-btn>
+</template>
+
+<script>
+export default {
+  name: 'MySpellsButton'
+}
+</script>
+
+<style lang="scss">
+</style>

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 () {