Add "Glimmeroids" title to the top during gameplay

t-sauer · May 5, 2017 · bcf1f98 · bcf1f98
1 parent 8806ffe
commit bcf1f98
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/ui/components/glimmeroids-app/template.hbs b/src/ui/components/glimmeroids-app/template.hbs
@@ -12,8 +12,13 @@
         {{if (eq state.gameState GameState.GameOver) "try again?" "start the game"}}
       </button>
     </div>
+  {{else}}
+    <div class="title">
+      <h1 class="logo">Glimmeroids</h1>
+    </div>
   {{/if}}
 
+
   <span class="score current-score" >Score: {{state.currentScore}}</span>
   <span class="score top-score" >Top Score: {{state.topScore}}</span>
   <span class="controls" >

diff --git a/src/ui/styles/app.scss b/src/ui/styles/app.scss
@@ -22,6 +22,22 @@ canvas {
   width: 100%;
   height: 100%;
 }
+
+.title {
+  display: block;
+  position: absolute;
+  top: 15px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 1;
+  text-align: center;
+  line-height: 1.6;
+
+  .logo {
+    margin: 0;
+  }
+}
+
 .current-score {
   left: 20px;
 }
@@ -38,7 +54,7 @@ canvas {
 .controls {
   display: block;
   position: absolute;
-  top: 15px;
+  bottom: 15px;
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 1;