I had the idea to create a game where players have to flip cards to reveal what's on the back, but I'm struggling to get the background image to display properly. As a newcomer to Vue, I'm not sure if I made a mistake somewhere. My intuition tells me that it might be related to how I'm adding the background using a script.
Here's the code for App.vue:
<template>
<div class="grid">
<Card num="1" path="../assets/shark.png" />
<Card num="2" path="../assets/shark.png" />
<Card num="3" path="../assets/shark.png" />
<Card num="4" path="../assets/shark.png" />
<Card num="5" path="../assets/shark.png" />
<Card num="6" path="../assets/shark.png" />
<Card num="7" path="../assets/shark.png" />
<Card num="8" path="../assets/shark.png" />
<Card num="9" path="../assets/shark.png" />
</div>
</template>
<script>
import Card from "./components/Card.vue"
export default {
name: 'App',
components: {
Card,
},
};
</script>
<style>
* {
box-sizing: border-box;
user-select: none;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
background-image: linear-gradient(#7c00e1, #4f009e);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
color: white;
}
div.grid {
width: 30vw;
height: 30vw;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
</style>
And here is the Card.vue component:
<template>
<div class="el">
<div class="card" :id="'el'+num" @click="flip">
<div class="front">{{num}}</div>
<div class="back" :id="'b'+num"></div>
</div>
</div>
</template>
<script>
export default {
props: {
num: String,
path: String
},
methods: {
flip() {
document.getElementById("b" + this.num).style = 'background-image: url("' + this.path + '"); background-size: cover'
document.getElementById("el" + this.num).style = "transform: rotateY(180deg);"
}
}
};
</script>
<style scoped>
div.el {
width: 30%;
height: 30%;
cursor: pointer;
position: relative;
}
div.card {
box-shadow: 0 0 15px black;
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.3s ease;
}
div.front {
position: absolute;
background-color: #111111;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 3.5vw;
backface-visibility: hidden;
}
div.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
background-image: none;
}
</style>