intégration des objets magiques + filtres

docs/.vuepress/config.js

@@ -25,6 +25,25 @@ module.exports = {
               },
             },
           },
+          {
+            // Unique ID of current classification
+            id: 'magicitem',
+            // Meta title for spell list page
+            title: 'Liste des objets magiques',
+            // Target directory
+            dirname: '_magicitems',
+            // Path of the `entry page` (or `list page`)
+            path: '/liste-objets-magiques/',
+            layout: 'MagicItemsLayout',
+            itemLayout: 'MagicItemLayout',
+            itemPermalink: '/liste-objets-magiques/:slug',
+            pagination: {
+              lengthPerPage: 1000,
+              sorter: (prev, next) => {
+                return prev.path - next.path
+              },
+            },
+          },
         ],
       }
     ],
@@ -350,6 +369,10 @@ module.exports = {
             title: "Objets magiques intelligents",
             path: '/objets-magiques-intelligents/'
           },
+          {
+            title: "Liste des objets magiques",
+            path: '/liste-objets-magiques/'
+          },
           {
             title: "Les pièges",
             path: '/pieges/'

docs/.vuepress/store/index.js

@@ -2,12 +2,14 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import spellFilters from './modules/spellFilters'
+import magicItemFilters from './modules/magicItemFilters'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    spellFilters
+    spellFilters,
+    magicItemFilters
   },
 
   state: {

docs/.vuepress/store/modules/magicItemFilters.js

@@ -0,0 +1,134 @@
+import {setUrlParams} from '@theme/util/filterHelpers'
+
+export default {
+  namespaced: true,
+
+  state: {
+    search: '',
+    types: [
+      { label: "Anneau", value: false },
+      { label: "Arme", value: false },
+      { label: "Armure", value: false },
+      { label: "Baguette", value: false },
+      { label: "Bâton", value: false },
+      { label: "Objet merveilleux", value: false },
+      { label: "Parchemin", value: false },
+      { label: "Potion", value: false },
+      { label: "Sceptre", value: false },
+    ],
+    rarities: [
+      { label: "Courant", value: false },
+      { label: "Peu courant", value: false },
+      { label: "Rare", value: false },
+      { label: "Très rare", value: false },
+      { label: "Légendaire", value: false },
+      { label: "Artefact", value: false },
+    ],
+    hasAttunement: undefined,
+  },
+
+  getters: {
+    search: state => state.search,
+    types: state => state.types,
+    rarities: state => state.rarities,
+    hasAttunement: state => state.hasAttunement,
+  },
+
+  actions: {
+    reset: ({ commit }) => {
+      commit('resetSearch')
+      commit('resetTypes')
+      commit('resetRarities')
+      commit('resetHasAttunement')
+    },
+    updateSearch: ({ commit }, payload) => {
+      commit('setSearch', payload)
+    },
+    updateTypes: ({ commit }, payload) => {
+      commit('setTypes', payload)
+    },
+    updateTypesFromList: ({ commit }, payload) => {
+      commit('setTypesFromList', payload)
+    },
+    resetTypes: ({ commit }) => {
+      commit('resetTypes')
+    },
+    updateRarities: ({ commit }, payload) => {
+      commit('setRarities', payload)
+    },
+    updateRaritiesFromLst: ({ commit }, payload) => {
+      commit('setRaritiesFromList', payload)
+    },
+    resetRarities: ({ commit }) => {
+      commit('resetRarities')
+    },
+    updateHasAttunement: ({ commit }, payload) => {
+      commit('setHasAttunement', payload)
+    },
+  },
+
+  mutations: {
+    setSearch: (state, payload) => {
+      state.search = payload
+    },
+    resetSearch: (state) => {
+      state.search = ''
+    },
+    setTypes: (state, payload) => {
+      state.types = payload
+    },
+    setTypesFromList: (state, payload) => {
+      for (let i = 0; i < payload.length; i++) {
+        let idx = state.types.findIndex(item => {
+          return item.label == payload[i]
+        })
+        if (idx > -1) {
+          state.types[idx].value = true
+        }
+      }
+    },
+    resetTypes: (state) => {
+      state.types = [
+        { label: "Anneau", value: false },
+        { label: "Arme", value: false },
+        { label: "Armure", value: false },
+        { label: "Baguette", value: false },
+        { label: "Bâton", value: false },
+        { label: "Objet merveilleux", value: false },
+        { label: "Parchemin", value: false },
+        { label: "Potion", value: false },
+        { label: "Sceptre", value: false },
+      ]
+    },
+    setRarities: (state, payload) => {
+      state.rarities = payload
+    },
+    setRaritiesFromList: (state, payload) => {
+      for (let i = 0; i < payload.length; i++) {
+        let idx = state.rarities.findIndex(item => {
+          return item.label == payload[i]
+        })
+        if (idx > -1) {
+          state.rarities[idx].value = true
+        }
+      }
+    },
+    resetRarities: (state) => {
+      state.rarities = [
+        { label: "Courant", value: false },
+        { label: "Peu courant", value: false },
+        { label: "Rare", value: false },
+        { label: "Très rare", value: false },
+        { label: "Légendaire", value: false },
+        { label: "Artefact", value: false },
+      ]
+    },
+    setHasAttunement: (state, payload) => {
+      state.hasAttunement = payload
+    },
+    resetHasAttunement: (state) => {
+      state.hasAttunement = undefined
+    },
+  }
+
+}

docs/.vuepress/theme/components/Breadcrumb.vue

@@ -31,6 +31,8 @@
               crumbs.push({to: page.path, disabled: disabled, text: 'Grimoire'})
             } else if (page.path == '/classes/') {
               crumbs.push({to: page.path, disabled: disabled, text: 'Classes'})
+            } else if (page.path == '/liste-objets-magiques/') {
+              crumbs.push({to: page.path, disabled: disabled, text: 'Liste des objets magiques'})
             } else {
               crumbs.push({to: page.path, disabled: disabled, text: page.frontmatter.breadcrumb || page.title})
             }

