yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

added logic for fliper square in saper-game block, saperpage

Browse Source
This commit is contained in:
Kostya
2023-12-05 20:23:41 +03:00
parent 44b6a1e828
commit 6d17b9bd67
2 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
View File

@@ -266,6 +266,12 @@ input[type="number"]::-webkit-outer-spin-button {
width: 95px; width: 95px;
height: 95px; height: 95px;
cursor: pointer; cursor: pointer;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.square-fliper {
transform: rotateY(180deg);
} }
.display-lines { .display-lines {

32
luckydiamond/src/pages/games-pages/SapergamePage.vue
View File

@@ -64,35 +64,35 @@
<div class="game-firstline"> <div class="game-firstline">
<ul class="display-lines margin-lines"> <ul class="display-lines margin-lines">
<li class="firstline" v-for="index in 5" :key="index"> <li class="firstline" v-for="index in 5" :key="index">
<div class="square"></div> <div @click="flipCard(index)" :class="[ 'square', `square-${index}`, { 'square-fliper' : flippedCards.includes(index) } ]"></div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="game-default-line"> <div class="game-default-line">
<ul class="display-lines margin-lines"> <ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index"> <li v-for="index in 5" :key="index">
<div class="square"></div> <div @click="flipCard(index + 5)" :class="[ 'square', `square-${index + 5}`, { 'square-fliper' : flippedCards.includes(index + 5) } ]"></div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="game-default-line"> <div class="game-default-line">
<ul class="display-lines margin-lines"> <ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index"> <li v-for="index in 5" :key="index">
<div class="square"></div> <div @click="flipCard(index + 10)" :class="[ 'square', `square-${index + 10}`, { 'square-fliper' : flippedCards.includes(index + 10) } ]"></div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="game-default-line"> <div class="game-default-line">
<ul class="display-lines margin-lines"> <ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index"> <li v-for="index in 5" :key="index">
<div class="square"></div> <div @click="flipCard(index + 15)" :class="[ 'square', `square-${index + 15}`, { 'square-fliper' : flippedCards.includes(index + 15) } ]"></div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="game-default-line"> <div class="game-default-line">
<ul class="display-lines margin-lines"> <ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index"> <li v-for="index in 5" :key="index">
<div class="square"></div> <div @click="flipCard(index + 20)" :class="[ 'square', `square-${index + 20}`, { 'square-fliper' : flippedCards.includes(index + 20) } ]"></div>
</li> </li>
</ul> </ul>
</div> </div>
@@ -127,14 +127,32 @@ import AsideBarElement from "@/components/AsidebarComponent.vue";
import HeaderElementPage from "@/components/HeaderComponent.vue"; import HeaderElementPage from "@/components/HeaderComponent.vue";
import '@/assets/css/PagesStyles/games-pages/saper.css' import '@/assets/css/PagesStyles/games-pages/saper.css'
import SaperNumbers from "@/mocks/SaperNumbers"; import SaperNumbers from "@/mocks/SaperNumbers";
import {flip} from "@popperjs/core";
export default { export default {
computed: {
flip() {
return flip
}
},
components: {ChatComponent, HeaderElementPage, AsideBarElement }, components: {ChatComponent, HeaderElementPage, AsideBarElement },
data() { data() {
return { return {
SaperNumbers SaperNumbers,
clickedBtn: false,
flippedCards: []
} }
} },
methods: {
flipCard(index) {
if (this.flippedCards.includes(index)) {
this.flippedCards.splice(this.flippedCards.indexOf(index), 1);
console.log(index, this.flippedCards)
} else {
this.flippedCards.push(index);
}
},
},
} }
</script> </script>