continue conversion Hangman

resources/js/views/Games/Hangman.vue

@@ -21,10 +21,10 @@
             </svg>
 
             <div class="wrong-letters-container">
-                <div id="wrong-letters"></div>
+                <div v-html="wrongLetters"></div>
             </div>
 
-            <div class="word" id="word"></div>
+            <div class="word" v-html="wordEl"></div>
         </div>
 
         <div class="popup-container" id="popup-container">
@@ -43,14 +43,73 @@
 <script>
     export default {
         name: "Hangman",
+        data: function () {
+            return {
+                words: ['pimprenelle', 'culcul', 'milo'],
+                correctLetters: [],
+                wrongLetters: [],
+                selectedWord: '',
+                wordEl: '',
+                popup: false,
+                finalMessage: '',
+            }
+        },
+        mounted() {
+            this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
+            console.log(this.selectedWord)
+            this.displayWord()
+        },
         methods: {
-            playAgain: function () {
+            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(/\n/g, '')
+
+                if(innerWord === this.selectedWord) {
+                    this.finalMessage = 'Congratulations! You won! 😃';
+                    this.popup.style.display = 'flex';
+                }
+            },
+            updateWrongLettersEl() {
+                let wrongLettersEl =
+                    this.wrongLetters.length > 0 ? '<p>Wrong</p>' : ''
+                        +
+                    this.wrongLetters.map(letter => `<span>${letter}</span>`)
+
+                // Display parts
+                figureParts.forEach((part, index) => {
+                    const errors = wrongLetters.length
+
+                    if(index < errors) {
+                        part.style.display = 'block'
+                    } else {
+                        part.style.display = 'none'
+                    }
+                })
+
+                // Check if lost
+                if(wrongLetters.length === figureParts.length) {
+                    finalMessage.innerText = 'Unfortunately you lost. 😕';
+                    popup.style.display = 'flex';
+                }
+            },
+            playAgain: function () {
+                this.correctLetters.splice(0)
+                this.wrongLetters.splice(0)
+                this.selectedWord = this.words[Math.floor(Math.random() * this.words.length)]
+                this.displayWord()
+                this.updateWrongLettersEl()
+                this.popup = false
             }
         }
     }
 </script>
-
-<style scoped>
-
-</style>