♻️ (music) change music var name

src/components/ZoneMusic.vue

@@ -2,23 +2,19 @@
   <div class="zone-music plume" v-if="isMusicAvailable">
     <div class="pm-field">
       <label for="use-music" data-pm-holder>
-        <span :class="{ selected: !withMusic, disabled: withMusic }"
+        <span :class="{ selected: !hasMusic, disabled: hasMusic }">focus</span>
-          >focus</span
-        >
         <input
           type="checkbox"
           name="use-music"
           id="use-music"
-          :checked="withMusic"
+          :checked="hasMusic"
-          @change="setWithMusic(!withMusic)"
+          @change="setHasMusic(!hasMusic)"
           data-pm-checkbox-toggle
         />
-        <span :class="{ selected: withMusic, disabled: !withMusic }"
+        <span :class="{ selected: hasMusic, disabled: !hasMusic }">chill</span>
-          >chill</span
-        >
       </label>
     </div>
-    <ChilledMusic v-if="withMusic" :play="play" @play="play" @pause="pause" />
+    <ChilledMusic v-if="hasMusic" :play="play" @play="play" @pause="pause" />
   </div>
 </template>
 
@@ -38,7 +34,7 @@ export default defineComponent({
     }
   },
   setup(_, { emit }) {
-    const { isMusicAvailable, withMusic, setWithMusic } = useMusic()
+    const { isMusicAvailable, hasMusic, setHasMusic } = useMusic()
 
     const play = () => {
       emit('play')
@@ -48,7 +44,7 @@ export default defineComponent({
       emit('pause')
     }
 
-    return { isMusicAvailable, withMusic, setWithMusic, play, pause }
+    return { isMusicAvailable, hasMusic, setHasMusic, play, pause }
   }
 })
 </script>

src/hooks/useMusic.ts

@@ -5,12 +5,12 @@ import { State, RootActions } from '@/store'
 export const useMusic = () => {
   const isIOS =
     navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
-  const { withMusic } = useGetters<GetterTree<State, State>>(['withMusic'])
+  const { hasMusic } = useGetters<GetterTree<State, State>>(['hasMusic'])
-  const { setWithMusic } = useActions<RootActions>(['setWithMusic'])
+  const { setHasMusic } = useActions<RootActions>(['setHasMusic'])
 
   return {
     isMusicAvailable: !isIOS,
-    withMusic,
+    hasMusic,
-    setWithMusic
+    setHasMusic
   }
 }

src/store/index.ts

@@ -6,14 +6,14 @@ Vue.use(Vuex)
 
 export interface State {
   interval: number
-  withMusic: boolean
+  hasMusic: boolean
   dev1: string | null
   dev2: string | null
 }
 
 export interface RootActions extends ActionTree<State, State> {
   setInterval: (ctx: ActionContext<State, State>, payload: number) => void
-  setWithMusic: (ctx: ActionContext<State, State>, payload: boolean) => void
+  setHasMusic: (ctx: ActionContext<State, State>, payload: boolean) => void
   setDev1: (ctx: ActionContext<State, State>, payload: string) => void
   setDev2: (ctx: ActionContext<State, State>, payload: string) => void
 }
@@ -31,13 +31,13 @@ const SET_DEV_2 = 'SET_DEV_2'
 const store = new Vuex.Store<State>({
   state: {
     interval: 5,
-    withMusic: true,
+    hasMusic: true,
     dev1: null,
     dev2: null
   },
   getters: {
     interval: ({ interval }) => interval,
-    withMusic: ({ withMusic }) => withMusic,
+    hasMusic: ({ hasMusic }) => hasMusic,
     dev1: ({ dev1 }) => dev1,
     dev2: ({ dev2 }) => dev2
   },
@@ -45,8 +45,8 @@ const store = new Vuex.Store<State>({
     [SET_INTERVAL](state, interval: number) {
       state.interval = interval
     },
-    [WITH_MUSIC](state, withMusic: boolean) {
+    [WITH_MUSIC](state, hasMusic: boolean) {
-      state.withMusic = withMusic
+      state.hasMusic = hasMusic
     },
     [SET_DEV_1](state, dev1: string) {
       state.dev1 = dev1
@@ -61,8 +61,8 @@ const store = new Vuex.Store<State>({
         commit(SET_INTERVAL, interval)
       }
     },
-    setWithMusic({ commit }, withMusic: boolean) {
+    setHasMusic({ commit }, hasMusic: boolean) {
-      commit(WITH_MUSIC, withMusic)
+      commit(WITH_MUSIC, hasMusic)
     },
     setDev1({ commit }, dev1: string) {
       commit(SET_DEV_1, dev1)