<template>
    <div class="p-2">
        <h1>Pendu</h1>
        <p>Trouve le mot du pendu - Saisi les lettres</p>
        <div class="game-container">
            <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 class="wrong-letters-container">
                <div v-html="wrongLetters"></div>
            </div>

            <div class="word" v-html="wordEl"></div>
        </div>

        <div class="popup-container" id="popup-container">
            <div class="popup">
                <h2 id="final-message"></h2>
                <button id="play-button" @click="playAgain">Play Again</button>
            </div>
        </div>

        <div class="notification-container" id="notification-container">
            <p>You have already entered this letter</p>
        </div>
    </div>
</template>

<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: {
            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>
