From 79ed65ccaf3741de57032e6d0a3692d3100e14d7 Mon Sep 17 00:00:00 2001
From: Maxime Moraine <mmoraine@bearstech.com>
Date: Mon, 27 Apr 2020 09:04:49 +0200
Subject: [PATCH 1/2] ability calculator

---
 docs/.vuepress/config.js                      |  6 ++
 docs/.vuepress/data/abilityScores.js          | 22 +++++
 docs/.vuepress/data/races.js                  | 10 ++
 .../theme/components/AbilityCalculator.vue    | 91 +++++++++++++++++++
 .../theme/layouts/AbilityCalculatorLayout.vue | 14 +++
 5 files changed, 143 insertions(+)
 create mode 100644 docs/.vuepress/data/abilityScores.js
 create mode 100644 docs/.vuepress/data/races.js
 create mode 100644 docs/.vuepress/theme/components/AbilityCalculator.vue
 create mode 100644 docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 72af488..d7ec31b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -179,6 +179,12 @@ module.exports = {
        frontmatter: {
           layout: 'CreateMagicItemLayout'
        }
+    },
+    {
+       path: '/calculateur-de-caracteristiques/',
+       frontmatter: {
+          layout: 'AbilityCalculatorLayout'
+       }
     }
   ],
   themeConfig: {
diff --git a/docs/.vuepress/data/abilityScores.js b/docs/.vuepress/data/abilityScores.js
new file mode 100644
index 0000000..590dfb1
--- /dev/null
+++ b/docs/.vuepress/data/abilityScores.js
@@ -0,0 +1,22 @@
+export const ABILITYSCORECOSTS = {
+  6: { cost: -2 },
+  7: { cost: -1 },
+  8: { cost: 0 },
+  9: { cost: 1 },
+  10: { cost: 2 },
+  11: { cost: 3 },
+  12: { cost: 4 },
+  13: { cost: 5 },
+  14: { cost: 7 },
+  15: { cost: 9 },
+  16: { cost: 12 },
+}
+
+export const ABILITYSCORES = [
+  { text: 'Force', value: 'for' },
+  { text: 'Dextérité', value: 'dex' },
+  { text: 'Constitution', value: 'con' },
+  { text: 'Intelligence', value: 'int' },
+  { text: 'Sagesse', value: 'sag' },
+  { text: 'Charisme', value: 'cha' },
+]
diff --git a/docs/.vuepress/data/races.js b/docs/.vuepress/data/races.js
new file mode 100644
index 0000000..b7b6b13
--- /dev/null
+++ b/docs/.vuepress/data/races.js
@@ -0,0 +1,10 @@
+export const races = [
+  {
+    key: 'demi-elfe',
+    label: 'Demi-elfe',
+    abilityBonuses: [
+      { ability: 'cha', value: 2 }
+    ],
+    freeAbilityBonuses: { qty: 2, value: 1 }
+  }
+]
diff --git a/docs/.vuepress/theme/components/AbilityCalculator.vue b/docs/.vuepress/theme/components/AbilityCalculator.vue
new file mode 100644
index 0000000..b6fc15e
--- /dev/null
+++ b/docs/.vuepress/theme/components/AbilityCalculator.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="ability-scores-calculator">
+    <v-row>
+      <v-col class="text-center">
+        <v-select :items="races" label="Choisissez une race" item-text="label" v-model="race" return-object outlined @change="selectRace"></v-select>
+      </v-col>
+      <v-col v-if="race && race.freeAbilityBonuses">
+        <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-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 class="text-center">+</v-col>
+      <v-col class="text-center">{{ ability.racialBonus }}</v-col>
+      <v-col class="text-center">=</v-col>
+      <v-col class="text-center"><v-text-field label="Total" outlined dense readonly :value="getTotal(ability.key)"></v-text-field></v-col>
+      <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 class="text-center"><v-text-field label="Coût" outlined dense readonly :value="abilityScoreCosts[ability.value].cost"></v-text-field></v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import { getModifier, displayBonus, displayAbilityScore } from '@theme/util/monsterHelpers'
+import { ABILITYSCORECOSTS, ABILITYSCORES } from '../../data/abilityScores'
+import { races } from '../../data/races'
+
+export default {
+  data () {
+    return {
+      abilityScoreCosts: ABILITYSCORECOSTS,
+      abilityScoresChoices: ABILITYSCORES,
+      races: races,
+      race: null,
+      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}
+      ],
+      abilityBonuses: []
+    }
+  },
+
+  methods: {
+    getTotal (ability) {
+      let total = null
+      for (let score of this.abilityScores) {
+        if (score.key == ability) {
+          total = parseInt(score.value) + parseInt(score.racialBonus)
+        }
+      }
+      return total
+    },
+
+    getModifier (value) {
+      return getModifier(value)
+    },
+
+    displayBonus (score) {
+      return displayBonus(score)
+    },
+
+    selectRace () {
+      for (let ability of this.abilityScores) {
+        ability.racialBonus = 0
+        if (this.race.abilityBonuses) {
+          for (var bonus of this.race.abilityBonuses) {
+            if (bonus.ability == ability.key) {
+              ability.racialBonus = bonus.value
+            }
+          }
+        }
+      }
+    },
+
+    selectAbilityBonus (e) {
+      if(e.length > this.race.freeAbilityBonuses.qty) {
+        e.pop()
+      }
+      console.log(this.abilityBonuses)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue b/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue
new file mode 100644
index 0000000..9c7828c
--- /dev/null
+++ b/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue
@@ -0,0 +1,14 @@
+<template>
+  <AbilityCalculator />
+</template>
+
+<script>
+import AbilityCalculator from '@theme/components/AbilityCalculator'
+
+export default {
+  components: { AbilityCalculator }
+}
+</script>
+
+<style lang="scss">
+</style>

From 4dab0808de3fadce9af04d5fd3b7be10f5e4d2f8 Mon Sep 17 00:00:00 2001
From: Maxime Moraine <mmoraine@bearstech.com>
Date: Mon, 27 Apr 2020 17:42:48 +0200
Subject: [PATCH 2/2] calculateur de carac.

---
 docs/.vuepress/config.js                      |   4 +
 docs/.vuepress/data/abilityScores.js          |   6 +
 docs/.vuepress/data/races.js                  | 166 ++++++++++++++
 .../theme/components/AbilityCalculator.vue    | 217 +++++++++++++++---
 .../.vuepress/theme/components/Breadcrumb.vue |   2 +
 .../theme/layouts/AbilityCalculatorLayout.vue |   9 +-
 6 files changed, 376 insertions(+), 28 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d7ec31b..1723f59 100644
--- a/docs/.vuepress/config.js
+++ b/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'},
diff --git a/docs/.vuepress/data/abilityScores.js b/docs/.vuepress/data/abilityScores.js
index 590dfb1..12835ca 100644
--- a/docs/.vuepress/data/abilityScores.js
+++ b/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] }
+]
diff --git a/docs/.vuepress/data/races.js b/docs/.vuepress/data/races.js
index b7b6b13..c70f9a9 100644
--- a/docs/.vuepress/data/races.js
+++ b/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 }
+    ]
   }
 ]
