From 592eded22171a8615f5fdf63d4bd7e143c3e2ef9 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 9 May 2023 10:42:38 +0200
Subject: [PATCH] Added sound on hover/focus

---
 env.d.ts                        |   1 +
 package-lock.json               |  49 ++++++++++++++++++++++++++++++++
 package.json                    |   1 +
 src/assets/sounds/btn-hover.mp3 | Bin 0 -> 4946 bytes
 src/components/YrhButton.vue    |   8 ++++++
 5 files changed, 59 insertions(+)
 create mode 100644 src/assets/sounds/btn-hover.mp3

diff --git a/env.d.ts b/env.d.ts
index 11f02fe..4791171 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module '@vueuse/sound'
diff --git a/package-lock.json b/package-lock.json
index d038b85..f16c7bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "@vueuse/core": "^10.1.2",
+        "@vueuse/sound": "^2.0.1",
         "pinia": "^2.0.35",
         "sass": "^1.62.1",
         "vue": "^3.2.47",
@@ -1571,6 +1572,49 @@
         }
       }
     },
+    "node_modules/@vueuse/sound": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/sound/-/sound-2.0.1.tgz",
+      "integrity": "sha512-7Fbp9lQkuUnpTXS9vPbvT2FDYHuwJbvKPivOYETaVVSmcZKoczw6zcsebsARkH5Ged0f045YUOZnV/RuCzyLXQ==",
+      "dependencies": {
+        "howler": "^2.2.3",
+        "vue-demi": "latest"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^2.0.0 || >=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/sound/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "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/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -3881,6 +3925,11 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "node_modules/howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
diff --git a/package.json b/package.json
index caf7685..8ebb122 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@vueuse/core": "^10.1.2",
+    "@vueuse/sound": "^2.0.1",
     "pinia": "^2.0.35",
     "sass": "^1.62.1",
     "vue": "^3.2.47",
diff --git a/src/assets/sounds/btn-hover.mp3 b/src/assets/sounds/btn-hover.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..240125a9834828205b639e6e05ac9092584e6108
GIT binary patch
literal 4946
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
E0dQMthyVZp

literal 0
HcmV?d00001

diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue
index d92d402..0668257 100644
--- a/src/components/YrhButton.vue
+++ b/src/components/YrhButton.vue
@@ -1,6 +1,11 @@
 <script lang="ts" setup>
+import { useSound } from '@vueuse/sound'
 import { computed } from 'vue'
 
+import buttonSfx from '@/assets/sounds/btn-hover.mp3'
+
+const { play, stop } = useSound(buttonSfx)
+
 const props = defineProps<{
   href?: string
   target?: string
@@ -26,6 +31,9 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
     v-bind="attributes"
     class="btn w-full p-1 px-2 text-left bg-y-beige-500 hover:shadow-md focus-visible:shadow-md"
     :class="{ active: isActive }"
+    @focus="play"
+    @mouseover="play"
+    @mouseleave="stop"
   >
     <span class="mr-1" v-if="hasSquare">
       <font-awesome-icon :icon="['fas', 'square']" />