feat: Ajout du calcul

src/components/Question.vue

@@ -26,6 +26,13 @@ function slideMove(splide, newIndex) {
   answerWeight.value = props.question.answers[newIndex].weight;
   emits("answerSelected", props.question, answerWeight);
 }
+const isProduction = process.env.NODE_ENV == "production";
+const displayPopup = ref(false);
+function showHidePopup() {
+  displayPopup.value = !displayPopup.value;
+}
+const h = ref();
+const d = ref();
 </script>
 
 <template>
@@ -73,7 +80,26 @@ function slideMove(splide, newIndex) {
       </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>
+          <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">
+            = {{ Math.round((h * 100) / d) }}
+          </button>
+        </div>
+      </template>
+    </template>
+  </template>
   <button class="btn next" @click="$emit('nextQuestion')">
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -89,6 +115,31 @@ function slideMove(splide, newIndex) {
 </template>
 
 <style lang="sass">
+.popup
+  position: absolute
+  background: red
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  z-index: 100
+  display: flex
+  flex-direction: column
+  padding: 1rem
+  justify-content: center
+  align-items: center
+
+.calculette
+  background: var(--color-highlight-background)
+  bottom: 1rem
+  left: 1rem
+  width: 3rem
+  height: 3rem
+
+  img
+    width: 80%
+    height: 80%
+
 .next
   background: var(--color-highlight-background)
   bottom: 1rem