spell + filtering + urlParams

docs/.vuepress/config.js

@@ -9,6 +9,8 @@ module.exports = {
           {
             // Unique ID of current classification
             id: 'spell',
+            // Meta title for spell list page
+            title: 'Grimoire',
             // Target directory
             dirname: '_spells',
             // Path of the `entry page` (or `list page`)
@@ -16,6 +18,12 @@ module.exports = {
             layout: 'SpellsLayout',
             itemLayout: 'SpellLayout',
             itemPermalink: '/grimoire/:slug',
+            pagination: {
+              lengthPerPage: 1000,
+              sorter: (prev, next) => {
+                return prev.path - next.path
+              },
+            },
           },
         ],
       }

docs/.vuepress/store/index.js

@@ -1,23 +1,56 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import spellFilters from './modules/spellFilters'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  modules: {
+    spellFilters
+  },
+
   state: {
     drawer: true,
+    rightDrawer: false,
+    hasRightDrawer: false,
+    inRightSidebar: null,
   },
+
   getters: {
     drawer: state => state.drawer,
+    rightDrawer: state => state.rightDrawer,
+    hasRightDrawer: state => state.hasRightDrawer,
+    inRightDrawer: state => state.inRightDrawer,
   },
+
   actions: {
     updateDrawer: ({ commit }, payload) => {
       commit('setDrawer', payload)
-    }
+    },
+    updateRightDrawer: ({ commit }, payload) => {
+      commit('setRightDrawer', payload)
+    },
+    updateHasRightDrawer: ({ commit }, payload) => {
+      commit('setHasRightDrawer', payload)
+    },
+    updateInRightDrawer: ({ commit }, payload) => {
+      commit('setInRightDrawer', payload)
+    },
   },
+  
   mutations: {
     setDrawer: (state, payload) => {
       state.drawer = payload
     },
+    setRightDrawer: (state, payload) => {
+      state.rightDrawer = payload
+    },
+    setHasRightDrawer: (state, payload) => {
+      state.hasRightDrawer = payload
+    },
+    setInRightDrawer: (state, payload) => {
+      state.inRightDrawer = payload
+    },
   },
 })

docs/.vuepress/store/modules/spellFilters.js

