Play main menu music

Author: cmfcmf

src/game/gad-renderer.ts

@@ -106,11 +106,12 @@ export default class GADRenderer {
         }
     }
 
-    public renderVideo(videoSprite: PIXI.Sprite) {
+    public renderVideo(videoSprite: PIXI.Sprite, onEnd: () => void) {
         // @ts-ignore
         const videoTexture: VideoBaseTexture = videoSprite.texture.baseTexture;
         videoTexture.source.addEventListener("ended", () => {
             this.stage.removeChild(videoSprite);
+            onEnd();
         }, {once: true});
         this.stage.addChild(videoSprite);
         this.videos.push(videoSprite);

src/game/menu-structure.ts

@@ -2,36 +2,42 @@ import * as PIXI from "pixi.js";
 import FileSystem from "../filesystem";
 import {textureFromUint8ArrayMP4} from "../util/pixi";
 import GADRenderer from "./gad-renderer";
+import MusicPlayer from "./music-player";
 
 type Callback = () => void;
 
 interface ScreenConfig {
+    onLoad: Callback;
     callbacks: Callback[];
 }
 
 export default class MenuStructure extends PIXI.utils.EventEmitter {
     private readonly structure: {[k: string]: ScreenConfig} = {
         menu_main: {
+            onLoad: () => this.playMainMenuMusic(),
             callbacks: [
                 async () => this.renderScreen("menu_missions"),
                 async () => console.log("Multiplayer"),
                 async () => {
                     // Credits
+                    this.musicPlayer.stop();
                     const videoSprite = await this.loadVideoSprite(10);
                     videoSprite.width = 453 - 14;
                     videoSprite.height = 367 - 14;
                     videoSprite.position.set(500 + 7, 359 + 7);
-                    this.gadRenderer.renderVideo(videoSprite);
+                    this.gadRenderer.renderVideo(videoSprite, () => this.playMainMenuMusic);
                 },
                 async () => {
                     // Intro
                     const videoSprite = await this.loadVideoSprite(58);
+                    this.musicPlayer.stop();
                     this.gadRenderer.renderVideoFullscreen(videoSprite, () => this.renderScreen("menu_main"));
                 },
                 async () => console.log("Exit"),
             ],
         },
         menu_missions: {
+            onLoad: () => this.playMainMenuMusic(),
             callbacks: [
                 async () => console.log("New Game"),
                 async () => console.log("Load Game"),
@@ -45,9 +51,15 @@ export default class MenuStructure extends PIXI.utils.EventEmitter {
             ],
         },
         menu_loading: {
+            onLoad: () => {
+                // Nothing to do
+            },
             callbacks: [],
         },
         menu_mission_details: {
+            onLoad: () => {
+                // Nothing to do
+            },
             callbacks: [
                 async () => console.log("Start Mission"),
                 async () => this.renderScreen("menu_missions"),
@@ -65,14 +77,21 @@ export default class MenuStructure extends PIXI.utils.EventEmitter {
         },
     };
 
-    constructor(private readonly fs: FileSystem, private readonly gadRenderer: GADRenderer) {
+    constructor(private readonly fs: FileSystem, private readonly gadRenderer: GADRenderer,
+                private readonly musicPlayer: MusicPlayer) {
         super();
     }
 
     public async renderScreen(screen: string) {
         const data = JSON.parse(await this.fs.openAndGetContentAsText(`/screens/${screen}.json`));
         console.log(data);
-        await this.gadRenderer.render(data, this.structure[screen].callbacks);
+        const config = this.structure[screen];
+        config.onLoad();
+        await this.gadRenderer.render(data, config.callbacks);
+    }
+
+    private playMainMenuMusic() {
+        this.musicPlayer.play("1st Beginning", true);
     }
 
     private async loadVideoSprite(videoNumber: number) {

src/game/music-player.ts

@@ -4,7 +4,7 @@ import FileSystem from "../filesystem";
 
 export default class MusicPlayer {
     private playing = false;
-    private readonly songs: PIXI.sound.Sound[] = [];
+    private readonly songs: Array<{name: string, sound: PIXI.sound.Sound}> = [];
     private currentSongIdx: number;
 
     constructor(private readonly fs: FileSystem) { }
@@ -14,12 +14,23 @@ export default class MusicPlayer {
         for (const file of files) {
             console.log(`Loading music ${file.name}`);
             const data = (await this.fs.openAndGetContentAsUint8Array(file)).buffer as ArrayBuffer;
-            this.songs.push(await this.loadSound(data));
+            this.songs.push({name: file.name, sound: await this.loadSound(data)});
             console.log(`Finished loading music ${file.name}`);
         }
     }
 
-    public play() {
+    public play(name: string, loop: boolean = false) {
+        const song = this.songs.find((each) => each.name === name + ".wav");
+        if (song === undefined) {
+            console.warn(`Song ${name} not found.`);
+            return;
+        }
+        if (!song.sound.isPlaying) {
+            song.sound.play({loop: loop});
+        }
+    }
+
+    public playAll() {
         if (this.songs.length === 0) {
             console.warn("No music to play found :(");
             return;
@@ -28,17 +39,23 @@ export default class MusicPlayer {
             console.warn("Music is already playing!");
             return;
         }
+        this.stop();
+
         this.playing = true;
         this.currentSongIdx = -1;
         this.playNext();
     }
 
+    public stop() {
+        this.songs.forEach((song) => song.sound.stop());
+    }
+
     private playNext() {
         this.currentSongIdx++;
         if (this.currentSongIdx === this.songs.length) {
             this.currentSongIdx = 0;
         }
-        this.songs[this.currentSongIdx].play(this.playNext.bind(this));
+        this.songs[this.currentSongIdx].sound.play(this.playNext.bind(this));
     }
 
     private loadSound(data: ArrayBuffer, preload: boolean = false) {

src/index.ts

@@ -94,7 +94,7 @@ const Viewport = require("pixi-viewport");
     } else {
         // menuViewport.fit(); // TODO: Makes usage of sliders harder
         const gadRenderer = new GADRenderer(menuViewport, spriteLoader);
-        const menuStructure = new MenuStructure(fs, gadRenderer);
+        const menuStructure = new MenuStructure(fs, gadRenderer, musicPlayer);
         menuStructure.on("load-game", async (gameName: string) => {
             await menu.loadByName(gameName);
             menuViewport.visible = false;

src/menu.ts

@@ -39,7 +39,7 @@ export default class Menu {
         const gameRenderer = new GameRenderer(world, this.islandRenderer, this.viewport);
         const gameLogic = new Game(gameRenderer, this.configLoader);
         await gameLogic.begin(world);
-        this.musicPlayer.play();
+        this.musicPlayer.playAll();
 
 //      this.viewport.parent.addChild(new PIXI.Text(
 //          `Money: ${world.players.find((player) => player.id === 0).money}`,