Merge pull request #68 from RadKod/67

feat: add app sound fx option

Author: selimdoyranli

components/Dialog/MenuDialog/MenuDialog.component.vue

@@ -15,6 +15,9 @@ Dialog.dialog.menu-dialog(
     Cell.menu-dialog-nav__item(icon="eye-o" size="large" :title="$t('dialog.menu.darkTheme')")
       template(#right-icon)
         SwitchInput(v-model="isDark" size="22px" @change="toggleDarkTheme")
+    Cell.menu-dialog-nav__item(icon="music-o" size="large" :title="$t('dialog.menu.soundFx')")
+      template(#right-icon)
+        SwitchInput(v-model="isActiveSoundFx" size="22px" @change="toggleSoundFx")
     Cell.menu-dialog-nav__item(
       v-if="$route.path === localePath({ name: 'Main' })"
       icon="font-o"
@@ -153,6 +156,12 @@ export default defineComponent({
       }
     }
 
+    const isActiveSoundFx = computed(() => store.getters['app/isActiveSoundFx'])
+
+    const toggleSoundFx = isChecked => {
+      store.commit('app/SET_IS_ACTIVE_SOUND_FX', isChecked)
+    }
+
     const openSuggestQuestion = () => {
       window.open(
         'https://docs.google.com/forms/d/e/1FAIpQLSec4_MAFiDOjpd9pywfocFsfJQoXfMpLT3HIaHpO0Lz3clnaA/viewform?usp=sf_link',
@@ -217,6 +226,8 @@ export default defineComponent({
       state,
       isDark,
       toggleDarkTheme,
+      isActiveSoundFx,
+      toggleSoundFx,
       openSuggestQuestion,
       openRoomSharer,
       openAppSharer

hooks/useGameScene.js

@@ -315,6 +315,29 @@ export default () => {
     }
   })
 
+  const isActiveSoundFx = computed(() => store.getters['app/isActiveSoundFx'])
+
+  watch(
+    () => isActiveSoundFx.value,
+    value => {
+      if (value) {
+        startSoundFx.mute(false)
+        correctSoundFx.mute(false)
+        wrongSoundFx.mute(false)
+        passSoundFx.mute(false)
+        halfTimeSoundFx.mute(false)
+        radkodEasterEggSoundFx.mute(false)
+      } else {
+        startSoundFx.mute(true)
+        correctSoundFx.mute(true)
+        wrongSoundFx.mute(true)
+        passSoundFx.mute(true)
+        halfTimeSoundFx.mute(true)
+        radkodEasterEggSoundFx.mute(true)
+      }
+    }
+  )
+
   const soundFx = reactive({
     start: null,
     correct: null,
@@ -325,27 +348,33 @@ export default () => {
   })
 
   const startSoundFx = new Howl({
-    src: [`${WEB_CDN}/assets/sound/fx/start.wav`]
+    src: [`${WEB_CDN}/assets/sound/fx/start.wav`],
+    mute: isActiveSoundFx.value ? false : true
   })
 
   const correctSoundFx = new Howl({
-    src: [`${WEB_CDN}/assets/sound/fx/correct.wav`]
+    src: [`${WEB_CDN}/assets/sound/fx/correct.wav`],
+    mute: isActiveSoundFx.value ? false : true
   })
 
   const wrongSoundFx = new Howl({
-    src: [`${WEB_CDN}/assets/sound/fx/wrong.wav`]
+    src: [`${WEB_CDN}/assets/sound/fx/wrong.wav`],
+    mute: isActiveSoundFx.value ? false : true
   })
 
   const passSoundFx = new Howl({
-    src: [`${WEB_CDN}/assets/sound/fx/pass.wav`]
+    src: [`${WEB_CDN}/assets/sound/fx/pass.wav`],
+    mute: isActiveSoundFx.value ? false : true
   })
 
   const halfTimeSoundFx = new Howl({
-    src: [`${WEB_CDN}/assets/sound/fx/half-time.wav`]
+    src: [`${WEB_CDN}/assets/sound/fx/half-time.wav`],
+    mute: isActiveSoundFx.value ? false : true
   })
 
   const radkodEasterEggSoundFx = new Howl({
-    src: [`${WEB_CDN}/assets/sound/fx/radkod-easter-egg.mp3`]
+    src: [`${WEB_CDN}/assets/sound/fx/radkod-easter-egg.mp3`],
+    mute: isActiveSoundFx.value ? false : true
   })
 
   soundFx.start = startSoundFx

locales/en.js

@@ -88,6 +88,7 @@ export default {
       usernameEdit: 'Change the player name',
       menu: 'Menu',
       darkTheme: 'Dark theme',
+      soundFx: 'Sound fx',
       switchLocale: 'Choose language',
       suggestQa: 'Do you want to suggest a question?',
       howToPLay: 'How to play?',

locales/tr.js

@@ -88,6 +88,7 @@ export default {
       usernameEdit: 'Oyuncu adını değiştir',
       menu: 'Menü',
       darkTheme: 'Koyu tema',
+      soundFx: 'Ses efekleri',
       switchLocale: 'Dil değiştir',
       suggestQa: 'Soru önermek ister misin?',
       howToPLay: 'Nasıl oynanır?',

plugins/vuex-persist.js

@@ -10,6 +10,9 @@ export default ({ store }) => {
           username: state.auth.user.username
         }
       },
+      app: {
+        soundFx: state.app.soundFx
+      },
       daily: {
         isGameOver: state.daily.isGameOver,
         currentDate: state.daily.currentDate,

store/app/actions.js

@@ -0,0 +1 @@
+export default {}

store/app/getters.js

@@ -0,0 +1,8 @@
+export default {
+  root(state) {
+    return state
+  },
+  isActiveSoundFx(state) {
+    return state.soundFx.isActive
+  }
+}

store/app/mutations.js

@@ -0,0 +1,5 @@
+export default {
+  SET_IS_ACTIVE_SOUND_FX(state, isActive) {
+    state.soundFx.isActive = isActive
+  }
+}

store/app/state.js

@@ -0,0 +1,5 @@
+export default () => ({
+  soundFx: {
+    isActive: true
+  }
+})