diff --git a/docs/.vuepress/theme/components/AbilityCalculator.vue b/docs/.vuepress/theme/components/AbilityCalculator.vue
index b6fc15e..967b786 100644
--- a/docs/.vuepress/theme/components/AbilityCalculator.vue
+++ b/docs/.vuepress/theme/components/AbilityCalculator.vue
@@ -1,38 +1,96 @@
 <template>
   <div class="ability-scores-calculator">
     <v-row>
-      <v-col class="text-center">
-        <v-select :items="races" label="Choisissez une race" item-text="label" v-model="race" return-object outlined @change="selectRace"></v-select>
+      <v-col :cols="12" :md="8" :lg="6">
+        <v-row>
+          <v-col>
+            <v-btn color="primary" @click.stop="reset"><v-icon>mdi-eraser</v-icon> Réinitialiser</v-btn>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <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>
+          <v-col v-if="race && race.freeAbilityBonuses">
+            <v-select dense :items="abilityScoresChoices" multiple label="Bonus aux caractéristiques" v-model="abilityBonuses" outlined @change="selectAbilityBonus"></v-select>
+          </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-col v-if="race && race.freeAbilityBonuses">
-        <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-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 class="text-center">+</v-col>
-      <v-col class="text-center">{{ ability.racialBonus }}</v-col>
-      <v-col class="text-center">=</v-col>
-      <v-col class="text-center"><v-text-field label="Total" outlined dense readonly :value="getTotal(ability.key)"></v-text-field></v-col>
-      <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 class="text-center"><v-text-field label="Coût" outlined dense readonly :value="abilityScoreCosts[ability.value].cost"></v-text-field></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 {
     }
   },
 
-  methods: {
-    getTotal (ability) {
-      let total = null
-      for (let score of this.abilityScores) {
-        if (score.key == ability) {
-          total = parseInt(score.value) + parseInt(score.racialBonus)
+  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 total
+      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 = 0
+      if (!ability.value) {
+        return '--'
+      }
+      return parseInt(ability.value) + parseInt(ability.racialBonus)
+    },
+
+    getAbilityScoreCost (ability) {
+      if (ABILITYSCORECOSTS[ability.value]) {
+        return ABILITYSCORECOSTS[ability.value].cost
+      }
+      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>
diff --git a/docs/.vuepress/theme/components/Breadcrumb.vue b/docs/.vuepress/theme/components/Breadcrumb.vue
index 74f0680..16e950a 100644
--- a/docs/.vuepress/theme/components/Breadcrumb.vue
+++ b/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})
             }
diff --git a/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue b/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue
index 9c7828c..8058951 100644
--- a/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue
+++ b/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue
@@ -1,12 +1,17 @@
 <template>
-  <AbilityCalculator />
+  <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>