add hangman dictionnary & input ajustment

.idea/php.xml

@@ -110,6 +110,7 @@
       <path value="$PROJECT_DIR$/vendor/psr/http-factory" />
       <path value="$PROJECT_DIR$/vendor/firebase/php-jwt" />
       <path value="$PROJECT_DIR$/vendor/laravel/passport" />
+      <path value="$PROJECT_DIR$/vendor/spatie/laravel-web-tinker" />
     </include_path>
   </component>
   <component name="PhpProjectSharedConfiguration" php_language_level="7.2" />

.idea/portal.iml

@@ -85,6 +85,7 @@
       <excludeFolder url="file://$MODULE_DIR$/vendor/sebastian/resource-operations" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/sebastian/type" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/sebastian/version" />
+      <excludeFolder url="file://$MODULE_DIR$/vendor/spatie/laravel-web-tinker" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/swiftmailer/swiftmailer" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/console" />
       <excludeFolder url="file://$MODULE_DIR$/vendor/symfony/css-selector" />

resources/js/views/Games/GameIndex.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="p-2">
         <h1>Liste des jeux</h1>
-        <div class="game-index">
-            <HangmanIndex link="/jeux/pendu" />
+        <div class="container-cards-list mt-2">
+            <HangmanIndex link="/jeux/pendu" class="card" />
         </div>
     </div>
 </template>

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"
     ]
 }
 

resources/js/views/Memo/MemoCreate.vue

@@ -46,7 +46,3 @@
         }
     }
 </script>
-
-<style scoped>
-
-</style>

resources/js/views/User/UserAdmin.vue

@@ -14,9 +14,11 @@
       <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
       <form @submit.prevent="addMember" class="mb-2">
           <div class="flex">
-              <InputField name="name" type="text" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
+              <InputField name="name" label="Nom du nouveau membre" placeholder="Nom" required :errors="errors" @update:field="form.name = $event" class="mr-1" />
               <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" required :errors="errors" @update:field="form.email = $event" class="mr-1" />
-              <button class="btn-primary inline">Ajouter</button>
+              <div class="flex-middle mt-4">
+                  <button class="btn-primary">Ajouter</button>
+              </div>
           </div>
       </form>
         <div class="mb-2">
@@ -73,22 +75,16 @@
         },
         methods: {
             addMember: function () {
-                if(this.form.name.length >= 4 && this.form.email.length >= 12) {
-                    axios.post('/api/users', {name: this.form.name, email: this.form.email})
-                        .then(res => {
-                            this.form.name = ''
-                            this.form.email = ''
-                            this.alertType = 'success'
-                            this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
-                        })
-                        .catch(errors => {
-                            this.alertType = 'error'
-                            this.alertMessage = 'L\'utilisateur n\'a pas été créé'
-                        })
-                } else {
-                    this.alertType = 'error'
-                    this.alertMessage = 'Le formulaire n\'est pas correctement renseigné.'
-                }
+                axios.post('/api/users', {name: this.form.name, email: this.form.email})
+                    .then(res => {
+                        this.form.name = ''
+                        this.form.email = ''
+                        this.alertType = 'success'
+                        this.alertMessage = `${res.data.data.attributes.name} a bien été créé`
+                    })
+                    .catch(errors => {
+                        this.errors = errors.response.data.errors
+                    })
             }
         }
     }

resources/sass/pages/games.scss

@@ -1,20 +1,5 @@
-.game-index {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 3rem;
-}
 
-.game-index-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 18rem;
-    height: 18rem;
-    background-color: $light;
-    text-decoration: none;
+.card {
+
 
-    &:hover {
-        text-decoration: underline;
-    }
 }

resources/sass/pages/games/hangman.scss

@@ -11,6 +11,10 @@
     justify-content: space-between;
 }
 
+.dic-select {
+    min-height: 6rem;
+}
+
 .figure-container {
     fill: transparent;
     stroke: $mediumDark;

resources/sass/setup/_containers.scss

@@ -14,6 +14,11 @@
     text-decoration: none;
     flex-direction: column;
     justify-content: space-between;
+
+    img,
+    svg {
+        max-height: 15rem;
+    }
 }
 
 
@@ -34,3 +39,10 @@
 
     }
 }
+
+@media (max-width: 500px) {
+    .container-cards-list {
+        grid-template-columns: repeat(1, 1fr);
+
+    }
+}