tooltips créatures

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

@@ -220,6 +220,15 @@ export default {
     changePage (page) {
       // console.log(page)
       setUrlParams("page", [page])
+      let self = this
+      setTimeout(function () {
+        handleTooltips({pages:self.$site.pages})
+      }, 100);
+      this.$router.afterEach(() => {
+        setTimeout(function () {
+          handleTooltips({pages:self.$site.pages})
+        }, 100)
+      })
     },
 
     onClickRow (row, item) {
@@ -240,6 +249,16 @@ export default {
     if (page) {
       this.page = page
     }
+
+    let self = this
+    setTimeout(function () {
+      handleTooltips({pages:self.$site.pages})
+    }, 100);
+    this.$router.afterEach(() => {
+      setTimeout(function () {
+        handleTooltips({pages:self.$site.pages})
+      }, 100)
+    })
   }
 }
 </script>

docs/.vuepress/theme/layouts/MonstersLayout.vue

@@ -154,7 +154,7 @@ import { mapState } from 'vuex'
 import Breadcrumb from '@theme/components/Breadcrumb'
 import { displayChallenge } from '@theme/util/monsterHelpers'
 import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
-import { isResourceInLibrary } from '@theme/util'
+import { isResourceInLibrary, handleTooltips } from '@theme/util'
 import Monster from '@theme/components/Monster'
 import MyMonstersButton from '@theme/global-components/MyMonstersButton'
 import { CHALLENGES } from '../../data/monsters'
@@ -387,6 +387,15 @@ export default {
     changePage (page) {
       // console.log(page)
       setUrlParams("page", [page])
+      let self = this
+      setTimeout(function () {
+        handleTooltips({pages:self.$site.pages})
+      }, 100);
+      this.$router.afterEach(() => {
+        setTimeout(function () {
+          handleTooltips({pages:self.$site.pages})
+        }, 100)
+      })
     },
 
     onClickRow (row, item) {
@@ -416,6 +425,16 @@ export default {
     if (showColumn) {
       this.showColumn = JSON.parse(showColumn)
     }
+
+    let self = this
+    setTimeout(function () {
+      handleTooltips({pages:self.$site.pages})
+    }, 100);
+    this.$router.afterEach(() => {
+      setTimeout(function () {
+        handleTooltips({pages:self.$site.pages})
+      }, 100)
+    })
   }
 }
 </script>

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

@@ -385,6 +385,15 @@ export default {
     changePage (page) {
       // console.log(page)
       setUrlParams("page", [page])
+      let self = this
+      setTimeout(function () {
+        handleTooltips({pages:self.$site.pages})
+      }, 100);
+      this.$router.afterEach(() => {
+        setTimeout(function () {
+          handleTooltips({pages:self.$site.pages})
+        }, 100)
+      })
     },
 
     onClickRow (row, item) {
@@ -425,6 +434,16 @@ export default {
     if (showColumn) {
       this.showColumn = JSON.parse(showColumn)
     }
+
+    let self = this
+    setTimeout(function () {
+      handleTooltips({pages:self.$site.pages})
+    }, 100);
+    this.$router.afterEach(() => {
+      setTimeout(function () {
+        handleTooltips({pages:self.$site.pages})
+      }, 100)
+    })
   }
 }
 </script>

docs/.vuepress/theme/styles/_colors.scss

@@ -7,3 +7,5 @@ $color-table-header-bg: #6f6f6f;
 $color-gold: #bab468;
 $color-gold-dark: #9f994f;
 $color-gold-light: #d6d082;
+$color-red: #9b1c47;
+$color-purple: #563f5a;

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

@@ -28,8 +28,12 @@
     &.tooltip-spell {
       background-color: $color-dragon;
     }
-    // &.tooltip-condition {
+    &.tooltip-monster {
-    // }
+      background-color: $color-red;
+    }
+    &.tooltip-condition {
+      background-color: $color-purple;
+    }
     color: #fff;
     font-family: 'Oswald', sans-serif;
     font-weight: bold;
@@ -60,6 +64,11 @@
       margin-bottom: .5rem;
       padding-bottom: .5rem;
     }
+    .monster-details {
+      border-bottom: 2px solid $color-red;
+      margin-bottom: .5rem;
+      padding-bottom: .5rem;
+    }
   }
 }
 

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

