feat: Ajout du calcul

.drone.yml

@@ -50,6 +50,8 @@ steps:
   - npm run fetchData
   - npm run lint
   - npm run build
+  environment:
+    NODE_ENV: 'production'
 
 - name: deploy on s3
   image: minio/mc
@@ -94,6 +96,8 @@ steps:
   - npm run fetchData
   - npm run lint
   - npm run build
+  environment:
+    NODE_ENV: 'staging'
 
 - name: deploy on s3
   image: minio/mc

.eslintrc.cjs

@@ -3,6 +3,9 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
   root: true,
+  globals: {
+    process: true,
+  },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",

public/abacus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#CCD6DD" d="M3 16v-2h30v2zm0 7v-2h30v2zm0 7v-2h30v2zM3 9V7h30v2z"/><path fill="#D5AB88" d="M35 33V1c0-.552-.448-1-1-1h-1c-.552 0-1 .448-1 1H4c0-.552-.448-1-1-1H2c-.552 0-1 .448-1 1v32h34zM4 4h28v29H4V4z"/><path fill="#3B94D9" d="M19 5.5c-.829 0-1.5.671-1.5 1.5 0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5S8.5 6.171 8.5 7c0-.829-.671-1.5-1.5-1.5S5.5 6.171 5.5 7v2c0 .829.671 1.5 1.5 1.5S8.5 9.829 8.5 9c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5.828 0 1.5-.671 1.5-1.5V7c0-.829-.672-1.5-1.5-1.5z"/><path fill="#BE1931" d="M19 12.5c-.829 0-1.5.671-1.5 1.5 0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5c0-.829-.671-1.5-1.5-1.5s-1.5.671-1.5 1.5v2c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5s1.5-.671 1.5-1.5c0 .829.671 1.5 1.5 1.5.828 0 1.5-.671 1.5-1.5v-2c0-.829-.672-1.5-1.5-1.5z"/><path fill="#5C913B" d="M19 19.5c-.829 0-1.5.672-1.5 1.5 0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5v2c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5.828 0 1.5-.672 1.5-1.5v-2c0-.828-.672-1.5-1.5-1.5z"/><path fill="#FFAC33" d="M19 26.5c-.829 0-1.5.672-1.5 1.5 0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5v2c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5s1.5-.672 1.5-1.5c0 .828.671 1.5 1.5 1.5.828 0 1.5-.672 1.5-1.5v-2c0-.828-.672-1.5-1.5-1.5z"/><path fill="#3B94D9" d="M29 10.5c-.828 0-1.5-.671-1.5-1.5V7c0-.829.672-1.5 1.5-1.5s1.5.671 1.5 1.5v2c0 .829-.672 1.5-1.5 1.5z"/><path fill="#BE1931" d="M29 17.5c-.828 0-1.5-.671-1.5-1.5v-2c0-.829.672-1.5 1.5-1.5s1.5.671 1.5 1.5v2c0 .829-.672 1.5-1.5 1.5z"/><path fill="#5C913B" d="M29 24.5c-.828 0-1.5-.672-1.5-1.5v-2c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5z"/><path fill="#FFAC33" d="M29 31.5c-.828 0-1.5-.672-1.5-1.5v-2c0-.828.672-1.5 1.5-1.5s1.5.672 1.5 1.5v2c0 .828-.672 1.5-1.5 1.5z"/><path fill="#BF6952" d="M35 33H1c-.552 0-1 .448-1 1v1c0 .552.448 1 1 1h34c.552 0 1-.448 1-1v-1c0-.552-.448-1-1-1z"/><script xmlns=""/></svg>

src/assets/base.css

@@ -93,4 +93,5 @@ body {
   position: absolute;
   border: none;
   box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
+  cursor: pointer;
 }

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

src/components/Score.vue

@@ -52,6 +52,7 @@ function formatScore(score) {
         id: question.id,
         weight: answers[0].weight,
         title: translation.length > 0 ? translation[0].title : question.title,
+        function: question.function,
         answers: answers,
         splide: ref(),
       };