From 72a29eaaf091bfbffcd6d0b7804a4775a7712a1a Mon Sep 17 00:00:00 2001
From: Maxime Moraine <mmoraine@bearstech.com>
Date: Fri, 15 May 2020 15:48:51 +0200
Subject: [PATCH] * Ajout de raccourcis sur la page d'accueil * Ajout de
 feedback au changement de page

---
 docs/.vuepress/config.js                      |  3 +
 docs/.vuepress/store/index.js                 | 10 ++-
 docs/.vuepress/theme/components/NavDrawer.vue | 59 +++++++++++++-
 docs/.vuepress/theme/components/Navbar.vue    |  6 ++
 .../global-components/MyMagicItemsButton.vue  | 12 +++
 .../global-components/MyMonstersButton.vue    | 12 +++
 .../global-components/MySpellsButton.vue      | 12 +++
 docs/.vuepress/theme/layouts/GlobalLayout.vue | 30 +++----
 .../theme/layouts/MagicItemLayout.vue         |  4 +-
 .../theme/layouts/MagicItemsLayout.vue        | 39 +++++++++-
 .../.vuepress/theme/layouts/MonsterLayout.vue |  4 +-
 .../theme/layouts/MonstersLayout.vue          | 65 +++++++++++++++-
 docs/.vuepress/theme/layouts/SpellLayout.vue  |  4 +-
 docs/.vuepress/theme/layouts/SpellsLayout.vue | 78 ++++++++++++++++++-
 docs/README.md                                | 25 +++---
 docs/creation-du-personnage/README.md         |  4 +-
 16 files changed, 325 insertions(+), 42 deletions(-)
 create mode 100644 docs/.vuepress/theme/global-components/MyMagicItemsButton.vue
 create mode 100644 docs/.vuepress/theme/global-components/MyMonstersButton.vue
 create mode 100644 docs/.vuepress/theme/global-components/MySpellsButton.vue

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 1723f59..94239b5 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -191,6 +191,9 @@ module.exports = {
     domain: 'https://staging.heros-et-dragons.fr',
     repository: 'https://github.com/em-squared/heros-et-dragons-drs',
     kofi: 'https://ko-fi.com/S6S410PB8',
+    patreon: 'https://www.patreon.com/em_squared',
+    forum: 'https://www.black-book-editions.fr/forums.php?board_id=115',
+    discord: 'https://discord.gg/mp6ECCs',
     primaryColor: '#563f5a', // Hero
     accentColor: '#9b1c47', // Dragon
     searchPlaceholder: 'Recherche',
diff --git a/docs/.vuepress/store/index.js b/docs/.vuepress/store/index.js
index 902069a..8407af8 100644
--- a/docs/.vuepress/store/index.js
+++ b/docs/.vuepress/store/index.js
@@ -24,13 +24,14 @@ export default new Vuex.Store({
   },
 
   state: {
-    loading: false,
+    loading: true,
     drawer: false,
     rightDrawer: false,
     hasRightDrawer: false,
     inRightDrawer: null,
     isThemeDark: false,
     isOpenAboutDialog: false,
+    isOpenSupportDialog: false,
   },
 
   getters: {
@@ -41,6 +42,7 @@ export default new Vuex.Store({
     inRightDrawer: state => state.inRightDrawer,
     isThemeDark: state => state.isThemeDark,
     isOpenAboutDialog: state => state.isOpenAboutDialog,
+    isOpenSupportDialog: state => state.isOpenSupportDialog,
   },
 
   actions: {
@@ -65,6 +67,9 @@ export default new Vuex.Store({
     isOpenAboutDialog: ({ commit }, payload) => {
       commit('setIsOpenAboutDialog', payload)
     },
+    isOpenSupportDialog: ({ commit }, payload) => {
+      commit('setIsOpenSupportDialog', payload)
+    },
   },
 
   mutations: {
@@ -91,5 +96,8 @@ export default new Vuex.Store({
     setIsOpenAboutDialog: (state, payload) => {
       state.isOpenAboutDialog = payload
     },
+    setIsOpenSupportDialog: (state, payload) => {
+      state.isOpenSupportDialog = payload
+    },
   },
 })
diff --git a/docs/.vuepress/theme/components/NavDrawer.vue b/docs/.vuepress/theme/components/NavDrawer.vue
index 7383a2a..66cc950 100644
--- a/docs/.vuepress/theme/components/NavDrawer.vue
+++ b/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)
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
index 3c8793e..d2cda48 100644
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/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)
diff --git a/docs/.vuepress/theme/global-components/MyMagicItemsButton.vue b/docs/.vuepress/theme/global-components/MyMagicItemsButton.vue
new file mode 100644
index 0000000..ea15ba9
--- /dev/null
+++ b/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>
diff --git a/docs/.vuepress/theme/global-components/MyMonstersButton.vue b/docs/.vuepress/theme/global-components/MyMonstersButton.vue
new file mode 100644
index 0000000..ca5999a
--- /dev/null
+++ b/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>
diff --git a/docs/.vuepress/theme/global-components/MySpellsButton.vue b/docs/.vuepress/theme/global-components/MySpellsButton.vue
new file mode 100644
index 0000000..e6419b4
--- /dev/null
+++ b/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>
diff --git a/docs/.vuepress/theme/layouts/GlobalLayout.vue b/docs/.vuepress/theme/layouts/GlobalLayout.vue
index 31eaf29..5439fa7 100644
--- a/docs/.vuepress/theme/layouts/GlobalLayout.vue
+++ b/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: {
diff --git a/docs/.vuepress/theme/layouts/MagicItemLayout.vue b/docs/.vuepress/theme/layouts/MagicItemLayout.vue
index 1718bad..f1b4caa 100644
--- a/docs/.vuepress/theme/layouts/MagicItemLayout.vue
+++ b/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
   },
 
diff --git a/docs/.vuepress/theme/layouts/MagicItemsLayout.vue b/docs/.vuepress/theme/layouts/MagicItemsLayout.vue
index 887161c..0644d44 100644
--- a/docs/.vuepress/theme/layouts/MagicItemsLayout.vue
+++ b/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
 
diff --git a/docs/.vuepress/theme/layouts/MonsterLayout.vue b/docs/.vuepress/theme/layouts/MonsterLayout.vue
index e24c8f3..61be079 100644
--- a/docs/.vuepress/theme/layouts/MonsterLayout.vue
+++ b/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
   },
 
diff --git a/docs/.vuepress/theme/layouts/MonstersLayout.vue b/docs/.vuepress/theme/layouts/MonstersLayout.vue
index bb15090..ee510f5 100644
--- a/docs/.vuepress/theme/layouts/MonstersLayout.vue
+++ b/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
 
diff --git a/docs/.vuepress/theme/layouts/SpellLayout.vue b/docs/.vuepress/theme/layouts/SpellLayout.vue
index c0edecc..46df725 100644
--- a/docs/.vuepress/theme/layouts/SpellLayout.vue
+++ b/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
   },
 
diff --git a/docs/.vuepress/theme/layouts/SpellsLayout.vue b/docs/.vuepress/theme/layouts/SpellsLayout.vue
index 78d2dd6..fad0c26 100644
--- a/docs/.vuepress/theme/layouts/SpellsLayout.vue
+++ b/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 () {
diff --git a/docs/README.md b/docs/README.md
index 702a002..4b95d3b 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -7,22 +7,23 @@ Bienvenue sur la nouvelle version du site Document de Référence Système pour
 
 Cette nouvelle version se veut plus réactive, plus fiable et plus aboutie que la précédente. Désormais, vous pouvez vous-même apporter des corrections aux erreurs potentielles. Chaque page dispose d'un lien vers sa source sur github, il vous suffira alors d'éditer la source directement et de soumettre une pull request.
 
-Voici un aperçu des améliorations apportées :
-
-* La fonction de recherche grandement changé. À présent, des résultats pertinents vous sont suggérés à mesure que vous tapez.
-* La recherche de sorts, monstres et objets magiques est plus réactive et les filtres plus précis.
-* L'interface a été soignée pour tous les formats d'écrans, de même que pour l'impression.
-
 ## Ressources utiles
-<v-btn color="primary" class="mb-4" href="https://www.black-book-editions.fr/file.php?id=178" link target="blank"><v-icon left>mdi-drama-masks</v-icon> Feuille de personnage PDF</v-btn>
-<v-btn color="primary" class="mb-4" href="https://www.black-book-editions.fr/forums.php?board_id=115" link target="blank"><v-icon left>mdi-forum</v-icon> Forum Héros & Dragons</v-btn>
+<v-btn color="#9b1c47" dark depressed class="mb-4" href="https://www.black-book-editions.fr/file.php?id=178" link target="blank"><v-icon left>mdi-drama-masks</v-icon> Feuille de personnage PDF</v-btn>
+<v-btn color="#9b1c47" dark depressed class="mb-4" href="https://www.black-book-editions.fr/forums.php?board_id=115" link target="blank"><v-icon left>mdi-forum</v-icon> Forum Héros & Dragons</v-btn>
+<v-btn color="#9b1c47" dark depressed class="mb-4" href="https://discord.gg/mp6ECCs" link target="blank"><v-icon left>mdi-discord</v-icon> Discord H&D DRS</v-btn>
+<v-btn color="#9b1c47" dark depressed class="mb-4" href="https://github.com/em-squared/heros-et-dragons-drs" link target="blank"><v-icon left>mdi-github</v-icon> Source Github</v-btn>
+
+## Bibliothèques
+<MySpellsButton />
+<MyMonstersButton />
+<MyMagicItemsButton />
 
 ## Outils de création
 <v-row>
-  <v-col><v-btn color="primary" block large to="/creation-de-sort/"><v-icon>mdi-creation</v-icon> Création de sort</v-btn></v-col>
-  <v-col><v-btn color="primary" block large to="/creation-de-monstre-pnj/"><v-icon>mdi-emoticon-devil</v-icon> Création de monstre/PNJ</v-btn></v-col>
+  <v-col><v-btn color="#9b1c47" dark depressed block large to="/creation-de-sort/"><v-icon>mdi-creation</v-icon> Création de sort</v-btn></v-col>
+  <v-col><v-btn color="#9b1c47" dark depressed block large to="/creation-de-monstre-pnj/"><v-icon>mdi-emoticon-devil</v-icon> Création de monstre/PNJ</v-btn></v-col>
 </v-row>
 <v-row>
-  <v-col><v-btn color="primary" block large to="/creation-d-objet-magique/"><v-icon>mdi-ring</v-icon> Création d'objet magique</v-btn></v-col>
-  <v-col><v-btn color="primary" block large to="/calculateur-de-caracteristiques/"><v-icon>mdi-calculator</v-icon> Calculateur de caractéristiques</v-btn></v-col>
+  <v-col><v-btn color="#9b1c47" dark depressed block large to="/creation-d-objet-magique/"><v-icon>mdi-ring</v-icon> Création d'objet magique</v-btn></v-col>
+  <v-col><v-btn color="#9b1c47" dark depressed block large to="/calculateur-de-caracteristiques/"><v-icon>mdi-calculator</v-icon> Calculateur de caractéristiques</v-btn></v-col>
 </v-row>
diff --git a/docs/creation-du-personnage/README.md b/docs/creation-du-personnage/README.md
index 43d4745..511fd91 100644
--- a/docs/creation-du-personnage/README.md
+++ b/docs/creation-du-personnage/README.md
@@ -3,7 +3,7 @@ title: Création du personnage
 description: Règles de création de personnage
 ---
 # Création du personnage
-<v-btn color="primary" class="mb-4 d-print-none" href="https://www.black-book-editions.fr/file.php?id=178" link target="_blank"><v-icon left>mdi-drama-masks</v-icon> Feuille de personnage PDF</v-btn>
+<v-btn color="#9b1c47" dark depressed class="mb-4 d-print-none" href="https://www.black-book-editions.fr/file.php?id=178" link target="_blank"><v-icon left>mdi-drama-masks</v-icon> Feuille de personnage PDF</v-btn>
 
 ## 1. Choisir une race
 
@@ -31,7 +31,7 @@ Si vous avez opté pour une classe de lanceur de sorts, vous disposez sans doute
 
 ## 4. Déterminer les caractéristiques
 
-<v-btn color="primary" class="mb-4 d-print-none" to="/calculateur-de-caracteristiques/" link><v-icon left>mdi-calculator</v-icon> Calculateur de caractéristiques</v-btn>
+<v-btn color="#9b1c47" dark depressed class="mb-4 d-print-none" to="/calculateur-de-caracteristiques/" link><v-icon left>mdi-calculator</v-icon> Calculateur de caractéristiques</v-btn>
 
 La **Force** mesure la puissance physique du personnage : sa taille, sa musculature, sa vigueur. Elle lui permet de mieux utiliser ses armes de corps-à-corps, que ce soit en termes d'attaque ou de dégâts, de soulever de lourdes charges, d'immobiliser plus aisément un adversaire, etc.