Load background before switching to it

src/background.ts

@@ -4,6 +4,7 @@ namespace background {
     filter: HTMLElement;
     last: HTMLElement | null;
     next: HTMLElement;
+    fnContext: util.FnContext = new util.FnContext();
 
     constructor(element: HTMLElement) {
       this.element = element;
@@ -16,6 +17,13 @@ namespace background {
     }
 
     setBackground(background: string) {
+      this.fnContext.invalidate();
+      util.loadBackground(background).then(this.fnContext.wrap(
+        () => this.setBackgroundActual(background)
+      ));
+    }
+
+    private setBackgroundActual(background: string) {
       if (background.indexOf('.') >= 0) {
         this.next.style.background = `url(${background}), black`;
         this.next.style.filter = 'contrast(70%) brightness(70%)';

src/game/loading.ts

@@ -25,7 +25,7 @@ namespace game {
       let config = this.context.config!;
 
       Promise.all([
-        this.loadImage(config.background),
+        util.loadBackground(config.background),
         this.loadTrack(config.selectSound),
         this.loadTrack(config.decideSound)
       ]).then(v => {
@@ -56,18 +56,6 @@ namespace game {
       }
     }
 
-    loadImage(url: string): Promise<void> {
-      if (url.includes('.')) {
-        return new Promise((resolve, reject) => {
-          let image = new Image();
-          image.onload = (event) => resolve();
-          image.src = url;
-        });
-      } else {
-        return Promise.resolve();
-      }
-    }
-
     switchToSelect(): void {
       let selectScreen = new SelectScreen(this.context);
       this.context.switchScreen(selectScreen);

src/game/typing.ts

@@ -77,6 +77,7 @@ namespace game {
     textElement: HTMLElement | null = null;
     readyElement: HTMLElement | null = null;
     isReady: boolean = false;
+    fnContext: util.FnContext = new util.FnContext();
 
     constructor(readonly context: TypingScreenContext) {}
 
@@ -93,21 +94,22 @@ namespace game {
         this.readyElement.querySelector('.status')!.textContent = 'Loading';
         this.readyElement.querySelector('.message')!.textContent = 'please wait';
 
+        this.fnContext.invalidate();
         this.context.audioManager.loadTrackWithProgress(
           this.context.level.audio,
-          (event: ProgressEvent) => {
+          this.fnContext.wrap((event: ProgressEvent) => {
             if (event.lengthComputable) {
               // only up to 80 to factor in decoding time
               let percentage = event.loaded / event.total * 80;
               this.barElement!.style.width = `${percentage}%`;
             }
-          }
-        ).then(track => {
+          })
+        ).then(this.fnContext.wrap((track: audio.Track) => {
           this.context.track = track;
           this.barElement!.style.width = '100%';
           this.textElement!.textContent = 'music loaded';
           this.setReady();
-        });
+        }));
 
       } else {
         loader.style.visibility = 'hidden';
@@ -129,7 +131,9 @@ namespace game {
       }
     }
 
-    exit(): void {}
+    exit(): void {
+      this.fnContext.invalidate();
+    }
 
     transitionExit(): void {
       if (this.barElement) {

src/util.ts

@@ -49,6 +49,18 @@ namespace util {
     return e as E;
   }
 
+  export function loadBackground(url: string): Promise<void> {
+    if (url.includes('.')) {
+      return new Promise((resolve, reject) => {
+        let image = new Image();
+        image.onload = (event) => resolve();
+        image.src = url;
+      });
+    } else {
+      return Promise.resolve();
+    }
+  }
+
   class ListenerManager {
     constructor(
       private target: EventTarget,
@@ -84,4 +96,22 @@ namespace util {
       this.listeners.forEach(l => l.detach());
     }
   }
+
+  export class FnContext {
+    current: Symbol = Symbol();
+
+    invalidate() {
+      this.current = Symbol();
+    }
+
+    wrap<T extends Function>(fn: T): T {
+      const id = this.current;
+      const wrappedFn = (...args: any[]) => {
+        if (this.current === id) {
+          return fn(...args);
+        }
+      };
+      return wrappedFn as any as T;
+    }
+  }
 }