@@ -268,6 +268,7 @@ export function isResourceInLibrary (resource, library) {
 */
 import { tooltips } from '../../data/ruleTooltips.js'
 import { displaySchoolLevel } from '@theme/util/spellHelpers'
+import { displayMonsterTypeSizeAlignment, displayAC, displayHP, displayChallenge, displayAbilityScore } from '@theme/util/monsterHelpers'
 import MarkdownIt from 'markdown-it'
 export function handleTooltips (params = {}) {
   if (!params.component) {
@@ -318,11 +319,15 @@ export function handleTooltips (params = {}) {
         tooltip.style.display = 'none'
         tooltipTitle.classList.remove('tooltip-condition')
       }, false);
+      l.addEventListener("click", function( event ) {
+        tooltip.style.display = 'none'
+        tooltipTitle.classList.remove('tooltip-condition')
+      }, false);
     } else if (l.pathname.startsWith('/grimoire/')) {
       // console.log(l.pathname)
       if (params.pages) {
         let spell = params.pages.find((el) => el.path === l.pathname)
-        if (spell) {
+        if (spell && spell.frontmatter.school) {
           // console.log(spell)
           l.addEventListener("mouseover", function( event ) {
             let ttitle = '<div class="d-flex justify-space-between">'
@@ -384,6 +389,101 @@ export function handleTooltips (params = {}) {
           }, false);
         }
       }
+    } else if (l.pathname.startsWith('/bestiaire/')) {
+      // console.log(l.pathname)
+      if (params.pages) {
+        let monster = params.pages.find((el) => el.path === l.pathname)
+        if (monster && monster.frontmatter.challenge) {
+          // console.log(spell)
+          l.addEventListener("mouseover", function( event ) {
+            let ttitle = '<div class="d-flex justify-space-between">'
+            ttitle += '<div>' + monster.title + '</div>'
+            ttitle += '<div class="monster-type-size subtitle-2">' + displayMonsterTypeSizeAlignment(monster.frontmatter, true) + '</div>'
+            ttitle += '</div>'
+            tooltipTitle.innerHTML = ttitle
+            tooltipTitle.classList.add('tooltip-monster')
+            let tcontent = '<div>'
+
+            tcontent += '<div class="monster-details">'
+            tcontent += '<div class="d-flex justify-space-around">'
+            tcontent += '<div class="px-4 flex-grow-0 monster-hp"><div class="subtitle-2">Points de vie</div><div>' + displayHP(monster) + '</div></div>'
+            tcontent += '<div class="px-4 flex-grow-0 monster-ac"><div class="subtitle-2">Classe d\'armure</div><div>' + displayAC(monster) + '</div></div>'
+            tcontent += '<div class="px-4 flex-grow-0 monster-challenge"><div class="subtitle-2">Dangerosité</div><div>' + displayChallenge(monster.frontmatter.challenge, true) + '</div></div>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+
+            tcontent += '<div class="monster-ability-scores d-flex justify-space-around">'
+            tcontent += '<div class="monster-ability-scores-physical d-flex">'
+            tcontent += '<div class="ability-str text-center">'
+            tcontent += '<div class="ability-label-alt">'
+            tcontent += '<strong>For</strong>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-score">'
+            tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.for) + '</span>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-dex text-center">'
+            tcontent += '<div class="ability-label-alt">'
+            tcontent += '<strong>Dex</strong>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-score">'
+            tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.dex) + '</span>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-con text-center">'
+            tcontent += '<div class="ability-label-alt">'
+            tcontent += '<strong>Con</strong>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-score">'
+            tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.con) + '</span>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '<div class="monster-ability-scores-mental d-flex">'
+            tcontent += '<div class="ability-int text-center">'
+            tcontent += '<div class="ability-label-alt">'
+            tcontent += '<strong>Int</strong>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-score">'
+            tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.int) + '</span>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-wis text-center">'
+            tcontent += '<div class="ability-label-alt">'
+            tcontent += '<strong>Sag</strong>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-score">'
+            tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.sag) + '</span>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-cha text-center">'
+            tcontent += '<div class="ability-label-alt">'
+            tcontent += '<strong>Cha</strong>'
+            tcontent += '</div>'
+            tcontent += '<div class="ability-score">'
+            tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.cha) + '</span>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '</div>'
+
+            tcontent += '</div>'
+            tcontent += '</div>'
+            tcontent += '<div class="tooltip-overflow"></div>'
+            tooltipContent.innerHTML = tcontent
+            tooltip.style.display = 'block'
+          }, false);
+
+          l.addEventListener("mouseout", function( event ) {
+            tooltip.style.display = 'none'
+            tooltipTitle.classList.remove('tooltip-monster')
+          }, false);
+          l.addEventListener("click", function( event ) {
+            tooltip.style.display = 'none'
+            tooltipTitle.classList.remove('tooltip-monster')
+          }, false);
+        }
+      }
     }
   }
 }

docs/.vuepress/theme/util/monsterHelpers.js

@@ -70,6 +70,114 @@ export function displayMonsterTypeSizeAlignment (monster, hideAlignment = false,
   return result
 }
 