docs/.vuepress/theme/components/MagicItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <main class="page content">
+
+    <div class="theme-default-content">
+      <h1>{{ $page.title }}</h1>
+      <div class="magic-item-details">
+        <span>{{ $page.frontmatter.type }}</span>
+        <span v-if="$page.frontmatter.subtype"> ({{ $page.frontmatter.subtype }})</span>
+        <span>, {{ $page.frontmatter.rarity }}</span>
+        <span v-if="$page.frontmatter.attunement"> ({{ $page.frontmatter.attunement }})</span>
+      </div>
+    </div>
+
+    <Content class="mt-4" />
+
+    <p v-if="$page.frontmatter.source" class="source">Source : <em>{{ $page.frontmatter.source }}</em></p>
+
+  </main>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/components/MagicItemFilters.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="magic-item-filters pa-1">
+
+    <v-text-field
+      class="mb-1"
+      v-model="search"
+      label="Filtrer"
+      single-line
+      hide-details
+      color="accent"
+      ></v-text-field>
+
+    <v-expansion-panels multiple flat hover v-model="panels">
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Types</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetTypes" dark>Réinitialiser</v-btn>
+          <v-switch v-for="(type, idx) in types" v-model="type.value" :label="type.label" dense class="ma-0" @change="switchType" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Raretés</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-btn class="mb-2 mt-2" small color="primary" @click="resetRarities" dark>Réinitialiser</v-btn>
+          <v-switch v-for="rarity in rarities" v-model="rarity.value" :label="rarity.label" dense class="ma-0" @change="switchRarity" color="accent"></v-switch>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+      <v-expansion-panel>
+        <v-expansion-panel-header>Harmonisation</v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <div class="d-flex mt-2 mb-4">
+            <v-btn-toggle v-model="hasAttunement" @change="switchHasAttunement" dark>
+              <v-btn :value="true" small :color="setColor(hasAttunement, true, 'green')">
+                <v-icon>mdi-check</v-icon>
+              </v-btn>
+              <v-btn :value="false" small :color="setColor(hasAttunement, false, 'red')">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-btn-toggle>
+
+            <p class="mt-0 mb-0 ml-2">Verbales</p>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+    </v-expansion-panels>
+
+  </div>
+</template>
+
+<script>
+// import { mapMutations } from 'vuex'
+import { setUrlParams, getUrlParameter, setBooleanMutation, setListMutation } from '@theme/util/filterHelpers'
+
+export default {
+  name: 'MagicItemFilters',
+
+  data () {
+    return {
+      panels: [],
+    }
+  },
+
+  computed: {
+    search: {
+      get () {
+        return this.$store.state.magicItemFilters.search
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setSearch', newValue)
+      }
+    },
+
+    types: {
+      get () {
+        return this.$store.state.magicItemFilters.types
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setTypes', newValue)
+      }
+    },
+
+    rarities: {
+      get () {
+        return this.$store.state.magicItemFilters.rarities
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setRarities', newValue)
+      }
+    },
+
+    hasAttunement: {
+      get () {
+        return this.$store.state.magicItemFilters.hasAttunement
+      },
+      set (newValue) {
+        this.$store.commit('magicItemFilters/setHasAttunement', newValue)
+      }
+    },
+  },
+
+  methods: {
+
+    switchType () {
+      let list = []
+      for (var i = 0; i < this.types.length; i++) {
+        if (this.types[i].value) {
+          list.push(this.types[i].label)
+        }
+      }
+      setUrlParams('types', list)
+    },
+
+    switchRarity () {
+      let list = []
+      for (var i = 0; i < this.rarities.length; i++) {
+        if (this.rarities[i].value) {
+          list.push(this.rarities[i].label)
+        }
+      }
+      setUrlParams('raretes', list)
+    },
+
+    switchHasAttunement () {
+      let value = []
+      if ((this.hasAttunement !== undefined)) {
+        value[0] = this.hasAttunement
+      }
+      setUrlParams('harmonisation', value)
+    },
+
+    setColor (value, compare, color) {
+      if (value === compare) {
+        return color
+      }
+      return this.$site.themeConfig.primaryColor
+    },
+
+    resetTypes () {
+      this.$store.commit('magicItemFilters/resetTypes')
+      this.switchType()
+    },
+
+    resetRarities () {
+      this.$store.commit('magicItemFilters/resetRarities')
+      this.switchRarity()
+    },
+  },
+
+  mounted () {
+    this.$store.dispatch('magicItemFilters/reset')
+
+    let selectedRarities = getUrlParameter(window.location.href, "raretes").split(",")
+    let selectedTypes = getUrlParameter(window.location.href, "types").split(",")
+    let hasAttunement = getUrlParameter(window.location.href, "harmonisation")
+
+    setListMutation(selectedTypes, this.$store, 'magicItemFilters/setTypesFromList')
+    setListMutation(selectedRarities, this.$store, 'magicItemFilters/setRaritiesFromList')
+
+    setBooleanMutation(hasAttunement, this.$store, 'magicItemFilters/setHasAttunement')
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -94,7 +94,6 @@ export default {
           }
         }
       }
