<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>Music Player Randomizer v0.1</h1>
               <p class="descriptionText">
                  Try your video game music knowledge with this VGM randomizer,
                  invite your friends and see who is the best.
               </p>
               <p class="creditText">
                  Back-end done by Sebastian Olsson,
                  <a href="https://twitter.com/Raida91">Twitter</a>
               </p>
               <p class="creditText">
                  Front-end done by Peter Johansson,
                  <a href="https://twitter.com/WebDevPJ">Twitter</a>
               </p>
               <!-- <p class="patchNotesText">
               Full patch notes can be found
               <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">here</a>
            </p> -->
            </div>
         </div>
      </div>
   </transition>
</template>

<script>
export default {
   data() {
      return {
         show: false,
      };
   },
   methods: {
      closeModal() {
         this.show = false;
      },
      openModal() {
         this.show = true;
      },
      checkIfClickShouldCloseModal(event) {
         if (event.target.classList[0] === "modal") {
            this.closeModal();
         }
      },
   },
};
</script>

<style scoped>
p {
   font-size: 1.2rem;
   width: 100%;
}

.descriptionText {
   margin-top: 35px;
}

.creditText {
   margin-top: 30px;
}
.creditText:nth-child(5) {
   margin-top: 0px;
}

.patchNotesText {
   margin-top: 20px;
}
</style>
