tooltips pour les états préjudiciables

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

@@ -23,6 +23,7 @@
 <script>
 import {displayItemMeta} from '@theme/util/magicItemHelpers'
 import MarkdownIt from 'markdown-it'
+import { handleTooltips } from '@theme/util'
 
 export default {
   name: 'MagicItem',
@@ -39,6 +40,17 @@ export default {
     displayItemMeta () {
       return displayItemMeta(this.magicItem.frontmatter)
     }
+  },
+
+  mounted () {
+    setTimeout(function () {
+      handleTooltips()
+    }, 100);
+    this.$router.afterEach(() => {
+      setTimeout(function () {
+        handleTooltips()
+      }, 100)
+    })
   }
 }
 </script>

docs/.vuepress/theme/components/Monster.vue

@@ -168,6 +168,8 @@ import {
   displayMonsterTypeSizeAlignment
 } from '@theme/util/monsterHelpers'
 
+import { handleTooltips } from '@theme/util'
+
 import {stats} from '../../data/stats.js'
 import {armorTypes} from '../../data/armorTypes.js'
 import MarkdownIt from 'markdown-it'
@@ -508,6 +510,14 @@ export default {
 
   mounted () {
     //console.log(this.$page)
+    setTimeout(function () {
+      handleTooltips()
+    }, 100);
+    this.$router.afterEach(() => {
+      setTimeout(function () {
+        handleTooltips()
+      }, 100)
+    })
   }
 }
 </script>

docs/.vuepress/theme/components/Page.vue

@@ -7,9 +7,20 @@
 </template>
 
 <script>
+import { handleTooltips } from '@theme/util'
 export default {
   name: 'Page',
-  components: { }
+  components: { },
+  mounted () {
+    setTimeout(function () {
+      handleTooltips()
+    }, 100);
+    this.$router.afterEach(() => {
+      setTimeout(function () {
+        handleTooltips()
+      }, 100)
+    })
+  }
 }
 </script>
 

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

@@ -41,6 +41,7 @@
 <script>
 import { displaySchoolLevel } from '@theme/util/spellHelpers'
 import MarkdownIt from 'markdown-it'
+import { handleTooltips } from '@theme/util'
 
 export default {
   name: 'Spell',
@@ -61,6 +62,14 @@ export default {
 
   mounted () {
     // console.log(this.spell)
+    setTimeout(function () {
+      handleTooltips()
+    }, 100);
+    this.$router.afterEach(() => {
+      setTimeout(function () {
+        handleTooltips()
+      }, 100)
+    })
   }
 }
 </script>

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

@@ -29,8 +29,8 @@
         <v-btn color="primary" class="d-print-none" fab bottom right fixed @click="toTop" v-show="toTopButton" v-scroll="onScroll">
           <v-icon class="d-print-none">mdi-chevron-up</v-icon>
         </v-btn>
-    </v-fab-transition>
-  </v-main>
+      </v-fab-transition>
+    </v-main>
 
     <v-bottom-sheet v-model="cookieConsentDialog" hide-overlay>
       <v-sheet class="" tile>
@@ -64,6 +64,13 @@
       </v-card>
     </v-dialog>
 
+    <div id="tooltip">
+      <div id="tooltip-title" class="tooltip-title">
+      </div>
+      <div id="tooltip-content" class="tooltip-content">
+      </div>
+    </div>
+
   </v-app>
 </template>
 
@@ -74,6 +81,7 @@ import NavDrawer from '@theme/components/NavDrawer.vue'
 import RightDrawer from '@theme/components/RightDrawer.vue'
 import Vue from 'vue'
 import Cookies from 'js-cookie'
+import { tooltips } from '../../data/ruleTooltips.js'
 
 export default {
   name: 'GlobalLayout',
@@ -188,7 +196,7 @@ export default {
       setTimeout(function () {
         self.hintCopied = ''
       }, 2000)
-    }
+    },
   }
 }
 </script>

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

@@ -1,3 +1,40 @@
+#tooltip {
+  position: absolute;
+  display: none;
+  z-index: 1000;
+
+  text-align: left;
+  width: 50vw;
+  max-width: 555px;
+  min-width: 350px;
+  background-color: #fff;
+  color: #555;
+  box-shadow: 0 0 12px #333;
+  border-radius: 5px;
+
+  .tooltip-title {
+    background-color: $color-hero;
+    &.tooltip-spell {
+      background-color: $color-dragon;
+    }
+    // &.tooltip-condition {
+    // }
+    color: #fff;
+    font-family: 'Oswald', sans-serif;
+    font-weight: bold;
+    padding: 12px;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .tooltip-content {
+    padding: 12px;
+    ul {
+      margin: 0;
+      padding: 0 0 0 15px;
+    }
+  }
+}
+
 .v-tooltip__content {
   &.spell-tooltip-container,
   &.condition-tooltip-container {

docs/.vuepress/theme/util/index.js

@@ -262,3 +262,57 @@ export function isResourceInLibrary (resource, library) {
   }
   return false
 }
+
+/*
+** Handles rule tooltips like conditions
+*/
+import { tooltips } from '../../data/ruleTooltips.js'
+export function handleTooltips (component) {
+  if (!component) {
+    component = document
+  }
+  // Gestion des tooltips
+  let tooltip = document.getElementById('tooltip')
+  let tooltipTitle = document.getElementById('tooltip-title')
+  let tooltipContent = document.getElementById('tooltip-content')
+  window.onmousemove = function (e) {
+    var x = e.pageX + 20,
+        y = e.pageY + 20;
+
+    tooltip.style.top = y + 'px';
+    tooltip.style.left = x + 'px';
+
+    // Get calculated tooltip coordinates and size
+    var tooltip_rect = tooltip.getBoundingClientRect();
+    // Corrections if out of window
+    if ((tooltip_rect.x + tooltip_rect.width) > window.innerWidth) // Out on the right
+      x = x - tooltip_rect.width - 20;  // Simulate a "right: tipX" position
+    if ((tooltip_rect.y + tooltip_rect.height) > window.innerHeight) // Out on the bottom
+      y = y - tooltip_rect.height - 20; // Align on the bottom
+
+    // Apply corrected position
+    tooltip.style.top = y + 'px';
+    tooltip.style.left = x + 'px';
+  }
+  // Arborescence des liens
+  let links = component.querySelectorAll("a")
+  for (var l of links) {
+    let hash = l.hash.replace('#', '')
+    if (hash != "" && tooltips[hash]) {
+      l.addEventListener("mouseover", function( event ) {
+        tooltipTitle.innerHTML = tooltips[hash].title
+        let tcontent = '<ul>'
+        for (var d of tooltips[hash].description) {
+          tcontent += '<li>' + d + '</li>'
+        }
+        tcontent += '</ul>'
+        tooltipContent.innerHTML = tcontent
+        tooltip.style.display = 'block'
+      }, false);
+
+      l.addEventListener("mouseout", function( event ) {
+        tooltip.style.display = 'none'
+      }, false);
+    }
+  }
+}