calculateur de carac.

docs/.vuepress/config.js

@@ -577,6 +577,10 @@ module.exports = {
             title: "Création d'objet magique",
             path: '/creation-d-objet-magique/'
           },
+          {
+            title: "Calculateur de caractéristiques",
+            path: '/calculateur-de-caracteristiques/'
+          },
         ]
       },
       {type: 'divider'},

docs/.vuepress/data/abilityScores.js

@@ -20,3 +20,9 @@ export const ABILITYSCORES = [
   { text: 'Sagesse', value: 'sag' },
   { text: 'Charisme', value: 'cha' },
 ]
+
+export const POWERTIERS = [
+  { text: 'Courageux', pointBuy: 19, standardArray: [14,12,12,10,10,8] },
+  { text: 'Héroïque', pointBuy: 27, standardArray: [15,14,13,12,10,8] },
+  { text: 'Légendaire', pointBuy: 36, standardArray: [16,15,13,12,12,10] }
+]

docs/.vuepress/data/races.js

@@ -6,5 +6,171 @@ export const races = [
       { ability: 'cha', value: 2 }
     ],
     freeAbilityBonuses: { qty: 2, value: 1 }
+  },
+  {
+    key: 'demi-orc',
+    label: 'Demi-orc',
+    abilityBonuses: [
+      { ability: 'for', value: 2 },
+      { ability: 'con', value: 1 }
+    ],
+  },
+  {
+    key: 'elfe-d-aether',
+    label: "Elfe d'aether",
+    abilityBonuses: [
+      { ability: 'dex', value: 2 },
+      { ability: 'int', value: 1 }
+    ]
+  },
+  {
+    key: 'elfe-de-fer',
+    label: "Elfe de fer",
+    abilityBonuses: [
+      { ability: 'dex', value: 2 },
+      { ability: 'cha', value: 1 }
+    ]
+  },
+  {
+    key: 'elfe-des-sylves',
+    label: "Elfe des sylves",
+    abilityBonuses: [
+      { ability: 'dex', value: 2 },
+      { ability: 'sag', value: 1 }
+    ]
+  },
+  {
+    key: 'gnome-des-roches',
+    label: "Gnome des roches",
+    abilityBonuses: [
+      { ability: 'int', value: 2 },
+      { ability: 'con', value: 1 }
+    ]
+  },
+  {
+    key: 'gnome-des-fees',
+    label: "Gnome des fées",
+    abilityBonuses: [
+      { ability: 'int', value: 2 },
+      { ability: 'dex', value: 1 }
+    ]
+  },
+  {
+    key: 'gnome-des-lacs',
+    label: "Gnome des lacs",
+    abilityBonuses: [
+      { ability: 'int', value: 2 },
+      { ability: 'sag', value: 1 }
+    ]
+  },
+  {
+    key: 'halfelin-pied-leger',
+    label: "Halfelin pied-léger",
+    abilityBonuses: [
+      { ability: 'dex', value: 2 },
+      { ability: 'cha', value: 1 }
+    ]
+  },
+  {
+    key: 'halfelin-grand-sabot',
+    label: "Halfelin grand-sabot",
+    abilityBonuses: [
+      { ability: 'dex', value: 2 },
+      { ability: 'con', value: 1 }
+    ]
+  },
+  {
+    key: 'humain',
+    label: "Humain",
+    abilityBonuses: [
+      { ability: 'for', value: 1 },
+      { ability: 'dex', value: 1 },
+      { ability: 'con', value: 1 },
+      { ability: 'int', value: 1 },
+      { ability: 'sag', value: 1 },
+      { ability: 'cha', value: 1 }
+    ]
+  },
+  {
+    key: 'humain-variante-don',
+    label: "Humain (variante don)",
+    freeAbilityBonuses: { qty: 3, value: 1 }
+  },
+  {
+    key: 'humain-variante-maitrises',
+    label: "Humain (variante maîtrises)",
+    freeAbilityBonuses: { qty: 4, value: 1 }
+  },
+  {
+    key: 'nain-des-tertres',
+    label: "Nain des tertres",
+    abilityBonuses: [
+      { ability: 'con', value: 2 },
+      { ability: 'sag', value: 1 }
+    ]
+  },
+  {
+    key: 'nain-des-pierres',
+    label: "Nain des pierres",
+    abilityBonuses: [
+      { ability: 'con', value: 2 },
+      { ability: 'int', value: 1 }
+    ]
+  },
+  {
+    key: 'nain-des-laves',
+    label: "Nain des laves",
+    abilityBonuses: [
+      { ability: 'con', value: 2 },
+      { ability: 'for', value: 1 }
+    ]
+  },
+  {
+    key: 'aasimar',
+    label: "Aasimar",
+    abilityBonuses: [
+      { ability: 'cha', value: 2 },
+      { ability: 'sag', value: 1 }
+    ]
+  },
+  {
+    key: 'demi-ogre',
+    label: "Demi-ogre",
+    abilityBonuses: [
+      { ability: 'for', value: 1 },
+      { ability: 'con', value: 2 }
+    ]
+  },
+  {
+    key: 'felys',
+    label: "Félys",
+    abilityBonuses: [
+      { ability: 'dex', value: 2 },
+      { ability: 'sag', value: 1 }
+    ]
+  },
+  {
+    key: 'homme-serpent',
+    label: "Homme-serpent",
+    abilityBonuses: [
+      { ability: 'sag', value: 2 },
+      { ability: 'cha', value: 1 }
+    ]
+  },
+  {
+    key: 'sangdragon',
+    label: "Sangdragon",
+    abilityBonuses: [
+      { ability: 'for', value: 2 },
+      { ability: 'cha', value: 1 }
+    ]
+  },
+  {
+    key: 'tieffelin',
+    label: "Tieffelin",
+    abilityBonuses: [
+      { ability: 'cha', value: 2 },
+      { ability: 'int', value: 1 }
+    ]
   }
 ]

