Merge branch 'master' into 'production'

Master

See merge request Romulus21/portal!41

resources/js/router.js

@@ -13,6 +13,7 @@ import ToDoListIndex from './views/ToDoLists/ToDoListIndex'
 import ToDoListShow from './views/ToDoLists/ToDoListShow'
 import GameIndex from './views/Games/GameIndex'
 import Hangman from './views/Games/HangMan/Hangman'
+import Quizz from './views/Games/Quizz/Quizz'
 
 Vue.use(VueRouter)
 
@@ -72,5 +73,9 @@ export default new VueRouter({
             path: '/jeux/pendu', component: Hangman,
             meta: {title: 'Jeu : Le pendu'}
         },
+        {
+            path: '/jeux/quizz', component: Quizz,
+            meta: {title: 'Jeu : Quizz'}
+        },
     ]
 })

resources/js/views/Games/GameIndex.vue

@@ -1,19 +1,21 @@
 <template>
     <div class="p-4">
         <h1 class="page-title">Liste des jeux</h1>
-        <div class="flex flex-wrap mt-4">
-            <HangmanIndex link="/jeux/pendu" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 card" />
+        <div class="flex flex-wrap -m-2 mt-2">
+            <HangmanIndex link="/jeux/pendu" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
+            <QuizzIndex link="/jeux/quizz" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
         </div>
     </div>
 </template>
 
 <script>
 import HangmanIndex from './HangMan/HangmanIndex'
+import QuizzIndex from './Quizz/QuizzIndex'
 
 export default {
     name: 'GameIndex',
     components: {
-        HangmanIndex
+        HangmanIndex, QuizzIndex
     }
 }
 </script>

resources/js/views/Games/HangMan/HangmanIndex.vue

@@ -1,7 +1,9 @@
 <template>
     <router-link :to="link">
-        <svg-vue icon="hangman" />
-        <h2>Pendu</h2>
+        <div class="m-2 card">
+            <svg-vue icon="hangman" />
+            <h2>Pendu</h2>
+        </div>
     </router-link>
 </template>
 

