spell tooltip

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

@@ -21,7 +21,6 @@
         for (let i = 0; i < parts.length; i++) {
           let disabled = false
           if (i == parts.length - 1) {
-            console.log(parts[i])
             disabled = true
           }
           link += parts[i]

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

@@ -0,0 +1,64 @@
+<template>
+  <span>
+    <router-link :to="{ path: spellPath }" v-if="spell">
+      <v-tooltip content-class="spell-tooltip-container" top>
+        <template v-slot:activator="{ on }">
+          <em v-on="on">{{ label }}</em>
+        </template>
+        <div class="spell-tooltip">
+          <p class="spell-tooltip-title"><strong>{{ spell.title }}</strong></p>
+          <div class="spell-details">
+            <div class="spell-school-level" v-html="displaySchoolLevel()"></div>
+            <div class="spell-casting-time"><strong>Temps d'incantation</strong> : {{ spell.frontmatter.casting_time }}</div>
+            <div class="spell-range"><strong>Portée</strong> : {{ spell.frontmatter.range }}</div>
+            <div class="spell-components"><strong>Composantes</strong> :
+              <template v-if="spell.frontmatter.components.verbal">V</template><template v-if="spell.frontmatter.components.somatic || spell.frontmatter.components.material">,</template>
+              <template v-if="spell.frontmatter.components.somatic">S</template><template v-if="spell.frontmatter.components.material">,</template>
+              <template v-if="spell.frontmatter.components.material">M</template>
+              <template v-if="spell.frontmatter.components.materials">({{spell.frontmatter.components.materials}})</template>
+            </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>
+      </v-tooltip>
+    </router-link>
+    <router-link :to="{ path: spellPath }" v-else>{{ label }}</router-link>
+  </span>
+</template>
+
+<script>
+import {displaySchoolLevel} from '@theme/util/spellHelpers'
+
+export default {
+  name: 'SpellTooltip',
+
+  props: [
+    'label',
+    'path'
+  ],
+
+  data () {
+    return {
+      spellPath: '',
+      spell: ''
+    }
+  },
+
+  methods: {
+    displaySchoolLevel () {
+      return displaySchoolLevel(this.spell.frontmatter)
+    }
+  },
+
+  mounted () {
+    console.log(this.path)
+    this.spellPath = '/grimoire/' + this.path + '/'
+    this.spell = this.$site.pages.find((el) => el.path === this.spellPath || el.path === this.spellPath + "/")
+    console.log(this.spell)
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/styles/_spelltooltip.scss

@@ -0,0 +1,30 @@
+.v-tooltip__content {
+  &.spell-tooltip-container {
+    opacity: 1 !important;
+
+    .spell-tooltip {
+      text-align: left;
+      width: 50vw;
+      max-width: 555px;
+      min-width: 350px;
+      background-color: #fff;
+      color: #555;
+      margin: -5px -16px -21px;
+      padding: 12px;
+      box-shadow: 0 0 12px #333;
+      border-radius: 5px;
+
+      .spell-tooltip-title {
+        background-color: $color-dragon;
+        color: #fff;
+        margin: -12px -12px 6px;
+        padding: 12px;
+        border-radius: 5px 5px 0 0;
+      }
+
+      .spell-details {
+        margin-bottom: 24px;
+      }
+    }
+  }
+}

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

@@ -5,3 +5,5 @@
 @import "tables";
 @import "blocks";
 @import "layout";
+
+@import "spelltooltip";