WIP bestiaire

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

@@ -4,10 +4,7 @@
     <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>
+        {{displayItemMeta()}}
       </div>
     </div>
 
@@ -19,8 +16,14 @@
 </template>
 
 <script>
-export default {
+import {displayItemMeta} from '@theme/util/magicItemHelpers'
 
+export default {
+  methods : {
+    displayItemMeta () {
+      return displayItemMeta(this.$page.frontmatter)
+    }
+  }
 }
 </script>
 

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

@@ -0,0 +1,140 @@
+<template>
+  <main class="page content">
+
+    <div class="theme-default-content">
+      <h1>{{ $page.title }}</h1>
+      <div class="monster-hit-points">
+        <strong>Points de vie</strong>
+        <span>{{ displayHP() }}</span>
+      </div>
+      <div class="monster-details">
+        <!-- Statblock -->
+        <div class="monster-ability-scores">
+          <div class="ability-str">
+            {{ displayAbilityScore(monster.abilityScores.for) }}
+          </div>
+          <div class="ability-dex">
+            {{ displayAbilityScore(monster.abilityScores.dex) }}
+          </div>
+          <div class="ability-con">
+            {{ displayAbilityScore(monster.abilityScores.con) }}
+          </div>
+          <div class="ability-int">
+            {{ displayAbilityScore(monster.abilityScores.int) }}
+          </div>
+          <div class="ability-wis">
+            {{ displayAbilityScore(monster.abilityScores.sag) }}
+          </div>
+          <div class="ability-cha">
+            {{ displayAbilityScore(monster.abilityScores.cha) }}
+          </div>
+        </div>
+        <div class="monster-saving-throws">
+          <strong>Jets de sauvegarde</strong>
+          <span class="monster-saving-throw" v-for="(savingThrow, idx) in monster.savingThrows">
+            <template>{{displaySavingThrowBonus(savingThrow)}}</template><template v-if="idx < monster.savingThrows.length - 1">, </template>
+          </span>
+        </div>
+        <div class="monster-skills">
+          <strong>Compétences</strong>
+          <span class="monster-skill" v-for="(skill, idx) in monster.skills">
+            <template>{{displaySkillBonus(skill)}}</template><template v-if="idx < monster.skills.length - 1">, </template>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <Content slot-key="special-traits" class="mt-4" />
+    <Content slot-key="actions" class="mt-4" />
+    <Content slot-key="reactions" class="mt-4" />
+    <Content slot-key="legendary-actions" class="mt-4" />
+    <Content/>
+
+    <p v-if="$page.frontmatter.source" class="source">Source : <em>{{ monster.source }}</em></p>
+
+  </main>
+</template>
+
+<script>
+import {
+  displayBonus,
+  getModifier,
+  displayAbilityScore,
+  getProficiencyBonus
+} from '@theme/util/monsterHelpers'
+
+import {stats} from '../../data/stats.js'
+
+export default {
+
+  data () {
+    return {
+    }
+  },
+
+  computed: {
+    monster () {
+      return this.$page.frontmatter
+    },
+    proficiencyBonus () {
+      return this.getProficiencyBonus()
+    }
+  },
+
+  methods: {
+    displayAbilityScore (value) { return displayAbilityScore(value) },
+    getModifier (value) { return getModifier(value) },
+    getProficiencyBonus () { return getProficiencyBonus(this.monster.level) },
+
+    displaySavingThrowBonus (ability) {
+      let result = stats.abilities[ability].abbr
+      let bonus = displayBonus(getModifier(this.monster.abilityScores[ability]) + this.proficiencyBonus)
+      result += ' ' + bonus
+      return result
+    },
+
+    displaySkillBonus (skill) {
+      let result = skill.name
+      let bonus = getModifier(this.monster.abilityScores[skill.ability]) + this.proficiencyBonus
+      if (skill.isExpert) {
+        bonus += this.proficiencyBonus // Bonus de maître doublé pour les experts
+      }
+      bonus  = displayBonus(bonus)
+      result += ' ' + bonus
+      return result
+    },
+
+    displayHP () {
+      if (this.monster.customHP) {
+        return this.monster.customHP
+      } else if (this.monster.level) {
+        let hitDieSize = 8 // Dé de vie moyen par défaut
+        if (this.monster.hitDieSize) {
+          hitDieSize = this.monster.hitDieSize
+        } else if (this.monster.size) {
+          hitDieSize = stats.sizes[this.monster.size].hitDie
+        }
+        let hitDiceBonus = 1
+        if (this.monster.level > 1) {
+          hitDiceBonus = Math.floor(this.monster.level / 2)
+        }
+        let averageHP = this.monster.level * (hitDieSize / 2) + this.monster.level * getModifier(this.monster.abilityScores.con) + hitDiceBonus
+        let conMod = ""
+        if (getModifier(this.monster.abilityScores.con) != 0) {
+          conMod = this.monster.level * getModifier(this.monster.abilityScores.con)
+          conMod = displayBonus(conMod)
+        }
+        return averageHP + ' (' + this.monster.level + "d" + hitDieSize + conMod + ')'
+      }
+      return ""
+    },
+  },
+
+  mounted () {
+    //console.log(this.$page)
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/components/search/SRDSearchBox.vue

@@ -33,6 +33,7 @@
 <script>
 import matchQuery from './match-query'
 import { displaySchoolLevel } from '@theme/util/spellHelpers'
+import { displayItemMeta } from '@theme/util/magicItemHelpers'
 
 /* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
 export default {
@@ -111,10 +112,16 @@ export default {
               title: p.title,
               path: p.path
             }))
+          } else if (p.pid && p.pid == 'magicitem') {
+            res.push(Object.assign({}, p, {
+              subtitle: displayItemMeta(p.frontmatter, true),
+              title: p.title,
+              path: p.path
+            }))
           } else {
             res.push(p)
           }
-        } else if (p.headers) {
+        } else if (p.headers && p.pid != 'monster') { // Only parse relevent headers. Monster headers are not
           for (let j = 0; j < p.headers.length; j++) {
             if (res.length >= max) break
             const h = p.headers[j]

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

@@ -14,6 +14,9 @@
           </v-col>
         </v-row>
       </v-container>
+      <v-overlay :value="loading">
+        <v-progress-circular indeterminate size="64"></v-progress-circular>
+      </v-overlay>
     </v-content>
   </v-app>
 </template>
@@ -40,6 +43,9 @@ export default {
   },
 
   computed: {
+    loading () {
+      return this.$store.state.loading
+    },
     hasRightDrawer() {
       return this.$store.state.hasRightDrawer
     }

docs/.vuepress/theme/layouts/MonsterLayout.vue

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

docs/.vuepress/theme/util/magicItemHelpers.js

@@ -0,0 +1,15 @@
+export function displayItemMeta (item, short = false) {
+  let result = item.type
+  if (item.subtype) {
+    result += ' (' + item.subtype + ')'
+  }
+  result += ', ' + item.rarity
+  if (item.attunement) {
+    if (short) {
+      result += ' (harmonisation requise)'
+    } else {
+      result += ' (' + item.attunement + ')'
+    }
+  }
+  return result
+}

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

@@ -0,0 +1,26 @@
+// Calcul du modificateur de caractéristique
+export function getModifier (score) {
+  return Math.floor((score - 10) / 2)
+}
+
+// Ajoute un + devant les valeurs positives pour l'affichage
+export function displayBonus (value) {
+  if (value >= 0) {
+    value = '+' + value
+  }
+  return value
+}
+
+// Affichage d'un score de caractéristiques sous la forme 16 (+3)
+export function displayAbilityScore (score) {
+  let modifier = getModifier(score)
+  if (modifier >= 0) {
+    modifier = '+' + modifier
+  }
+  return score + ' (' + modifier + ')'
+}
+
+// Calcul du bonus de maîtrise en fonction du niveau
+export function getProficiencyBonus (level) {
+  return Math.ceil(level / 4) + 1
+}