fix: start menu audio wouldn't actually stop

liana-p · Jul 25, 2023 · fe2be9f · fe2be9f
1 parent dc6bf0c
commit fe2be9f
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 106 deletions.
diff --git a/packages/narrat/examples/games/default/data/audio.yaml b/packages/narrat/examples/games/default/data/audio.yaml
@@ -15,8 +15,10 @@ files:
   success:
     src: audio/success.wav
 options:
+  defaultMusic: calm
   volume: 0.5
   musicFadeInTime: 0.5
   musicFadeInDelay: 0.5
   musicFadeOutTime: 0.5
+
 audioTriggers: {}
diff --git a/packages/narrat/src/app.vue b/packages/narrat/src/app.vue
@@ -25,17 +25,14 @@
   <TooltipsUi />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
 import DebugMenu from './components/debug/debug-menu.vue';
 import NotificationToast from './components/notification-toast.vue';
 import { debounce } from './utils/debounce';
 import { vm } from './vm/vm';
-import { useDialogStore } from './stores/dialog-store';
-import { useVM } from './stores/vm-store';
 import { useMain } from './stores/main-store';
 import { useRenderingStore } from './stores/rendering-store';
-import { mapState } from 'pinia';
 import StartMenu from './components/StartMenu.vue';
 import { inputEvents } from './utils/InputsListener';
 import AlertModal from './components/utils/alert-modal.vue';
@@ -45,105 +42,61 @@ import GameSplash from './components/game-splash/game-splash.vue';
 import { AppOptions } from './types/app-types';
 import { useMenu } from './stores/menu-store';
 import TooltipsUi from './components/tooltips/tooltips-ui.vue';
-import { useTooltips } from './stores/tooltip-store';
 
