refactor validation for click btn in saper

This commit is contained in:
Kostya
2024-01-24 15:15:53 +03:00
parent 6166260f63
commit 9e848d789f
4 changed files with 149 additions and 32 deletions

View File

@@ -9,6 +9,8 @@
"version": "0.1.0",
"dependencies": {
"@popperjs/core": "^2.11.8",
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4",
"bootstrap": "^5.3.2",
"core-js": "^3.8.3",
"mitt": "^3.0.1",
@@ -3289,6 +3291,90 @@
"integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
"dev": true
},
"node_modules/@vuelidate/core": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.3.tgz",
"integrity": "sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==",
"dependencies": {
"vue-demi": "^0.13.11"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.0.0 || >=3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/core/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/validators": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/@vuelidate/validators/-/validators-2.0.4.tgz",
"integrity": "sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==",
"dependencies": {
"vue-demi": "^0.13.11"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.0.0 || >=3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vuelidate/validators/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/@vueuse/shared": {
"version": "10.7.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.0.tgz",

View File

@@ -10,6 +10,8 @@
},
"dependencies": {
"@popperjs/core": "^2.11.8",
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4",
"bootstrap": "^5.3.2",
"core-js": "^3.8.3",
"mitt": "^3.0.1",

View File

@@ -31,5 +31,9 @@
<!-- built files will be auto injected -->
</body>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
<script src="https://cdn.jsdelivr.net/npm/@vuelidate/core"></script>
<script src="https://cdn.jsdelivr.net/npm/@vuelidate/validators"></script>
</html>

View File

@@ -40,7 +40,7 @@
</div>
</div>
<div class="saper-start__btns">
<div class="error-block" v-if="ErrorClick === true">
<div class="error-block" v-if="ErrorClick">
<h2>Ошибка при заполнении</h2>
</div>
<button class="btn-start" :class="{ 'animate-start-btn' : ErrorClick }" @click="clickPlayButton">Начать игру</button>
@@ -150,6 +150,9 @@ import "swiper/css/navigation";
import SwiperCore from 'swiper/core';
import {Navigation } from "swiper/modules";
import { useVuelidate } from '@vuelidate/core'
import { maxValue, minValue, required, numeric } from "@vuelidate/validators";
SwiperCore.use([Navigation]);
import '@/assets/css/PagesStyles/games-pages/saper.css'
@@ -171,44 +174,48 @@ export default {
gameStart: false,
offEventPointers: false,
amountDeposit: 0,
amountSaveDeposit: 0,
flippedCards: [],
PercentageGameSteps: [],
ValidationPlay: {
CrystalValidate: false,
DiamondValidate: false,
startGame: false,
endGame: false,
},
modules: [ Navigation ]
}
},
setup () {
return{ v$: useVuelidate() }
},
validations() {
return {
amountCrystals: { required, numeric, minValue: minValue(1), maxValue: maxValue(24) },
amountDeposit: { required, numeric, minValue: minValue(1), maxValue: maxValue(this.balance) }
}
},
watch: {
async amountDeposit(DiamondCount) {
if (DiamondCount >= 1) {
try {
await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
.then((response) => {
this.balance = response.currentMoney
console.log(this.balance)
})
if (this.balance >= DiamondCount) {
this.amountSaveDeposit = DiamondCount
this.ValidationPlay.DiamondValidate = true
}
}
catch (e) {
console.error('Error amountdep', e)
}
}
},
// async amountDeposit(DiamondCount) {
// if (DiamondCount >= 1) {
// try {
// await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
// .then((response) => {
// this.balance = response.currentMoney
// console.log(this.balance)
// })
// if (this.balance >= DiamondCount) {
// this.amountSaveDeposit = DiamondCount
// this.ValidationPlay.DiamondValidate = true
// }
// }
// catch (e) {
// console.error('Error amountdep', e)
// }
// }
// },
async amountCrystals(CrystalsCount) {
this.PercentageGameSteps = []
if (CrystalsCount >= 1 && CrystalsCount <= 24) {
this.amountSaveCrystals = CrystalsCount
this.ValidationPlay.CrystalValidate = true
try {
await GetPercentageSteps(this.amountSaveCrystals)
await GetPercentageSteps(this.amountCrystals)
.then((response) => {
response.forEach((item) => {
if (item !== 'Infinity' && item !== '-Infinity') {
@@ -224,15 +231,15 @@ export default {
},
flippedCards: {
async handler(value) {
const maxCircles = 25 - this.amountSaveCrystals
const maxCircles = 25 - this.amountCrystals
if (this.gamesCircle < maxCircles && this.gameStart !== false) {
console.log(value)
this.offEventPointers = false
let AnswerServer
let LimitClicked = this.amountSaveCrystals
let DepositDiamonds = this.amountSaveDeposit
let LimitClicked = this.amountCrystals
let DepositDiamonds = this.amountDeposit
const X_Cordinates = value[this.gamesCircle]
let findIndex, findX, findY
@@ -250,7 +257,7 @@ export default {
const UserObject = {
PuttedMoney: DepositDiamonds,
MinesCount: this.amountSaveCrystals,
MinesCount: this.amountCrystals,
SearchToken: GetCookie('SearchToken'),
AUTHTOKEN: GetCookie('AUTHTOKEN')
}
@@ -311,6 +318,7 @@ export default {
}, 2000)
}
})
this.getBalanceUser()
}
catch (e) {
console.error('Error in GetData', e)
@@ -319,15 +327,32 @@ export default {
},
methods: {
clickPlayButton() {
if(!this.validationCheck()) {
// if(!this.validationCheck()) {
// this.errorPlayButton()
// }
this.v$.$touch()
if (this.v$.amountDeposit.$error) {
this.errorPlayButton()
}
else if (this.v$.amountCrystals.$error) {
this.errorPlayButton()
}
else {
this.playNotification()
this.gameStart = true
this.offEventPointers = true
this.amountCrystals = this.amountSaveCrystals
this.amountDeposit = this.amountSaveDeposit
}
},
getBalanceUser() {
try {
GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
.then(response => {
this.balance = response.currentMoney
})
}
catch (e) {
console.error(e)
}
},
updatePage() {