Implement background switching per level

dist/style.css

@@ -438,6 +438,7 @@
     ". . stats";
   grid-row-gap: 2px;
   padding: 2px 20px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
 }
 
 #game .track-progress {

src/background.ts

@@ -1,21 +1,27 @@
 namespace background {
   export class BackgroundManager {
     element: HTMLElement;
+    filter: HTMLElement;
     last: HTMLElement | null;
     next: HTMLElement;
 
     constructor(element: HTMLElement) {
       this.element = element;
       this.last = null;
+      this.filter = document.createElement('div');
+      this.filter.className = 'filter';
       this.next = document.createElement('div');
+      this.element.appendChild(this.filter);
       this.element.appendChild(this.next);
     }
 
     setBackground(background: string) {
       if (background.indexOf('.') >= 0) {
-        background = `url(${background}), black`;
+        this.next.style.background = `url(${background}), black`;
+        this.next.style.filter = 'contrast(70%) brightness(70%)';
+      } else {
+        this.next.style.background = background;
       }
-      this.next.style.background = background;
       this.next.classList.add('show');
       if (this.last != null) {
         this.last.classList.remove('show');

src/game/loading.ts

@@ -40,7 +40,6 @@ namespace game {
     }
 
     finishLoading(): void {
-      this.context.bgManager.setBackground(this.context.config.background);
       let loadingElement: HTMLElement = this.context.container.querySelector('#loading');
       loadingElement.addEventListener('transitionend', (event) => {
         loadingElement.style.display = 'none';

src/game/select.ts

@@ -53,6 +53,7 @@ namespace game {
     }
 
     enter(): void {
+      this.context.bgManager.setBackground(this.context.config.background);
       this.folderController.listeners.attach();
     }
 
@@ -65,7 +66,8 @@ namespace game {
       if (!this.init) {
         this.context.assets.selectSound.play();
       }
-      let songInfoComponent = new SongInfoComponent(this.currentLevelSet.levels[index]);
+      let song = this.currentLevelSet.levels[index];
+      let songInfoComponent = new SongInfoComponent(song);
       util.clearChildren(this.songInfo);
       this.songInfo.appendChild(songInfoComponent.element);
     }

src/game/typing.ts

@@ -45,6 +45,9 @@ namespace game {
     }
 
     enter(): void {
+      if (this.level.background) {
+        this.context.bgManager.setBackground(this.level.background);
+      }
       let context = new TypingScreenContext(this.context, this.level, (screen) => this.switchScreen(screen));
       let loadingScreen = new TypingLoadingScreen(context);
       this.switchScreen(loadingScreen);

src/level.ts

@@ -17,6 +17,7 @@ namespace level {
     genre?: string,
     difficulty?: string,
     audio?: string,
+    background?: string,
     lines: Line[]
   }