5E/5e-drs
1
0
Fork 0
mirror of https://github.com/em-squared/5e-drs.git synced 2025-10-29 12:44:20 +00:00
Code Issues Projects Releases Wiki Activity

tooltips créatures

Browse source
This commit is contained in:
Maxime Moraine 2021-03-13 18:33:35 +01:00
parent 37e28207f0
commit e15a84fa0e
7 changed files with 281 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -220,6 +220,15 @@ export default {
changePage (page) {
// console.log(page)
setUrlParams("page", [page])
let self = this
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100)
})
},
onClickRow (row, item) {
@ -240,6 +249,16 @@ export default {
if (page) {
this.page = page
}
let self = this
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100)
})
}
}
</script>

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

@ -154,7 +154,7 @@ import { mapState } from 'vuex'
import Breadcrumb from '@theme/components/Breadcrumb'
import { displayChallenge } from '@theme/util/monsterHelpers'
import { setUrlParams, getUrlParameter } from '@theme/util/filterHelpers'
import { isResourceInLibrary } from '@theme/util'
import { isResourceInLibrary, handleTooltips } from '@theme/util'
import Monster from '@theme/components/Monster'
import MyMonstersButton from '@theme/global-components/MyMonstersButton'
import { CHALLENGES } from '../../data/monsters'
@ -387,6 +387,15 @@ export default {
changePage (page) {
// console.log(page)
setUrlParams("page", [page])
let self = this
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100)
})
},
onClickRow (row, item) {
@ -416,6 +425,16 @@ export default {
if (showColumn) {
this.showColumn = JSON.parse(showColumn)
}
let self = this
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100)
})
}
}
</script>

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

@ -385,6 +385,15 @@ export default {
changePage (page) {
// console.log(page)
setUrlParams("page", [page])
let self = this
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100)
})
},
onClickRow (row, item) {
@ -425,6 +434,16 @@ export default {
if (showColumn) {
this.showColumn = JSON.parse(showColumn)
}
let self = this
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips({pages:self.$site.pages})
}, 100)
})
}
}
</script>

2
docs/.vuepress/theme/styles/_colors.scss
View file

@ -7,3 +7,5 @@ $color-table-header-bg: #6f6f6f;
$color-gold: #bab468;
$color-gold-dark: #9f994f;
$color-gold-light: #d6d082;
$color-red: #9b1c47;
$color-purple: #563f5a;

13
docs/.vuepress/theme/styles/_tooltips.scss
View file

@ -28,8 +28,12 @@
&.tooltip-spell {
background-color: $color-dragon;
}
// &.tooltip-condition {
// }
&.tooltip-monster {
background-color: $color-red;
}
&.tooltip-condition {
background-color: $color-purple;
}
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: bold;
@ -60,6 +64,11 @@
margin-bottom: .5rem;
padding-bottom: .5rem;
}
.monster-details {
border-bottom: 2px solid $color-red;
margin-bottom: .5rem;
padding-bottom: .5rem;
}
}
}

104
docs/.vuepress/theme/util/index.js
View file

