liste des sorts

docs/.vuepress/theme/enhanceApp.js

@@ -3,7 +3,7 @@ import store from '../store'
 import '@mdi/font/css/materialdesignicons.css'
 import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
-import fr from 'vuetify/es5/locale/fr';
+import fr from 'vuetify/es5/locale/fr'
 
 import colors from 'vuetify/es5/util/colors'
 

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

@@ -0,0 +1,54 @@
+<template>
+  <span>
+    <template v-if="tooltipObject">
+      <router-link :to="{ path: tooltipObject.basePath + '#' + tooltipObject.id }">
+        <v-tooltip content-class="condition-tooltip-container" top>
+          <template v-slot:activator="{ on }">
+            <em v-on="on">{{ l }}</em>
+          </template>
+          <div class="condition-tooltip">
+            <p class="condition-tooltip-title"><strong>{{ tooltipObject.title }}</strong></p>
+            <ul class="condition-description"><li v-for="d in tooltipObject.description" v-html="d"></li></ul>
+          </div>
+        </v-tooltip>
+      </router-link>
+    </template>
+    <template v-else><em>{{ l }}</em></template>
+  </span>
+</template>
+
+<script>
+/*
+** Condition tooltip
+*/
+import {displaySchoolLevel} from '@theme/util/spellHelpers'
+import {tooltips} from '../../data/ruleTooltips.js'
+
+export default {
+  name: 'RuleTooltip',
+
+  props: [
+    'l', // label
+    't' // condition
+  ],
+
+  data () {
+    return {
+      tooltipObject: null,
+      tooltips: tooltips
+    }
+  },
+
+  methods: {
+
+  },
+
+  mounted () {
+    this.tooltipObject = this.tooltips[this.t]
+    console.log(this.tooltipObject)
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

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

@@ -19,23 +19,26 @@
             </div>
             <div class="spell-duration"><strong>Durée</strong> : <span v-if="spell.frontmatter.concentration">concentration, </span>{{ spell.frontmatter.duration }}</div>
           </div>
-          <div class="spell-description">{{ spell.frontmatter.description }}</div>
+          <div class="spell-description" v-html="spell.frontmatter.description"></div>
         </div>
       </v-tooltip>
     </router-link>
-    <router-link :to="{ path: spellPath }" v-else>{{ label }}</router-link>
+    <router-link :to="{ path: spellPath }" v-else><em>{{ label }}</em></router-link>
   </span>
 </template>
 
 <script>
+/*
+** Spell tooltip
+*/
 import {displaySchoolLevel} from '@theme/util/spellHelpers'
 
 export default {
   name: 'SpellTooltip',
 
   props: [
-    'label',
-    'path'
+    'l', // label
+    's' // spell slug
   ],
 
   data () {
@@ -45,6 +48,17 @@ export default {
     }
   },
 
+  computed: {
+    label () {
+      if (this.l) {
+        return this.l
+      } else if (this.spell) {
+        return this.spell.title.toLowerCase()
+      }
+      return '[Sort non trouvé]'
+    }
+  },
+
   methods: {
     displaySchoolLevel () {
       return displaySchoolLevel(this.spell.frontmatter)
@@ -52,10 +66,8 @@ export default {
   },
 
   mounted () {
-    console.log(this.path)
-    this.spellPath = '/grimoire/' + this.path + '/'
+    this.spellPath = '/grimoire/' + this.s + '/'
     this.spell = this.$site.pages.find((el) => el.path === this.spellPath || el.path === this.spellPath + "/")
-    console.log(this.spell)
   }
 }
 </script>

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

@@ -33,14 +33,16 @@
       </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 v-if="item.frontmatter.components">
+          <template v-if="item.frontmatter.components.verbal">V</template><template v-if="item.frontmatter.components.verbal && (item.frontmatter.components.somatic || item.frontmatter.components.material)">,</template>
+          <template v-if="item.frontmatter.components.somatic">S</template><template v-if="item.frontmatter.components.somatic && item.frontmatter.components.material">,</template>
+          <template v-if="item.frontmatter.components.material">M</template>
+        </template>
       </template>
 
-      <template v-slot:item.frontmatter.classes="{ item }">
+      <!-- <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>
+      </template> -->
 
     </v-data-table>
   </div>
@@ -66,7 +68,7 @@ export default {
         { 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' }
+        // { text: "Classes", align: 'start', sortable: false, value: 'frontmatter.classes' }
       ],
     }
   },
@@ -126,11 +128,17 @@ export default {
         }
       }
       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
+        let classFiltered = []
+        for (var i = 0; i < selectedClasses.length; i++) {
+          for (var j = 0; j < results.length; j++) {
+            if (results[j].frontmatter.classes.indexOf(selectedClasses[i]) > -1) {
+              if (classFiltered.indexOf(results[j]) < 0) {
+                classFiltered.push(results[j])
+              }
+            }
           }
-        })
+        }
+        results = classFiltered
       }
 
       // Filter levels

docs/.vuepress/theme/styles/_tooltips.scss

@@ -1,8 +1,9 @@
 .v-tooltip__content {
-  &.spell-tooltip-container {
+  &.spell-tooltip-container,
+  &.condition-tooltip-container {
     opacity: 1 !important;
 
-    .spell-tooltip {
+    .spell-tooltip, .condition-tooltip {
       text-align: left;
       width: 50vw;
       max-width: 555px;
@@ -25,6 +26,14 @@
       .spell-details {
         margin-bottom: 24px;
       }
+
+      .condition-tooltip-title {
+        background-color: $color-hero;
+        color: #fff;
+        margin: -12px -12px 6px;
+        padding: 12px;
+        border-radius: 5px 5px 0 0;
+      }
     }
   }
 }

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

@@ -6,4 +6,4 @@
 @import "blocks";
 @import "layout";
 
-@import "spelltooltip";
+@import "tooltips";

docs/.vuepress/theme/util/spellHelpers.js

@@ -1,9 +1,10 @@
 export function displaySchoolLevel (spell) {
   let result = ''
-  if (spell.level == 0) {
+  if (spell.level == 0 || spell.level == "0") {
     result = spell.school + ', Tour de magie'
+  } else {
+    result = spell.school + ' de niveau ' + spell.level
   }
-  result = spell.school + ' de niveau ' + spell.level
   if (spell.ritual) {
     result = result + ' (rituel)'
   }