Added end screen

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material';
 
 import { HelloComponent } from './hello/hello.component';
 import { LeaderboardComponent } from './leaderboard/leaderboard.component';
+import { EndComponent } from './end/end.component';
 
 import { AppConstants } from './app.constants';
 import { AppStates } from './app.states';
@@ -110,6 +111,12 @@ export class AppComponent implements AfterContentInit {
         }
       }
 
+      // BAD AGAIN
+      if (AppStates.ENDED) {
+        AppStates.ENDED = false;
+        this.openEnd();
+      }
+
       if (this.levelUp) {
         this.levelUpSize += 0.03;
         if (this.levelUpSize >= 1) {
@@ -208,6 +215,12 @@ export class AppComponent implements AfterContentInit {
     });
   }
 
+  openEnd() {
+    const dialog = this.dialog.open(EndComponent, {
+      width: '500px'
+    });
+  }
+
   cameraShake() {
     if (this.shakeTickStart === -1) {
       return;

src/app/app.module.ts

@@ -12,13 +12,15 @@ import {
 import { AppComponent } from './app.component';
 import { HelloComponent } from './hello/hello.component';
 import { LeaderboardComponent } from './leaderboard/leaderboard.component';
+import { EndComponent } from './end/end.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     HelloComponent,
-    LeaderboardComponent
+    LeaderboardComponent,
+    EndComponent
   ],
   imports: [
     BrowserModule,
@@ -30,6 +32,6 @@ import { LeaderboardComponent } from './leaderboard/leaderboard.component';
   ],
   providers: [],
   bootstrap: [AppComponent],
-  entryComponents: [HelloComponent, LeaderboardComponent]
+  entryComponents: [HelloComponent, LeaderboardComponent, EndComponent]
 })
 export class AppModule { }

src/app/app.states.ts

@@ -2,6 +2,7 @@ import { AppConstants } from './app.constants';
 
 export class AppStates {
   public static STARTED = false;
+  public static ENDED = false;
   public static STAGE = 1;
   public static CHANGING_STAGE = false;
 

src/app/classes/Packet.ts

@@ -1,4 +1,5 @@
 import { LeaderboardComponent } from '../leaderboard/leaderboard.component';
+import { MatDialog } from '@angular/material';
 
 import { AppConstants } from '../app.constants';
 import { AppStates } from '../app.states';
@@ -284,6 +285,7 @@ export class Packet extends Drawable {
         // Reset game
         AppStates.STARTED = false;
         LeaderboardComponent.saveScore(AppStates.STAGE);
+        AppStates.ENDED = true;
         AppStates.STAGE = 1;
         AppStates.WALLS_X = 3;
         AppStates.WALLS_WIDTH = AppConstants.GAME_WIDTH / AppStates.WALLS_X;

src/app/end/end.component.html

@@ -0,0 +1,11 @@
+<h1 mat-dialog-title>🖤 You've lost all your lives</h1>
+
+<mat-dialog-content>
+  <h4>Your score was saved.</h4>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button (click)="dialogRef.close()" color="primary" mat-raised-button>
+    Okay
+  </button>
+</mat-dialog-actions>

src/app/end/end.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-end',
+  templateUrl: './end.component.html',
+  styleUrls: ['./end.component.scss']
+})
+export class EndComponent {
+
+  constructor(public dialogRef: MatDialogRef<EndComponent>) { }
+
+}