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

added logic for vision-img on click in circle saper

Browse Source
This commit is contained in:
Kostya
2024-01-25 23:29:53 +03:00
parent e11011bace
commit 03d7209942
2 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -337,6 +337,17 @@ input[type="number"]::-webkit-outer-spin-button {
filter: blur(5px); filter: blur(5px);
} }
.img-style-click {
position: relative;
width: 110px;
height: 110px;
top: -70px;
}
.crystal-img {
left: -5px;
}
.game-start { .game-start {
pointer-events: unset !important; pointer-events: unset !important;
} }

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

@@ -72,35 +72,55 @@
<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 @click="flipCard(index)" :class="[ 'square', `square-${index}`, { 'square-fliper' : flippedCards.includes(index) } ]"><h2 class="square-text" :class="{ 'hidden' : flippedCards.includes(index) }">ld</h2></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>
<img class="img-style-click" v-if="CorrectsClick.includes(index)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
<img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
</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 @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> <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>
<img class="img-style-click" v-if="CorrectsClick.includes(index + 5)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
<img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 5)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
</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 @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> <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>
<img class="img-style-click" v-if="CorrectsClick.includes(index + 10)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
<img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 10)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
</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 @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> <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>
<img class="img-style-click" v-if="CorrectsClick.includes(index + 15)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
<img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 15)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
</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 @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> <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>
<img class="img-style-click" v-if="CorrectsClick.includes(index + 20)" src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" alt>
<img class="img-style-click crystal-img" v-if="unCorrectClick.includes(index + 20)" src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" alt>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@@ -179,6 +199,8 @@ export default {
amountDeposit: 0, amountDeposit: 0,
flippedCards: [], flippedCards: [],
PercentageGameSteps: [], PercentageGameSteps: [],
CorrectsClick: [],
unCorrectClick: [],
ValidationPlay: { ValidationPlay: {
startGame: false, startGame: false,
endGame: false, endGame: false,
@@ -268,6 +290,7 @@ export default {
this.gamesCircle = this.gamesCircle + 1 this.gamesCircle = this.gamesCircle + 1
this.offEventPointers = true this.offEventPointers = true
if (AnswerServer === 'You dead') { if (AnswerServer === 'You dead') {
this.unCorrectClick.push(X_Cordinates)
this.offEventPointers = false this.offEventPointers = false
this.gameStart = false this.gameStart = false
this.gamesCircle = 0 this.gamesCircle = 0
@@ -290,6 +313,7 @@ export default {
src: ['/sounds/correct-click.mp3'], src: ['/sounds/correct-click.mp3'],
volume: 0.5 volume: 0.5
}) })
this.CorrectsClick.push(X_Cordinates)
SoundUncorrect.play() SoundUncorrect.play()
} }