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