From 0e9bc372bfabc1e81c9086b3b447616f8ff6b43c Mon Sep 17 00:00:00 2001
From: Vincent Vandemeulebrouck <vincent.vandemeulebrouck@itiviti.com>
Date: Tue, 20 Apr 2021 00:52:51 +0200
Subject: [PATCH] Rework dialog-competence

---
 module/rdd-roll.js                  |   8 +-
 styles/simple.css                   |   3 +-
 templates/dialog-competence.html    | 164 ++++++++++++++++------------
 templates/dialog-roll-enctotal.html |   8 +-
 templates/dialog-roll-surenc.html   |   8 +-
 5 files changed, 112 insertions(+), 79 deletions(-)

diff --git a/module/rdd-roll.js b/module/rdd-roll.js
index b6d36add..2ee9d7d9 100644
--- a/module/rdd-roll.js
+++ b/module/rdd-roll.js
@@ -268,7 +268,7 @@ export class RdDRoll extends Dialog {
     let dmgText = Misc.toSignedString(rollData.dmg.total);
 
     if (rollData.coupsNonMortels) {
-      dmgText = '(' + dmgText + ')';
+      dmgText = `(${dmgText}) non-mortel`
     }
     if (rollData.selectedSort) {
       rollData.bonus = RdDItemSort.getCaseBonus(rollData.selectedSort, rollData.tmr.coord);
@@ -287,7 +287,7 @@ export class RdDRoll extends Dialog {
     // Mise à jour valeurs
     $("#compdialogTitle").text(this._getTitle(rollData));
     $('#coupsNonMortels').prop('checked', rollData.coupsNonMortels);
-    $("#dmg-arme-actor").text(dmgText);
+    $(".dmg-arme-actor").text(dmgText);
     $('.table-ajustement').remove();
     $(".table-resolution").remove();
     $(".table-proba-reussite").remove();
@@ -353,9 +353,9 @@ export class RdDRoll extends Dialog {
     const niveau = Misc.toSignedString(rollData.competence.data.niveau);
     if (compName == carac) {
       // cas des créatures
-      return carac + " " + niveau
+      return carac + " Niveau " + niveau
     }
     const armeTitle = (rollData.arme) ? " (" + rollData.arme.name + ") " : "";
-    return carac + "/" + compName + armeTitle + " " + niveau
+    return carac + "/" + compName + armeTitle + " Niveau " + niveau
   }
 }
diff --git a/styles/simple.css b/styles/simple.css
index 845bc07e..e5e83279 100644
--- a/styles/simple.css
+++ b/styles/simple.css
@@ -855,8 +855,7 @@ ul, li {
   /* Position the tooltip text */
   position: absolute;
   z-index: 1;
-  top: -10px;
-  left: 18%;
+  left: 25px;
   
   /* Fade in tooltip */
   visibility: hidden;
diff --git a/templates/dialog-competence.html b/templates/dialog-competence.html
index c4ba4d0e..5d7cebbf 100644
--- a/templates/dialog-competence.html
+++ b/templates/dialog-competence.html
@@ -1,82 +1,112 @@
 <form class="skill-roll-dialog">
 <h2 class="compdialog" id="compdialogTitle"></h2>
-<div class="form-group">
-  <label>Caractéristique </label>
-  <select name="carac" id="carac" data-dtype="String">
-      {{#select carac}}
-      {{#each carac as |caracitem key|}}
-      <option value={{key}}>{{caracitem.label}}</option>
-      {{/each}}
-      {{/select}}
-  </select>
 
-  <label class="diffMoral">Moral: {{#if (gt moral 0)}}+{{/if}}{{moral}}</label>
-  <div class="tooltipAppelAuMoral divAppelAuMoral">
-    <img class="imgAppelAuMoral small-button-container" src="/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg">
-    <span class="tooltipAppelAuMoralText">Sans appel au moral</span>
-  </div>
-</div>
-<div class="form-group">
-  {{#if attackerRoll}}
-  <label>Difficulté</label>
-  <label>{{diffLibre}}</label>
-  {{else}}
-  <label>Difficulté libre</label>
-  <select name="diffLibre" id="diffLibre" data-dtype="number" {{#unless use.libre}}disabled{{/unless}}>
-      {{#select diffLibre}}
-      {{#each difficultesLibres as |key|}}
-      <option value={{key}}>{{numberFormat key decimals=0 sign=true}}</option>
-      {{/each}}
-      {{/select}}
-  </select>
-  {{/if}}
-  <label>&nbsp;&nbsp;Conditions</label>
-  <select name="diffConditions" id="diffConditions" data-dtype="number" {{#unless use.conditions}}disabled{{/unless}}>
-      {{#select diffConditions}}
-      {{#each ajustementsConditions  as |key|}}
-      <option value={{key}}>{{numberFormat key decimals=0 sign=true}}</option>
-      {{/each}}
-      {{/select}}
-  </select>
-</div>
-{{#if arme}}
-  <div class="form-group">
+<div class="grid grid-2col">
+  <div class="flex-group-left">
+    <div class="flexrow">
+      <label>Caractéristique </label>
+      <select name="carac" id="carac" data-dtype="String">
+        {{#select carac}}
+        {{#each carac as |caracitem key|}}
+        <option value={{key}}>{{caracitem.label}}</option>
+        {{/each}}
+        {{/select}}
+      </select>
+    </div>
+    {{#if arme}}
     {{#if attackerRoll}}
-      {{#if attackerRoll.tactique}}
-      <label>Tactique: {{attackerRoll.tactique}}</label>
+    {{#if attackerRoll.tactique}}
+      <div class="flexrow">
+        <label>Tactique: </label><label>{{attackerRoll.tactique}}</label>
+      </div>
       {{/if}}
-      <label>D&eacute;gats:</label><label id="dmg-arme-actor"></label>
-      <label></label>
-    {{else}}
-    <span class="tooltip">
-      <label>Tactique:</label>
-        <select class="select-by-name" name="tactique" id="tactique-combat" data-dtype="String" {{#unless use.conditions}}disabled{{/unless}}>
-          <option value="Attaque normale">Attaque normale</option>
-          <option value="charge">Charge</option>
-          <option value="feinte">Feinte</option>
-        </select>
-        <div class="tooltiptext ttt-ajustements">
-          <div>
-            <strong>Charge</strong> : Les longueurs d'armes n'interviennent pas dans la charge, il faut gérer une initiative aléatoire dans ce cas.
-            <br><strong>Feinte</strong> : Vous devez avoir l'initative sur votre adversaire et y renoncer.
+      {{else}}
+      <div class="flexrow">
+        <label>Tactique:</label>
+        <span class="tooltip">
+          <select class="select-by-name" name="tactique" id="tactique-combat" data-dtype="String" {{#unless use.conditions}}disabled{{/unless}}>
+            <option value="Attaque normale">Attaque normale</option>
+            <option value="charge">Charge</option>
+            <option value="feinte">Feinte</option>
+          </select>
+          <div class="tooltiptext ttt-ajustements">
+            <div>
+              <strong>Charge</strong> : Les longueurs d'armes n'interviennent pas dans la charge, il faut gérer une initiative aléatoire dans ce cas.
+              <br><strong>Feinte</strong> : Vous devez avoir l'initative sur votre adversaire et y renoncer.
+            </div>
           </div>
-        </div>
-      </span>
-      <label>D&eacute;gats:</label><label id="dmg-arme-actor"></label>
-      <label>Non Mortel</label>
-      <input class="attribute-value" type="checkbox" id="coupsNonMortels" name="coupsNonMortels"  {{#if coupsNonMortels}}checked{{/if}}/>
+        </span>
+      </div>
     {{/if}}
     {{#if ajustements.attaqueDefenseurSurpris.used}}
-    <label id="defenseur-surprise">{{ajustements.attaqueDefenseurSurpris.label}}</label>
+    <div class="flexrow">
+      <label id="defenseur-surprise">{{ajustements.attaqueDefenseurSurpris.label}}</label>
+    </div>
     {{/if}}
+    {{/if}}
+
+    {{#if arme}}
+      {{#unless attackerRoll}}
+      <div class="flexrow">
+        {{#if (eq arme.data.mortalite 'non-mortel')}}
+        <label>D&eacute;gats:</label><label class="dmg-arme-actor"></label>
+        {{else}}
+        <label>D&eacute;gats:
+        </label>
+        <span>
+          <input class="attribute-value" type="checkbox" id="coupsNonMortels" name="coupsNonMortels"  {{#if coupsNonMortels}}checked{{/if}}/>
+          <label class="dmg-arme-actor">
+          </label>
+        </span>
+        {{/if}}
+      </div>
+      {{/unless}}
+    {{/if}}    
+
+    {{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-surenc.html"}}
+    {{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-enctotal.html"}}
   </div>
-{{/if}}
 
-{{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-surenc.html"}}
-{{>"systems/foundryvtt-reve-de-dragon/templates/dialog-roll-enctotal.html"}}
-
-<div id="tableAjustements">
+  <div class="flex-group-left">
+    <div class="flexrow">
+      {{#if attackerRoll}}
+      <label>Difficulté</label>
+      <label>{{diffLibre}}</label>
+      {{else}}
+      <label>Difficulté libre</label>
+      <select name="diffLibre" id="diffLibre" data-dtype="number" {{#unless use.libre}}disabled{{/unless}}>
+        {{#select diffLibre}}
+        {{#each difficultesLibres as |key|}}
+        <option value={{key}}>{{numberFormat key decimals=0 sign=true}}</option>
+        {{/each}}
+        {{/select}}
+      </select>
+      {{/if}}
+    </div>
+    <div class="flexrow">
+    </div>
+    <div class="flexrow">
+      <label>Conditions</label>
+      <select name="diffConditions" id="diffConditions" data-dtype="number" {{#unless use.conditions}}disabled{{/unless}}>
+          {{#select diffConditions}}
+          {{#each ajustementsConditions  as |key|}}
+          <option value={{key}}>{{numberFormat key decimals=0 sign=true}}</option>
+          {{/each}}
+          {{/select}}
+      </select>
+    </div>
+    <div class="flexrow">
+      <label class="diffMoral">Moral: {{#if (gt moral 0)}}+{{/if}}{{moral}}</label>
+      <div class="tooltipAppelAuMoral divAppelAuMoral">
+        <img class="imgAppelAuMoral small-button-container" src="/systems/foundryvtt-reve-de-dragon/icons/moral-neutre.svg">
+        <span class="tooltipAppelAuMoralText">Sans appel au moral</span>
+      </div>
+    </div>
+    <div id="tableAjustements" class="flexrow">
+    </div>
+  </div>
 </div>
+
 <div id="tableResolution">
 </div>
 <div id="tableProbaReussite">  
diff --git a/templates/dialog-roll-enctotal.html b/templates/dialog-roll-enctotal.html
index 2a27210c..dfe959d0 100644
--- a/templates/dialog-roll-enctotal.html
+++ b/templates/dialog-roll-enctotal.html
@@ -1,6 +1,8 @@
 {{#if ajustements.encTotal.visible}}
-<div class="form-group">
-  <label>Appliquer l'encombrement total comme malus ({{encTotal}}) ? </label>
-  <input class="attribute-value checkbox-by-name" type="checkbox" name="useMalusEncTotal"  {{#if useMalusEncTotal}}checked{{/if}}/>
+<div class="flexrow">
+  <label>
+    <input class="attribute-value checkbox-by-name" type="checkbox" name="useMalusEncTotal"  {{#if useMalusEncTotal}}checked{{/if}}/>
+    Appliquer l'encombrement comme malus ({{encTotal}}) ? 
+  </label>
 </div>
 {{/if}}
diff --git a/templates/dialog-roll-surenc.html b/templates/dialog-roll-surenc.html
index 5919724d..0f59e227 100644
--- a/templates/dialog-roll-surenc.html
+++ b/templates/dialog-roll-surenc.html
@@ -1,6 +1,8 @@
 {{#if surencMalusFlag}}
-<div class="form-group">
-  <label for="xp">Appliquer le malus de sur-encombrement ? </label>
-  <input class="attribute-value checkbox-by-name" type="checkbox" name="useMalusSurenc"  {{#if useMalusSurenc}}checked{{/if}}/>
+<div class="flexrow">
+  <label>
+    <input class="attribute-value checkbox-by-name" type="checkbox" name="useMalusSurenc"  {{#if useMalusSurenc}}checked{{/if}}/>
+    Appliquer le sur-encombrement
+  </label>
 </div>
 {{/if}}