@@ -0,0 +1,168 @@
+import {setUrlParams} from '@theme/util/filterHelpers'
+
+export default {
+  namespaced: true,
+
+  state: {
+    search: '',
+    mustBeConcentration: undefined,
+    mustBeRitual: undefined,
+    classes: [
+      { label: "Barde", value: false },
+      { label: "Clerc", value: false },
+      { label: "Druide", value: false },
+      { label: "Ensorceleur/Sorcelame", value: false },
+      { label: "Magicien", value: false },
+      { label: "Ombrelame", value: false },
+      { label: "Paladin", value: false },
+      { label: "Rôdeur", value: false },
+      { label: "Sorcier", value: false },
+    ],
+    levels: [
+      { level: 0, value: false },
+      { level: 1, value: false },
+      { level: 2, value: false },
+      { level: 3, value: false },
+      { level: 4, value: false },
+      { level: 5, value: false },
+      { level: 6, value: false },
+      { level: 7, value: false },
+      { level: 8, value: false },
+      { level: 9, value: false },
+    ],
+    schools: [
+      { label: "Abjuration", value: false },
+      { label: "Enchantement", value: false },
+      { label: "Divination", value: false },
+      { label: "Évocation", value: false },
+      { label: "Illusion", value: false },
+      { label: "Invocation", value: false },
+      { label: "Nécromancie", value: false },
+      { label: "Transmutation", value: false },
+    ],
+    componentVerbal: undefined,
+    componentSomatic: undefined,
+    componentMaterial: undefined,
+  },
+
+  getters: {
+    search: state => state.search,
+    mustBeConcentration: state => state.mustBeConcentration,
+    mustBeRitual: state => state.mustBeRitual,
+    classes: state => state.classes,
+    levels: state => state.levels,
+    schools: state => state.schools,
+    componentVerbal: state => state.componentVerbal,
+    componentSomatic: state => state.componentSomatic,
+    componentMaterial: state => state.componentMaterial,
+  },
+
+  actions: {
+    updateSearch: ({ commit }, payload) => {
+      commit('setSearch', payload)
+    },
+    updateMustBeConcentration: ({ commit }, payload) => {
+      commit('setMustBeConcentration', payload)
+    },
+    updateMustBeRitual: ({ commit }, payload) => {
+      commit('setMustBeRitual', payload)
+    },
+    updateClasses: ({ commit }, payload) => {
+      commit('setClasses', payload)
+    },
+    resetClasses: ({ commit }) => {
+      commit('resetClasses')
+    },
+    updateLevels: ({ commit }, payload) => {
+      commit('setLevels', payload)
+    },
+    resetLevels: ({ commit }) => {
+      commit('resetLevels')
+    },
+    updateSchools: ({ commit }, payload) => {
+      commit('setSchools', payload)
+    },
+    resetSchools: ({ commit }) => {
+      commit('resetSchools')
+    },
+    updateComponentVerbal: ({ commit }, payload) => {
+      commit('setComponentVerbal', payload)
+    },
+    updateComponentSomatic: ({ commit }, payload) => {
+      commit('setComponentSomatic', payload)
+    },
+    updateComponentMaterial: ({ commit }, payload) => {
+      commit('setComponentMaterial', payload)
+    },
+  },
+
+  mutations: {
+    setSearch: (state, payload) => {
+      state.search = payload
+    },
+    setMustBeConcentration: (state, payload) => {
+      state.mustBeConcentration = payload
+    },
+    setMustBeRitual: (state, payload) => {
+      state.mustBeRitual = payload
+    },
+    setClasses: (state, payload) => {
+      state.classes = payload
+    },
+    resetClasses: (state) => {
+      state.classes = [
+        { label: "Barde", value: false },
+        { label: "Clerc", value: false },
+        { label: "Druide", value: false },
+        { label: "Ensorceleur/Sorcelame", value: false },
+        { label: "Magicien", value: false },
+        { label: "Ombrelame", value: false },
+        { label: "Paladin", value: false },
+        { label: "Rôdeur", value: false },
+        { label: "Sorcier", value: false },
+      ]
+    },
+    setLevels: (state, payload) => {
+      state.levels = payload
+    },
+    resetLevels: (state) => {
+      state.levels = [
+        { level: 0, value: false },
+        { level: 1, value: false },
+        { level: 2, value: false },
+        { level: 3, value: false },
+        { level: 4, value: false },
+        { level: 5, value: false },
+        { level: 6, value: false },
+        { level: 7, value: false },
+        { level: 8, value: false },
+        { level: 9, value: false },
+      ]
+    },
+    setSchools: (state, payload) => {
+      state.schools = payload
+    },
+    resetSchools: (state) => {
+      state.schools = [
+        { label: "Abjuration", value: false },
+        { label: "Enchantement", value: false },
+        { label: "Divination", value: false },
+        { label: "Évocation", value: false },
+        { label: "Illusion", value: false },
+        { label: "Invocation", value: false },
+        { label: "Nécromancie", value: false },
+        { label: "Transmutation", value: false },
+      ]
+    },
+    setComponentVerbal: (state, payload) => {
+      state.componentVerbal = payload
+    },
+    setComponentSomatic: (state, payload) => {
+      state.componentSomatic = payload
+    },
+    setComponentMaterial: (state, payload) => {
+      state.componentMaterial = payload
+    },
+  }
+
+}

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

@@ -1,17 +1,5 @@
 <template>
   <v-navigation-drawer class="main-drawer" v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app>
-    <!-- <v-treeview
-        item-key="path"
-        item-text="title"
-        :items="items"
-        dense
-        open-all
-        hoverable
-        open-on-click
-        activatable
-        @update:active="updateActive"
-      >
-      </v-treeview> -->
     <v-list dense nav>
       <template v-for="item in items">
         <v-list-group v-if="item.children" :key="item.title" v-model="item.expanded" :color="$site.themeConfig.accentColor">
