mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 12:19:31 +02:00
refactor validation for click btn in saper
This commit is contained in:
86
luckydiamond/package-lock.json
generated
86
luckydiamond/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user