diff --git a/luckydiamond/package-lock.json b/luckydiamond/package-lock.json index 11f53b6..8fbb8b5 100644 --- a/luckydiamond/package-lock.json +++ b/luckydiamond/package-lock.json @@ -13,6 +13,7 @@ "@vuelidate/validators": "^2.0.4", "bootstrap": "^5.3.2", "core-js": "^3.8.3", + "howler": "^2.2.4", "mitt": "^3.0.1", "swiper": "^11.0.5", "vue": "^3.2.13", @@ -6967,6 +6968,11 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, + "node_modules/howler": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz", + "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==" + }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", diff --git a/luckydiamond/package.json b/luckydiamond/package.json index 4e23abc..ac7ca4c 100644 --- a/luckydiamond/package.json +++ b/luckydiamond/package.json @@ -14,6 +14,7 @@ "@vuelidate/validators": "^2.0.4", "bootstrap": "^5.3.2", "core-js": "^3.8.3", + "howler": "^2.2.4", "mitt": "^3.0.1", "swiper": "^11.0.5", "vue": "^3.2.13", diff --git a/luckydiamond/public/sounds/correct-click.mp3 b/luckydiamond/public/sounds/correct-click.mp3 new file mode 100644 index 0000000..c6c027e Binary files /dev/null and b/luckydiamond/public/sounds/correct-click.mp3 differ diff --git a/luckydiamond/public/sounds/incorrect-sound.mp3 b/luckydiamond/public/sounds/incorrect-sound.mp3 new file mode 100644 index 0000000..94eb4c9 Binary files /dev/null and b/luckydiamond/public/sounds/incorrect-sound.mp3 differ diff --git a/luckydiamond/src/pages/games-pages/SapergamePage.vue b/luckydiamond/src/pages/games-pages/SapergamePage.vue index 3cba20c..73eb437 100644 --- a/luckydiamond/src/pages/games-pages/SapergamePage.vue +++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue @@ -144,6 +144,8 @@ import { GetPercentageSteps, GetUserData, ClickCirclePlay, GetWinningAmount } fr import { GetCurrentMoney } from "@/assets/js/rest/RestMethods"; import { GetCookie } from "@/assets/js/storage/CookieStorage"; +import { Howl } from 'howler'; + import { Swiper, SwiperSlide } from 'swiper/vue'; import 'swiper/css'; import "swiper/css/navigation"; @@ -266,14 +268,26 @@ export default { this.gameStart = false this.winningAmount = 0 this.flippedCards = [] + const SoundCorrect = new Howl({ + src: ['/sounds/incorrect-sound.mp3'], + volume: 1.0 + }) + + SoundCorrect.play() this.ValidationPlay.endGame = true setTimeout(() => { this.ValidationPlay.endGame = false }, 1200) + return } - } + const SoundUncorrect = new Howl({ + src: ['/sounds/correct-click.mp3'], + volume: 1.0 + }) + SoundUncorrect.play() + } else { this.gameStart = false this.offEventPointers = false