Files
LuckyDiamond/luckydiamond/src/pages/games-pages/SapergamePage.vue
2024-02-12 00:40:39 +03:00

601 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="content-grid--saper">
<aside-bar-element></aside-bar-element>
<header-element-page></header-element-page>
<chat-component></chat-component>
<section class="saper" :class="{ 'game-end' : ValidationPlay.endGame }">
<div class="bg"></div>
<div class="bg-two"></div>
<div class="saper-start" :class="{ 'game-start__menu-off' : gameStart }">
<div class="saper-start__content title-saper padding-elements">
<h2>Сапёр</h2>
<p>Находи изумруды на поле и избегай кристалы</p>
<div class="saper-start__choises crystals">
<h3>Количество кристалов</h3>
<div class="crystals__choises crystals-input__margin crystals-btns__choices">
<img class="crystal-icon" width="25" height="25" src="@/assets/icons-games/saper-game/icon-crystall-saper.svg">
<input v-model="amountCrystals" type="number">
<ul class="crystals-btns__display">
<li v-for="(item, index) in SaperNumbers" :key="index">
<button @click="clickedBtnCrystals(index, item.crystals)" :class="{ 'btn-click': clickedBtnCrystal === index, [index]: clickedBtnCrystal === index }" :id="item.crystals === 'max' ? 'max-button' : null" v-if="item.crystals !== undefined">{{ item.crystals }}</button>
</li>
</ul>
</div>
</div>
<div class="saper-start__choises diamonds diamonds-input__margin">
<h3>Сумма депозита</h3>
<div class="diamonds__choises">
<img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
<input v-model="amountDeposit" type="number" id="diamonds-input">
<div class="diamonds__btns btn-style__diamonds">
<ul class="diamonds-btns__display">
<li v-for="(item, index) in SaperNumbers" :key="index">
<button @click="clickedBtnChoice(index, item.diamonds)" :class="{ 'btn-click': clickedBtn === index, [index]: clickedBtn === index }" :id="item.diamonds === 'max' ? 'max-button' : null" v-if="item.diamonds !== undefined">{{ item.diamonds }}</button>
</li>
</ul>
</div>
</div>
</div>
<div class="saper-start__btns">
<div class="error-block" v-if="ErrorClick">
<h2>Ошибка при заполнении</h2>
</div>
<button class="btn-start" :class="{ 'animate-start-btn' : ErrorClick }" @click="clickPlayButton">Начать игру</button>
<button class="btn-claim" v-if="winningAmount === 0">Забрать {{ winningAmount }} АР</button>
<button class="btn-claim" @click="claimWinningAmount()" v-else>Забрать {{ winningAmount.toFixed(2) }} АР</button>
</div>
<div class="saper-start__steps btns-style__steps">
<swiper v-if="PercentageGameSteps.length" :key="PercentageGameSteps[0]" :spaceBetween="30" :slides-per-view="4" :centeredSlides="false" :navigation="true" :modules="modules">
<template v-for="(item, index) in PercentageGameSteps" :key="index">
<swiper-slide>
<div class="steps-btns__display">
<button>x{{ item.toFixed(2) }} <span>{{ index + 1 }} {{ stepsEndOfWord(index + 1) }}</span></button>
</div>
</swiper-slide>
</template>
</swiper>
</div>
</div>
</div>
<div class="saper-game">
<div class="saper-game__content">
<div class="game" :class="{ 'game-start' : offEventPointers }">
<div class="circles__content">
<img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-1">
<img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-2">
<img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-3">
<img src="@/assets/icons-games/saper-game/circles.png" class="circles circles-4">
</div>
<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) } ]">
<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>
</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) } ]">
<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>
</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) } ]">
<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>
</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) } ]">
<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>
</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) } ]">
<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>
</ul>
</div>
</div>
<div class="game-info">
<div class="game-info__content text-style__subtitle text-style__comment">
<div class="info-emeralds">
<div class="info-emeralds__content card-info">
<h2>Изумруды</h2>
<p>Открывай ячейки с изумрудами</p>
<img src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" width="170" height="170">
<div class="info-crystals__count card-style-count emeralds-bg" :class="{ 'on-element-card' : gameStart === true }">
<h3>{{ this.emeraldsAmount }}</h3>
</div>
</div>
</div>
<div class="info-crystals">
<div class="info-crystals__content card-info">
<h2>кристаллы</h2>
<p>Остерегайся кристаллов, чтобы не проиграть</p>
<img src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" width="170" height="170">
<div class="info-crystals__count card-style-count crystals-bg" :class="{ 'on-element-card' : gameStart === true }">
<h3>{{ this.amountCrystals }}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="start-game" v-if="ValidationPlay.startGame === true">
<h2>Игра началась!</h2>
</div>
<div class="start-game" v-if="ValidationPlay.endGame === true">
<h2>Вы подорвались! Игра закончена</h2>
</div>
<div class="start-game" v-if="ValidationPlay.winGame === true">
<h2>Игра успешно закончена! Приз забран.</h2>
</div>
</template>
<script>
import ChatComponent from "@/components/ChatComponent.vue";
import AsideBarElement from "@/components/AsidebarComponent.vue";
import HeaderElementPage from "@/components/HeaderComponent.vue";
import { GetPercentageSteps, GetUserData, ClickCirclePlay, GetWinningAmount } from "@/assets/js/games/saper/SaperAPI";
import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
import { GetCookie } from "@/assets/js/storage/CookieStorage";
import { Howl } from 'howler';
import {eventBus} from "@/main";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import "swiper/css/navigation";
import SwiperCore from 'swiper/core';
import {Navigation } from "swiper/modules";
import { useVuelidate } from '@vuelidate/core'
import { maxValue, minValue, required, numeric, integer } from "@vuelidate/validators";
SwiperCore.use([Navigation]);
import '@/assets/css/PagesStyles/games-pages/saper.css'
import SaperNumbers from "@/mocks/SaperNumbers";
export default {
components: {ChatComponent, HeaderElementPage, AsideBarElement, Swiper, SwiperSlide },
data() {
return {
SaperNumbers,
clickedBtn: '',
clickedBtnCrystal : '',
amountCrystals: 0,
emeraldsAmount: 0,
balance: 0,
winningAmount: 0,
gamesCircle: 0,
gameTurn: 0,
ErrorClick: '',
gameStart: false,
offEventPointers: false,
amountDeposit: 0,
flippedCards: [],
PercentageGameSteps: [],
CorrectsClick: [],
unCorrectClick: [],
ValidationPlay: {
startGame: false,
endGame: false,
winGame: false,
},
modules: [ Navigation ]
}
},
setup () {
return{ v$: useVuelidate() }
},
validations() {
return {
amountCrystals: { required, numeric, minValue: minValue(1), maxValue: maxValue(24), integer },
amountDeposit: { required, numeric, minValue: minValue(1), maxValue: maxValue(this.balance), integer }
}
},
watch: {
amountDeposit(DepositCount) {
if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) {
this.clickedBtn = null
}
else {
let index
switch (DepositCount) {
case 1:
if (parseInt(this.balance) === DepositCount) {
index = 5
}
else {
index = 0
}
break
case 5:
if (parseInt(this.balance) === DepositCount) {
index = 5
}
else {
index = 1
}
break
case 10:
if (parseInt(this.balance) === DepositCount) {
index = 5
}
else {
index = 2
}
break
case 50:
if (parseInt(this.balance) === DepositCount) {
index = 5
}
else {
index = 3
}
break
case 100:
if (parseInt(this.balance) === DepositCount) {
index = 5
}
else {
index = 4
}
break
case parseInt(this.balance):
index = 5
break
}
this.clickedBtnChoice(index, DepositCount)
}
},
async amountCrystals(CrystalsCount) {
this.PercentageGameSteps = [];
if (CrystalsCount >= 1 && CrystalsCount <= 24) {
try {
const response = await GetPercentageSteps(CrystalsCount);
response.forEach((item) => {
if (item !== 'Infinity' && item !== '-Infinity') {
this.PercentageGameSteps.push(Number(item));
}
});
} catch (e) {
console.error('Error in Percentage', e);
}
}
let index;
switch (CrystalsCount) {
case 1:
index = 0;
break;
case 5:
index = 1;
break;
case 10:
index = 2;
break;
case 24:
index = 3;
break;
default:
return
}
this.clickedBtnCrystals(index, CrystalsCount);
},
flippedCards: {
async handler(value) {
if (value.length < 1 || this.ValidationPlay.endGame === true) return
const maxCircles = 25 - this.amountCrystals - this.gameTurn
console.log(`MAXCIRLES - ${maxCircles} VALUE: ${value} GAMECIRCLE - ${this.gamesCircle}`)
if (this.gameStart !== false) {
this.offEventPointers = false
let AnswerServer
let LimitClicked = this.amountCrystals
let DepositDiamonds = this.amountDeposit
const X_Cordinates = value[this.gamesCircle]
let findIndex, findX, findY
if (X_Cordinates > 5) {
findIndex = Math.ceil(X_Cordinates / 5) * 5
findY = Math.ceil(findIndex / 5) - 1
findX = X_Cordinates - findIndex + 4
}
else if (X_Cordinates <= 5) {
findX = X_Cordinates - 1
findY = 0
}
const UserObject = {
PuttedMoney: DepositDiamonds,
MinesCount: this.amountCrystals,
SearchToken: GetCookie('SearchToken'),
AUTHTOKEN: GetCookie('AUTHTOKEN')
}
const ClickedSquare = {
X: findX,
Y: findY
}
try {
await ClickCirclePlay(UserObject, ClickedSquare)
.then(response => {
AnswerServer = response
this.winningAmount = response.Item1.WinningMoney
})
}
catch (e) {
console.error(e)
}
console.log('---------ANSWER SERVER-----------', AnswerServer)
console.log(LimitClicked, DepositDiamonds, X_Cordinates)
this.gamesCircle = this.gamesCircle + 1
this.offEventPointers = true
if (AnswerServer === 'You dead') {
this.unCorrectClick.push(X_Cordinates)
this.offEventPointers = false
this.gameStart = false
this.gamesCircle = 0
this.winningAmount = 0
this.gameTurn = 0
const SoundCorrect = new Howl({
src: ['/sounds/incorrect-sound.mp3'],
volume: 0.5
})
SoundCorrect.play()
this.ValidationPlay.endGame = true
setTimeout(() => {
this.ValidationPlay.endGame = false
}, 1200)
return eventBus.emit('Updatebalance')
}
const SoundUncorrect = new Howl({
src: ['/sounds/correct-click.mp3'],
volume: 0.5
})
this.CorrectsClick.push(X_Cordinates)
SoundUncorrect.play()
this.emeraldsAmount--
}
if (this.gamesCircle === maxCircles) {
this.offEventPointers = false
this.gameStart = false
this.gamesCircle = 0
this.gameTurn = 0
this.claimWinningAmount()
this.ValidationPlay.winGame = true
setTimeout(() => {
this.ValidationPlay.winGame = false
}, 1500)
}
},
deep: true
}
},
created() {
const AUTHTOKEN = GetCookie('AUTHTOKEN')
const SEARCHTOKEN = GetCookie('SearchToken')
if (AUTHTOKEN !== null && SEARCHTOKEN !== null) {
try {
GetUserData(AUTHTOKEN, SEARCHTOKEN)
.then(response => {
console.log(response)
if (response) {
this.gameStart = true
this.offEventPointers = true
this.ValidationPlay.startGame = true
this.amountCrystals = response.MinesCount
this.amountDeposit = response.PuttedMoney
this.winningAmount = response.WinningMoney
this.emeraldsAmount = 25 - this.amountCrystals - response.CurrentUserTurn
this.gameTurn = response.CurrentUserTurn
const soundStartGame = new Howl({
src: ['/sounds/start-game.mp3'],
volume: 5.0
})
soundStartGame.play()
console.log(this.flippedCards.length)
setTimeout(() => {
this.ValidationPlay.startGame = false
}, 2000)
}
else {
this.amountCrystals = 5
}
})
this.getBalanceUser()
}
catch (e) {
console.error('Error in GetData', e)
}
}
else {
this.amountCrystals = 5
}
},
mounted() {
eventBus.on('Updatebalance-saper', () => {
GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
.then(response => {
this.balance = response.currentMoney
})
})
},
methods: {
clickPlayButton() {
this.v$.$touch()
if (this.v$.amountDeposit.$error) {
this.errorPlayButton()
}
if (this.v$.amountCrystals.$error) {
this.errorPlayButton()
}
if (!this.v$.amountCrystals.$error && !this.v$.amountDeposit.$error) {
this.flippedCards = []
this.unCorrectClick = []
this.CorrectsClick = []
this.playNotification()
this.gameStart = true
this.offEventPointers = true
const soundStartGame = new Howl({
src: ['/sounds/start-game.mp3'],
volume: 5.0
})
soundStartGame.play()
this.emeraldsAmount = 25 - this.amountCrystals
}
},
getBalanceUser() {
try {
GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
.then(response => {
this.balance = response.currentMoney
})
}
catch (e) {
console.error(e)
}
},
async claimWinningAmount() {
if (this.winningAmount >= 1) {
try {
this.offEventPointers = false
this.gameStart = false
this.gamesCircle = 0
this.gameTurn = 0
await GetWinningAmount({ SearchToken: GetCookie('SearchToken'), AuthToken: GetCookie('AUTHTOKEN') })
this.winningAmount = 0
this.ValidationPlay.winGame = true
setTimeout(() => {
this.ValidationPlay.winGame = false
}, 1500)
return eventBus.emit('Updatebalance')
}
catch (e) {
console.error(e)
}
}
},
playNotification() {
this.ValidationPlay.startGame = true
setTimeout(() => {
this.ValidationPlay.startGame = false
}, 1500)
},
errorPlayButton() {
this.ErrorClick = true
setTimeout(() => {
this.ErrorClick = false
}, 2000)
},
flipCard(index) {
if (this.flippedCards.includes(index)) {
return eventBus.emit('Updatebalance')
} else {
this.flippedCards.push(index);
}
},
stepsEndOfWord(index) {
const indexString = String(index)
let lastNumber = indexString
if (indexString >= 10) {
lastNumber = indexString.slice(1)
}
return this.checkLastNumber(lastNumber)
},
checkLastNumber(number) {
let word = ''
if (number === '1') {
word = 'шаг'
}
else if (['2', '3', '4'].includes(number)) {
word = 'шага'
}
else {
word = 'шагов'
}
return word
},
async clickedBtnChoice(index, content) {
this.clickedBtn = index
if (content === 'max') {
await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
.then((response) => {
console.log(response.currentMoney, this.balance)
const responseBalance = response.currentMoney
if (responseBalance === this.balance) {
this.amountDeposit = parseInt(responseBalance)
}
})
}
else {
this.amountDeposit = content
}
},
clickedBtnCrystals(index, content) {
this.clickedBtnCrystal = index
this.amountCrystals = content
},
},
}
</script>
<style scoped>
</style>