@@ -87,12 +75,6 @@ export default {
   },
 
   methods: {
-    updateActive (active) {
-      console.log(active)
-      if (active[0] == undefined) return
-      const path = active[0].replace('.html', '')
-      this.$router.push(path)
-    }
   }
 }
 </script>
@@ -123,11 +105,4 @@ export default {
     }
   }
 }
-
-
-
-// Case of treeview
-.v-treeview-node__level {
-  width: 12px;
-}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app :color="$site.themeConfig.primaryColor" dark>
+  <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" :clipped-right="$vuetify.breakpoint.lgAndUp" app :color="$site.themeConfig.primaryColor" dark>
     <v-app-bar-nav-icon @click.stop="setDrawer" />
     <v-toolbar-title class="ml-0 mr-4 pl-4">
       <v-btn class="hidden-sm-and-down site-title" text link :to="{ path: '/' }">{{ $site.title }}</v-btn>
@@ -7,6 +7,9 @@
     <SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
     <v-spacer />
+    <v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
+      <v-icon>mdi-format-list-bulleted</v-icon>
+    </v-btn>
   </v-app-bar>
 </template>
 
@@ -30,12 +33,21 @@ export default {
   computed: {
     drawer() {
       return this.$store.state.drawer
+    },
+    rightDrawer() {
+      return this.$store.state.rightDrawer
+    },
+    hasRightDrawer() {
+      return this.$store.state.hasRightDrawer
     }
   },
 
   methods: {
     setDrawer () {
       this.$store.commit('setDrawer', !this.$store.state.drawer)
+    },
+    setRightDrawer () {
+      this.$store.commit('setRightDrawer', !this.$store.state.rightDrawer)
     }
   }
 }