@ -267,7 +267,8 @@ export function isResourceInLibrary (resource, library) {
** Handles rule tooltips like conditions
*/
import { tooltips } from '../../data/ruleTooltips.js'
import {displaySchoolLevel} from '@theme/util/spellHelpers'
import { displaySchoolLevel } from '@theme/util/spellHelpers'
import { displayMonsterTypeSizeAlignment, displayAC, displayHP, displayChallenge, displayAbilityScore } from '@theme/util/monsterHelpers'
import MarkdownIt from 'markdown-it'
export function handleTooltips (params = {}) {
if (!params.component) {
@ -318,11 +319,15 @@ export function handleTooltips (params = {}) {
tooltip.style.display = 'none'
tooltipTitle.classList.remove('tooltip-condition')
}, false);
l.addEventListener("click", function( event ) {
tooltip.style.display = 'none'
tooltipTitle.classList.remove('tooltip-condition')
}, false);
} else if (l.pathname.startsWith('/grimoire/')) {
// console.log(l.pathname)
if (params.pages) {
let spell = params.pages.find((el) => el.path === l.pathname)
if (spell) {
if (spell && spell.frontmatter.school) {
// console.log(spell)
l.addEventListener("mouseover", function( event ) {
let ttitle = '<div class="d-flex justify-space-between">'
@ -384,6 +389,101 @@ export function handleTooltips (params = {}) {
}, false);
}
}
} else if (l.pathname.startsWith('/bestiaire/')) {
// console.log(l.pathname)
if (params.pages) {
let monster = params.pages.find((el) => el.path === l.pathname)
if (monster && monster.frontmatter.challenge) {
// console.log(spell)
l.addEventListener("mouseover", function( event ) {
let ttitle = '<div class="d-flex justify-space-between">'
ttitle += '<div>' + monster.title + '</div>'
ttitle += '<div class="monster-type-size subtitle-2">' + displayMonsterTypeSizeAlignment(monster.frontmatter, true) + '</div>'
ttitle += '</div>'
tooltipTitle.innerHTML = ttitle
tooltipTitle.classList.add('tooltip-monster')
let tcontent = '<div>'
tcontent += '<div class="monster-details">'
tcontent += '<div class="d-flex justify-space-around">'
tcontent += '<div class="px-4 flex-grow-0 monster-hp"><div class="subtitle-2">Points de vie</div><div>' + displayHP(monster) + '</div></div>'
tcontent += '<div class="px-4 flex-grow-0 monster-ac"><div class="subtitle-2">Classe d\'armure</div><div>' + displayAC(monster) + '</div></div>'
tcontent += '<div class="px-4 flex-grow-0 monster-challenge"><div class="subtitle-2">Dangerosité</div><div>' + displayChallenge(monster.frontmatter.challenge, true) + '</div></div>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '<div class="monster-ability-scores d-flex justify-space-around">'
tcontent += '<div class="monster-ability-scores-physical d-flex">'
tcontent += '<div class="ability-str text-center">'
tcontent += '<div class="ability-label-alt">'
tcontent += '<strong>For</strong>'
tcontent += '</div>'
tcontent += '<div class="ability-score">'
tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.for) + '</span>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '<div class="ability-dex text-center">'
tcontent += '<div class="ability-label-alt">'
tcontent += '<strong>Dex</strong>'
tcontent += '</div>'
tcontent += '<div class="ability-score">'
tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.dex) + '</span>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '<div class="ability-con text-center">'
tcontent += '<div class="ability-label-alt">'
tcontent += '<strong>Con</strong>'
tcontent += '</div>'
tcontent += '<div class="ability-score">'
tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.con) + '</span>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '<div class="monster-ability-scores-mental d-flex">'
tcontent += '<div class="ability-int text-center">'
tcontent += '<div class="ability-label-alt">'
tcontent += '<strong>Int</strong>'
tcontent += '</div>'
tcontent += '<div class="ability-score">'
tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.int) + '</span>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '<div class="ability-wis text-center">'
tcontent += '<div class="ability-label-alt">'
tcontent += '<strong>Sag</strong>'
tcontent += '</div>'
tcontent += '<div class="ability-score">'
tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.sag) + '</span>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '<div class="ability-cha text-center">'
tcontent += '<div class="ability-label-alt">'
tcontent += '<strong>Cha</strong>'
tcontent += '</div>'
tcontent += '<div class="ability-score">'
tcontent += '<span>' + displayAbilityScore(monster.frontmatter.abilityScores.cha) + '</span>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '</div>'
tcontent += '<div class="tooltip-overflow"></div>'
tooltipContent.innerHTML = tcontent
tooltip.style.display = 'block'
}, false);
l.addEventListener("mouseout", function( event ) {
tooltip.style.display = 'none'
tooltipTitle.classList.remove('tooltip-monster')
}, false);
l.addEventListener("click", function( event ) {
tooltip.style.display = 'none'
tooltipTitle.classList.remove('tooltip-monster')
}, false);
}
}
}
}
}

108
docs/.vuepress/theme/util/monsterHelpers.js
View file

