Add welcome screen

src/ui/components/glimmeroids-app/component.ts

@@ -19,7 +19,8 @@ const KEY = {
 const INITIAL_ASTEROID_COUNT = 3;
 
 enum GameState {
-  Running = 1,
+  Welcome = 0,
+  Running,
   GameOver,
 }
 
@@ -76,7 +77,7 @@ export default class Glimmeroids extends Component {
       asteroidCount: INITIAL_ASTEROID_COUNT,
       currentScore: 0,
       topScore: localStorage.topscore || 0,
-      gameState: GameState.Running,
+      gameState: GameState.Welcome,
     };
     this.ship = [];
     this.asteroids = [];
@@ -145,7 +146,6 @@ export default class Glimmeroids extends Component {
       ...this.state,
       context
     };
-    this.startGame();
     requestAnimationFrame(() => this.update());
   }
 

src/ui/components/glimmeroids-app/template.hbs

@@ -1,10 +1,15 @@
 <div>
-  {{#if (eq state.gameState GameState.GameOver)}}
-    <div class="endgame">
-      <p>Game over, man!</p>
-      <p>{{gameOverMessage}}</p>
+  {{#if (not (eq state.gameState GameState.Running))}}
+    <div class="message">
+      <p>Glimmeroids</p>
+
+      {{#if (eq state.gameState GameState.GameOver)}}
+        <p>Game over, man!</p>
+        <p>{{gameOverMessage}}</p>
+      {{/if}}
+
       <button onclick={{action startGame}}>
-        try again?
+        {{if (eq state.gameState GameState.GameOver) "try again?" "start the game"}}
       </button>
     </div>
   {{/if}}

src/ui/components/if/helper.ts

@@ -0,0 +1,3 @@
+export default function _if([test, truthy, falsy]: any[]) {
+  return test ? truthy : falsy;
+}

src/ui/components/not/helper.ts

@@ -0,0 +1,3 @@
+export default function not([value]: any[]) {
+  return !value;
+}

src/ui/styles/app.scss

@@ -39,7 +39,7 @@ canvas {
   text-align: center;
   line-height: 1.6;
 }
-.endgame{
+.message{
   position: absolute;
   top: 50%;
   left: 50%;