<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-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">
                    <!-- 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>
