Implement ready display for game section

dist/index.html

@@ -18,6 +18,10 @@
       <div id="song-list"></div>
       <div id="game"></div>
       <div id="loader"></div>
+      <div id="ready">
+        <div class="status"></div>
+        <div class="message"></div>
+      </div>
     </div>
     <template id="song-info-template">
       <div class="song-info">

dist/style.css

@@ -127,6 +127,13 @@
   grid-row: top / header;
 }
 
+#ready {
+  grid-column: start / end;
+  grid-row: top / bottom;
+  align-self: center;
+  justify-self: center;
+}
+
 /* }}} */
 
 /* loading {{{ */
@@ -181,26 +188,15 @@
   left: 0;
 }
 
-#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-loading #ready {
+  opacity: 1;
+}
+
 #container.game.game-playing #game {
   opacity: 1;
   top: 0;
@@ -335,6 +331,39 @@
 
 /* game-screen {{{ */
 
+/* loading-screen {{{ */
+
+#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;
+}
+
+#ready {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#ready .status {
+  font-size: 30px;
+}
+
+#ready .message {
+  font-size: 14px;
+}
+
+/* }}} */
+
 .kana {
   display: inline-block;
   position: relative;

src/game/typing.ts

@@ -70,6 +70,7 @@ namespace game {
     readonly name: string = 'game-loading';
     barElement: HTMLElement;
     textElement: HTMLElement;
+    readyElement: HTMLElement;
     isReady: boolean = false;
 
     constructor(readonly context: TypingScreenContext) {}
@@ -77,6 +78,7 @@ namespace game {
     enter(): void {
       if (this.context.level.audio != null) {
         let loader = this.context.container.querySelector('#loader');
+        this.readyElement = this.context.container.querySelector('#ready');
 
         if (loader.firstChild == null) {
           let progressBar = util.loadTemplate('progress-bar');
@@ -88,8 +90,11 @@ namespace game {
           this.barElement = loader.querySelector('.shade');
           this.textElement = loader.querySelector('span');
         }
+
         this.barElement.style.width = '0%';
         this.textElement.textContent = 'music loading';
+        this.readyElement.querySelector('.status').textContent = 'Loading';
+        this.readyElement.querySelector('.message').textContent = 'please wait';
 
         this.context.audioManager.loadTrackWithProgress(
           this.context.level.audio,
@@ -104,6 +109,8 @@ namespace game {
           this.context.track = track;
           this.barElement.style.width = '100%';
           this.textElement.textContent = 'music loaded';
+          this.readyElement.querySelector('.status').textContent = 'Ready';
+          this.readyElement.querySelector('.message').textContent = 'press space to start';
           this.isReady = true;
         });