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

tooltips états préjudiciables et sorts

Browse source
This commit is contained in:
Maxime Moraine 2021-03-13 16:05:08 +01:00
parent b508862c9b
commit 336bf264b9
48 changed files with 212 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

2
docs/.vuepress/theme/components/EncounterCalculator.vue
View file

@ -22,7 +22,7 @@
:color="challenge.color"
:value="challengeRate"
></v-progress-linear>
<span class="subtitle-2">PX : </span>{{ totalXP }}
<span class="subtitle-2">PX : </span>{{ totalXP }} ({{ Math.floor(totalXP / pc) }} par PJ)
</div>
<v-row class="d-flex align-center my-0" v-for="c in creatures">
<v-col class="px-0 py-1">

5
docs/.vuepress/theme/components/MagicItem.vue
View file

@ -43,12 +43,13 @@ export default {
},
mounted () {
let self = this
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100)
})
}

5
docs/.vuepress/theme/components/Monster.vue
View file

@ -510,12 +510,13 @@ export default {
mounted () {
//console.log(this.$page)
let self = this
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100)
})
}

5
docs/.vuepress/theme/components/Page.vue
View file

@ -12,12 +12,13 @@ export default {
name: 'Page',
components: { },
mounted () {
let self = this
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100)
})
}

5
docs/.vuepress/theme/components/Spell.vue
View file

@ -62,12 +62,13 @@ export default {
mounted () {
// console.log(this.spell)
let self = this
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100);
this.$router.afterEach(() => {
setTimeout(function () {
handleTooltips()
handleTooltips({pages:self.$site.pages})
}, 100)
})
}

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

@ -1,3 +1,15 @@
.theme--dark {
#tooltip {
background-color: #333;
box-shadow: 0 0 25px #222;
color: #fff;
.tooltip-content {
.tooltip-overflow {
background-image: linear-gradient(to bottom, rgba(50,50,50,0), rgba(50,50,50,1));
}
}
}
}
#tooltip {
position: absolute;
display: none;
@ -5,12 +17,11 @@
text-align: left;
width: 50vw;
max-width: 555px;
max-width: 655px;
min-width: 350px;
background-color: #fff;
color: #555;
box-shadow: 0 0 12px #333;
border-radius: 5px;
box-shadow: 0 0 25px #444;
.tooltip-title {
background-color: $color-hero;
@ -23,15 +34,32 @@
font-family: 'Oswald', sans-serif;
font-weight: bold;
padding: 12px;
border-radius: 5px 5px 0 0;
}
.tooltip-content {
padding: 12px;
position: relative;
font-size: .8rem;
max-height: 300px;
overflow: hidden;
padding: 12px 12px 40px 12px;
ul {
margin: 0;
padding: 0 0 0 15px;
}
.tooltip-overflow {
position: absolute;
z-index: 1001;
bottom: 0;
height: 40px;
width: 100%;
margin: -12px;
background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
.spell-details {
border-bottom: 2px solid $color-dragon;
margin-bottom: .5rem;
padding-bottom: .5rem;
}
}
}

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

@ -267,9 +267,11 @@ export function isResourceInLibrary (resource, library) {
** Handles rule tooltips like conditions
*/
import { tooltips } from '../../data/ruleTooltips.js'
export function handleTooltips (component) {
if (!component) {
component = document
import {displaySchoolLevel} from '@theme/util/spellHelpers'
import MarkdownIt from 'markdown-it'
export function handleTooltips (params = {}) {
if (!params.component) {
params.component = document
}
// Gestion des tooltips
let tooltip = document.getElementById('tooltip')
@ -295,24 +297,89 @@ export function handleTooltips (component) {
tooltip.style.left = x + 'px';
}
// Arborescence des liens
let links = component.querySelectorAll("a")
let links = params.component.querySelectorAll("a")
for (var l of links) {
let hash = l.hash.replace('#', '')
if (hash != "" && tooltips[hash]) {
l.addEventListener("mouseover", function( event ) {
tooltipTitle.innerHTML = tooltips[hash].title
tooltipTitle.classList.add('tooltip-condition')
let tcontent = '<ul>'
for (var d of tooltips[hash].description) {
tcontent += '<li>' + d + '</li>'
}
tcontent += '</ul>'
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-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) {
// console.log(spell)
l.addEventListener("mouseover", function( event ) {
let ttitle = '<div class="d-flex justify-space-between">'
ttitle += '<div>' + spell.title + '</div>'
ttitle += '<div class="spell-school-level subtitle-2">' + displaySchoolLevel(spell.frontmatter) + '</div>'
ttitle += '</div>'
tooltipTitle.innerHTML = ttitle
tooltipTitle.classList.add('tooltip-spell')
let tcontent = '<div>'
tcontent += '<div class="spell-details">'
tcontent += '<div class="d-flex justify-space-around">'
tcontent += '<div class="px-4 flex-grow-0 spell-casting-time"><div class="subtitle-2">Temps d\'incantation</div><div>' + spell.frontmatter.casting_time + '</div></div>'
tcontent += '<div class="px-4 flex-grow-0 spell-range"><div class="subtitle-2">Portée</div><div>' + spell.frontmatter.range + '</div></div>'
tcontent += '<div class="px-4 flex-grow-0 spell-components"><div class="subtitle-2">Composantes</div><div>'
let components = ''
if (spell.frontmatter.components.verbal) {
components += 'V'
if (spell.frontmatter.components.somatic || spell.frontmatter.components.material) {
components += ', '
}
}
if (spell.frontmatter.components.somatic) {
components += 'S'
if (spell.frontmatter.components.material) {
components += ', '
}
}
if (spell.frontmatter.components.material) {
components += 'M'
}
tcontent += '<span>' + components + '</span>'
tcontent += '</div></div>'
let duration = ''
if (spell.frontmatter.concentration) {
duration += 'concentration, '
}
duration += spell.frontmatter.duration
tcontent += '<div class="px-4 flex-grow-0 spell-duration"><div class="subtitle-2">Durée</div><div>' + duration + '</div></div>'
tcontent += '</div>'
tcontent += '</div>'
var md = new MarkdownIt()
let content = md.render(spell.rawContent)
content = content.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"')
tcontent += '<div class="spell-description">' + content + '</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-spell')
}, false);
}
}
}
}
}