feat: Ajout du design de la calculette

src/components/Question.vue

@@ -31,8 +31,30 @@ const displayPopup = ref(false);
 function showHidePopup() {
   displayPopup.value = !displayPopup.value;
 }
-const h = ref();
+function validatePopup() {
-const d = ref();
+  const calcule = Math.round((h.value * 100) / d.value);
+  const regexp = /[^0-9]*([0-9]{2})/g;
+  const answersLength = props.question.answers.length;
+  const answerIndex = props.question.answers.find((answer, index) => {
+    const values = Array.from(answer.title.matchAll(regexp), (m) => m[1]);
+    if (values.length > 0) {
+      const min = values.length == 1 ? 0 : values[0];
+      const max = values.length == 1 ? values[0] : values[1];
+      if (calcule >= min && calcule <= max) {
+        return true;
+      }
+    }
+    if (answersLength == index + 1) {
+      return true;
+    }
+  });
+  document.querySelector(
+    "input[id=" + `question_${props.question.id}_answer_${answerIndex.id}` + "]"
+  ).checked = true;
+  showHidePopup();
+}
+const h = ref(0);
+const d = ref(0);
 </script>
 
 <template>
@@ -80,26 +102,36 @@ const d = ref();
       </template>
     </div>
   </div>
-  <template v-if="!isProduction">
   <template v-if="question.function == 'rapport_hd'">
     <button class="btn calculette" @click="showHidePopup">
       <img src="/abacus.svg" alt="" />
     </button>
     <template v-if="displayPopup">
       <div class="popup">
-          <button @click="showHidePopup">X</button>
+        <button class="btn close" @click="showHidePopup">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+            <path
+              d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"
+              fill="#000"
+            />
+          </svg>
+        </button>
         <label for="H">H (m)</label>
-          <p>{{ h }}</p>
         <input v-model="h" type="number" name="H" />
         <label for="D">D (cm)</label>
         <input v-model="d" type="number" name="D" />
-          <button clas="btn equal" @click="showHidePopup">
+        <p>({{ h }} * 100) / {{ d }} ≃ {{ Math.round((h * 100) / d) }}</p>
-            = {{ Math.round((h * 100) / d) }}
+        <button class="btn equal" @click="validatePopup">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+            <path
+              fill="#31373D"
+              d="M34.459 1.375c-1.391-.902-3.248-.506-4.149.884L13.5 28.17l-8.198-7.58c-1.217-1.125-3.114-1.051-4.239.166-1.125 1.216-1.051 3.115.166 4.239l10.764 9.952s.309.266.452.359c.504.328 1.07.484 1.63.484.982 0 1.945-.482 2.52-1.368L35.343 5.524c.902-1.39.506-3.248-.884-4.149z"
+            />
+          </svg>
         </button>
       </div>
     </template>
   </template>
-  </template>
   <button class="btn next" @click="$emit('nextQuestion')">
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +149,8 @@ const d = ref();
 <style lang="sass">
 .popup
   position: absolute
-  background: red
+  background: var(--color-highlight-background)
+  color: var(--color-highlight-text)
   top: 0
   left: 0
   right: 0
@@ -129,6 +162,27 @@ const d = ref();
   justify-content: center
   align-items: center
 
+  p
+    padding: 1rem
+    margin: 1rem
+    border: 1px solid var(--color-highlight-text)
+
+  svg path
+    fill: var(--color-highlight-background)
+  .close
+    top: 1rem
+    right: 1rem
+
+
+  .equal
+    position: relative
+
+  input
+    padding: .4rem
+    text-align: center
+    font-size: 1rem
+    width: 5rem
+
 .calculette
   background: var(--color-highlight-background)
   bottom: 1rem