5E/5e-drs
1
0
Fork 0
mirror of https://github.com/em-squared/5e-drs.git synced 2025-10-31 13:34:21 +00:00
Code Issues Projects Releases Wiki Activity

* Ajout de raccourcis sur la page d'accueil

Browse source 
* Ajout de feedback au changement de page
This commit is contained in:
Maxime Moraine 2020-05-15 15:48:51 +02:00
parent ff7beafe06
commit 72a29eaaf0
16 changed files with 325 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

3
docs/.vuepress/config.js
View file

@ -191,6 +191,9 @@ module.exports = {
domain: 'https://staging.heros-et-dragons.fr',
repository: 'https://github.com/em-squared/heros-et-dragons-drs',
kofi: 'https://ko-fi.com/S6S410PB8',
patreon: 'https://www.patreon.com/em_squared',
forum: 'https://www.black-book-editions.fr/forums.php?board_id=115',
discord: 'https://discord.gg/mp6ECCs',
primaryColor: '#563f5a', // Hero
accentColor: '#9b1c47', // Dragon
searchPlaceholder: 'Recherche',

10
docs/.vuepress/store/index.js
View file

@ -24,13 +24,14 @@ export default new Vuex.Store({
},
state: {
loading: false,
loading: true,
drawer: false,
rightDrawer: false,
hasRightDrawer: false,
inRightDrawer: null,
isThemeDark: false,
isOpenAboutDialog: false,
isOpenSupportDialog: false,
},
getters: {
@ -41,6 +42,7 @@ export default new Vuex.Store({
inRightDrawer: state => state.inRightDrawer,
isThemeDark: state => state.isThemeDark,
isOpenAboutDialog: state => state.isOpenAboutDialog,
isOpenSupportDialog: state => state.isOpenSupportDialog,
},
actions: {
@ -65,6 +67,9 @@ export default new Vuex.Store({
isOpenAboutDialog: ({ commit }, payload) => {
commit('setIsOpenAboutDialog', payload)
},
isOpenSupportDialog: ({ commit }, payload) => {
commit('setIsOpenSupportDialog', payload)
},
},
mutations: {
@ -91,5 +96,8 @@ export default new Vuex.Store({
setIsOpenAboutDialog: (state, payload) => {
state.isOpenAboutDialog = payload
},
setIsOpenSupportDialog: (state, payload) => {
state.isOpenSupportDialog = payload
},
},
})

59
docs/.vuepress/theme/components/NavDrawer.vue
View file

@ -77,6 +77,26 @@
</v-list-item-content>
</v-list-item>
</template>
<v-list-item v-if="$site.themeConfig.forum" link :href="$site.themeConfig.forum" target="_blank">
<v-list-item-icon>
<v-icon>mdi-forum</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
Forum
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="$site.themeConfig.discord" link :href="$site.themeConfig.discord" target="_blank">
<v-list-item-icon>
<v-icon>mdi-discord</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
Discord
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="$site.themeConfig.repository" link :href="$site.themeConfig.repository" target="_blank">
<v-list-item-icon>
<v-icon>mdi-github</v-icon>
@ -87,7 +107,7 @@
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item v-if="$site.themeConfig.kofi" link :href="$site.themeConfig.kofi" target="_blank">
<v-list-item v-if="$site.themeConfig.kofi && $site.themeConfig.patreon" @click.stop="toggleSupportDialog">
<v-list-item-icon>
<v-icon>mdi-glass-mug-variant</v-icon>
</v-list-item-icon>
@ -132,6 +152,14 @@
<p><strong><em>Héros & Dragons</em></strong> est un jeu de rôle basé sur les mécaniques de l’<a href="/licence-ogl">OGL5</a> et développé par les talents de la rédaction de <em><a href="https://www.black-book-editions.fr/catalogue.php?id=40" target="_blank">Casus Belli</a></em>, le magazine de référence des jeux de rôle.</p>
<p>Les textes de cette documentation appartiennent à <a href="https://www.black-book-editions.fr/catalogue.php?id=365" target="_blank">Black Book Éditions</a>.</p>
<p>Casus Belli et Black Book Éditions sont des marques déposées par <a href="https://www.black-book-editions.fr/" target="_blank">Black Book Éditions</a>. Tous droits réservés.</p>
<v-row v-if="$site.themeConfig.kofi && $site.themeConfig.patreon">
<v-col class="text-center">
<v-btn depressed dark color="#f96854" link :href="$site.themeConfig.patreon" target="_blank"><v-icon class="mr-2">mdi-patreon</v-icon>Patreon</v-btn>
</v-col>
<v-col class="text-center">
<v-btn depressed dark color="#29abe0" link :href="$site.themeConfig.kofi" target="_blank"><v-icon class="mr-2">mdi-coffee</v-icon>Ko-fi</v-btn>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
@ -139,6 +167,29 @@
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog v-model="isOpenSupportDialog" @click:outside="toggleSupportDialog" max-width="600">
<v-card>
<v-card-title class="headline">Encouragez le développement</v-card-title>
<v-card-text>
<p>Vous souhaitez participer aux frais d'hébergement ? Ou vous voulez encourager le développement de la plateforme ?</p>
<p>Votre participation sera appréciée !</p>
<v-row v-if="$site.themeConfig.kofi && $site.themeConfig.patreon">
<v-col class="text-center">
<v-btn depressed dark color="#f96854" link :href="$site.themeConfig.patreon" target="_blank"><v-icon class="mr-2">mdi-patreon</v-icon>Patreon</v-btn>
</v-col>
<v-col class="text-center">
<v-btn depressed dark color="#29abe0" link :href="$site.themeConfig.kofi" target="_blank"><v-icon class="mr-2">mdi-coffee</v-icon>Ko-fi</v-btn>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-btn color="primary" text @click="toggleSupportDialog">Fermer</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
@ -163,6 +214,9 @@ export default {
},
isOpenAboutDialog () {
return this.$store.state.isOpenAboutDialog
},
isOpenSupportDialog () {
return this.$store.state.isOpenSupportDialog
}
},
@ -207,6 +261,9 @@ export default {
toggleAboutDialog () {
this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
},
toggleSupportDialog () {
this.$store.commit('setIsOpenSupportDialog', !this.$store.state.isOpenSupportDialog)
},
setIsThemeDark () {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)

6
docs/.vuepress/theme/components/Navbar.vue
View file

@ -12,6 +12,9 @@
<v-btn class="hidden-sm-and-down" @click.stop="toggleAboutDialog" icon>
<v-icon>mdi-information</v-icon>
</v-btn>
<v-btn class="hidden-sm-and-down" @click.stop="toggleSupportDialog" icon>
<v-icon>mdi-glass-mug-variant</v-icon>
</v-btn>
<v-btn class="ml-5" @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
<v-icon>{{ rightDrawerIcon }}</v-icon>
</v-btn>
@ -71,6 +74,9 @@ export default {
toggleAboutDialog () {
this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
},
toggleSupportDialog () {
this.$store.commit('setIsOpenSupportDialog', !this.$store.state.isOpenSupportDialog)
},
setIsThemeDark () {
this.$vuetify.theme.dark = !this.$vuetify.theme.dark
this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)

12
docs/.vuepress/theme/global-components/MyMagicItemsButton.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques<v-chip v-if="$store.state.myMagicItems.magicItems.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.myMagicItems.magicItems.length }}</v-chip></v-btn>
</template>
<script>
export default {
name: 'MyMagicItemsButton'
}
</script>
<style lang="scss">
</style>

12
docs/.vuepress/theme/global-components/MyMonstersButton.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire<v-chip v-if="$store.state.myMonsters.monsters.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.myMonsters.monsters.length }}</v-chip></v-btn>
</template>
<script>
export default {
name: 'MyMontersButton'
}
</script>
<style lang="scss">
</style>

12
docs/.vuepress/theme/global-components/MySpellsButton.vue Normal file
View file

@ -0,0 +1,12 @@
<template>
<v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire<v-chip v-if="$store.state.mySpells.spells.length > 0" class="ml-2" color="#fff" small label>{{ $store.state.mySpells.spells.length }}</v-chip></v-btn>
</template>
<script>
export default {
name: 'MySpellsButton'
}
</script>
<style lang="scss">
</style>

30
docs/.vuepress/theme/layouts/GlobalLayout.vue
View file

@ -1,6 +1,10 @@
<template>
<v-app class="srd">
<v-overlay :value="$store.state.loading">
<v-progress-circular indeterminate size="64"></v-progress-circular>
</v-overlay>
<NavDrawer class="d-print-none" />
<RightDrawer class="d-print-none" v-if="hasRightDrawer" />
@ -84,6 +88,7 @@ export default {
},
mounted () {
this.$store.commit('setLoading', false) // Page chargée
this.$store.commit('setDrawer', this.$vuetify.breakpoint.lgAndUp)
// Cookie consent
@ -103,22 +108,17 @@ export default {
this.$store.commit('myMonsters/initialiseStore')
this.$store.commit('myMagicItems/initialiseStore')
// this.$vuetify.theme.dark = this.$store.state.isThemeDark
// Loading feedback
this.$router.beforeEach((to, from, next) => {
if (to.path !== from.path && !Vue.component(to.name)) {
this.$store.commit('setLoading', true)
}
next()
})
// let conditionLinks = document.links
// conditionLinks.forEach((link, idx) => {
// if (link.hash == "#a-terre") {
// let RTClass = Vue.extend(RuleTooltip)
// let rtInstance = new RTClass({
// propsData: { l: link.text, t: link.hash.substring(1, link.hash.length) },
// parent: this.$root
// })
// rtInstance.$mount()
// console.log(link)
// link = rtInstance.$el
// console.log(link)
// }
// })
this.$router.afterEach(() => {
this.$store.commit('setLoading', false)
})
},
methods: {

4
docs/.vuepress/theme/layouts/MagicItemLayout.vue
View file

@ -5,7 +5,7 @@
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
<v-btn :outlined="!isMagicItemInTreasureChest" color="accent" class="mr-4 mb-4" depressed @click="toggleMagicItemInTreasureChest"><v-icon>mdi-book</v-icon> {{ displayToggleMagicItemButton }}</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mes objets magiques</v-btn>
<MyMagicItemsButton />
</div>
</div>
<MagicItem :magicItem="$page" />
@ -16,6 +16,7 @@
<script>
import Breadcrumb from '@theme/components/Breadcrumb'
import MagicItem from '@theme/components/MagicItem'
import MyMagicItemsButton from '@theme/global-components/MyMagicItemsButton'
import Edit from '@theme/components/Edit'
export default {
@ -24,6 +25,7 @@ export default {
components: {
Breadcrumb,
MagicItem,
MyMagicItemsButton,
Edit
},

39
docs/.vuepress/theme/layouts/MagicItemsLayout.vue
View file

@ -5,12 +5,26 @@
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-d-objet-magique/"><v-icon left>mdi-plus</v-icon> Créer un objet magique</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mes-objets-magiques/">Mes objets magiques</v-btn>
<MyMagicItemsButton />
</div>
</div>
<h1>Liste des objets magiques</h1>
<div class="active-filters mb-2">
<div class="types-filter mb-1" v-if="selectedTypes.length > 0">
<strong>Types</strong> : <v-chip class="mr-1" v-for="(type, idx) in selectedTypes">{{ type }}</v-chip>
</div>
<div class="levels-filter mb-1" v-if="selectedRarities.length > 0">
<strong>Rareté</strong> : <v-chip class="mr-1" v-for="(rarity, idx) in selectedRarities">{{ rarity }}</v-chip>
</div>
<div class="attunement-filter mb-1" v-if="hasAttunement !== undefined">
<strong>Harmonisation</strong> :
<v-chip class="mr-1" v-if="hasAttunement === true" dark color="green">oui</v-chip>
<v-chip class="mr-1" v-if="hasAttunement === false" dark color="red">non</v-chip>
</div>
</div>
<v-data-table
class="data-table"
:headers="headers"
@ -64,9 +78,10 @@ import { mapState } from 'vuex'
import Breadcrumb from '@theme/components/Breadcrumb'
import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
import MagicItem from '@theme/components/MagicItem'
import MyMagicItemsButton from '@theme/global-components/MyMagicItemsButton'
export default {
components: { Breadcrumb, MagicItem },
components: { Breadcrumb, MagicItem, MyMagicItemsButton },
data () {
return {
@ -99,6 +114,26 @@ export default {
hasAttunement: state => state.magicItemFilters.hasAttunement,
}),
selectedTypes() {
let result = []
for (let type of this.types) {
if (type.value) {
result.push(type.label)
}
}
return result
},
selectedRarities() {
let result = []
for (let rarity of this.rarities) {
if (rarity.value) {
result.push(rarity.label)
}
}
return result
},
magicitems() {
let results = this.$pagination.pages

4
docs/.vuepress/theme/layouts/MonsterLayout.vue
View file

@ -5,7 +5,7 @@
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
<v-btn :outlined="!isMonsterInBestiary" color="accent" class="mr-4 mb-4" depressed @click="toggleMonsterInBestiary"><v-icon>mdi-book</v-icon> {{ displayToggleMonsterButton }}</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon Bestiaire</v-btn>
<MyMonstersButton />
</div>
</div>
<Monster :monster="$page" />
@ -16,6 +16,7 @@
<script>
import Breadcrumb from '@theme/components/Breadcrumb'
import Monster from '@theme/components/Monster'
import MyMonstersButton from '@theme/global-components/MyMonstersButton'
import Edit from '@theme/components/Edit'
export default {
@ -24,6 +25,7 @@ export default {
components: {
Breadcrumb,
Monster,
MyMonstersButton,
Edit
},

65
docs/.vuepress/theme/layouts/MonstersLayout.vue
View file

@ -5,12 +5,30 @@
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-monstre-pnj/"><v-icon left>mdi-plus</v-icon> Créer un monstre</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-bestiaire/">Mon bestiaire</v-btn>
<MyMonstersButton />
</div>
</div>
<h1>Bestiaire</h1>
<div class="active-filters mb-2">
<div class="challengeRange-filter" v-if="Number(challengeRange[0]) >= 0 && Number(challengeRange[1]) <= 30">
<strong>Indice de dangerosité</strong> entre {{ challengeRange[0] }} et {{ challengeRange[1]}}
</div>
<div class="types-filter mb-1" v-if="selectedTypes.length > 0">
<strong>Types</strong> : <v-chip class="mr-1" v-for="(type, idx) in selectedTypes">{{ type }}</v-chip>
</div>
<div class="sizes-filter mb-1" v-if="selectedSizes.length > 0">
<strong>Tailles</strong> : <v-chip class="mr-1" v-for="(size, idx) in selectedSizes">{{ size }}</v-chip>
</div>
<div class="environments-filter mb-1" v-if="selectedEnvironments.length > 0">
<strong>Environnements</strong> : <v-chip class="mr-1" v-for="(env, idx) in selectedEnvironments">{{ env }}</v-chip>
</div>
<div class="dungeon-types-filter mb-1" v-if="selectedDungeonTypes.length > 0">
<strong>Types de donjons</strong> : <v-chip class="mr-1" v-for="(dType, idx) in selectedDungeonTypes">{{ dType }}</v-chip>
</div>
</div>
<v-data-table
class="data-table"
:headers="headers"
@ -73,9 +91,10 @@ import Breadcrumb from '@theme/components/Breadcrumb'
import { displayChallenge } from '@theme/util/monsterHelpers'
import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
import Monster from '@theme/components/Monster'
import MyMonstersButton from '@theme/global-components/MyMonstersButton'
export default {
components: { Breadcrumb, Monster },
components: { Breadcrumb, Monster, MyMonstersButton },
data () {
return {
@ -99,7 +118,7 @@ export default {
{ text: "Sous-type", align: 'start', sortable: false, value: 'frontmatter.subtype' },
{ text: "Environnements", align: 'start', sortable: false, value: 'frontmatter.environments' },
{ text: "Type de donjons", align: 'start', sortable: false, value: 'frontmatter.dungeonTypes' },
],
]
}
},
@ -113,6 +132,46 @@ export default {
dungeonTypes: state => state.monsterFilters.dungeonTypes,
}),
selectedTypes() {
let result = []
for (let type of this.types) {
if (type.value) {
result.push(type.label)
}
}
return result
},
selectedSizes() {
let result = []
for (let size of this.sizes) {
if (size.value) {
result.push(size.label)
}
}
return result
},
selectedEnvironments() {
let result = []
for (let env of this.environments) {
if (env.value) {
result.push(env.label)
}
}
return result
},
selectedDungeonTypes() {
let result = []
for (let dType of this.dungeonTypes) {
if (dType.value) {
result.push(dType.label)
}
}
return result
},
monsters() {
let results = this.$pagination.pages

4
docs/.vuepress/theme/layouts/SpellLayout.vue
View file

@ -5,7 +5,7 @@
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn :outlined="!isSpellInSpellBook" color="accent" class="mr-4 mb-4" depressed @click="toggleSpellInSpellBook"><v-icon>mdi-book</v-icon> {{ displayToggleSpellButton }}</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon Grimoire</v-btn>
<MySpellsButton />
</div>
</div>
<Spell :spell="$page" />
@ -16,6 +16,7 @@
<script>
import Breadcrumb from '@theme/components/Breadcrumb'
import Spell from '@theme/components/Spell'
import MySpellsButton from '@theme/global-components/MySpellsButton'
import Edit from '@theme/components/Edit'
export default {
@ -24,6 +25,7 @@ export default {
components: {
Breadcrumb,
Spell,
MySpellsButton,
Edit
},

78
docs/.vuepress/theme/layouts/SpellsLayout.vue
View file

@ -5,12 +5,44 @@
<Breadcrumb class="mr-auto mb-4" />
<div class="d-flex flex-wrap align-center">
<v-btn color="primary" class="mr-4 mb-4" depressed link to="/creation-de-sort/"><v-icon left>mdi-plus</v-icon> Créer un sort</v-btn>
<v-btn color="primary" class="mb-4" depressed link to="/mon-grimoire/">Mon grimoire</v-btn>
<MySpellsButton />
</div>
</div>
<h1>Grimoire</h1>
<div class="active-filters mb-2">
<div class="classes-filter mb-1" v-if="selectedClasses.length > 0">
<strong>Classes</strong> : <v-chip class="mr-1" v-for="(c, idx) in selectedClasses">{{ c }}</v-chip>
</div>
<div class="levels-filter mb-1" v-if="selectedLevels.length > 0">
<strong>Niveaux de sorts</strong> : <v-chip class="mr-1" v-for="(level, idx) in selectedLevels" v-html="level"></v-chip>
</div>
<div class="schools-filter mb-1" v-if="selectedSchools.length > 0">
<strong>Écoles de magie</strong> : <v-chip class="mr-1" v-for="(school, idx) in selectedSchools">{{ school }}</v-chip>
</div>
<div class="compoments-filter mb-1" v-if="componentVerbal !== undefined || componentSomatic !== undefined || componentMaterial !== undefined">
<strong>Composantes d'incantation</strong> :
<v-chip class="mr-1" v-if="componentVerbal === true" dark color="green">verbales</v-chip>
<v-chip class="mr-1" v-if="componentVerbal === false" dark color="red">verbales</v-chip>
<v-chip class="mr-1" v-if="componentSomatic === true" dark color="green">somatiques</v-chip>
<v-chip class="mr-1" v-if="componentSomatic === false" dark color="red">somatiques</v-chip>
<v-chip class="mr-1" v-if="componentMaterial === true" dark color="green">matérielles</v-chip>
<v-chip class="mr-1" v-if="componentMaterial === false" dark color="red">matérielles</v-chip>
</div>
<div class="concentration-filter mb-1" v-if="mustBeConcentration !== undefined">
<strong>Concentration</strong> :
<v-chip class="mr-1" v-if="mustBeConcentration === true" dark color="green">oui</v-chip>
<v-chip class="mr-1" v-if="mustBeConcentration === false" dark color="red">non</v-chip>
</div>
<div class="concentration-filter mb-1" v-if="mustBeRitual !== undefined">
<strong>Rituel</strong> :
<v-chip class="mr-1" v-if="mustBeRitual === true" dark color="green">oui</v-chip>
<v-chip class="mr-1" v-if="mustBeRitual === false" dark color="red">non</v-chip>
</div>
</div>
<v-data-table
class="data-table"
@ -86,9 +118,10 @@ import { mapState } from 'vuex'
import Breadcrumb from '@theme/components/Breadcrumb'
import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
import Spell from '@theme/components/Spell'
import MySpellsButton from '@theme/global-components/MySpellsButton'
export default {
components: { Breadcrumb, Spell },
components: { Breadcrumb, Spell, MySpellsButton },
data () {
return {
@ -131,6 +164,36 @@ export default {
componentMaterial: state => state.spellFilters.componentMaterial,
}),
selectedClasses() {
let result = []
for (let c of this.classes) {
if (c.value) {
result.push(c.label)
}
}
return result
},
selectedLevels() {
let result = []
for (let level of this.levels) {
if (level.value) {
result.push(this.levelDisplay(level))
}
}
return result
},
selectedSchools() {
let result = []
for (let school of this.schools) {
if (school.value) {
result.push(school.label)
}
}
return result
},
spells() {
let results = this.$pagination.pages
@ -245,7 +308,16 @@ export default {
onClickRow (row, item) {
item.expand(!item.isExpanded)
}
},
levelDisplay (level) {
if (level.level == 0) {
return 'Tour de magie'
} else if (level.level == 1) {
return level.level.toString() + '<sup>er</sup>'
}
return level.level.toString() + '<sup>ème</sup>'
},
},
mounted () {