From f9bd10b6400eb77c897170eb6af82fc2e7d8b2f7 Mon Sep 17 00:00:00 2001
From: Simon C <simonc@linux.com>
Date: Wed, 6 Apr 2022 11:01:37 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20S=C3=A9paration=20du=20code=20sp=C3=A9c?=
 =?UTF-8?q?ifique=20aux=20questions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Question.vue |  99 +++++++++++++++++++++++++++++++++++
 src/components/Score.vue    | 101 ++++--------------------------------
 2 files changed, 108 insertions(+), 92 deletions(-)
 create mode 100644 src/components/Question.vue

diff --git a/src/components/Question.vue b/src/components/Question.vue
new file mode 100644
index 0000000..4749353
--- /dev/null
+++ b/src/components/Question.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { ref } from "vue";
+import { Splide, SplideSlide } from "@splidejs/vue-splide";
+import "@splidejs/splide/dist/css/splide.min.css";
+
+const props = defineProps({
+  question: {
+    type: Object,
+    required: true,
+  },
+});
+defineEmits(["answerSelected"]);
+
+const slides = ref();
+const answerWeight = ref(props.question.answers[0].weight);
+
+function selectAnswer(answer) {
+  const answerIndex = props.question.answers.findIndex(
+    (a) => a.id === answer.id
+  );
+  slides.value.splide.go(answerIndex);
+}
+function slideMove(splide, newIndex) {
+  answerWeight.value = props.question.answers[newIndex].weight;
+}
+</script>
+
+<template>
+  <div class="main">
+    <div class="top">
+      <legend>{{ question.title }}</legend>
+      <template v-if="question.answers">
+        <div class="choice" v-for="answer in question.answers" :key="answer.id">
+          <label>
+            <input
+              type="radio"
+              :data-answerId="answer.id"
+              :name="`question_${question.id}`"
+              :value="answer.weight"
+              v-model="answerWeight"
+              @click="selectAnswer(answer)"
+            />
+            {{ answer.title }}
+          </label>
+        </div>
+      </template>
+    </div>
+    <div class="bottom">
+      <template v-if="question.answers">
+        <Splide
+          @splide:move="slideMove"
+          class="answers"
+          :id="`question_${question.id}`"
+          ref="slides"
+        >
+          <SplideSlide
+            v-for="answer in question.answers"
+            :key="answer.id"
+            @click="$emit('answerSelected', question, answerWeight)"
+          >
+            <img
+              width="200"
+              height="200"
+              :src="`/answers/${answer.image}.png`"
+            />
+          </SplideSlide>
+        </Splide>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+input[type=radio]
+  margin-right: .5rem
+
+.main
+  height: 100%
+  max-width: 100%
+  display: flex
+  flex-direction: column
+  justify-content: space-around
+  align-items: center
+
+  .bottom
+    width: 400px
+    max-width: 100%
+    min-width: 280px
+
+.answers
+  text-align: center
+
+@media only screen and (orientation : landscape)
+  .main
+    flex-direction: row
+
+    .bottom
+      max-width: 50%
+</style>
diff --git a/src/components/Score.vue b/src/components/Score.vue
index c7768c3..bd722ae 100644
--- a/src/components/Score.vue
+++ b/src/components/Score.vue
@@ -6,6 +6,7 @@ import { ref, computed } from "vue";
 import { useStore } from "@/stores";
 
 import { Splide, SplideSlide } from "@splidejs/vue-splide";
+import Question from "./Question.vue";
 import "@splidejs/splide/dist/css/splide.min.css";
 import ScoreHeader from "./ScoreHeader.vue";
 
@@ -60,9 +61,6 @@ function formatScore(score) {
 const title = score ? score.title : "";
 const questions = ref(formatScore(score));
 
-function nextQuestion() {
-  setTimeout(() => slides.value.go(">"), 100);
-}
 const scoreSum = computed(() => {
   return questions.value
     .map((question) => question.weight)
@@ -97,21 +95,16 @@ const result = computed(() =>
         .filter((r) => !r.max || r.max >= scoreSum.value)[0]
     : null
 );
-function selectImage(event, question, answer) {
-  const input = document.querySelector(
-    `input[name='question_${question.id}'][value='${answer.weight}']`
-  );
-  if (input) {
-    input.checked = true;
-    input.dispatchEvent(new Event("change"));
-  }
-  nextQuestion();
-}
-function geQuestionSlide(question) {
+function goQuestionSlide(question) {
+  console.log(slides.value);
   slides.value.go(
     questions.value.findIndex((element) => element.id === question.id)
   );
 }
+function answerSelected(question, answerWeight) {
+  questions.value.find((q) => q.id === question.id).weight = answerWeight;
+  setTimeout(() => slides.value.go(">"), 100);
+}
 </script>
 
 <template>
@@ -131,57 +124,7 @@ function geQuestionSlide(question) {
     }"
   >
     <SplideSlide v-for="question in questions" :key="question.id">
-      <div class="main">
-        <div class="top">
-          <legend>{{ question.title }}</legend>
-          <template v-if="question.answers">
-            <div
-              class="choice"
-              v-for="answer in question.answers"
-              :key="answer.id"
-            >
-              <label>
-                <input
-                  type="radio"
-                  :data-answerId="answer.id"
-                  :name="`question_${question.id}`"
-                  :value="answer.weight"
-                  @change="
-                    (event) => {
-                      question.weight = parseFloat(event.target.value);
-                    }
-                  "
-                  @click="nextQuestion"
-                />
-                {{ answer.title }}
-              </label>
-            </div>
-          </template>
-        </div>
-        <div class="bottom">
-          <template v-if="question.answers">
-            <Splide
-              class="answers"
-              :id="`question_${question.id}`"
-              ref="question.splide"
-            >
-              <SplideSlide
-                v-for="answer in question.answers"
-                :key="answer.id"
-                @click="
-                  (event) => selectImage(event, { ...question }, { ...answer })
-                "
-              >
-                <img
-                  width="200"
-                  height="200"
-                  :src="`/answers/${answer.image}.png`"
-                />
-              </SplideSlide>
-            </Splide>
-          </template>
-        </div>
-      </div>
+      <Question :question="question" @answerSelected="answerSelected" />
     </SplideSlide>
     <SplideSlide class="latest">
       <template v-if="displayScoreResult && result">
@@ -216,7 +159,7 @@ function geQuestionSlide(question) {
               <a
                 @click="
                   (event) => {
-                    geQuestionSlide(question);
+                    goQuestionSlide(question);
                     return false;
                   }
                 "
@@ -254,9 +197,6 @@ function geQuestionSlide(question) {
   bottom: 0
   background: transparent
 
-  input[type=radio]
-    margin-right: .5rem
-
 
 .splide__slide
   background: transparent
@@ -313,29 +253,6 @@ label
       top: 0
       line-height: .7rem
 
-.main
-  height: 100%
-  max-width: 100%
-  display: flex
-  flex-direction: column
-  justify-content: space-around
-  align-items: center
-
-  .bottom
-    width: 400px
-    max-width: 100%
-    min-width: 280px
-
-.answers
-  text-align: center
-
 .splide__arrows
   position: inherit
-
-@media only screen and (orientation : landscape)
-  .main
-    flex-direction: row
-
-    .bottom
-      max-width: 50%
 </style>