add hangman dictionnary & input ajustment

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

@@ -2,6 +2,11 @@
     <div class="p-2 game-container">
         <h1 class="text-center">Pendu</h1>
         <p class="text-center">Trouve le mot du pendu - Saisi les lettres</p>
+        <div class="flex-center dic-select">
+            <div v-for="(dic, key) in dictionary">
+                <a v-if="!selectedWord" class="btn-primary mr-1" @click="selectWord">{{ key }}</a>
+            </div>
+        </div>
         <div class="flex">
             <div class="game-container-box">
                 <svg height="250" width="200" class="figure-container">
@@ -32,8 +37,7 @@
                 </div>
                 <div v-if="popup" class="popup-container">
                     <div class="popup">
-                        <h2>{{ finalMessage }}</h2>
-                        <button id="play-button" @click="playAgain">Rejouer</button>
+                        <h2 class="py-3">{{ finalMessage }}</h2>
                     </div>
                 </div>
             </div>
@@ -48,7 +52,7 @@
         name: "Hangman",
         data: function () {
             return {
-                words: json['fruits'],
+                dictionary: json,
                 letterBox: '',
                 figureParts: [],
                 correctLetters: [],
@@ -62,14 +66,16 @@
             }
         },
         mounted() {
-            this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase()
             this.figureParts = this.$el.querySelectorAll('.figure-part')
-            this.displayWord()
             window.addEventListener('keyup', this.keyMessage)
         },
         methods: {
+            selectWord(e) {
+                this.selectedWord = this.dictionary[e.target.textContent][Math.floor(Math.random() * this.dictionary[e.target.textContent].length)].toLowerCase()
+                this.displayWord()
+                this.popup = false
+            },
             keyMessage(e) {
-                console.log(event.key, event.keyCode)
                 if(e.keyCode >= 65 && e.keyCode <= 90) {
                     const letter = e.key
 
@@ -105,14 +111,13 @@
 
                 const innerWord = this.wordEl.replace(/<span class="letter">|<\/span>/g, '');
 
-                console.log('win', innerWord, this.selectedWord)
                 if(innerWord === this.selectedWord) {
                     this.finalMessage = 'Gagné! 😃';
                     this.popup = true
+                    this.newGame()
                 }
             },
             updateWrongLettersEl() {
-                console.log('wrong', this.wrongLettersEl)
                 this.wrongLettersEl =
                     !this.wrongLetters ? '<p>Wrong</p>' : ''
                         +
@@ -133,16 +138,15 @@
                 if(this.wrongLetters.length === this.figureParts.length) {
                     this.finalMessage = 'Perdu. 😕';
                     this.popup = true
+                    this.newGame()
                 }
             },
-            playAgain: function () {
+            newGame: function () {
+                this.popup = true
                 this.correctLetters.splice(0);
                 this.wrongLetters.splice(0);
-                this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase();
-                this.displayWord();
-                this.updateWrongLettersEl();
-                this.popup = false
                 this.letterBox = ''
+                this.selectedWord = ''
             },
             showNotification(){
                 this.notification = true

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

@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="link" class="game-index-item">
+    <router-link :to="link">
         <svg-vue icon="hangman" />
         <h2>Pendu</h2>
     </router-link>
@@ -8,6 +8,11 @@
 <script>
     export default {
         name: "HangmanIndex",
-        props: ["link"],
+        props: {
+            link: {
+                type: String,
+                required: true
+            },
+        }
     }
 </script>

resources/js/views/Games/HangMan/dict.json

@@ -1,6 +1,9 @@
 {
-    "fruits" : [
+    "Fruits" : [
         "banane", "abricot", "pamplemousse", "clementine", "airelle", "amande", "ananas", "avocat", "cassis", "cedrat", "cerise", "chataigne", "citron", "coing", "figue", "fraise", "framboise", "grenade", "groseille", "kiwi", "litchi", "mandarine", "mangue", "marron", "melon", "merise", "mirabelle", "myrtille", "nectarine", "noissette", "noix", "olive", "orange", "pasteque", "peche", "pistache", "poire", "pomelo", "pomme", "prune", "pruneau", "raisin", "tomate", "vanille"
+    ],
+    "Légumes" : [
+        "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"
     ]
 }