Fixed the san and equ gauges display issue

Ta-gueule-c-est-quantique/src/components/fillLeft/fillLeft.pug

@@ -5,7 +5,7 @@
         - {string} attrName - The r20 attribute name
         - {integer} value - The value borne by the rdLeft
 mixin rdLeft(attrName, value)
-    label(class!=attributes.class)
+    label(class!=attributes.class, data-value=`${value}`)
         input(name=`attr_${attrName}`, type='radio', value=value)
         span
 

Ta-gueule-c-est-quantique/src/components/fillLeft/fillLeft.sass

@@ -10,20 +10,24 @@
 %enable-equilibre
     background: url("#{$IMAGES_ROOT}icon-EQU.svg")
 
+%enable-test
+    background: red
 
-@for $i from 0 to 9
-    @for $j from 1 through $i
-        $k: $j + 1
-        .charsheet .fillLeft.sante > input[name=attr_san_max][value="#{$i}"] ~ label:nth-of-type(#{$k}) > span::before
+@for $i from 1 through 10
+    @for $k from 1 through $i
+        .charsheet .fillLeft.sante > input[name=attr_san_max][value="#{$i}"] ~ label[data-value="#{$k}"] > span::before
             @extend %enable-sante
-        .charsheet .fillLeft.equilibre > input[name=attr_equ_max][value="#{$i}"] ~ label:nth-of-type(#{$k}) > span::before
+        .charsheet .fillLeft.equilibre > input[name=attr_equ_max][value="#{$i}"] ~ label[data-value="#{$k}"] > span::before
             @extend %enable-equilibre
 
-        .charsheet .fillLeft.sante > input[type=hidden][name=attr_san][value="#{$i}"] ~ label:nth-of-type(#{$k}) > span::before
+        .charsheet .fillLeft.sante > input[type=hidden][name=attr_san][value="#{$i}"] ~ label[data-value="#{$k}"] > span::before
             @extend %ticked-sante
-        .charsheet .fillLeft.equilibre > input[type=hidden][name=attr_equ][value="#{$i}"] ~ label:nth-of-type(#{$k}) > span::before
+        .charsheet .fillLeft.equilibre > input[type=hidden][name=attr_equ][value="#{$i}"] ~ label[data-value="#{$k}"] > span::before
             @extend %ticked-equilibre
 
+        .charsheet .test[value="#{$i}"] ~ label:nth-of-type(#{$k})
+            background: red
+
 
 
 .charsheet .fillLeft

Ta-gueule-c-est-quantique/src/components/widgets/widgets.pug

@@ -27,7 +27,7 @@ mixin textLabelled(name, label, id, value='')
     - {string} name - The attribute name. Do not prefix with 'attr_'
     - {string} value - The default value the input is filled with
 mixin numberInput(name, value='')
-  input(class!=attributes.class name=`attr_${name}` readonly!=attributes.readonly placeholder!=attributes.placeholder type='number' value=value)
+  input(class!=attributes.class name=`attr_${name}` readonly!=attributes.readonly placeholder!=attributes.placeholder type='number' value=value max!=attributes.max)
 
 //- @pugdoc
   name: numberLabeled
@@ -40,7 +40,7 @@ mixin numberInput(name, value='')
 mixin numberLabelled(name, label, id, value='')
   label(for=id)&attributes(attributes).textLabelled
     span!= label
-    +numberInput(name, value)(id=id)
+    +numberInput(name, value)(id=id)&attributes(attributes)
 
 //- @pugdoc
   name: textareaInput

Ta-gueule-c-est-quantique/src/tgcq.pug

@@ -20,11 +20,11 @@ main
         +cbButton('d12', ' Utiliser 1d12', '1')
     #monitor.panel
         h3.red SANté
-        +numberLabelled('san_max', 'Max', 'san_max', 0)
+        +numberLabelled('san_max', 'Max', 'san_max', 0)(max=10)
         +fillLeft('san', 'sante', 10, 0)
         +cbButton('aie', 'AÏE (-1)', '-1')
         h3.blue EQUilibre
-        +numberLabelled('equ_max', 'Max', 'equ_max', 0)
+        +numberLabelled('equ_max', 'Max', 'equ_max', 0)(max=10)
         +fillLeft('equ', 'equilibre', 10, 0)
         +cbButton('deboussole', 'Déboussolé (-2)', '-2')
 

Ta-gueule-c-est-quantique/tgcq.html

@@ -84,43 +84,43 @@
   </div>
   <div class="panel" id="monitor">
     <h3 class="red">SANté</h3>
-    <label class="textLabelled" for="san_max"><span>Max</span>
-      <input name="attr_san_max" type="number" value="0"/>
+    <label class="textLabelled" for="san_max" max="10"><span>Max</span>
+      <input name="attr_san_max" type="number" value="0" max="10"/>
     </label>
     <div class="fillLeft sante">
       <input name="attr_san" type="hidden" value="0"/>
       <input name="attr_san_max" type="hidden" value="0"/>
-      <label>
+      <label data-value="0">
         <input name="attr_san" type="radio" value="0"/><span></span>
       </label>
-      <label>
+      <label data-value="1">
         <input name="attr_san" type="radio" value="1"/><span></span>
       </label>
-      <label>
+      <label data-value="2">
         <input name="attr_san" type="radio" value="2"/><span></span>
       </label>
-      <label>
+      <label data-value="3">
         <input name="attr_san" type="radio" value="3"/><span></span>
       </label>
-      <label>
+      <label data-value="4">
         <input name="attr_san" type="radio" value="4"/><span></span>
       </label>
-      <label>
+      <label data-value="5">
         <input name="attr_san" type="radio" value="5"/><span></span>
       </label>
-      <label>
+      <label data-value="6">
         <input name="attr_san" type="radio" value="6"/><span></span>
       </label>
-      <label>
+      <label data-value="7">
         <input name="attr_san" type="radio" value="7"/><span></span>
       </label>
-      <label>
+      <label data-value="8">
         <input name="attr_san" type="radio" value="8"/><span></span>
       </label>
-      <label>
+      <label data-value="9">
         <input name="attr_san" type="radio" value="9"/><span></span>
       </label>
-      <label>
+      <label data-value="10">
         <input name="attr_san" type="radio" value="10"/><span></span>
       </label>
     </div>
@@ -128,43 +128,43 @@
       <input name="attr_aie" value="-1" type="checkbox"/><span title="AÏE (-1)">AÏE (-1)</span>
     </label>
     <h3 class="blue">EQUilibre</h3>
-    <label class="textLabelled" for="equ_max"><span>Max</span>
-      <input name="attr_equ_max" type="number" value="0"/>
+    <label class="textLabelled" for="equ_max" max="10"><span>Max</span>
+      <input name="attr_equ_max" type="number" value="0" max="10"/>
     </label>
     <div class="fillLeft equilibre">
       <input name="attr_equ" type="hidden" value="0"/>
       <input name="attr_equ_max" type="hidden" value="0"/>
-      <label>
+      <label data-value="0">
         <input name="attr_equ" type="radio" value="0"/><span></span>
       </label>
-      <label>
+      <label data-value="1">
         <input name="attr_equ" type="radio" value="1"/><span></span>
       </label>
-      <label>
+      <label data-value="2">
         <input name="attr_equ" type="radio" value="2"/><span></span>
       </label>
-      <label>
+      <label data-value="3">
         <input name="attr_equ" type="radio" value="3"/><span></span>
       </label>
-      <label>
+      <label data-value="4">
         <input name="attr_equ" type="radio" value="4"/><span></span>
       </label>
-      <label>
+      <label data-value="5">
         <input name="attr_equ" type="radio" value="5"/><span></span>
       </label>
-      <label>
+      <label data-value="6">
         <input name="attr_equ" type="radio" value="6"/><span></span>
       </label>
-      <label>
+      <label data-value="7">
         <input name="attr_equ" type="radio" value="7"/><span></span>
       </label>
-      <label>
+      <label data-value="8">
         <input name="attr_equ" type="radio" value="8"/><span></span>
       </label>
-      <label>
+      <label data-value="9">
         <input name="attr_equ" type="radio" value="9"/><span></span>
       </label>
-      <label>
+      <label data-value="10">
         <input name="attr_equ" type="radio" value="10"/><span></span>
       </label>
     </div>