+// Affiche la Classe d'armure
+export function displayAC (monster) {
+  let ac = 10
+  let hasMageArmor = false
+  let mageArmorAc = 13
+  let mageArmor = ''
+  let armor = ''
+  // Le monstre n'a pas d'armure.
+  // CA = 10 + Dex
+  if (!monster.frontmatter.ac.armorType) {
+    ac = 10 + getModifier(monster.frontmatter.abilityScores.dex)
+  } else {
+    // Le type d'armure n'est pas formalisé. On prend la valeur brute
+    if (monster.frontmatter.ac.armorType == 'custom') {
+      return monster.frontmatter.ac.value
+    }
+
+    // Le monstre a une armure naturelle.
+    // CA =  10 + Armure naturelle + Dex
+    if (monster.frontmatter.ac.armorType == 'armure naturelle') {
+      armor = monster.frontmatter.ac.armorType
+      if (parseInt(monster.frontmatter.ac.value)) {
+        ac = ac + parseInt(monster.frontmatter.ac.value) + getModifier(monster.frontmatter.abilityScores.dex)
+      } else {
+        ac = ac + getModifier(monster.frontmatter.abilityScores.dex)
+      }
+    } else if (monster.frontmatter.ac.armorType == 'armure du mage') {
+      hasMageArmor = true
+      ac = ac + getModifier(monster.frontmatter.abilityScores.dex)
+      mageArmorAc = mageArmorAc + getModifier(monster.frontmatter.abilityScores.dex)
+      armor = mageArmorAc + ' avec armure du mage'
+    } else {
+      // Le monstre a un type d'armure défini.
+      // On calcule sa CA selon le type
+      let armorType = armorTypes[monster.frontmatter.ac.armorType]
+
+      // Le type d'armure n'existe pas. On l'ignore.
+      // CA = 10 + Dex
+      if (!armorType) {
+        ac = ac + getModifier(monster.frontmatter.abilityScores.dex)
+      } else {
+        // L'armure n'impose pas de limite de Dex
+        armor = monster.frontmatter.ac.armorType
+        if (armorType.maxDex === false) {
+          ac = armorType.value + getModifier(monster.frontmatter.abilityScores.dex)
+        } else {
+          // La limite de Dex de l'armure est inférieure à la Dex du monstre
+          if (armorType.maxDex === 0) {
+            ac = armorType.value
+          } else if ((armorType.maxDex !== 0) && (armorType.maxDex <= getModifier(monster.frontmatter.abilityScores.dex))) {
+            ac = armorType.value + armorType.maxDex
+          } else {
+            ac = armorType.value + getModifier(monster.frontmatter.abilityScores.dex)
+          }
+        }
+      }
+    }
+  }
+
+
+  // Le monstre a un bouclier. Sa CA augmente de 2.
+  if (monster.frontmatter.ac.hasShield) {
+    ac = ac + 2
+    mageArmorAc = mageArmorAc + 2
+    if (armor != '') {
+      armor += ', '
+    }
+    armor += 'bouclier'
+
+    if (hasMageArmor) {
+      armor = mageArmorAc + ' avec armure du mage, bouclier'
+    }
+  }
+
+  if (armor != '') {
+    ac += ' (' + armor + ')'
+  }
+
+  return ac
+}
+
+// Affiche les points de vie
+export function displayHP (monster) {
+  if (monster.frontmatter.customHP) {
+    return monster.frontmatter.customHP
+  } else if (monster.frontmatter.hitDiceCount) {
+    let hitDieSize = 8 // Dé de vie moyen par défaut
+    if (monster.frontmatter.hitDieSize) {
+      hitDieSize = monster.frontmatter.hitDieSize
+    } else if (monster.frontmatter.size) {
+      hitDieSize = stats.sizes[monster.frontmatter.size].hitDie
+    }
+    let hitPointsBonus = 0
+    if (monster.frontmatter.hitDiceCount > 1) {
+      hitPointsBonus = Math.floor(monster.frontmatter.hitDiceCount / 2)
+    }
+    let averageHP = monster.frontmatter.hitDiceCount * (hitDieSize / 2) + monster.frontmatter.hitDiceCount * getModifier(monster.frontmatter.abilityScores.con) + hitPointsBonus
+    let conMod = ""
+    if (getModifier(monster.frontmatter.abilityScores.con) != 0) {
+      conMod = monster.frontmatter.hitDiceCount * getModifier(monster.frontmatter.abilityScores.con)
+      conMod = displayBonus(conMod)
+    }
+    return averageHP + ' (' + monster.frontmatter.hitDiceCount + "d" + hitDieSize + conMod + ')'
+  }
+  return ""
+}
+
+
 // Retourne le nombre de points de combat pour un indice de dangerosité
 export function getPCbyChallenge(challenge) {
   let challengeIndex = CHALLENGES.findIndex(item => item.value == challenge)