better music handler

src/App.svelte

@@ -1,13 +1,13 @@
 <script>
 	import Dialog from "./pages/dialog.svelte";
-	import { Howl } from "howler";
 	import Overlay from "./pages/overlay.svelte";
 	import { characters } from "./stores/characters.js";
 	import { dialog } from "./stores/dialog.js";
 	import Game from "./pages/game.svelte";
 	import { gameActive, menuActive, page } from "./stores/gameActive";
 	import Menu from "./pages/menu.svelte";
-import CrashHandler from "./pages/crashHandler.svelte";
+	import CrashHandler from "./pages/crashHandler.svelte";
+	import { startPlaying } from "./stores/music";
 
 	var preloads = new Map;
 	function preload(url) {
@@ -26,17 +26,6 @@ import CrashHandler from "./pages/crashHandler.svelte";
 		}
 	}
 
-	var music = new Howl({
-		src: "./sound/mittsies-departure.mp3",
-		html5: true,
-		loop: true,
-		autoplay: true
-	});
-
-	function startPlaying(e) {
-		if(!music.playing()) music.play();
-	}
-
 	$: console.log(dialog[$page]);
 	console.log("Pancake recipe at https://github.com/danbulant/heaventaker");
 

src/game/gameScene.js

@@ -3,6 +3,7 @@ import { gameActive, menuActive, page } from "../stores/gameActive";
 import { steps } from "../stores/step";
 import { keys } from "./input";
 import { dialog } from "../stores/dialog.js";
+import { Music } from "../stores/music";
 
 const textureWidth = 100;
 
@@ -29,22 +30,6 @@ export class GameScene extends Phaser.Scene {
                 default: "arcade"
             }
         });
-        /** @type {{
-            background: string,
-            sprite: string,
-            next: string,
-            offset: { x: number, y: nunber },
-            size: { x: number, y: number },
-            px: number,
-            steps: number,
-            map: (string | null | {
-                type: string,
-                direction?: number
-            })[][],
-            fieldFlags: {
-                stopsClouds?: boolean
-            }[][]
-        }} */
         this.map = map;
         steps.set(map.steps);
     }
@@ -179,12 +164,12 @@ export class GameScene extends Phaser.Scene {
                         var sprite = this.add.sprite(x * this.map.px, y * this.map.px);
                         item.animated = true;
                         if(!this.anims.exists(type)) {
+                            const frames = this.anims.generateFrameNumbers(type);
+                            const rate = (60 / Music.current.bpm);
                             this.anims.create({
                                 key: type,
-                                frames: this.anims.generateFrameNumbers(type, {
+                                frames,
-                                    start: 0
+                                frameRate: frames.length / rate * Music.current.scale,
-                                }),
-                                frameRate: 10,
                                 repeat: -1
                             });
                         }

src/stores/music.js

@@ -0,0 +1,44 @@
+import { Howl } from "howler";
+
+export const musicStore = {
+    departure: {
+        src: "mittsies-departure.mp3",
+        bpm: 128,
+        scale: 1/2,
+        /** @type {Howl} */
+        howl: null
+    }
+}
+
+export class Music {
+    static current = musicStore.departure;
+
+    /**
+     * @param {keyof musicStore} key 
+     */
+    static play(key) {
+        this.current.howl.pause();
+        this.current = musicStore[key];
+        if(!this.current.howl) this.prepare();
+        this.current.howl.play();
+    }
+
+    static prepare() {
+        this.current.howl = new Howl({
+            src: "./sound/" + this.current.src,
+            html5: true,
+            loop: true
+        });
+    }
+
+    static startPlaying() {
+        if(!this.current.howl.playing())
+            this.current.howl.play();
+    }
+}
+Music.prepare();
+Music.startPlaying();
+
+export function startPlaying(e) {
+    Music.startPlaying();
+}