<div id="app">
<div v-if="allCardsRemoved() === undefined"><button type="button" class="button_wrapper" @click="startOver = true">Play Again</button></div>
<div class="wrapper" v-if="!startOver">
<div class="card" v-for="(number, index) in cardArray" :key="index" @click="elementArray.length < 2 ? showItem(index) : showMsg()" :class="number.visibility === 'remove' ? 'hidecard' : 'showcard'">
<span :class="
number.visibility === 'hidden' || number.visibility === 'remove'
? 'hidecard'
: 'showcard'
">
{{ number.number }}
</span>
</div>
</div>
</div>.wrapper {
display: grid;
grid-template-columns: repeat(6, 60px);
grid-template-rows: repeat(6, 60px);
}
.card {
border: 1px solid black;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.button_wrapper {
padding: 5px;
}
.hidecard {
visibility: hidden;
}
.showcard {
visibility: visible;
}const App = new Vue({
el: '#app',
data: {
cardArray: [],
startOver:false,
elementArray: []
},
methods: {
showMsg() {
alert("Cannot see more than 2 cards at a time!!");
},
getRandomNumbers() {
let arr = [];
for (let i = 1; i < 19; i++) {
arr[i - 1] = { number: i, visibility: "hidden" };
}
return (this.cardArray = JSON.parse(
JSON.stringify([...arr, ...arr])
).sort((a, b) => Math.random() - 0.5));
},
allCardsRemoved() {
return this.cardArray.find(item => item.visibility !== 'remove')
},
showItem(index, event) {
let element = this.cardArray[index];
element.visibility =
element.visibility === "hidden" ? "visible" : "hidden";
let elementAlreadyExists = this.elementArray.find(
(item) => item.index === index
);
if (elementAlreadyExists) {
let index = this.elementArray.indexOf(elementAlreadyExists);
this.elementArray.splice(index, 1);
} else {
this.elementArray.push({
index: index,
value: element.number,
visibility: element.visibility
});
}
if (this.elementArray.length === 2) {
if (this.elementArray[0].value === this.elementArray[1].value) {
this.elementArray.forEach((item) => {
setTimeout(() => {
this.cardArray[item.index].visibility = "remove";
this.elementArray = [];
}, 3000);
});
} else {
this.elementArray.forEach((item) => {
setTimeout(() => {
this.cardArray[item.index].visibility = "hidden";
this.elementArray = [];
}, 3000);
});
}
}
}
},
mounted() {
this.getRandomNumbers();
},
watch: {
cardArray: {
deep: true,
handler(oldVal, newVal) {}
}
},
})
External CSS
This Pen doesn't use any external CSS resources.