From 6200856e2854571de238dffc519698fb4c612445 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 3 May 2020 19:28:46 +0200
Subject: [PATCH] finish departement quizz meca

---
 resources/js/views/Games/Quizz/Quizz.vue  | 82 ++++++++++++++++++-----
 resources/js/views/Games/Quizz/quizz.json | 64 +++++++++++++-----
 resources/sass/components/_btn.scss       |  2 +-
 3 files changed, 114 insertions(+), 34 deletions(-)

diff --git a/resources/js/views/Games/Quizz/Quizz.vue b/resources/js/views/Games/Quizz/Quizz.vue
index 8464cdc..a4f9fa4 100644
--- a/resources/js/views/Games/Quizz/Quizz.vue
+++ b/resources/js/views/Games/Quizz/Quizz.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-2">
-        <h1 class="text-3xl text-center text-orange-900 font-bold">Quizz</h1>
+        <h1 class="text-3xl text-center text-orange-900 font-bold mb-4">Quizz</h1>
         <div v-if="!selectedQuizz" class="flex justify-center my-4">
             <a v-for="(quizz, key) in quizzList"
                :key="key"
@@ -9,7 +9,7 @@
                {{ key }}
             </a>
         </div>
-        <div v-if="!levelQuizz" class="flex justify-center mx-2">
+        <div v-if="!levelQuizz" class="flex justify-center my-4">
             <a  v-for="(level, index) in levels"
                 :key="index"
                 class="btn-primary mr-1 cursor-pointer"
@@ -19,11 +19,24 @@
         </div>
         <div v-if="selectedQuizz && levelQuizz">
 
-            <div v-if="!responses" class="flex justify-center mt-8">
-                <span class="btn cursor-pointer" @click="startQuizz">Commencer</span>
+            <div v-if="!responses" class="flex justify-center my-4">
+                <span class="btn-primary" @click="startQuizz">Commencer</span>
             </div>