docs/.vuepress/theme/components/RightDrawer.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-navigation-drawer class="right-drawer" v-model="rightDrawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app right>
+    <SpellFilters v-if="hasSpellFilters" />
+  </v-navigation-drawer>
+</template>
+
+<script>
+import SpellFilters from '@theme/components/SpellFilters.vue'
+
+export default {
+  name: 'RightDrawer',
+
+  components: {
+    SpellFilters
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  computed: {
+    rightDrawer: {
+      get () {
+        return this.$store.state.rightDrawer
+      },
+      set (newValue) {
+        this.$store.commit('setRightDrawer', newValue)
+      }
+    },
+    hasSpellFilters () {
+      return this.$store.state.inRightDrawer == 'spellFilters'
+    }
+  },
+
+  mounted () {
+
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/components/Spell.vue

@@ -2,8 +2,26 @@
   <main class="page">
     <div class="theme-default-content">
       <h1>{{ $page.title }}</h1>
+      <div class="spell-details">
+        <div class="spell-school-level">
+          <template v-if="$page.frontmatter.level != 0">{{ $page.frontmatter.school }} de niveau {{ $page.frontmatter.level }}</template>
+          <template v-else>{{ $page.frontmatter.school }}, Tour de magie</template>
+          <template v-if="$page.frontmatter.ritual"> (rituel)</template>
+        </div>
+        <div class="spell-casting-time"><strong>Temps d'incantation</strong> : {{ $page.frontmatter.casting_time }}</div>
+        <div class="spell-range"><strong>Portée</strong> : {{ $page.frontmatter.range }}</div>
+        <div class="spell-components"><strong>Composantes</strong> :
+          <template v-if="$page.frontmatter.components.verbal">V</template><template v-if="$page.frontmatter.components.somatic || $page.frontmatter.components.material">,</template>
+          <template v-if="$page.frontmatter.components.somatic">S</template><template v-if="$page.frontmatter.components.material">,</template>
+          <template v-if="$page.frontmatter.components.material">M</template>
+          <template v-if="$page.frontmatter.components.materials">({{$page.frontmatter.components.materials}})</template>
+        </div>
+        <div class="spell-duration"><strong>Durée</strong> : <span v-if="$page.frontmatter.concentration">concentration, </span>{{ $page.frontmatter.duration }}</div>
+        <div class="spell-classes"><strong>Classe</strong> : <span v-for="(c, idx) in $page.frontmatter.classes" :key="idx">{{c}}<template v-if="idx != $page.frontmatter.classes.length-1">, </template></span></div>
+      </div>
     </div>
-    <Content />
+
+    <Content class="mt-4" />
 
   </main>
 </template>

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

@@ -0,0 +1,290 @@
+<template>
+  <div class="spell-filters pa-1">
+
+    <v-text-field
+      class="mb-1"
+      v-model="search"
+      label="Filtrer"
+      single-line
+      hide-details
+      :color="$site.themeConfig.accentColor"
+      ></v-text-field>
+
+    <v-expansion-panels multiple flat hover v-model="panels">
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Classes</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetClasses" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(c, idx) in classes" v-model="c.value" :label="c.label" dense class="ma-0" @change="switchClass" :color="$site.themeConfig.accentColor"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Niveaux de sorts</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetLevels" dark>Réinitialiser</v-btn>
+          <v-switch v-for="level in levels" v-model="level.value" dense class="ma-0" @change="switchLevel" :color="$site.themeConfig.accentColor">
+            <template v-slot:label>
+              <span v-html="levelDisplay(level)"></span>
+            </template>
+          </v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Écoles de magie</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small :color="$site.themeConfig.primaryColor" @click="resetSchools" dark>Réinitialiser</v-btn>
+          <v-switch v-for="school in schools" v-model="school.value" :label="school.label" dense class="ma-0" @change="switchSchool" :color="$site.themeConfig.accentColor"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Composantes d'incantation</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <div class="d-flex mt-2 mb-4">
+            <v-btn-toggle v-model="componentVerbal" dark>
+              <v-btn :value="true" small :color="setColor(componentVerbal, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(componentVerbal, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Verbale</p>
+          </div>
+
+          <div class="d-flex mb-4">
+            <v-btn-toggle v-model="componentSomatic" dark>
+              <v-btn :value="true" small :color="setColor(componentSomatic, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(componentSomatic, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Somatique</p>
+          </div>
+
+          <div class="d-flex">
+            <v-btn-toggle v-model="componentMaterial" dark>
+              <v-btn :value="true" small :color="setColor(componentMaterial, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(componentMaterial, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Matérielle</p>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Concentration et Rituel</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <div class="d-flex mt-2 mb-4">
+            <v-btn-toggle v-model="mustBeConcentration" dark>
+              <v-btn :value="true" small :color="setColor(mustBeConcentration, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(mustBeConcentration, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Concentration</p>
+          </div>
+
+          <div class="d-flex">
+            <v-btn-toggle v-model="mustBeRitual" dark>
+              <v-btn :value="true" small :color="setColor(mustBeRitual, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(mustBeRitual, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Rituel</p>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+    </v-expansion-panels>
+
+  </div>
+</template>
+
+<script>
+// import { mapMutations } from 'vuex'
+import { setUrlParams } from '@theme/util/filterHelpers'
+
+export default {
+  name: 'SpellFilters',
+
+  data () {
+    return {
+      panels: [],
+    }
+  },
+
+  computed: {
+    search: {
+      get () {
+        return this.$store.state.spellFilters.search
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setSearch', newValue)
+      }
+    },
+
+    classes: {
+      get () {
+        return this.$store.state.spellFilters.classes
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setClasses', newValue)
+      }
+    },
+
+    levels: {
+      get () {
+        return this.$store.state.spellFilters.levels
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setLevels', newValue)
+      }
+    },
+
+    schools: {
+      get () {
+        return this.$store.state.spellFilters.schools
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setSchools', newValue)
+      }
+    },
+
+    componentVerbal: {
+      get () {
+        return this.$store.state.spellFilters.componentVerbal
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setComponentVerbal', newValue)
+      }
+    },
+
+    componentSomatic: {
+      get () {
+        return this.$store.state.spellFilters.componentSomatic
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setComponentSomatic', newValue)
+      }
+    },
+
+    componentMaterial: {
+      get () {
+        return this.$store.state.spellFilters.componentMaterial
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setComponentMaterial', newValue)
+      }
+    },
+
+    mustBeConcentration: {
+      get () {
+        return this.$store.state.spellFilters.mustBeConcentration
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setMustBeConcentration', newValue)
+      }
+    },
+
+    mustBeRitual: {
+      get () {
+        return this.$store.state.spellFilters.mustBeRitual
+      },
+      set (newValue) {
+        this.$store.commit('spellFilters/setMustBeRitual', newValue)
+      }
+    }
+  },
+
+  methods: {
+
+    switchClass () {
+      let list = []
+      for (var i = 0; i < this.classes.length; i++) {
+        if (this.classes[i].value) {
+          list.push(this.classes[i].label)
+        }
+      }
+      setUrlParams('classes', list)
+    },
+
+    switchSchool () {
+      let list = []
+      for (var i = 0; i < this.schools.length; i++) {
+        if (this.schools[i].value) {
+          list.push(this.schools[i].label)
+        }
+      }
+      setUrlParams('ecoles', list)
+    },
+
+    switchLevel () {
+      let list = []
+      for (var i = 0; i < this.levels.length; i++) {
+        if (this.levels[i].value) {
+          list.push(this.levels[i].level)
+        }
+      }
+      setUrlParams('niveaux', list)
+    },
+
+    isSchool (school) {
+      return this.schools.indexOf(school) > -1
+    },
+
+    setColor (value, compare, color) {
+      if (value === compare) {
+        return color
+      }
+      return this.$site.themeConfig.primaryColor
+    },
+
+    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>'
+    },
+
+    resetClasses () {
+      this.$store.commit('spellFilters/resetClasses')
+      this.switchClass()
+    },
+
+    resetLevels () {
+      this.$store.commit('spellFilters/resetLevels')
+      this.switchLevel()
+    },
+
+    resetSchools () {
+      this.$store.commit('spellFilters/resetSchools')
+      this.switchSchool()
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -2,11 +2,12 @@
   <v-app class="srd">
 
     <NavDrawer />
+    <RightDrawer v-if="hasRightDrawer" />
 
     <Navbar />
 
     <v-content>
-      <v-container class="fill-height" fluid>
+      <v-container fluid>
         <v-row align="start" justify="center">
           <v-col cols="12">
             <DefaultGlobalLayout/>
@@ -21,6 +22,7 @@
 import GlobalLayout from '@app/components/GlobalLayout.vue'
 import Navbar from '@theme/components/Navbar.vue'
 import NavDrawer from '@theme/components/NavDrawer.vue'
+import RightDrawer from '@theme/components/RightDrawer.vue'
 
 export default {
   name: 'GlobalLayout',
@@ -28,47 +30,19 @@ export default {
   components: {
     DefaultGlobalLayout: GlobalLayout,
     Navbar,
-    NavDrawer
+    NavDrawer,
+    RightDrawer
   },
 
   data () {
     return {
-      items: [
-        { icon: 'mdi-contacts', text: 'Contacts' },
-        { icon: 'mdi-history', text: 'Frequently contacted' },
-        { icon: 'mdi-content-copy', text: 'Duplicates' },
-        {
-          icon: 'mdi-chevron-up',
-          'icon-alt': 'mdi-chevron-down',
-          text: 'Labels',
-          model: true,
-          children: [
-            { icon: 'mdi-plus', text: 'Create label' },
-          ],
-        },
-        {
-          icon: 'mdi-chevron-up',
-          'icon-alt': 'mdi-chevron-down',
-          text: 'More',
-          model: false,
-          children: [
-            { text: 'Import' },
-            { text: 'Export' },
-            { text: 'Print' },
-            { text: 'Undo changes' },
-            { text: 'Other contacts' },
-          ],
-        },
-        { icon: 'mdi-settings', text: 'Settings' },
-        { icon: 'mdi-message', text: 'Send feedback' },
-        { icon: 'mdi-help-circle', text: 'Help' },
-        { icon: 'mdi-cellphone-link', text: 'App downloads' },
-        { icon: 'mdi-keyboard', text: 'Go to the old version' },
-      ],
     }
   },
 
   computed: {
+    hasRightDrawer() {
+      return this.$store.state.hasRightDrawer
+    }
   },
 
   mounted () {

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

@@ -1,17 +1,166 @@
 <template>
   <div class="spells">
-    <div v-for="page in pages" :key="page.key">
-      {{ page.title }}
-    </div>
+
+    <v-data-table
+      :headers="headers"
+      :items="spells"
+      item-key="key"
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="sortDesc"
+      :search="search"
+      disable-pagination
+      hide-default-footer
+    >
+
+      <template v-slot:item.title="{ item }">
+        <router-link :to="{ path: item.path }">{{ item.title }}</router-link>
+      </template>
+
+      <template v-slot:item.frontmatter.level="{ item }">
+        <span v-if="item.frontmatter.level == 0">Tour de magie</span>
+        <span v-else>{{ item.frontmatter.level }}</span>
+      </template>
+
+      <template v-slot:item.frontmatter.concentration="{ item }">
+        <span v-if="item.frontmatter.concentration">concentration</span>
+      </template>
+
+      <template v-slot:item.frontmatter.ritual="{ item }">
+        <span v-if="item.frontmatter.ritual">rituel</span>
+      </template>
+
+      <template v-slot:item.frontmatter.components="{ item }">
+        <template v-if="item.frontmatter.components.verbal">V</template><template v-if="item.frontmatter.components.somatic || item.frontmatter.components.material">,</template>
+        <template v-if="item.frontmatter.components.somatic">S</template><template v-if="item.frontmatter.components.material">,</template>
+        <template v-if="item.frontmatter.components.material">M</template>
+      </template>
+
+      <template v-slot:item.frontmatter.classes="{ item }">
+        <span v-for="(c, idx) in item.frontmatter.classes" :key="idx">{{c}}<template v-if="idx != item.frontmatter.classes.length-1">, </template></span>
+      </template>
+
+    </v-data-table>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  computed: {
-    pages() {
-      return this.$pagination.pages
+  data () {
+    return {
+      sortBy: 'title',
+      sortDesc: false,
+      headers: [
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        { text: "Niveau", align: 'center', sortable: true, value: 'frontmatter.level' },
+        { text: "École", align: 'start', sortable: false, value: 'frontmatter.school' },
+        { text: "Temps d'incantation", align: 'start', sortable: false, value: 'frontmatter.casting_time' },
+        { text: "Durée", align: 'start', sortable: false, value: 'frontmatter.duration' },
+        { text: "Concentration", align: 'center', sortable: false, value: 'frontmatter.concentration' },
+        { text: "Rituel", align: 'center', sortable: false, value: 'frontmatter.ritual' },
+        { text: "Composantes", align: 'center', sortable: false, value: 'frontmatter.components' },
+        { text: "Classes", align: 'start', sortable: false, value: 'frontmatter.classes' }
+      ],
     }
+  },
+
+  computed: {
+    ...mapState({
+      search: state => state.spellFilters.search,
+      classes: state => state.spellFilters.classes,
+      levels: state => state.spellFilters.levels,
+      schools: state => state.spellFilters.schools,
+      mustBeConcentration: state => state.spellFilters.mustBeConcentration,
+      mustBeRitual: state => state.spellFilters.mustBeRitual,
+      componentVerbal: state => state.spellFilters.componentVerbal,
+      componentSomatic: state => state.spellFilters.componentSomatic,
+      componentMaterial: state => state.spellFilters.componentMaterial,
+    }),
+
+    spells() {
+      let results = this.$pagination.pages
+
+      // Filter concetration
+      if (this.mustBeConcentration !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.concentration === this.mustBeConcentration
+        })
+      }
+
+      // Filter ritual
+      if (this.mustBeRitual !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.ritual === this.mustBeRitual
+        })
+      }
+
+      // Filter components
+      if (this.componentVerbal !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.components.verbal === this.componentVerbal
+        })
+      }
+      if (this.componentSomatic !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.components.somatic === this.componentSomatic
+        })
+      }
+      if (this.componentMaterial !== undefined) {
+        results = results.filter(item => {
+          return item.frontmatter.components.material === this.componentMaterial
+        })
+      }
+
+      // Filter classes
+      let selectedClasses = []
+      for (var i = 0; i < this.classes.length; i++) {
+        if (this.classes[i].value) {
+          selectedClasses.push(this.classes[i].label)
+        }
+      }
+      if (selectedClasses.length) {
+        results = results.filter(item => {
+          for (var i = 0; i < item.frontmatter.classes.length; i++) {
+            return selectedClasses.indexOf(item.frontmatter.classes[i]) > -1
+          }
+        })
+      }
+
+      // Filter levels
+      let selectedLevels = []
+      for (var i = 0; i < this.levels.length; i++) {
+        if (this.levels[i].value) {
+          selectedLevels.push(this.levels[i].level)
+        }
+      }
+      if (selectedLevels.length) {
+        results = results.filter(item => {
+          return selectedLevels.indexOf(item.frontmatter.level) > -1
+        })
+      }
+
+      // Filter schools
+      let selectedSchools = []
+      for (var i = 0; i < this.schools.length; i++) {
+        if (this.schools[i].value) {
+          selectedSchools.push(this.schools[i].label)
+        }
+      }
+      if (selectedSchools.length) {
+        results = results.filter(item => {
+          return selectedSchools.indexOf(item.frontmatter.school) > -1
+        })
+      }
+
+      return results
+    }
+  },
+
+  mounted () {
+    this.$store.commit('setHasRightDrawer', true)
+    this.$store.commit('setRightDrawer', true)
+    this.$store.commit('setInRightDrawer', 'spellFilters')
   }
 }
 </script>

docs/.vuepress/theme/styles/_anchors.scss

@@ -5,6 +5,9 @@ h1 {
 }
 
 h2, h3, h4, h5, h6 {
+  padding-top: 64px;
+  margin-top: -64px;
+  
   a.header-anchor {
     display: none;
   }

docs/.vuepress/theme/styles/_tables.scss

@@ -0,0 +1,7 @@
+.v-data-table {
+  &.width-auto {
+    table {
+      width: auto;
+    }
+  }
+}

docs/.vuepress/theme/styles/main.scss

@@ -1,5 +1,6 @@
 @import "colors";
 @import "anchors";
+@import "tables";
 
 .srd {
   .content {

docs/.vuepress/theme/util/filterHelpers.js

@@ -0,0 +1,52 @@
+export function setUrlParams (urlParam, list) {
+  var params = ""
+  for (var i = 0; i < list.length; i++) {
+    if (params !== "") {
+      params = params + ","
+    }
+    params = params + list[i]
+  }
+  if (list.length == 0) {
+    params = "null"
+  }
+  history.replaceState(null, null, setUrlParameter(window.location.href, urlParam, params))
+}
+
+export function setUrlParameter (url, key, value) {
+    var key = encodeURIComponent(key),
+        value = encodeURIComponent(value);
+
+    var baseUrl = url.split('?')[0],
+        newParam = key + '=' + value,
+        params = '?' + newParam;
+
+    let urlQueryString = '';
+    if (url.split('?')[1] == undefined){ // if there are no query strings, make urlQueryString empty
+    } else {
+        urlQueryString = '?' + url.split('?')[1];
+    }
+
+    // If the "search" string exists, then build params from it
+    if (urlQueryString) {
+        var updateRegex = new RegExp('([\?&])' + key + '[^&]*');
+        var removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');
+
+        if (typeof value === 'undefined' || value === null || value === "") { // Remove param if value is empty
+            params = urlQueryString.replace(removeRegex, "$1");
+            params = params.replace(/[&;]$/, "");
+
+        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it
+            params = urlQueryString.replace(updateRegex, "$1" + newParam);
+
+        } else if (urlQueryString=="") { // If there are no query strings
+            params = '?' + newParam;
+        } else { // Otherwise, add it to end of query string
+            params = urlQueryString + '&' + newParam;
+        }
+    }
+
+    // no parameter was set so we don't need the question mark
+    params = params === '?' ? '' : params;
+
+    return baseUrl + params;
+}