@ -70,6 +70,114 @@ export function displayMonsterTypeSizeAlignment (monster, hideAlignment = false,
return result
}
// Affiche la Classe d'armure
export function displayAC (monster) {
let ac = 10
let hasMageArmor = false
let mageArmorAc = 13
let mageArmor = ''
let armor = ''
// Le monstre n'a pas d'armure.
// CA = 10 + Dex
if (!monster.frontmatter.ac.armorType) {
ac = 10 + getModifier(monster.frontmatter.abilityScores.dex)
} else {
// Le type d'armure n'est pas formalisé. On prend la valeur brute
if (monster.frontmatter.ac.armorType == 'custom') {
return monster.frontmatter.ac.value
}
// Le monstre a une armure naturelle.
// CA = 10 + Armure naturelle + Dex
if (monster.frontmatter.ac.armorType == 'armure naturelle') {
armor = monster.frontmatter.ac.armorType
if (parseInt(monster.frontmatter.ac.value)) {
ac = ac + parseInt(monster.frontmatter.ac.value) + getModifier(monster.frontmatter.abilityScores.dex)
} else {
ac = ac + getModifier(monster.frontmatter.abilityScores.dex)
}
} else if (monster.frontmatter.ac.armorType == 'armure du mage') {
hasMageArmor = true
ac = ac + getModifier(monster.frontmatter.abilityScores.dex)
mageArmorAc = mageArmorAc + getModifier(monster.frontmatter.abilityScores.dex)
armor = mageArmorAc + ' avec armure du mage'
} else {
// Le monstre a un type d'armure défini.
// On calcule sa CA selon le type
let armorType = armorTypes[monster.frontmatter.ac.armorType]
// Le type d'armure n'existe pas. On l'ignore.
// CA = 10 + Dex
if (!armorType) {
ac = ac + getModifier(monster.frontmatter.abilityScores.dex)
} else {
// L'armure n'impose pas de limite de Dex
armor = monster.frontmatter.ac.armorType
if (armorType.maxDex === false) {
ac = armorType.value + getModifier(monster.frontmatter.abilityScores.dex)
} else {
// La limite de Dex de l'armure est inférieure à la Dex du monstre
if (armorType.maxDex === 0) {
ac = armorType.value
} else if ((armorType.maxDex !== 0) && (armorType.maxDex <= getModifier(monster.frontmatter.abilityScores.dex))) {
ac = armorType.value + armorType.maxDex
} else {
ac = armorType.value + getModifier(monster.frontmatter.abilityScores.dex)
}
}
}
}
}
// Le monstre a un bouclier. Sa CA augmente de 2.
if (monster.frontmatter.ac.hasShield) {
ac = ac + 2
mageArmorAc = mageArmorAc + 2
if (armor != '') {
armor += ', '
}
armor += 'bouclier'
if (hasMageArmor) {
armor = mageArmorAc + ' avec armure du mage, bouclier'
}
}
if (armor != '') {
ac += ' (' + armor + ')'
}
return ac
}
// Affiche les points de vie
export function displayHP (monster) {
if (monster.frontmatter.customHP) {
return monster.frontmatter.customHP
} else if (monster.frontmatter.hitDiceCount) {
let hitDieSize = 8 // Dé de vie moyen par défaut
if (monster.frontmatter.hitDieSize) {
hitDieSize = monster.frontmatter.hitDieSize
} else if (monster.frontmatter.size) {
hitDieSize = stats.sizes[monster.frontmatter.size].hitDie
}
let hitPointsBonus = 0
if (monster.frontmatter.hitDiceCount > 1) {
hitPointsBonus = Math.floor(monster.frontmatter.hitDiceCount / 2)
}
let averageHP = monster.frontmatter.hitDiceCount * (hitDieSize / 2) + monster.frontmatter.hitDiceCount * getModifier(monster.frontmatter.abilityScores.con) + hitPointsBonus
let conMod = ""
if (getModifier(monster.frontmatter.abilityScores.con) != 0) {
conMod = monster.frontmatter.hitDiceCount * getModifier(monster.frontmatter.abilityScores.con)
conMod = displayBonus(conMod)
}
return averageHP + ' (' + monster.frontmatter.hitDiceCount + "d" + hitDieSize + conMod + ')'
}
return ""
}
// Retourne le nombre de points de combat pour un indice de dangerosité
export function getPCbyChallenge(challenge) {
let challengeIndex = CHALLENGES.findIndex(item => item.value == challenge)