Merge branch 'feature/UIappelAuMoral' into 'v1.3'

Feature/u iappel au moral

See merge request LeRatierBretonnien/foundryvtt-reve-de-dragon!152

module/rdd-roll.js

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

styles/simple.css

@@ -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 {

templates/dialog-competence.html

@@ -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"}}