<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 id="wrong-letters"></div>
            </div>

            <div class="word" id="word"></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",
        methods: {
            playAgain: function () {

            }
        }
    }
</script>

<style scoped>

</style>
