UI pour l'appel au moral

This commit is contained in:
LeFelis 2021-02-12 22:36:42 +01:00
parent 1c5d14a1fa
commit 5a7dc1d437
3 changed files with 54 additions and 29 deletions

View File

@ -203,22 +203,22 @@ export class RdDRoll extends Dialog {
console.log(html.find('.iconeSmile'));
this.updateRollResult();
});
html.find('#useAppelAuMoralCheckbox').change((event) => { /* l'appel au moral, qui donne un bonus de +1 */
this.rollData.appelAuMoralDemander = event.currentTarget.checked
if ( this.rollData.appelAuMoralDemander ) {
if ( this.rollData.moral > 0 ) {
html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-heureux.svg";
html.find('#textSmile')[0].innerHTML = "Appel au moral";
html.find('#iconeSmile').click((event) => { /* l'appel au moral, qui donne un bonus de +1 */
this.rollData.appelAuMoralDemander = ! this.rollData.appelAuMoralDemander;
if ( this.rollData.appelAuMoralDemander ) {
if ( this.rollData.moral > 0 ) {
html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-heureux.svg";
html.find('#tooltipAppelAuMoralText')[0].innerHTML = "Appel au moral";
} else {
html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-malheureux.svg";
html.find('#tooltipAppelAuMoralText')[0].innerHTML = "Appel à l'énergie du désespoir";
}
} else {
html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-malheureux.svg";
html.find('#textSmile')[0].innerHTML = "Appel à l'énergie du désespoir";
}
} else {
html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg";
html.find('#textSmile')[0].innerHTML = "Sans appel au moral";
}
html.find('#iconeSmile')[0].src = "/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg";
html.find('#tooltipAppelAuMoralText')[0].innerHTML = "Sans appel au moral";
}
this.updateRollResult();
});
});
// Section Méditation
html.find('.conditionMeditation').change((event) => {
let condition = event.currentTarget.attributes['id'].value;

View File

@ -812,17 +812,13 @@ ul, li {
left: 0px;
text-align: center;
}
/* ======================================== */
/* dialogue competence : Appel au moral */
.diffAppelAuMoral {
display: none !important;
}
.diffAppelAuMoral-checker {
height: 20px;
background-image: url('../icons/moral-neutre.svg');
background-size: cover;
}
.diffAppelAuMoral:checked + .diffAppelAuMoral-checker {
background-image: url('../icons/moral-heureux.svg');
}
.iconeSmile {
height: 20px;
width: 20px;
@ -830,9 +826,37 @@ ul, li {
outline: none;
background-size: cover;
}
.textSmile {
/* Tooltip container */
.tooltipAppelAuMoral {
position: relative;
display: inline-block;
border-bottom: 0;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltipAppelAuMoral:hover .tooltipAppelAuMoralText {
visibility: visible;
opacity: 1;
}
/* Tooltip text */
.tooltipAppelAuMoral .tooltipAppelAuMoralText {
text-align: center;
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: -10px;
left: 18%;
/* Fade in tooltip */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
/* ======================================== */
/* Fatigue CSS */
.table-fatigue {

View File

@ -10,6 +10,13 @@
{{/select}}
</select>
<label></label>
<div class="form-group" id="divAppelAuMoral" >
<div class="tooltipAppelAuMoral">
<input class="diffAppelAuMoral" id="useAppelAuMoralCheckbox" type="checkbox" name="appelAuMoralDemander" />
<img for="useAppelAuMoralCheckbox" class="iconeSmile" id="iconeSmile" src="/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg">
<span class="tooltipAppelAuMoralText" id="tooltipAppelAuMoralText">Sans appel au moral</span>
</div>
</div>
</div>
<div class="form-group">
{{#if attackerRoll}}
@ -67,12 +74,6 @@
{{/if}}
</div>
{{/if}}
<div class="form-group" id="divAppelAuMoral" >
<input class="diffAppelAuMoral" id="useAppelAuMoralCheckbox" type="checkbox" name="appelAuMoralDemander" />
<label for="useAppelAuMoralCheckbox" class="diffAppelAuMoral-checker" id="diffAppelAuMoral-checker"></label>
<label for="useAppelAuMoralCheckbox" class="textSmile" id="textSmile" >Sans appel au moral</label>
<img for="useAppelAuMoralCheckbox" class="iconeSmile" id="iconeSmile" src="/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg">
</div>
{{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-surenc.html"}}
{{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-enctotal.html"}}