vue-idle-game/src/views/music.vue

<template>
    <Tooltip :infos="[t('music.0')]" width="10rem">
        <img v-if="!music" class="menu-img" :src="menu_icons.musicPause" @click="playMusic(true)">
        <img v-if="music" class="menu-img" :src="menu_icons.musicPlay" @click="playMusic(false)">
    </Tooltip>

</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onBeforeUnmount, onMounted, ref } from "vue";
import { useI18n } from "vue3-i18n";
import { Tooltip } from "@/components"
import { menu_icons } from "@/config";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const music = ref(false);

const playMusic = (play) => {
    music.value = play;
    dispatch('set_music_volume', play ? 0.2 : 0.01);
}

const keydown = (e) => {
    if (e.keyCode == 77 && !e.ctrlKey) {
        playMusic(!music.value)
    }
}

onMounted(() => {
    document.addEventListener('keydown', keydown)
    playMusic(false);
});
onBeforeUnmount(() => {
    document.removeEventListener('keydown', keydown)
})

</script>
<style lang="scss" scoped></style>