docs/.vuepress/theme/components/AbilityCalculator.vue

@@ -1,38 +1,96 @@
 <template>
   <div class="ability-scores-calculator">
     <v-row>
-      <v-col class="text-center">
+      <v-col :cols="12" :md="8" :lg="6">
-        <v-select :items="races" label="Choisissez une race" item-text="label" v-model="race" return-object outlined @change="selectRace"></v-select>
+        <v-row>
-      </v-col>
+          <v-col>
-      <v-col v-if="race && race.freeAbilityBonuses">
+            <v-btn color="primary" @click.stop="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
-        <v-select :items="abilityScoresChoices" multiple label="Bonus aux caractéristiques" v-model="abilityBonuses" outlined @input="selectAbilityBonus"></v-select>
           </v-col>
         </v-row>
-    <v-row v-for="ability in abilityScores" class="mb-0">
+
-      <v-col class="text-center">{{ ability.label }}</v-col>
+        <v-row>
-      <v-col class="text-center"><v-text-field label="Base" outlined dense type="number" min="6" max="16" v-model="ability.value"></v-text-field></v-col>
+          <v-col>
-      <v-col class="text-center">+</v-col>
+            <v-select dense :items="races" label="Race" item-text="label" v-model="race" return-object outlined @change="selectRace(true)"></v-select>
-      <v-col class="text-center">{{ ability.racialBonus }}</v-col>
+          </v-col>
-      <v-col class="text-center">=</v-col>
+          <v-col v-if="race && race.freeAbilityBonuses">
-      <v-col class="text-center"><v-text-field label="Total" outlined dense readonly :value="getTotal(ability.key)"></v-text-field></v-col>
+            <v-select dense :items="abilityScoresChoices" multiple label="Bonus aux caractéristiques" v-model="abilityBonuses" outlined @change="selectAbilityBonus"></v-select>
-      <v-col class="text-center"><v-text-field label="Modificateur" outlined dense readonly :value="displayBonus(getModifier(getTotal(ability.key)))"></v-text-field></v-col>
+          </v-col>
-      <v-col class="text-center"><v-text-field label="Coût" outlined dense readonly :value="abilityScoreCosts[ability.value].cost"></v-text-field></v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-select dense :items="generationMethodChoices" label="Méthode d'attribution" v-model="generationMethod" outlined @change="selectGenerationMethod"></v-select>
+          </v-col>
+          <v-col>
+            <v-select dense :items="powerTiers" return-object label="Niveau de puissance" v-model="powerTier" outlined :hint="hintPowerTier" persistent-hint @change="selectPowerTier"></v-select>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-simple-table>
+              <template v-slot:default>
+                <thead>
+                  <tr>
+                    <th class="text-center">Caractéristique</th>
+                    <th class="text-center">Base</th>
+                    <th class="text-center"></th>
+                    <th class="text-center">Bonus racial</th>
+                    <th class="text-center"></th>
+                    <th class="text-center"><strong>Total</strong></th>
+                    <th class="text-center"><strong>Mod.</strong></th>
+                    <th v-if="generationMethod == 'pointBuy'" class="text-center">Coût</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="ability in abilityScores" :key="ability.key">
+                    <td class="text-center"><span class="subtitle-2">{{ ability.label }}</span></td>
+                    <td class="text-center" style="width:110px">
+                      <v-text-field v-if="generationMethod == 'pointBuy'" class="text-center" outlined hide-details dense type="number" min="6" max="16" v-model="ability.value"></v-text-field>
+                      <template v-else-if="generationMethod == 'standardArray'">
+                        <v-select v-if="!ability.value" dense :items="standardArrayValues" v-model="ability.value" outlined hide-details clearable @change="selectAbilityValue(ability)"></v-select>
+                        <v-text-field v-else class="text-center" outlined hide-details dense readonly clearable v-model="ability.value"></v-text-field>
+                      </template>
+                    </td>
+                    <td class="text-center">+</td>
+                    <td class="text-center">{{ ability.racialBonus }}</td>
+                    <td class="text-center">=</td>
+                    <td class="text-center"><strong>{{ getTotal(ability) }}</strong></td>
+                    <td class="text-center"><strong>{{ displayBonus(getModifier(getTotal(ability))) }}</strong></td>
+                    <td v-if="generationMethod == 'pointBuy'" class="text-center">{{ getAbilityScoreCost(ability) }}</td>
+                  </tr>
+                  <tr v-if="generationMethod == 'pointBuy' && powerTier"><td class="text-right" colspan="8">Points restants : {{ pointsRemaining }}/{{ powerTier.pointBuy }}</td></tr>
+                </tbody>
+              </template>
+            </v-simple-table>
+          </v-col>
+        </v-row>
+      </v-col>
     </v-row>
   </div>
 </template>
 
 <script>
 import { getModifier, displayBonus, displayAbilityScore } from '@theme/util/monsterHelpers'
