<template>
    <transition name="modalAni">
        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
            <div class="modalContainer">
                <div class="modalWrapper">
                    <img
                        class="closeModalImg"
                        src="cancel-black-36dp.svg"
                        alt="closeModalIMG"
                        @click="closeModal"
                    />
                    <h1>{{ playerName }} won!!</h1>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            playerName: "",
        };
    },
    methods: {
        closeModal() {
            this.show = false;
        },
        showPeter() {
            let randomNumber = Math.floor(Math.random() * 10);
            console.log(randomNumber);
            console.log("Test");
            return randomNumber < 2;
        },
        openModal(playerName) {
            this.playerName = playerName;
            this.show = true;
        },
        checkIfClickShouldCloseModal(event) {
            if (event.target.classList[0] === "modal") {
                this.closeModal();
            }
        },
    },
};
</script>

<style scoped></style>