-      console.log(item.title)
       return false
     }
   }

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

@@ -2,18 +2,21 @@
   <v-navigation-drawer class="right-drawer" v-model="rightDrawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app right>
     <PageToc v-if="hasPageToc" />
     <SpellFilters v-if="hasSpellFilters" />
+    <MagicItemFilters v-if="hasMagicItemFilters" />
   </v-navigation-drawer>
 </template>
 
 <script>
 import PageToc from '@theme/components/PageToc'
 import SpellFilters from '@theme/components/SpellFilters'
+import MagicItemFilters from '@theme/components/MagicItemFilters'
 
 export default {
   name: 'RightDrawer',
 
   components: {
     SpellFilters,
+    MagicItemFilters,
     PageToc
   },
 
@@ -37,6 +40,9 @@ export default {
     hasSpellFilters () {
       return this.$store.state.inRightDrawer == 'spellFilters'
     },
+    hasMagicItemFilters () {
+      return this.$store.state.inRightDrawer == 'magicItemFilters'
+    },
   },
 
   mounted () {

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="magic-item">
+    <Breadcrumb />
+    <MagicItem />
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@theme/components/Breadcrumb'
+import MagicItem from '@theme/components/MagicItem'
+
+export default {
+  name: 'MagicItemLayout',
+
+  components: {
+    Breadcrumb,
+    MagicItem
+  },
+
+  mounted () {
+    this.$store.commit('setHasRightDrawer', false)
+    this.$store.commit('setRightDrawer', false)
+    this.$store.commit('setInRightDrawer', null)
+  }
+}
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,116 @@
+<template>
+  <div class="magic-items">
+
+    <Breadcrumb />
+
+    <h1>Liste des objets magiques</h1>
+
+    <v-data-table
+      class="data-table"
+      :headers="headers"
+      :items="magicitems"
+      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 }" class="subtitle-2">{{ item.title }}</router-link>
+      </template>
+
+      <template v-slot:item.frontmatter.attunement="{ item }">
+        <span v-if="item.frontmatter.attunement">{{ item.frontmatter.attunement }}</span>
+      </template>
+
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Breadcrumb from '@theme/components/Breadcrumb'
+
+export default {
+  components: { Breadcrumb },
+
+  data () {
+    return {
+      sortBy: 'title',
+      sortDesc: false,
+      headers: [
+        { text: "Nom", align: 'start', sortable: true, value: 'title' },
+        { text: "Type", align: 'start', sortable: false, value: 'frontmatter.type' },
+        { text: "Rareté", align: 'start', sortable: false, value: 'frontmatter.rarity' },
+        { text: "Harmonisation", align: 'start', sortable: false, value: 'frontmatter.attunement' },
+      ],
+    }
+  },
+
+  computed: {
+    ...mapState({
+      search: state => state.magicItemFilters.search,
+      types: state => state.magicItemFilters.types,
+      rarities: state => state.magicItemFilters.rarities,
+      hasAttunement: state => state.magicItemFilters.hasAttunement,
+    }),
+
+    magicitems() {
+      let results = this.$pagination.pages
+
+      // Filter attunement
+      if (this.hasAttunement !== undefined) {
+        if (this.hasAttunement === true) {
+          results = results.filter(item => {
+            return item.frontmatter.attunement
+          })
+        } else {
+          results = results.filter(item => {
+            return item.frontmatter.attunement === false
+          })
+        }
+      }
+
+      // Filter types
+      let selectedTypes = []
+      for (var i = 0; i < this.types.length; i++) {
+        if (this.types[i].value) {
+          selectedTypes.push(this.types[i].label)
+        }
+      }
+      if (selectedTypes.length) {
+        results = results.filter(item => {
+          return selectedTypes.indexOf(item.frontmatter.type) > -1
+        })
+      }
+
+      // Filter rarities
+      let selectedRarities = []
+      for (var i = 0; i < this.rarities.length; i++) {
+        if (this.rarities[i].value) {
+          selectedRarities.push(this.rarities[i].label)
+        }
+      }
+      if (selectedRarities.length) {
+        results = results.filter(item => {
+          return selectedRarities.indexOf(item.frontmatter.rarity) > -1
+        })
+      }
+
+      return results
+    }
+  },
+
+  mounted () {
+    this.$store.commit('setHasRightDrawer', true)
+    this.$store.commit('setRightDrawer', true)
+    this.$store.commit('setInRightDrawer', 'magicItemFilters')
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>