add music data, location data, music autoplays on entrance to location

src/classes/Environment/Background.ts

@@ -1,20 +1,24 @@
-import { Math as PhaserMath, Physics, Scene } from 'phaser';
+import { Geom, Math as PhaserMath, Physics } from 'phaser';
 
 import { Config } from '../../config';
 import { Data as BackgroundInfo } from '../../data/background';
 import { Layer } from '../../data/layers';
-import { LazyInitialize } from '../../data/types';
+import { MusicData } from '../../data/music';
+import { LazyInitialize, MusicType } from '../../data/types';
+import { Game } from '../../scenes/Game';
 import { initializeObject } from '../../utils/interactionUtils';
 import { shouldInitialize } from '../../utils/util';
+import { Music } from '../Music';
 import { Player } from '../Player/Player';
 
 export class Background extends Physics.Arcade.Image implements LazyInitialize {
   player: Player;
   initialized: boolean = false;
   info: BackgroundInfo;
   center: PhaserMath.Vector2;
+  bounds: Geom.Rectangle;
 
-  constructor(scene: Scene, info: BackgroundInfo, player: Player) {
+  constructor(scene: Game, info: BackgroundInfo, player: Player) {
     const { x, y, image, scale } = info;
     super(scene, x, y, image);
     this.name = `Background-${info.image}`;
@@ -42,6 +46,8 @@ export class Background extends Physics.Arcade.Image implements LazyInitialize {
     this.scene.add.existing(this);
     this.scene.physics.add.existing(this);
 
+    this.bounds = this.getBounds();
+
     if (Config.debug) {
       this.setInteractive({ draggable: true });
     }
@@ -51,5 +57,11 @@ export class Background extends Physics.Arcade.Image implements LazyInitialize {
 
   update() {
     this.lazyInit();
+
+    if (this.bounds?.contains(this.player.x, this.player.y)) {
+      const music = Object.entries(MusicData).find(([key, value]) => value.locations.includes(this.info.location));
+
+      if (music && Music.music?.key !== music[0]) Music.start(music[0] as MusicType);
+    }
   }
 }

src/classes/Music.ts

@@ -1,15 +1,13 @@
 import { Scene, Sound, Tweens } from 'phaser';
 
-export const INTRO_MUSIC = 'music-intro';
-export const GAME_MUSIC = 'music-main';
+import { MusicData } from '../data/music';
+import { MusicType } from '../data/types';
 
 export let Music: MusicManager;
 export function createMusicInstance(sound: Sound.BaseSoundManager) {
   Music = new MusicManager(sound);
 }
 
-type MusicKey = typeof INTRO_MUSIC | typeof GAME_MUSIC;
-
 class MusicManager {
   sound: Sound.BaseSoundManager;
   music?: Sound.BaseSound;
@@ -34,11 +32,11 @@ class MusicManager {
     });
   }
 
-  start(music: MusicKey, volume?: number) {
+  start(music: MusicType, volume?: number) {
     if (this.music?.key === music && this.music?.isPlaying) return;
 
     this.stop();
-    this.volume = volume || this.volume;
+    this.volume = volume || MusicData[music].volume || 0.5;
 
     this.music = this.sound.get(music) || this.sound.add(music, { loop: true, volume: this.volume });
     if (!this.sound.mute && !this.sound.locked) {

src/data/background.ts

@@ -1,18 +1,19 @@
-import { DataProps } from './types';
+import { DataProps, Location } from './types';
 
 export type Data = DataProps & {
   image: string;
   scale?: number; // only allow uniform scaling
+  location: Location;
 };
 
 export const BackgroundData: Data[] = [
-  { x: 0, y: 0, image: 'town' },
-  { x: 500, y: -1100, image: 'clock_outside' },
-  { x: 500, y: -2400, image: 'clock_inner', skipLighting: true },
-  { x: 2300, y: 0, image: 'forest' },
-  { x: 4400, y: 100, image: 'lake' },
-  { x: -2200, y: -170, image: 'mansion_outside' },
-  { x: -2000, y: -1320, image: 'mansion_inside', skipLighting: true },
-  { x: -3200, y: 1300, image: 'alchemy_lab', scale: 0.9, skipLighting: true },
-  { x: 1600, y: -700, image: 'library', skipLighting: true },
+  { x: 0, y: 0, image: 'town', location: Location.Town },
+  { x: 500, y: -1100, image: 'clock_outside', location: Location.ClockOutside },
+  { x: 500, y: -2400, image: 'clock_inner', location: Location.ClockInner, skipLighting: true },
+  { x: 2300, y: 0, image: 'forest', location: Location.Forest },
+  { x: 4400, y: 100, image: 'lake', location: Location.Lake },
+  { x: -2200, y: -170, image: 'mansion_outside', location: Location.MansionOutside },
+  { x: -2000, y: -1320, image: 'mansion_inside', location: Location.MansionInside, skipLighting: true },
+  { x: -3200, y: 1300, image: 'alchemy_lab', location: Location.AlchemyLab, scale: 0.9, skipLighting: true },
+  { x: 1600, y: -700, image: 'library', location: Location.Library, skipLighting: true },
 ];

src/data/music.ts

@@ -0,0 +1,33 @@
+import { Location, MusicType } from './types';
+
+interface Data {
+  locations: Location[];
+  volume: number;
+}
+
+export const MusicData: Record<MusicType, Data> = {
+  [MusicType.Intro]: {
+    locations: [],
+    volume: 0.5,
+  },
+
+  [MusicType.Town]: {
+    locations: [Location.Town],
+    volume: 0.5,
+  },
+
+  [MusicType.Clock]: {
+    locations: [Location.ClockInner, Location.ClockOutside],
+    volume: 0.5,
+  },
+
+  [MusicType.Forest]: {
+    locations: [Location.Forest, Location.Lake],
+    volume: 0.5,
+  },
+
+  [MusicType.Mansion]: {
+    locations: [Location.MansionInside, Location.MansionOutside, Location.AlchemyLab],
+    volume: 0.5,
+  },
+};

src/data/types.ts

@@ -148,3 +148,24 @@ export enum PropType {
 export enum HelperTextType {
   LabStairs,
 }
+
+export enum Location {
+  Town,
+  ClockOutside,
+  ClockInner,
+  Forest,
+  Lake,
+  MansionOutside,
+  MansionInside,
+  AlchemyLab,
+  Library,
+}
+
+export enum MusicType {
+  Intro = 'music-intro',
+
+  Town = 'music-town',
+  Mansion = 'music-mansion',
+  Forest = 'music-forest',
+  Clock = 'music-clock',
+}

src/scenes/Game.ts

@@ -13,7 +13,7 @@ import { Prop } from '../classes/Environment/Prop';
 import { Slope } from '../classes/Environment/Slope';
 import { Walls } from '../classes/Environment/Walls';
 import { Warp } from '../classes/Environment/Warp';
-import { GAME_MUSIC, Music } from '../classes/Music';
+import { Music } from '../classes/Music';
 import { Player } from '../classes/Player/Player';
 import { Gamepad } from '../classes/UI/Gamepad';
 import { IconButton } from '../classes/UI/IconButton';
@@ -58,7 +58,6 @@ export class Game extends Scene {
     if (!this.shouldInit) return;
 
     Music.setScene(this);
-    Music.start(GAME_MUSIC);
 
     const startTime = performance.now();
 

src/scenes/Intro.ts

@@ -1,9 +1,10 @@
 import { GameObjects, Scene } from 'phaser';
 
-import { INTRO_MUSIC, Music } from '../classes/Music';
+import { Music } from '../classes/Music';
 import { Config } from '../config';
 import { trainIntro } from '../data/cutscene';
 import { SaveType, saves } from '../data/saves';
+import { MusicType } from '../data/types';
 import { fadeIn, fadeOut } from '../utils/util';
 
 // Export the preload function (so it can be used in the main Preloader)
@@ -22,7 +23,7 @@ export function preloadIntro(scene: Scene) {
 
   scene.load.svg('chevron-down', 'icons/chevron-down.svg', { width: 64, height: 64 });
 
-  scene.load.audio(INTRO_MUSIC, "sounds/music/A New Day's Hurry.m4a");
+  scene.load.audio(MusicType.Intro, "sounds/music/A New Day's Hurry.m4a");
 }
 
 export class Intro extends Scene {
@@ -62,7 +63,7 @@ export class Intro extends Scene {
 
   create() {
     Music.setScene(this);
-    Music.start(INTRO_MUSIC);
+    Music.start(MusicType.Intro);
 
     const scale = Config.zoomed ? 0.75 : 1;
 

src/scenes/Preloader.ts

@@ -1,8 +1,8 @@
 import { GameObjects, Scene } from 'phaser';
 
-import { GAME_MUSIC } from '../classes/Music';
 import { Config } from '../config';
 import { saveKey } from '../data/saves';
+import { MusicType } from '../data/types';
 import { fadeOut } from '../utils/util';
 import { preloadIntro } from './Intro';
 
@@ -158,7 +158,10 @@ export class Preloader extends Scene {
     this.load.audio('door', 'sounds/sfx/door.mp3');
 
     // music
-    this.load.audio(GAME_MUSIC, 'sounds/music/Night Time Scavenge II.m4a');
+    this.load.audio(MusicType.Town, 'sounds/music/Unknown.m4a');
+    this.load.audio(MusicType.Clock, 'sounds/music/Night Time Scavenge II.m4a');
+    this.load.audio(MusicType.Mansion, 'sounds/music/Reflective District.m4a');
+    this.load.audio(MusicType.Forest, 'sounds/music/Serene.m4a');
 
     // optionally preload intro
     if (!localStorage.getItem(saveKey)) {