calculateur de rencontres

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

@@ -57,6 +57,8 @@
               crumbs.push({to: page.path, disabled: disabled, text: 'Création de monstre ou PNJ'})
             } else if (page.path == '/calculateur-de-caracteristiques/') {
               crumbs.push({to: page.path, disabled: disabled, text: 'Calculateur de caractéristiques'})
+            } else if (page.path == '/calculateur-de-rencontres/') {
+              crumbs.push({to: page.path, disabled: disabled, text: 'Calculateur de rencontres'})
             } else {
               crumbs.push({to: page.path, disabled: disabled, text: page.frontmatter.breadcrumb || page.title})
             }

docs/.vuepress/theme/components/EncounterCalculator.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="encounter-calculator pa-1">
+
+    <v-expansion-panels multiple flat hover v-model="panels">
+
+      <v-expansion-panel>
+        <v-expansion-panel-header><strong>Calculateur de rencontre</strong></v-expansion-panel-header>
+        <v-expansion-panel-content class="pt-1">
+          <div>
+            <v-select :items="encounterLevels" item-text="level" item-value="level" label="Niveau moyen du groupe" outlined dense v-model="level"></v-select>
+          </div>
+          <div>
+            <v-text-field label="Nombre de PJ" type="number" min="1" outlined dense v-model="pc"></v-text-field>
+          </div>
+          <div v-if="creatures.length == 0" class="body-2 font-italic">
+            Aucune créature sélectionnée
+          </div>
+          <div v-else>
+            <div class="body-2 mb-4">
+              <span class="subtitle-2">Difficulté: </span>{{challenge.label}}
+              <v-progress-linear
+              :color="challenge.color"
+              :value="challengeRate"
+              ></v-progress-linear>
+            </div>
+            <v-row class="d-flex align-center my-0" v-for="c in creatures">
+              <v-col class="px-0 py-1">
+                <div class="subtitle-2">{{c.title}}</div>
+                <!-- <div><span class="subtitle-2">ID : </span>{{c.frontmatter.challenge}}</div> -->
+              </v-col>
+              <v-col class="px-0 py-1">
+                <v-btn dense icon small @click="removeCreatureInEncounter(c)">
+                  <v-icon color="red">mdi-delete</v-icon>
+                </v-btn>
+              </v-col>
+            </v-row>
+          </div>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+
+    </v-expansion-panels>
+
+  </div>
+</template>
+
+<script>
+import { mapState, mapGetters } from 'vuex'
+import { CHALLENGES, ENCOUNTERLEVELS } from '../../data/monsters'
+import { getPCbyChallenge } from '@theme/util/monsterHelpers'
+
+export default {
+  name: 'EncounterCalculator',
+
+  data () {
+    return {
+      panels: [0],
+      challenges: CHALLENGES,
+      encounterLevels: ENCOUNTERLEVELS,
+    }
+  },
+
+  computed: {
+    ...mapState({
+      creatures: state => state.encounterCalculator.creatures,
+    }),
+
+    ...mapGetters({
+      totalPC: 'encounterCalculator/totalPC',
+    }),
+
+    pc: {
+      get () {
+        return this.$store.state.encounterCalculator.pc
+      },
+      set (newValue) {
+        this.$store.commit('encounterCalculator/setPC', newValue)
+      }
+    },
+
+    level: {
+      get () {
+        return this.$store.state.encounterCalculator.level
+      },
+      set (newValue) {
+        this.$store.commit('encounterCalculator/setLevel', Number(newValue))
+      }
+    },
+
+    challenge () {
+      let label = "Aisée"
+      let color = 'green'
+      if (this.totalPC > this.challengeForGroup.easy) {
+        label = "Ordinaire"
+        color = 'amber'
+      }
+      if (this.totalPC > this.challengeForGroup.normal) {
+        label = "Ardue"
+        color = 'orange'
+      }
+      if (this.totalPC > this.challengeForGroup.hard) {
+        label = "Abominable"
+        color = 'red'
+      }
+      if (this.totalPC > this.challengeForGroup.deadly) {
+        label = "Impossible"
+        color = 'purple'
+      }
+      return {label, color}
+    },
+
+    totalPC () {
+      let pc = 0
+      for (let c of this.creatures) {
+        pc += getPCbyChallenge(Number(c.frontmatter.challenge))
+      }
+      return pc
+    },
+
+    challengeForGroup () {
+      let level = this.encounterLevels[this.encounterLevels.findIndex((item) => { return item.level == this.level })]
+      return {
+        easy: (level.easy*this.pc)/4,
+        normal: (level.normal*this.pc)/4,
+        hard: (level.hard*this.pc)/4,
+        deadly: (level.deadly*this.pc)/4,
+      }
+    },
+
+    challengeRate () {
+      return (this.totalPC/this.challengeForGroup.deadly)*100
+    },
+  },
+
+  methods: {
+    removeCreatureInEncounter (creature) {
+      this.$store.commit('encounterCalculator/removeCreature', creature)
+    }
+  },
+
+  mounted () {
+
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

docs/.vuepress/theme/components/RightDrawer.vue

@@ -4,6 +4,7 @@
     <SpellFilters v-if="hasSpellFilters" />
     <MagicItemFilters v-if="hasMagicItemFilters" />
     <MonsterFilters v-if="hasMonsterFilters" />
+    <EncounterCalculator v-if="hasMonsterFilters" />
   </v-navigation-drawer>
 </template>
 
@@ -12,6 +13,7 @@ import PageToc from '@theme/components/PageToc'
 import SpellFilters from '@theme/components/SpellFilters'
 import MagicItemFilters from '@theme/components/MagicItemFilters'
 import MonsterFilters from '@theme/components/MonsterFilters'
+import EncounterCalculator from '@theme/components/EncounterCalculator'
 
 export default {
   name: 'RightDrawer',
@@ -20,6 +22,7 @@ export default {
     SpellFilters,
     MagicItemFilters,
     MonsterFilters,
+    EncounterCalculator,
     PageToc
   },