161 lines
5.0 KiB
Vue
161 lines
5.0 KiB
Vue
<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 @click="test">{{ playerName }}, choose your fighter!</h1>
|
|
<div class="fighterDiv">
|
|
<div class="fighter" @click="chooseFighter('Adol')">
|
|
<img src="characters/Adol.png" alt="adol" />
|
|
<p>Adol Christin</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Link')">
|
|
<img src="characters/Link.png" alt="link" />
|
|
<p>Link</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Barbarian')">
|
|
<img src="characters/Barbarian.png" alt="barbarian" />
|
|
<p>Barbarian</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Layton')">
|
|
<img src="characters/Layton.png" alt="layton" />
|
|
<p>Professor Layton</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Kiryu')">
|
|
<img src="characters/Kiryu.png" alt="kiryu" />
|
|
<p>Kazuma Kiryu</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Miles')">
|
|
<img src="characters/Miles.png" alt="miles" />
|
|
<p>Miles Edgeworth</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Lemmings')">
|
|
<img src="characters/Lemmings.png" alt="lemmings" />
|
|
<p>Lemmings</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Samus')">
|
|
<img src="characters/Samus.png" alt="samus" />
|
|
<p>Samus</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Kratos')">
|
|
<img src="characters/Kratos.png" alt="kratos" />
|
|
<p>Kratos</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Aloy')">
|
|
<img src="characters/Aloy.png" alt="aloy" />
|
|
<p>Aloy</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Sora')">
|
|
<img src="characters/Sora.png" alt="sora" />
|
|
<p>Sora</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('Raiden')">
|
|
<img src="characters/Raiden.png" alt="raiden" />
|
|
<p>Raiden</p>
|
|
</div>
|
|
<div class="fighter" @click="chooseFighter('PaperMario')">
|
|
<img src="characters/PaperMario.png" alt="paper mario" />
|
|
<p>Paper Mario</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
playerName: "",
|
|
};
|
|
},
|
|
methods: {
|
|
closeModal() {
|
|
this.show = false;
|
|
},
|
|
openModal(playerName) {
|
|
this.playerName = playerName;
|
|
this.show = true;
|
|
},
|
|
checkIfClickShouldCloseModal(event) {
|
|
if (event.target.classList[0] === "modal") {
|
|
this.closeModal();
|
|
}
|
|
},
|
|
chooseFighter(profilePicSrc) {
|
|
let payload = {
|
|
playerName: this.playerName,
|
|
profile: "characters/" + profilePicSrc + ".png",
|
|
};
|
|
this.$store.dispatch("changePlayerProfile", payload);
|
|
this.closeModal();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modalContainer {
|
|
width: 80%; /* Could be more or less, depending on screen size */
|
|
}
|
|
.fighterDiv {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.fighterDiv img {
|
|
width: 180px;
|
|
height: 90px;
|
|
}
|
|
|
|
.fighter {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 14vw;
|
|
margin-top: 30px;
|
|
}
|
|
.fighter > * {
|
|
width: 100%;
|
|
}
|
|
.fighter:hover {
|
|
outline: 1px solid rgb(128, 83, 0);
|
|
outline-offset: 2px;
|
|
cursor: pointer;
|
|
}
|
|
.fighter p {
|
|
margin-top: 8px;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
.modalContainer {
|
|
width: 95%; /* Could be more or less, depending on screen size */
|
|
}
|
|
.fighterDiv {
|
|
margin-top: 30px;
|
|
}
|
|
.fighterDiv img {
|
|
width: 80px;
|
|
height: 40px;
|
|
}
|
|
|
|
.fighter {
|
|
width: 25vw;
|
|
}
|
|
}
|
|
</style>
|