resources/js/views/Games/Quizz/Quizz.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="p-2">
+        <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"
+               class="btn-primary mr-1 cursor-pointer"
+               @click="selectedQuizz = key">
+               {{ key }}
+            </a>
+        </div>
+        <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"
+                @click="levelQuizz = level">
+                Niveau {{ level }}
+            </a>
+        </div>
+        <div v-if="selectedQuizz && levelQuizz">
+
+            <div v-if="!responses" class="flex justify-center my-4">
+                <span class="btn-primary" @click="startQuizz">Commencer</span>
+            </div>
+            <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>
+</template>
+
+<script>
+import quizz from './quizz.json'
+
+export default {
+    name: 'Quizz',
+    data: function () {
+        return {
+            quizzList: quizz,
+            selectedQuizz: null,
+            levels: [
+                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 () {
+            this.responses = []
+            this.selectedQuizz = this.quizzList[this.selectedQuizz]
+            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
+
+            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)
+
+            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
+        }
+    }
+}
+</script>

resources/js/views/Games/Quizz/QuizzIndex.vue

@@ -0,0 +1,21 @@
+<template>
+    <router-link :to="link">
+        <div class="m-2 card">
+            <svg-vue icon="close" />
+            <h2>Quizz</h2>
+        </div>
+    </router-link>
+</template>
+
+<script>
+export default {
+    name: 'QuizzIndex',
+    props: {
+        link: {
+            type: String,
+            required: true
+        },
+    }
+}
+</script>
+

resources/js/views/Games/Quizz/quizz.json

@@ -0,0 +1,161 @@
+{
+    "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],
+            ["Landes", 40],
+            ["Loir-et-Cher", 41],
+            ["Loire", 42],
+            ["Haute-Loire", 43],
+            ["Loire-Atlantique", 44],
+            ["Loiret", 45],
+            ["Lot", 46],
+            ["Lot-et-Garonne", 47],
+            ["Lozère", 48],
+            ["Maine-et-Loire", 49],
+            ["Manche", 50],
+            ["Marne", 51],
+            ["Haute-Marne", 52],
+            ["Mayenne", 53],
+            ["Meurte-et-Moselle", 54],
+            ["Meuse", 55],
+            ["Morbihan", 56],
+            ["Moselle", 57],
+            ["Nièvre", 58],
+            ["Nord", 59],
+            ["Oise", 60],
+            ["Orne", 61],
+            ["Pas-de-Calais", 62],
+            ["Puy-de-Dôme", 63],
+            ["Pyrénées-Atlantiques", 64],
+            ["Hautes-Pyrénées", 65],
+            ["Pyrénées-Orientales", 66],
+            ["Bas-Rhin", 67],
+            ["Haut-Rhin", 68],
+            ["Rhône", 69],
+            ["Haute-Saône", 70],
+            ["Saône-et-Loire", 71],
+            ["Sarthe", 72],
+            ["Savoie", 73],
+            ["Haute-Savoie", 74],
+            ["Paris", 75],
+            ["Seine-Maritime", 76],
+            ["Seine-et-Marne", 77],
+            ["Yvelines", 78],
+            ["Deux-Sévres", 79],
+            ["Somme", 80],
+            ["Tarn", 81],
+            ["Tarn-et-Garonne", 82],
+            ["Var", 83],
+            ["Vaucluse", 84],
+            ["Vendée", 85],
+            ["Vienne", 86],
+            ["Haute-Vienne", 87],
+            ["Vosges", 88],
+            ["Yonne", 89],
+            ["Territoire de Belfort", 90],
+            ["Essonne", 91],
+            ["Hauts-de-Seine", 92],
+            ["Seine-Saint-Denis", 93],
+            ["Val-de-Marne", 94],
+            ["Val-d'Oise", 95],
+            ["Guadeloupe", 971],
+            ["Martinique", 972],
+            ["Guyane", 973],
+            ["La Réunion", 974],
+            ["Mayotte", 976]
+        ]
+    },
+    "Capitales" : {
+        "name": "Capitales",
+        "reversible": true,
+        "responses" : [
+            ["Albanie", "Tirana"],
+            ["Allemagne", "Berlin"],
+            ["Andorre", "Andorre-la-Vieille"],
+            ["Autriche", "Vienne"],
+            ["Belgique", "Bruxelles"],
+            ["Biélorussie", "Minsk"],
+            ["Bosnie-Herzégovine", "Sarajevo"],
+            ["Bulgarie", "Sofia"],
+            ["Chypre", "Nicosie"],
+            ["Croatie", "Zagreb"],
+            ["Danemark", "Copenhague"],
+            ["Espagne", "Madrid"],
+            ["Estonie", "Tallinn"],
+            ["Finlande", "Helsinki"],
+            ["France", "Paris"],
+            ["Grèce", "Athènes"],
+            ["Hongrie", "Budapest"],
+            ["Irlande", "Dublin"],
+            ["Islande", "Reykjavik"],
+            ["Italie", "Rome"],
+            ["Kosovo", "Pristina"],
+            ["Lettonie", "Riga"],
+            ["Liechtenstein", "Vaduz"],
+            ["Lituanie", "Vilnius"],
+            ["Luxembourg", "Luxembourg"],
+            ["Macédoine", "Skopje"],
+            ["Malte", "La Valette"],
+            ["Moldavie", "Chisinau"],
+            ["Monaco", "Monaco"],
+            ["Monténégro", "Podgorica"],
+            ["Norvège", "Oslo"],
+            ["Pays-Bas", "Amsterdam"],
+            ["Pologne", "Varsovie"],
+            ["Portugal", "Lisbonne"],
+            ["République Tchèque", "Prague"],
+            ["Roumanie", "Bucarest"],
+            ["Royaume-Uni", "Londres"],
+            ["Russie", "Moscou"],
+            ["Saint-Marin", "Saint-Marin"],
+            ["Serbie", "Belgrade"],
+            ["Slovaquie", "Bratislava"],
+            ["Slovénie", "Ljubljana"],
+            ["Suède", "Stockholm"],
+            ["Suisse", "Berne"],
+            ["Ukraine", "Kiev"],
+            ["Vatican", "Vatican"]
+        ]
+    }
+}

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;