From d7922166ba50040f637f0701df573224fc83cd48 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Wed, 21 Feb 2024 14:29:41 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Modification=20de=20l'=C3=A9chelle=20de?=
 =?UTF-8?q?=20r=C3=A9sultat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Question.vue |  2 +-
 src/components/Score.vue    | 34 +++++++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/Question.vue b/src/components/Question.vue
index 258e4dd..75559b9 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -137,7 +137,7 @@ const d = ref(0);
       <label for="D">D (cm)</label>
       <input v-model="d" type="number" name="D" />
       <p v-if="d != 0">≃ {{ Math.round((h * 100) / d) }}</p>
-      <p v-if="d == 0" class="no-visible"> </p>
+      <p v-if="d == 0" class="no-visible"></p>
       <button class="btn equal" @click="validatePopup">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
           <path
diff --git a/src/components/Score.vue b/src/components/Score.vue
index b6ef393..440b43a 100644
--- a/src/components/Score.vue
+++ b/src/components/Score.vue
@@ -61,7 +61,7 @@ function formatScore(score) {
 function getTranslation(translations, key) {
   return translations.find((translation) => translation[key] == store.language);
 }
-const trad = getTranslation(score.translations, "languages_id")
+const trad = getTranslation(score.translations, "languages_id");
 const title = score ? trad.title : "";
 const questions = ref(formatScore(score));
 
@@ -88,8 +88,10 @@ function getResultsFromScore(score) {
         effets: translation.length > 0 ? translation[0].effets : "",
         facteur: translation.length > 0 ? translation[0].facteur : "",
         pde: translation.length > 0 ? translation[0].pde : "",
+        title: translation.length > 0 ? translation[0].title : "",
       };
-    });
+    })
+    .reverse();
 }
 const results = ref(getResultsFromScore(score));
 const result = computed(() =>
@@ -151,7 +153,11 @@ async function share() {
   body.classList.add("print");
   const dataUrl = await toPng(body, { filter: filter });
   body.classList.remove("print");
-  const fileName = new Date().toISOString().replace(/T/, '_').replace(/\..+/, '').replaceAll(':', '-')
+  const fileName = new Date()
+    .toISOString()
+    .replace(/T/, "_")
+    .replace(/\..+/, "")
+    .replaceAll(":", "-");
   saveAs(dataUrl, `Ceiba-score-${fileName}.png`);
   sharing.value = false;
 }
@@ -185,14 +191,14 @@ async function share() {
         <div>
           <h2 class="center">{{ trad.result_title }}</h2>
           <h2 class="center">{{ result.pde_qtra }}</h2>
-          <div class="gradient">
+          <div :class="'gradient size-' + results.length">
             <div
-              v-for="(item, index) in [...Array(7).keys()]"
-              :class="{ active: result && result.pde_qtra === index + 1 }"
+              v-for="item in results"
+              :class="{ active: result && result.pde_qtra === item.pde_qtra }"
               :key="item"
-              :data-title=trad.result_sigle
+              :data-title="trad.result_sigle"
             >
-              {{ index + 1 }}
+              {{ item.title }}
             </div>
           </div>
           <div class="details">
@@ -381,8 +387,18 @@ label
   text-shadow: 1px 1px 4px var(--color-highlight-text-invert),-1px -1px 4px var(--color-highlight-text-invert), -1px 1px 4px var(--color-highlight-text-invert), 1px -1px 4px var(--color-highlight-text-invert)
   color: var(--color-highlight-text)
 
-  div
+  &.size-3 div
+    width: calc(100%/3)
+  &.size-4 div
+    width: calc(100%/4)
+  &.size-5 div
+    width: calc(100%/5)
+  &.size-6 div
+    width: calc(100%/6)
+  &.size-7 div
     width: calc(100%/7)
+
+  div
     text-align: center
     align-self: center
     font-weight: bold