Implement placeholders in main template

This lets us lessen the need to manually load templates in various
places

dist/index.html

@@ -8,6 +8,8 @@
     <div id="container" class="loading">
       <div id="background"></div>
       <div id="loading">Loading...</div>
+    </div>
+    <template id="base-template">
       <div id="folder-info">
         <i class="left material-icons">chevron_left</i>
         <i class="material-icons">album</i>
@@ -17,17 +19,23 @@
       <div id="song-info"></div>
       <div id="song-list"></div>
       <div id="game">
-        <div class="track-progress"></div>
+        <div class="track-progress">
+          <template class="total" name="progress-bar"></template>
+          <template class="interval" name="progress-bar"></template>
+        </div>
         <div class="kana-line"></div>
         <div class="kanji-line"></div>
         <div class="romaji-line"></div>
       </div>
-      <div id="loader"></div>
+      <div id="loader">
+        <template name="progress-bar"></template>
+        <span class="label"></span>
+      </div>
       <div id="ready">
         <div class="status"></div>
         <div class="message"></div>
       </div>
-    </div>
+    </template>
     <template id="song-info-template">
       <div class="song-info">
         <div class="genre"></div>

src/display.ts

@@ -150,13 +150,8 @@ namespace display {
     intervalBar: HTMLElement;
 
     constructor(private element: HTMLElement, lines: level.Line[]) {
-      if (element.firstChild === null) {
-        this.totalBar = this.createBar();
-        this.intervalBar = this.createBar();
-      } else {
-        this.totalBar = element.children[0].querySelector('.shade');
-        this.intervalBar = element.children[1].querySelector('.shade');
-      }
+      this.totalBar = element.querySelector('.total .shade');
+      this.intervalBar = element.querySelector('.interval .shade');
 
       let totalDuration = lines[lines.length - 1].end;
       this.totalBar.style.animationName = 'progress';
@@ -170,13 +165,6 @@ namespace display {
       this.intervalBar.style.animationDuration = durations;
     }
 
-    createBar(): HTMLElement {
-      let element = util.loadTemplate('progress-bar');
-      let shade: HTMLElement = element.querySelector('.shade');
-      this.element.appendChild(element);
-      return shade;
-    }
-
     start(): void {
       this.intervalBar.style.width = '100%';
       this.totalBar.style.width = '100%';

src/game/typing.ts

@@ -77,20 +77,12 @@ namespace game {
     constructor(readonly context: TypingScreenContext) {}
 
     enter(): void {
+      let loader: HTMLElement = this.context.container.querySelector('#loader');
       this.readyElement = this.context.container.querySelector('#ready');
       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');
-        }
+        loader.style.visibility = 'visible';
+        this.barElement = loader.querySelector('.progress-bar .shade');
+        this.textElement = loader.querySelector('.label');
 
         this.barElement.style.width = '0%';
         this.textElement.textContent = 'music loading';
@@ -114,6 +106,7 @@ namespace game {
         });
 
       } else {
+        loader.style.visibility = 'hidden';
         this.setReady();
       }
     }
@@ -161,11 +154,14 @@ namespace game {
     }
 
     enter(): void {
+      let progressElement: HTMLElement = this.gameContainer.querySelector('.track-progress');
       if (this.context.level.audio == null) {
+        progressElement.style.visibility = 'hidden';
         this.lines = this.context.level.lines.filter(line => line.kana != "@");
       } else {
+        progressElement.style.visibility = 'visible';
         this.progressController = new display.TrackProgressController(
-          this.gameContainer.querySelector('.track-progress'),
+          progressElement,
           this.lines
         );
         this.progressController.setListener(event => this.onIntervalEnd());

src/index.ts

@@ -1,5 +1,7 @@
+/// <reference path="util.ts" />
 /// <reference path="game.ts" />
 
+util.loadBase();
 let container: HTMLElement = document.querySelector('#container');
 let controller = new game.MainController(container, 'levels.json');
 controller.start();

src/util.ts

@@ -1,4 +1,22 @@
 namespace util {
+  export function loadBase(): void {
+    let container = document.querySelector('#container');
+
+    let baseTemplate = loadTemplate('base');
+    baseTemplate.querySelectorAll('template').forEach(t => {
+      let parent = t.parentNode;
+      let template = loadTemplate(t.getAttribute('name'));
+      let firstElement = template.querySelector('*');
+      for (let i = 0; i < t.classList.length; ++i) {
+        firstElement.classList.add(t.classList[i]);
+      }
+      parent.insertBefore(template, t);
+      parent.removeChild(t);
+    });
+
+    container.appendChild(baseTemplate);
+  }
+
   export function loadTemplate(id: string): DocumentFragment {
     let template: HTMLTemplateElement = document.querySelector(`#${id}-template`);
     return document.importNode(template.content, true);