create save and load component

src/app/app-routing.module.ts

@@ -2,11 +2,13 @@ import { RouterModule, Routes } from "@angular/router";
 import { NgModule } from "@angular/core";
 import { MainGameComponent } from "./features/game/components/main-game/main-game.component";
 import { SettingsComponent } from "./features/settings/components/settings.component";
+import { SaveAndLoadComponent } from "./features/save-and-load/components/save-and-load/save-and-load.component";
 
 const routes: Routes = [
   { path: "game", redirectTo: "", pathMatch: "full" },
   { path: "", component: MainGameComponent },
   { path: "settings", component: SettingsComponent },
+  { path: "save-load", component: SaveAndLoadComponent },
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { HeaderComponent } from "./features/shared/header/header.component";
 import { TimerService } from "./services/timer.service";
 import { SevenSegmentDisplayComponent } from "./features/game/containers/seven-segment/seven-segment-display.component";
 import { ResetButtonComponent } from "./features/game/containers/reset-button/reset-button.component";
+import { SaveAndLoadComponent } from "./features/save-and-load/components/save-and-load/save-and-load.component";
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import { ResetButtonComponent } from "./features/game/containers/reset-button/re
     CellComponent,
     SevenSegmentDisplayComponent,
     ResetButtonComponent,
+    SaveAndLoadComponent,
   ],
   imports: [
     BrowserModule,

src/app/features/game/components/main-game/main-game.component.html

@@ -1,6 +1,4 @@
 <ng-container *ngIf="gameStatus !== GAMESTATUS.NOT_PLAYING">
-  <div *ngIf="gameStatus === GAMESTATUS.LOST">Game Over</div>
-  <div *ngIf="gameStatus === GAMESTATUS.WON">You won</div>
   <div>
     <div class="flex justify-between items-center mb-2">
       <app-seven-segment-display [value]="flagsLeft" class="order-1"></app-seven-segment-display>

src/app/features/save-and-load/components/save-and-load/save-and-load.component.html

@@ -0,0 +1 @@
+<p>save-and-load works!</p>

src/app/features/save-and-load/components/save-and-load/save-and-load.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { SaveAndLoadComponent } from "./save-and-load.component";
+
+describe("SaveAndLoadComponent", () => {
+  let component: SaveAndLoadComponent;
+  let fixture: ComponentFixture<SaveAndLoadComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SaveAndLoadComponent],
+    });
+    fixture = TestBed.createComponent(SaveAndLoadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/save-and-load/components/save-and-load/save-and-load.component.ts

@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-save-and-load",
+  templateUrl: "./save-and-load.component.html",
+  styleUrls: ["./save-and-load.component.sass"],
+})
+export class SaveAndLoadComponent {}