-            <div v-else>
-                Start
+            <div v-else-if="results" class="flex flex-col items-center">
+                <div class="text-center text-2xl font-bold my-4">{{ selectedQuizz.name }}</div>
+                <div class="text-center text-2xl font-bold my-4">{{ note }} / {{ responses.length }}</div>
+                <span class="btn-primary mt-4" @click="newQuizz">Nouveau Quizz</span>
+            </div>
+            <div v-else class="flex flex-col">
+                <div class="text-center my-4"><span class="text-2xl font-bold">{{ currentQuestion[0] }}</span></div>
+                <div class="flex justify-center my-4">
+                    <div v-for="(response, index) in currentResponses"
+                         :key="index"
+                         @click="responsed(currentQuestion, response)"
+                         class="btn mx-1">
+                        {{ response }}
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -39,33 +52,68 @@ export default {
             quizzList: quizz,
             selectedQuizz: null,
             levels: [
-                1, 2, 3, 4, 5
+                1, 2, 3
             ],
             levelQuizz: false,
             currentQuestion: null,
             currentResponses: null,
             responses: null,
+            results: false,
+        }
+    },
+    computed: {
+        note() {
+            let note = 0
+            this.responses.forEach(response => {
+                if(response[0][1] === response[1]) {
+                    note = note + 1
+                }
+            })
+            return note
         }
     },
     methods: {
         startQuizz: function () {
-            console.log('start')
             this.responses = []
             this.selectedQuizz = this.quizzList[this.selectedQuizz]
-            this.currentQuestion = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
-            this.currentResponses = [this.currentQuestion[1]]
+            let newQuestion = this.newQuestion()
+            this.currentQuestion = newQuestion.question
+            this.currentResponses = newQuestion.responses
+        },
+        newQuizz: function() {
+            this.selectedQuizz = null
+            this.levelQuizz = false
+            this.responses = null
+            this.results = false
+        },
+        newQuestion: function() {
+            let responses, question
+            let random_boolean = (this.selectedQuizz.reversible) ? Math.random() >= 0.5 : false
 
-            while (this.currentResponses.length <= (this.levelQuizz * 2 - 1)) {
-                let response = this.selectedQuizz[Math.floor(Math.random() * this.selectedQuizz.length)]
-                console.log(response)
-                if(!this.currentResponses.includes(response[1])) {
-                    this.currentResponses.push(response[1])
+            question = this.selectedQuizz.responses[Math.floor(Math.random() * this.selectedQuizz.responses.length)].slice()
+            question = (random_boolean) ? question.reverse() : question
+            responses = [question[1]]
+
+            while (responses.length <= (this.levelQuizz * 2 - 1)) {
+                let response = this.selectedQuizz.responses[Math.floor(Math.random() * this.selectedQuizz.responses.length)].slice()
+                response = (random_boolean) ? response.reverse() : response
+                if(!responses.includes(response[1])) {
+                    responses.push(response[1])
                 }
             }
+            responses.sort((a, b) => a - b)
 
-            console.log(this.currentQuestion, this.currentResponses)
-
+            return { question, responses }
+        },
+        responsed: function(question, response) {
+            this.responses.push([question, response])
 
+            if(this.responses.length > 9) {
+                this.results = true
+            }
+            let newQuestion = this.newQuestion()
+            this.currentQuestion = newQuestion.question
+            this.currentResponses = newQuestion.responses
         }
     }
 }
diff --git a/resources/js/views/Games/Quizz/quizz.json b/resources/js/views/Games/Quizz/quizz.json
index 3dbe101..b95956e 100644
--- a/resources/js/views/Games/Quizz/quizz.json
+++ b/resources/js/views/Games/Quizz/quizz.json
@@ -1,20 +1,52 @@
 {
-    "Départements" : [
-        ["Ain", 1],
-        ["Aisne", 2],
-        ["Allier", 3],
-        ["Alpes-de-Haute-Provence", 4],
-        ["Hautes-Alpes", 5],
-        ["Alpes-Maritimes", 6],
-        ["Ardèche", 7],
-        ["Ardennes", 8],
-        ["Ariège", 9],
-        ["Aube", 10],
-        ["Aude", 11],
-        ["Aveyron", 12],
-        ["Orne", 61],
-        ["Paris", 75]
-    ],
+    "Départements" : {
+        "name": "Départements",
+        "reversible": true,
+        "responses" : [
+            ["Ain", 1],
+            ["Aisne", 2],
+            ["Allier", 3],
+            ["Alpes-de-Haute-Provence", 4],
+            ["Hautes-Alpes", 5],
+            ["Alpes-Maritimes", 6],
+            ["Ardèche", 7],
+            ["Ardennes", 8],
+            ["Ariège", 9],
+            ["Aube", 10],
+            ["Aude", 11],
+            ["Aveyron", 12],
+            ["Bouches-du-Rhône", 13],
+            ["Calvados", 14],
+            ["Cantal", 15],
+            ["Charente", 16],
+            ["Charente-Maritime", 17],
+            ["Cher", 18],
+            ["Corrèze", 19],
+            ["Corse-du-Sud", "2A"],
+            ["Haute-Corse", "2B"],
+            ["Côte-d'Or", 21],
+            ["Côtes-d'Armor", 22],
+            ["Creuse", 23],
+            ["Dordogne", 24],
+            ["Doubs", 25],
+            ["Drôme", 26],
+            ["Eure", 27],
+            ["Eure-et-Loir", 28],
+            ["Finistère", 29],
+            ["Gard", 30],
+            ["Haute-Garonne", 31],
+            ["Gers", 32],
+            ["Gironde", 33],
+            ["Hérault", 34],
+            ["Ille-et-Vilaine", 35],
+            ["Indre", 36],
+            ["Indre-et-Loire", 37],
+            ["Isère", 38],
+            ["Jura", 39],
+            ["Orne", 61],
+            ["Paris", 75]
+        ]
+    },
     "Pays" : [
         "ail", "amarante", "arachide", "artichaud", "asperge", "aubergine", "basilic", "betterave", "blette", "brocoli", "carotte", "chou", "ciboulette", "concombre", "courge", "courgette", "citrouille", "cresson", "echalote", "endive", "epinard", "fenouil", "flageolet", "gingembre", "haricot", "igname", "jacque", "laitue", "lentille", "marron", "navet", "oignon", "ortie", "oseille", "panais", "patisson", "persil", "piment", "pissenlit", "poireaux", "poivron", "potiron", "potimarron", "radis", "roquette", "scorsonere", "soja", "tomate"
     ]
diff --git a/resources/sass/components/_btn.scss b/resources/sass/components/_btn.scss
index 38afde8..99ab789 100644
--- a/resources/sass/components/_btn.scss
+++ b/resources/sass/components/_btn.scss
@@ -68,7 +68,7 @@
 //}
 
 .btn {
-    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md;
+    @apply border bg-orange-400 text-white py-2 px-4 shadow-sm rounded-md cursor-pointer;
 
     &:hover {
         @apply text-white bg-orange-600 transition-all duration-300;