fix click handler service #handleLeftClick method

src/app/features/settings/components/settings.component.spec.ts

@@ -28,8 +28,6 @@ describe("SettingsComponent", () => {
     fixture = TestBed.createComponent(SettingsComponent);
     component = fixture.componentInstance;
     store = TestBed.inject(MockStore);
-
-    component = fixture.componentInstance;
     store.overrideSelector(fromAppSelectors.selectSettings, mockSettings);
 
     fixture.detectChanges();

src/app/services/click-handler.service.ts

@@ -7,7 +7,9 @@ import { Store } from "@ngrx/store";
 import { IApp } from "../state/app.interface";
 import { neighborOffsets } from "../utils/neighbor-offsets";
 import { CellPosition } from "../models/cellPosition.model";
+import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 
+@UntilDestroy()
 @Injectable({
   providedIn: "root",
 })
@@ -25,18 +27,22 @@ export class ClickHandlerService {
   constructor(private readonly store: Store<IApp>) {
     this.store
       .select(fromAppSelectors.selectSettingsLevel)
+      .pipe(untilDestroyed(this))
       .subscribe((level: Level) => (this.level = level));
 
     this.store
       .select(fromAppSelectors.selectGridHeight)
+      .pipe(untilDestroyed(this))
       .subscribe((height: number) => (this.height = height));
 
     this.store
       .select(fromAppSelectors.selectGridWidth)
+      .pipe(untilDestroyed(this))
       .subscribe((width: number) => (this.width = width));
 
     this.store
       .select(fromAppSelectors.selectRealBoard)
+      .pipe(untilDestroyed(this))
       .subscribe((realCells: Cell[][]) => (this.realCells = realCells));
   }
 
@@ -50,6 +56,7 @@ export class ClickHandlerService {
     }
 
     this.revealedCells = [];
+    this.visitedCells = new Set<string>();
 
     this.deepSearchFirst(selectedCell);
 

src/app/state/app.effects.ts

@@ -29,7 +29,7 @@ export class AppEffects {
   ) {}
   startGame$ = createEffect(() =>
     this.actions$.pipe(
-      ofType(fromAppActions.startGame),
+      ofType(fromAppActions.startGame, fromAppActions.resetGame),
       mergeMap(() =>
         this.createLevelService.createMatrix().pipe(
           map((entities) => fromAppActions.createMatrixSuccess({ entities })),

src/app/state/app.reducer.ts

@@ -16,6 +16,7 @@ import {
   wonGame,
   continueGame,
   setSettings,
+  resetGame,
 } from "./app.actions";
 import { GameStatus } from "../models/gameStatus.model";
 
@@ -51,6 +52,14 @@ export const reducer = createReducer(
       entities,
     },
   })),
+  on(resetGame, (state) => ({
+    ...state,
+    playerBoard: {
+      ...state.playerBoard,
+      gameStatus: GameStatus.IN_PROGRESS,
+      flagsLeft: state.settings.totalMines,
+    },
+  })),
   on(startGame, (state) => ({
     ...state,
     playerBoard: {

src/styles.sass

@@ -6,4 +6,7 @@
   font-family: 'DSEG7Classic'
   src: url('/assets/fonts/DSEG7Classic-Regular.ttf') format('truetype')
   font-weight: normal
-  font-style: normal
+  font-style: normal
+
+body 
+  @apply bg-gradient-to-r from-cyan-100 to-blue-100