-export default defineComponent({
-  setup() {
-    const dialogStore = useDialogStore();
-    const vmStore = useVM();
-    const mainStore = useMain();
-    return {
-      dialog: computed(() => dialogStore.dialog),
-      stack: computed(() => vmStore.stack),
-      flowState: computed(() => mainStore.flowState),
-      alerts: computed(() => mainStore.alerts),
-    };
-  },
-  $refs: {
-    dialogContainer: HTMLInputElement,
-  },
-  components: {
-    DebugMenu,
-    NotificationToast,
-    StartMenu,
-    AlertModal,
-    InGame,
-    EngineSplash,
-    GameSplash,
-    TooltipsUi,
-  },
+const props = defineProps<{
+  options: AppOptions;
+}>();
 
-  data() {
-    return {
-      lineTitle: 'title',
-      lineText: 'hello',
-    };
-  },
-  props: {
-    options: Object as PropType<AppOptions>,
-  },
-  async mounted() {
-    vm.callHook('onAppMounted');
-    await useMain().engineLoading();
-    window.addEventListener(
-      'resize',
-      debounce(
-        () => {
-          this.updateScreenSize();
-        },
-        100,
-        {
-          maxWait: 200,
-        },
-      ),
-    );
-    inputEvents.setup(this.options!.debug);
-    // this.updateScreenSize();
-    setTimeout(() => {
-      this.updateScreenSize();
-    }, 50);
-  },
+const mainStore = useMain();
+const flowState = computed(() => mainStore.flowState);
+const alerts = computed(() => mainStore.alerts);
+const rendering = useRenderingStore();
 
-  computed: {
-    ...mapState(useRenderingStore, [
-      'screenWidth',
-      'screenHeight',
-      'layoutMode',
-      'gameWidth',
-      'gameHeight',
-      'gameScaleRatio',
-      'actualGameHeight',
-    ]),
-    ...mapState(useVM, ['currentLine']),
-    appStyle(): any {
-      return {
-        transform: `scale(${this.gameScaleRatio}, ${this.gameScaleRatio})`,
-        width: `${this.gameWidth}px`,
-        height: `${this.actualGameHeight}px`,
-      };
-    },
-    appClass(): any {
-      if (useMenu().activeMenu) {
-        return 'app-blurred-by-modal';
-      }
-      return {};
-    },
-  },
+const appStyle = computed(() => {
+  return {
+    transform: `scale(${rendering.gameScaleRatio}, ${rendering.gameScaleRatio})`,
+    width: `${rendering.gameWidth}px`,
+    height: `${rendering.actualGameHeight}px`,
+  };
+});
+
+const appClass = computed(() => {
+  if (useMenu().activeMenu) {
+    return 'app-blurred-by-modal';
+  }
+  return {};
+});
+
+function closeAlert(id: string) {
+  useMain().closeAlert(id);
+}
+function engineSplashDone() {
+  useMain().flowState = 'game-splash';
+}
+function updateScreenSize() {
+  useRenderingStore().updateScreenSize(window.innerWidth, window.innerHeight);
+}
 
-  methods: {
-    closeAlert(id: string) {
-      useMain().closeAlert(id);
-    },
-    engineSplashDone() {
-      useMain().flowState = 'game-splash';
-    },
-    updateScreenSize() {
-      useRenderingStore().updateScreenSize(
-        window.innerWidth,
-        window.innerHeight,
-      );
-    },
-  },
+onMounted(async () => {
+  vm.callHook('onAppMounted');
+  await useMain().engineLoading();
+  window.addEventListener(
+    'resize',
+    debounce(
+      () => {
+        updateScreenSize();
+      },
+      100,
+      {
+        maxWait: 200,
+      },
+    ),
+  );
+  inputEvents.setup(props.options!.debug);
+  // this.updateScreenSize();
+  setTimeout(() => {
+    updateScreenSize();
+  }, 50);
 });
 </script>
 

diff --git a/packages/narrat/src/components/StartMenu.vue b/packages/narrat/src/components/StartMenu.vue
@@ -50,7 +50,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { getConfig } from '../config';
+import { audioConfig, getConfig } from '../config';
 import { useMain } from '../stores/main-store';
 import { error } from '../utils/error-handling';
 import {
@@ -72,6 +72,7 @@ import { CustomStartMenuButton } from '@/exports/plugins';
 import ModalWindow from './utils/modal-window.vue';
 import { InputListener, useInputs } from '@/stores/inputs-store';
 import { useNavigation } from '@/inputs/useNavigation';
+import { getAudio, stopHowlerById } from '@/utils/audio-loader';
 
 const inputListener = ref<InputListener | null>(
   useInputs().registerInputListener('start-menu', {}),
@@ -88,7 +89,7 @@ const startingGame = ref(false);
 const listener = ref<null | Function>(null);
 const startMenuStore = useStartMenu();
 const popupComponent = ref<CustomStartMenuButton | false>(false);
-
+const musicId = ref<number | null | undefined>(null);
 const extraButtons = computed(() => startMenuStore.buttons);
 
 const navigation = useNavigation({
@@ -231,6 +232,10 @@ onMounted(() => {
   nextTick(() => {
     navigation.select(0);
   });
+  if (audioConfig().options.defaultMusic) {
+    const music = getAudio(audioConfig().options.defaultMusic!)!;
+    musicId.value = music.play();
+  }
 });
 
 function setupButtons() {
@@ -306,6 +311,10 @@ onUnmounted(() => {
   if (listener.value) {
     inputEvents.off('debouncedKeydown', listener.value as any);
   }
+  if (typeof musicId.value === 'number') {
+    const defaultMusic = audioConfig().options.defaultMusic!;
+    stopHowlerById(defaultMusic, musicId.value);
+  }
 });
 
 const gameTitle = computed(() => {

diff --git a/packages/narrat/src/config.ts b/packages/narrat/src/config.ts
@@ -1,5 +1,5 @@
 import { AppOptions } from './types/app-types';
-import { error } from './utils/error-handling';
+import { error, warning } from './utils/error-handling';
 import { useConfig } from './stores/config-store';
 import { Config, defaultConfig } from './config/config-output';
 import {
@@ -188,6 +188,14 @@ export function getConfig(): Config {
 export function audioConfig() {
   return getConfig().audio;
 }
+export function audioFileConfig(key: string) {
+  const res = audioConfig().files[key];
+  if (!res) {
+    warning(`Audio file ${key} doesn't exist`);
+    return undefined;
+  }
+  return res;
+}
 export function skillsConfig() {
   return getConfig().skills;
 }

diff --git a/packages/narrat/src/config/audio-config.ts b/packages/narrat/src/config/audio-config.ts
@@ -6,6 +6,10 @@ export const AudioFileConfigSchema = Type.Object({
   volume: Type.Optional(Type.Number()),
   rate: Type.Optional(Type.Number()),
   html5: Type.Optional(Type.Boolean()),
+  fadeInTime: Type.Optional(Type.Number()),
+  fadeInDelay: Type.Optional(Type.Number()),
+  fadeOutTime: Type.Optional(Type.Number()),
+  loop: Type.Optional(Type.Boolean()),
 });
 export type AudioFileConfig = Static<typeof AudioFileConfigSchema>;
 

diff --git a/packages/narrat/src/examples/default/scripts/default.narrat b/packages/narrat/src/examples/default/scripts/default.narrat
@@ -14,6 +14,7 @@ main:
   // jump test_new_inputs
   // jump test_arrays
   // set_screen map 0 fade 1000
+  jump test_audio
   set_screen map
   // set_screen video
   talk player idle "Hello"

diff --git a/packages/narrat/src/stores/main-store.ts b/packages/narrat/src/stores/main-store.ts
@@ -326,9 +326,9 @@ export const useMain = defineStore('main', {
     menuReturn() {
       this.reset();
       this.setFlowState('menu');
-      if (audioConfig().options.defaultMusic) {
-        useAudio().playChannel('music', audioConfig().options.defaultMusic!, 0);
-      }
+      // if (audioConfig().options.defaultMusic) {
+      //   useAudio().playChannel('music', audioConfig().options.defaultMusic!, 0);
+      // }
     },
     createError(text: string) {
       this.errors.push({