feat: Ajout de la traduction par défaut

src/components/Score.vue

@@ -32,12 +32,11 @@ function formatAnswers(answers) {
       );
       return {
         id: answer.id,
-        title: translation.length > 0 ? translation[0].title : "",
+        title: translation.length > 0 ? translation[0].title : answer.title,
         weight: answer.weight,
         image: answer.image,
       };
     })
-    .filter((answer) => answer.title);
 }
 
 function formatScore(score) {
@@ -51,12 +50,11 @@ function formatScore(score) {
       return {
         id: question.id,
         weight: answers[0].weight,
-        title: translation.length > 0 ? translation[0].title : "",
+        title: translation.length > 0 ? translation[0].title : question.title,
         answers: answers,
         splide: ref(),
       };
     })
-    .filter((question) => question.title);
 }
 
 const title = score ? score.title : "";

src/components/ScoresList.vue

@@ -3,33 +3,39 @@ import data from "@/data.json";
 import { useStore } from "@/stores";
 
 const store = useStore();
-const language = store.language;
 
 const translationKey = "languages_id";
 const scores = data.filter((score) => {
   return (
     !!score.translations.find(
-      (translation) => translation[translationKey] == language
+      (translation) => translation[translationKey] == store.language
     ) &&
     score.results.length &&
     score.questions.length
   );
 });
 function getTranslation(translations, key) {
-  return translations.find((translation) => translation[key] == language);
+  return translations.find((translation) => translation[key] == store.language);
+}
+function changeLanguage() {
+  store.changeLanguage()
 }
 </script>
 
 <template>
   <header>
     <h1>Ceiba Scores App</h1>
+    <ul>
+      <li v-if="store.language == 'en-US'" @click="changeLanguage">🇫🇷</li>
+      <li v-if="store.language == 'fr-FR'" @click="changeLanguage">🇺🇸</li>
+    </ul>
   </header>
   <main>
     <div class="container" v-if="scores">
       <ul>
         <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
           <router-link :to="{ name: 'score', params: { id: score.id } }">{{
-            getTranslation(score.translations, "languages_id").title1
+            getTranslation(score.translations, "languages_id").title
           }}</router-link>
         </li>
       </ul>
@@ -42,7 +48,7 @@ header
   height: var(--header-size)
   overflow: hidden
   display: flex
-  justify-content: center
+  justify-content: space-around
   align-items: center
   border-bottom: 2px solid var(--color-text)
   background: var(--color-green)
@@ -50,6 +56,20 @@ header
   h1
     text-align: center
 
+  ul
+    margin: 0
+    padding: 0
+    list-style: none
+    text-align: center
+    font-size: 1.5rem
+
+    a
+      text-decoration: none
+
+    .hidden
+      display: none
+
+
 main
   width: 100%
   height: calc(100% - var(--header-size))
@@ -72,53 +92,53 @@ main
     width: 440px
     height: calc(440px * 1136 / 724)
 
-ul
+  ul
-  margin: 0
+    margin: 0
-  padding: 0
+    padding: 0
-  list-style: none
+    list-style: none
 
-  position: absolute
-  top: 0
-  left: 0
-  bottom: 0
-  right: 0
-
-  background-image: url(/arbre.webp)
-  background-position: center
-  background-repeat: no-repeat
-  background-size: contain
-
-  border-radius: 10px
-
-  li
-    display: none
-
-    background: rgba(0, 0, 0, .5)
-    border-radius: 10px
     position: absolute
-    border: 2px solid var(--color-text)
+    top: 0
+    left: 0
+    bottom: 0
+    right: 0
 
-    &#score_1
+    background-image: url(/arbre.webp)
+    background-position: center
+    background-repeat: no-repeat
+    background-size: contain
+
+    border-radius: 10px
+
+    li
+      display: none
+
+      background: rgba(0, 0, 0, .5)
+      border-radius: 10px
+      position: absolute
+      border: 2px solid var(--color-text)
+
+      &#score_1
+        display: flex
+        top: 40%
+        bottom: 35%
+        left: 20%
+        right: 20%
+
+      &#score_6
+        display: flex
+        top: 72%
+        bottom: 5%
+        left: 6%
+        right: 6%
+
+    a
+      color: var(--color-text)
+      display: block
+      width: 100%
+      height: 100%
       display: flex
-      top: 40%
+      align-items: center
-      bottom: 35%
+      justify-content: center
-      left: 20%
+      text-align: center
-      right: 20%
-
-    &#score_6
-      display: flex
-      top: 72%
-      bottom: 5%
-      left: 6%
-      right: 6%
-
-  a
-    color: var(--color-text)
-    display: block
-    width: 100%
-    height: 100%
-    display: flex
-    align-items: center
-    justify-content: center
-    text-align: center
 </style>

src/stores.js

@@ -8,4 +8,9 @@ export const useStore = defineStore({
   persist: {
     enabled: true,
   },
+  actions: {
+    changeLanguage() {
+      this.language = this.language == "fr-FR" ? "en-US" : "fr-FR"
+    },
+  },
 });