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

refactor card in saper game

Browse Source
This commit is contained in:
Kostya
2023-12-14 20:51:15 +03:00
parent 5836c16003
commit 51656e5479
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -279,6 +279,26 @@ input[type="number"]::-webkit-outer-spin-button {
transform: rotateY(180deg);
}
.square h2 {
transition: .2s;
opacity: 1;
}
.square-text {
color: #303751;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
font-family: Montserrat Alternates;
font-size: 33px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding-top: 25px;
}
.hidden {
opacity: 0 !important;
}
.display-lines {
display: flex;
}

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

@@ -64,35 +64,35 @@
<div class="game-firstline">
<ul class="display-lines margin-lines">
<li class="firstline" v-for="index in 5" :key="index">
<div @click="flipCard(index)" :class="[ 'square', `square-${index}`, { 'square-fliper' : flippedCards.includes(index) } ]"></div>
<div @click="flipCard(index)" :class="[ 'square', `square-${index}`, { 'square-fliper' : flippedCards.includes(index) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index) }">ld</h2></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div @click="flipCard(index + 5)" :class="[ 'square', `square-${index + 5}`, { 'square-fliper' : flippedCards.includes(index + 5) } ]"></div>
<div @click="flipCard(index + 5)" :class="[ 'square', `square-${index + 5}`, { 'square-fliper' : flippedCards.includes(index + 5) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 5) }">ld</h2></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div @click="flipCard(index + 10)" :class="[ 'square', `square-${index + 10}`, { 'square-fliper' : flippedCards.includes(index + 10) } ]"></div>
<div @click="flipCard(index + 10)" :class="[ 'square', `square-${index + 10}`, { 'square-fliper' : flippedCards.includes(index + 10) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 10) }">ld</h2></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div @click="flipCard(index + 15)" :class="[ 'square', `square-${index + 15}`, { 'square-fliper' : flippedCards.includes(index + 15) } ]"></div>
<div @click="flipCard(index + 15)" :class="[ 'square', `square-${index + 15}`, { 'square-fliper' : flippedCards.includes(index + 15) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 15) }">ld</h2></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div @click="flipCard(index + 20)" :class="[ 'square', `square-${index + 20}`, { 'square-fliper' : flippedCards.includes(index + 20) } ]"></div>
<div @click="flipCard(index + 20)" :class="[ 'square', `square-${index + 20}`, { 'square-fliper' : flippedCards.includes(index + 20) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index + 20) }">ld</h2></div>
</li>
</ul>
</div>