Implement track loading screen

dist/index.html

@@ -17,6 +17,7 @@
       <div id="song-info"></div>
       <div id="song-list"></div>
       <div id="game"></div>
+      <div id="loader"></div>
     </div>
     <template id="song-info-template">
       <div class="song-info">

dist/style.css

@@ -121,6 +121,12 @@
   grid-row: game / bottom;
 }
 
+#loader {
+  top: -50px;
+  grid-column: right / end;
+  grid-row: top / header;
+}
+
 /* }}} */
 
 /* loading {{{ */
@@ -175,7 +181,27 @@
   left: 0;
 }
 
-#container.game #game {
+#loader {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#loader .progress-bar {
+  width: 80%;
+}
+
+#loader .progress-bar .shade {
+  transition: width 0.2s;
+}
+
+#container.game.game-loading #loader {
+  opacity: 1;
+  top: 0;
+}
+
+#container.game.game-playing #game {
   opacity: 1;
   top: 0;
 }

src/audio.ts

@@ -21,6 +21,21 @@ namespace audio {
         .then(buffer => this.context.decodeAudioData(buffer))
         .then(audioBuffer => new Track(this, audioBuffer))
     }
+
+    loadTrackWithProgress(url: string, listener: EventListener): Promise<Track> {
+      let promise = new Promise<ArrayBuffer>((resolve, reject) => {
+        let xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+        xhr.responseType = 'arraybuffer';
+        xhr.onprogress = listener;
+        xhr.onload = () => resolve(xhr.response);
+        xhr.onerror = () => reject();
+        xhr.send();
+      });
+      return promise
+        .then(buffer => this.context.decodeAudioData(buffer))
+        .then(audioBuffer => new Track(this, audioBuffer))
+    }
   }
 
   export class Track {

src/display.ts

@@ -184,8 +184,6 @@ namespace display {
   }
 
   enum LevelState {
-    LOADING,
-    READY,
     PLAYING,
     WAITING,
     FINISH
@@ -193,30 +191,26 @@ namespace display {
 
   export class LevelController implements Component {
     element: HTMLElement;
-    level: level.Level;
     currentIndex: number;
     inputState: InputState | null;
     mainAreaController: MainAreaController;
     progressController: TrackProgressController | null;
     state: LevelState;
-    track: audio.Track | null;
 
-    constructor(audioManager: audio.AudioManager, level: level.Level) {
+    constructor(readonly level: level.Level, readonly track: audio.Track | null) {
       this.element = document.createElement('div');
       this.level = level;
       this.currentIndex = -1;
       this.inputState = null;
       this.mainAreaController = new MainAreaController();
       this.progressController = null;
-      this.state = LevelState.LOADING;
-      this.track = null;
+      this.state = LevelState.PLAYING;
 
       this.element.className = 'level-control';
       this.element.appendChild(this.mainAreaController.element);
 
       if (this.level.audio == null) {
         this.level.lines = this.level.lines.filter(line => line.kana != "@");
-        this.onReady();
       } else {
         this.progressController = new TrackProgressController(this.level);
         this.element.insertBefore(
@@ -224,16 +218,7 @@ namespace display {
           this.mainAreaController.element
         );
         this.progressController.setListener(event => this.onIntervalEnd());
-        audioManager.loadTrack(this.level.audio).then(track => {
-          this.track = track;
-          this.onReady();
-        })
       }
-
-    }
-
-    onReady(): void {
-      this.setState(LevelState.READY);
     }
 
     onStart(): void {
@@ -281,11 +266,6 @@ namespace display {
 
     handleInput(key: string): void {
       switch (this.state) {
-        case LevelState.READY:
-          if (key == ' ' || key == 'Enter') {
-            this.onStart();
-          }
-          break;
         case LevelState.PLAYING:
           if (this.inputState !== null && /^[-_ a-z]$/.test(key)) {
             if (this.inputState.handleInput(key)) {

src/game/common.ts

@@ -21,8 +21,10 @@ namespace game {
         this.activeScreen.exit();
       }
       this.activeScreen = nextScreen;
-      this.activeScreen.enter();
-      this.container.classList.add(this.activeScreen.name);
+      if (nextScreen != null) {
+        this.activeScreen.enter();
+        this.container.classList.add(this.activeScreen.name);
+      }
     }
   }
 

src/game/typing.ts

@@ -1,12 +1,39 @@
+/// <reference path="../audio.ts" />
+/// <reference path="../level.ts" />
 /// <reference path="../display.ts" />
 /// <reference path="common.ts" />
 
 namespace game {
   import Level = level.Level;
 
+  class TypingScreenContext {
+    track: audio.Track | null;
+
+    constructor(
+      readonly context: GameContext,
+      readonly level: Level,
+      readonly switchClosure: (screen: Screen) => void
+    ) {}
+
+    get container() {
+      return this.context.container;
+    }
+
+    get audioManager() {
+      return this.context.audioManager;
+    }
+
+    get bgManager() {
+      return this.context.bgManager;
+    }
+
+    switchScreen(screen: Screen): void {
+      this.switchClosure(screen);
+    }
+  }
+
   export class TypingScreen extends ScreenManager implements Screen {
     readonly name: string = 'game';
-    gameController: display.LevelController;
 
     constructor(
       readonly context: GameContext,
@@ -17,17 +44,16 @@ namespace game {
     }
 
     enter(): void {
-      let gameContainer = this.context.container.querySelector('#game');
-      util.clearChildren(gameContainer);
-      this.gameController = new display.LevelController(this.context.audioManager, this.level);
-      gameContainer.appendChild(this.gameController.element);
+      let context = new TypingScreenContext(this.context, this.level, (screen) => this.switchScreen(screen));
+      let loadingScreen = new TypingLoadingScreen(context);
+      this.switchScreen(loadingScreen);
     }
 
     handleInput(key: string): void {
       if (key === 'Escape') {
         this.returnToSelect();
       } else {
-        this.gameController.handleInput(key);
+        this.activeScreen.handleInput(key);
       }
     }
 
@@ -35,6 +61,84 @@ namespace game {
       this.context.switchScreen(this.prevScreen);
     }
 
+    exit(): void {
+      this.switchScreen(null);
+    }
+  }
+
+  class TypingLoadingScreen implements Screen {
+    readonly name: string = 'game-loading';
+    barElement: HTMLElement;
+    textElement: HTMLElement;
+    isReady: boolean = false;
+
+    constructor(readonly context: TypingScreenContext) {}
+
+    enter(): void {
+      if (this.context.level.audio != null) {
+        let loader = this.context.container.querySelector('#loader');
+
+        if (loader.firstChild == null) {
+          let progressBar = util.loadTemplate('progress-bar');
+          this.barElement = progressBar.querySelector('.shade');
+          this.textElement = document.createElement('span');
+          loader.appendChild(progressBar);
+          loader.appendChild(this.textElement);
+        } else {
+          this.barElement = loader.querySelector('.shade');
+          this.textElement = loader.querySelector('span');
+        }
+        this.barElement.style.width = '0%';
+        this.textElement.textContent = 'music loading';
+
+        this.context.audioManager.loadTrackWithProgress(
+          this.context.level.audio,
+          (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 => {
+          this.context.track = track;
+          this.barElement.style.width = '100%';
+          this.textElement.textContent = 'music loaded';
+          this.isReady = true;
+        });
+
+      } else {
+        this.isReady = true;
+      }
+    }
+
+    handleInput(key: string): void {
+      if (this.isReady && key === ' ') {
+        this.context.switchScreen(new TypingPlayingScreen(this.context));
+      }
+    }
+
+    exit(): void {}
+  }
+
+  class TypingPlayingScreen implements Screen {
+    readonly name: string = 'game-playing';
+    gameController: display.LevelController;
+
+    constructor(readonly context: TypingScreenContext) {}
+
+    enter(): void {
+      let gameContainer = this.context.container.querySelector('#game');
+      util.clearChildren(gameContainer);
+      this.gameController = new display.LevelController(this.context.level, this.context.track);
+      gameContainer.appendChild(this.gameController.element);
+      this.gameController.onStart();
+    }
+
+    handleInput(key: string): void {
+      this.gameController.handleInput(key);
+    }
+
     exit(): void {
       this.gameController.destroy();
     }