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

<template>
    <div class="p-2 game-container">
        <h1 class="text-3xl text-center text-orange-900 font-bold">Pendu</h1>
        <p class="text-center mb-4">Trouve le mot du pendu - Saisi les lettres</p>
        <div class="flex justify-center dic-select">
            <div v-for="(dic, key) in dictionary" :key="key">
                <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">
                    <!-- 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">
                    <p>Vous avez déjà saisie cette lettre.</p>
                </div>
                <div v-if="popup" class="popup-container">
                    <div class="popup">
                        <h2 class="py-3">{{ finalMessage }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import json from './dict.json'

export default {
    name: 'Hangman',
    data: function () {
        return {
            dictionary: json,
            letterBox: '',
            figureParts: [],
            correctLetters: [],
            wrongLetters: [],
            wrongLettersEl: '',
            selectedWord: '',
            wordEl: '',
            finalMessage: '',
            popup: false,
            notification: false,
        }
    },
    mounted() {
        this.figureParts = this.$el.querySelectorAll('.figure-part')
        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) {
            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, '')

            if(innerWord === this.selectedWord) {
                this.finalMessage = 'Gagné! 😃'
                this.popup = true
                this.newGame()
            }
        },
        updateWrongLettersEl() {
            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
                this.newGame()
            }
        },
        newGame: function () {
            this.popup = true
            this.correctLetters.splice(0)
            this.wrongLetters.splice(0)
            this.letterBox = ''
            this.selectedWord = ''
            this.wrongLettersEl = ''
        },
        showNotification(){
            this.notification = true

            setTimeout(() => {
                this.notification = false
            }, 2000)
        }
    }
}
</script>