finish hangman v1

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

@@ -0,0 +1,157 @@
+<template>
+    <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">
+            <div class="game-container-box">
+                <svg height="250" width="200" class="figure-container">
+                    <!-- Potence -->
+                    <line x1="60" y1="20" x2="140" y2="20" />
+                    <line x1="140" y1="20" x2="140" y2="50" />
+                    <line x1="60" y1="20" x2="60" y2="230" />
+                    <line x1="20" y1="230" x2="100" y2="230" />
+
+                    <!-- Tête -->
+                    <circle cx="140" cy="70" r="20" class="figure-part"/>
+                    <!-- Corps -->
+                    <line x1="140" y1="90" x2="140" y2="150" class="figure-part"/>
+                    <line x1="140" y1="120" x2="120" y2="100" class="figure-part"/>
+                    <line x1="140" y1="120" x2="160" y2="100" class="figure-part"/>
+                    <line x1="140" y1="150" x2="120" y2="180" class="figure-part"/>
+                    <line x1="140" y1="150" x2="160" y2="180" class="figure-part"/>
+                </svg>
+            </div>
+            <div class="game-container-box">
+                <div class="wrong-letters-container">
+                    <div v-html="wrongLettersEl" class="wrong-letters"></div>
+                    <div class="word" v-html="wordEl"></div>
+                </div>
+
+                <div v-if="notification" class="notification-container" id="notification-container">
+                    <p>Vous avez déjà saisie cette lettre.</p>
+                </div>
+                <div v-if="popup" class="popup-container" id="popup-container">
+                    <div class="popup">
+                        <h2>{{ finalMessage }}</h2>
+                        <button id="play-button" @click="playAgain">Rejouer</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="game-input">
+            <label for="saisie" class="pb-1">Saisir vos lettres ici</label>
+            <input v-model="letterBox" id="saisie" type="text" @keyup="keyMessage">
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Hangman",
+        data: function () {
+            return {
+                words: ['pimprenelle', 'culcul', 'milo', 'Prout'],
+                letterBox: '',
+                figureParts: [],
+                correctLetters: [],
+                wrongLetters: [],
+                wrongLettersEl: '',
+                selectedWord: '',
+                wordEl: '',
+                finalMessage: '',
+                popup: false,
+                notification: false,
+            }
+        },
+        mounted() {
+            this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase()
+            this.figureParts = this.$el.querySelectorAll('.figure-part')
+            this.displayWord()
+        },
+        methods: {
+            keyMessage(e) {
+                console.log(event.key, event.keyCode)
+                if(e.keyCode >= 65 && e.keyCode <= 90) {
+                    const letter = e.key
+
+                    if(this.selectedWord.includes(letter)) {
+                        if(!this.correctLetters.includes(letter)) {
+                            this.correctLetters.push(letter)
+
+                            this.displayWord()
+                        } else {
+                            this.showNotification()
+                        }
+                    } else {
+                        if(!this.wrongLetters.includes(letter)) {
+                            this.wrongLetters.push(letter);
+
+                            this.updateWrongLettersEl()
+                        } else {
+                            this.showNotification()
+                        }
+                    }
+                }
+            },
+            displayWord() {
+                this.wordEl =
+                    this.selectedWord
+                    .split('')
+                    .map(
+                        letter => {
+                            let toggleLetter = this.correctLetters.includes(letter) ? letter : '';
+                            return '<span class="letter">' + toggleLetter +"</span>"
+                        }
+                    ).join('');
+
+                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
+                }
+            },
+            updateWrongLettersEl() {
+                console.log('wrong', this.wrongLettersEl)
+                this.wrongLettersEl =
+                    !this.wrongLetters ? '<p>Wrong</p>' : ''
+                        +
+                    this.wrongLetters.map(letter => `<span>${letter}</span>`);
+
+                // Display parts
+                this.figureParts.forEach((part, index) => {
+                    const errors = this.wrongLetters.length;
+
+                    if(index < errors) {
+                        part.style.display = 'block'
+                    } else {
+                        part.style.display = 'none'
+                    }
+                });
+
+                // Check if lost
+                if(this.wrongLetters.length === this.figureParts.length) {
+                    this.finalMessage = 'Perdu. 😕';
+                    this.popup = true
+                }
+            },
+            playAgain: function () {
+                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 = ''
+            },
+            showNotification(){
+                this.notification = true
+
+                setTimeout(() => {
+                    this.notification = false
+                }, 2000)
+            }
+        }
+    }
+</script>