-import { ABILITYSCORECOSTS, ABILITYSCORES } from '../../data/abilityScores'
+import { ABILITYSCORECOSTS, ABILITYSCORES, POWERTIERS } from '../../data/abilityScores'
 import { races } from '../../data/races'
 
+const GENERATION_METHOD_CHOICES = [
+  { text: 'Méthode fixe', value: 'standardArray' },
+  { text: 'Méthode par répartition', value: 'pointBuy' }
+]
+
 export default {
   data () {
     return {
+      generationMethodChoices: GENERATION_METHOD_CHOICES,
+      generationMethod: GENERATION_METHOD_CHOICES[1].value,
       abilityScoreCosts: ABILITYSCORECOSTS,
-      abilityScoresChoices: ABILITYSCORES,
+      powerTiers: POWERTIERS,
+      abilityScoresChoices: null,
       races: races,
       race: null,
+      powerTier: POWERTIERS[1],
       abilityScores: [
         { key: 'for', label: 'Force', value: 8, racialBonus: 0},
         { key: 'dex', label: 'Dextérité', value: 8, racialBonus: 0},
@@ -45,18 +103,62 @@ export default {
     }
   },
 
+  computed: {
+    hintPowerTier () {
+      if (this.generationMethod && this.powerTier) {
+        if (this.generationMethod == 'standardArray') {
+          return 'Valeurs fixes : ' + this.powerTier.standardArray
+        } else if (this.generationMethod == 'pointBuy') {
+          return 'Points disponibles : ' + this.powerTier.pointBuy
+        }
+      }
+      return ''
+    },
+
+    pointsRemaining () {
+      if (!this.powerTier) {
+        return 0
+      }
+      let pointSpent = 0
+      for (let ability of this.abilityScores) {
+        if (ABILITYSCORECOSTS[ability.value]) {
+          pointSpent += ABILITYSCORECOSTS[ability.value].cost
+        }
+      }
+      return this.powerTier.pointBuy - pointSpent
+    },
+
+    standardArrayValues () {
+      let values = Array.from(this.powerTier.standardArray)
+      for (let ability of this.abilityScores) {
+        if (ability.value) {
+          values.splice(values.indexOf(ability.value), 1)
+        }
+      }
+      return values
+    }
+  },
+
   methods: {
     getTotal (ability) {
-      let total = null
+      let total = 0
-      for (let score of this.abilityScores) {
+      if (!ability.value) {
-        if (score.key == ability) {
+        return '--'
-          total = parseInt(score.value) + parseInt(score.racialBonus)
       }
+      return parseInt(ability.value) + parseInt(ability.racialBonus)
+    },
+
+    getAbilityScoreCost (ability) {
+      if (ABILITYSCORECOSTS[ability.value]) {
+        return ABILITYSCORECOSTS[ability.value].cost
       }
-      return total
+      return null
     },
 
     getModifier (value) {
+      if (value == '--') {
+        return '--'
+      }
       return getModifier(value)
     },
 
@@ -64,7 +166,7 @@ export default {
       return displayBonus(score)
     },
 
-    selectRace () {
+    selectRace (clear = false) {
       for (let ability of this.abilityScores) {
         ability.racialBonus = 0
         if (this.race.abilityBonuses) {
@@ -75,17 +177,80 @@ export default {
           }
         }
       }
+
+      if (clear) {
+        this.abilityBonuses = []
+      }
+
+      let choices = Array.from(ABILITYSCORES)
+      if (this.race && this.race.abilityBonuses) {
+        for (let abilityBonus of this.race.abilityBonuses) {
+          choices.splice(choices.findIndex(item => item.value == abilityBonus.key), 1)
+        }
+      }
+      this.abilityScoresChoices = choices
     },
 
     selectAbilityBonus (e) {
       if(e.length > this.race.freeAbilityBonuses.qty) {
         e.pop()
+      } else {
+        this.selectRace()
+        for (let bonus of this.abilityBonuses) {
+          this.abilityScores[this.abilityScores.findIndex(item => item.key == bonus)].racialBonus = this.race.freeAbilityBonuses.value
         }
-      console.log(this.abilityBonuses)
+      }
+    },
+
+    selectGenerationMethod () {
+      // Réinitialisation des valeurs au changement de la méthode d'attribution
+      if (this.generationMethod) {
+        if (this.generationMethod == 'pointBuy') {
+          for (let ability of this.abilityScores) {
+            ability.value = 8
+          }
+        } else if (this.generationMethod == 'standardArray') {
+          for (let ability of this.abilityScores) {
+            ability.value = null
+          }
+        }
+      }
+    },
+
+    selectPowerTier () {
+      if (this.generationMethod == 'standardArray') {
+        for (let ability of this.abilityScores) {
+          ability.value = null
+        }
+      }
+    },
+
+    selectAbilityValue (ability) {
+      // console.log(ability)
+    },
+
+    reset () {
+      this.race = null
+      this.generationMethod = GENERATION_METHOD_CHOICES[1].value
+      this.powerTier = POWERTIERS[1]
+      this.abilityScores = [
+        { key: 'for', label: 'Force', value: 8, racialBonus: 0},
+        { key: 'dex', label: 'Dextérité', value: 8, racialBonus: 0},
+        { key: 'con', label: 'Constitution', value: 8, racialBonus: 0},
+        { key: 'int', label: 'Intelligence', value: 8, racialBonus: 0},
+        { key: 'sag', label: 'Sagesse', value: 8, racialBonus: 0},
+        { key: 'cha', label: 'Charisme', value: 8, racialBonus: 0}
+      ]
+      this.abilityBonuses = []
     }
   }
 }
 </script>
 
 <style lang="scss">
+.v-input.text-center {
+  input {
+    text-align: center;
+  }
+}
 </style>

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

@@ -53,6 +53,8 @@
               crumbs.push({to: page.path, disabled: disabled, text: 'Création de sort'})
             } else if (page.path == '/creation-de-monstre-pnj/') {
               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 {
               crumbs.push({to: page.path, disabled: disabled, text: page.frontmatter.breadcrumb || page.title})
             }

docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue

@@ -1,12 +1,17 @@
 <template>
+  <div>
+    <Breadcrumb class="mr-auto" />
+
     <AbilityCalculator />
+  </div>
 </template>
 
 <script>
+import Breadcrumb from '@theme/components/Breadcrumb'
 import AbilityCalculator from '@theme/components/AbilityCalculator'
 
 export default {
-  components: { AbilityCalculator }
+  components: { Breadcrumb, AbilityCalculator }
 }
 </script>