refactored snek results to include gameOverMessage

src/app/pages/not-found/snek/components/snek-results/snek-results.component.html

@@ -1,16 +1,17 @@
 <h1>
-	{{ newHighScore ? 'Congratulations!' : 'woof' }}
+	{{ isNewHighScore ? 'Congratulations!' : 'woof' }}
 </h1>
 
-<h4>
-	{{ newHighScore ? 'new high score:' : 'you lost with:' }}
+<h3>
+	{{ isNewHighScore ? 'new high score:' : 'you lost with:' }}
 	<b>{{ results.score }}</b>
 	points
-</h4>
+</h3>
 
 <footer>
 	<button mat-flat-button color="primary"
+			[matTooltip]="results.gameOverMessage"
 			[mat-dialog-close]>
-		{{ newHighScore ? 'noice' : 'woof' }}
+		{{ isNewHighScore ? 'noice' : 'woof' }}
 	</button>
 </footer>

src/app/pages/not-found/snek/components/snek-results/snek-results.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { SnekResults } from 'src/app/pages/not-found/snek/models/state/snek-results.interface';
 
 @Component({
 	selector: 'snek-results',
@@ -8,11 +9,11 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SnekResultsComponent {
-	public readonly newHighScore: boolean;
+	public readonly isNewHighScore: boolean;
 
 	constructor(
-		@Inject(MAT_DIALOG_DATA) public readonly results: { score: number, highScore: number },
+		@Inject(MAT_DIALOG_DATA) public readonly results: SnekResults,
 	) {
-		this.newHighScore = results.score > results.highScore;
+		this.isNewHighScore = results.score > results.highScore;
 	}
 }

src/app/pages/not-found/snek/models/grid/snek-grid-node.model.ts

@@ -57,7 +57,7 @@ export class SnekGridNode {
 			case SnekDirection.RIGHT:
 				return this._right;
 			default:
-				console.error('you are going nowhere:', direction);
+				throw new Error(`${ direction } is not a direction`);
 		}
 	}
 }

src/app/pages/not-found/snek/models/snek/snek-node.model.ts

@@ -46,7 +46,7 @@ export class SnekNode {
 
 	public addHead(head: SnekNode): void {
 		if (this._parent instanceof SnekNode) {
-			throw new Error('hydra');
+			throw new Error('be like the hydra');
 		}
 
 		this._parent = head;
@@ -55,7 +55,7 @@ export class SnekNode {
 
 	public removeTail(): void {
 		if (!(this._child instanceof SnekNode)) {
-			throw new Error('ouroboros');
+			throw new Error('if i had a tail');
 		}
 
 		this._child = null;

src/app/pages/not-found/snek/models/snek/snek.model.ts

@@ -28,12 +28,12 @@ export class Snek {
 		return new Snek(length, tailGridNode);
 	}
 
-	public legs(): boolean {
+	public move(): boolean {
 		this._currentDirection = this._nextDirection;
 		const nextSnekGridNode = this._head.snekGridNode.next(this._nextDirection);
 
 		if (!(nextSnekGridNode instanceof SnekGridNode)) {
-			throw new Error('hit a wall');
+			throw new Error('come join me in the wall');
 		}
 
 		switch (nextSnekGridNode.type) {
@@ -45,7 +45,7 @@ export class Snek {
 				this.addHead();
 				return true;
 			case SnekGridNodeType.SNEK:
-				throw new Error('hit yourself');
+				throw new Error('stop hitting yourself');
 		}
 	}
 

src/app/pages/not-found/snek/models/state/snek-game.model.ts

@@ -40,8 +40,8 @@ export class SnekGame {
 		});
 	}
 
-	public snekLegs(): void {
-		if (this.snek.legs()) {
+	public moveSnek(): void {
+		if (this.snek.move()) {
 			this.spawnFud();
 		}
 	}

src/app/pages/not-found/snek/models/state/snek-results.interface.ts

@@ -0,0 +1,5 @@
+export interface SnekResults {
+	score: number;
+	highScore: number;
+	gameOverMessage: string;
+}

src/app/pages/not-found/snek/services/core/snek-dialog.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { SnekResults } from 'src/app/pages/not-found/snek/models/state/snek-results.interface';
 import { SnekStateService } from 'src/app/pages/not-found/snek/services/core/snek-state.service';
 import { SnekResultsComponent } from 'src/app/pages/not-found/snek/components/snek-results/snek-results.component';
 import { SubSink } from 'subsink';
@@ -13,19 +14,21 @@ export class SnekDialogService {
 		private readonly snekStateService: SnekStateService,
 	) {
 		this.subscriptions.sink = this.snekStateService.gameOver$
-			.subscribe(() => this.openResultsDialog());
+			.subscribe(gameOverMessage => this.openResultsDialog(gameOverMessage));
 	}
 
-	private openResultsDialog(): void {
-		const score = this.snekStateService.score;
-		const highScore = this.snekStateService.highScore;
+	private openResultsDialog(gameOverMessage: string): void {
+		const { score, highScore } = this.snekStateService;
+
+		const data: SnekResults = {
+			score,
+			highScore,
+			gameOverMessage,
+		};
 
 		const dialogRef = this.dialog.open(
 			SnekResultsComponent,
-			{
-				width: '300px',
-				data: { score, highScore },
-			},
+			{ width: '300px', data },
 		);
 
 		dialogRef.afterClosed().subscribe(() => {

src/app/pages/not-found/snek/services/core/snek-state.service.ts

@@ -31,8 +31,8 @@ export class SnekStateService implements OnDestroy {
 	@Observed() public gameState: SnekGameState = null;
 	public readonly gameState$: Observable<SnekGameState>;
 
-	@Observed({ type: 'subject' }) private gameOver: void = null;
-	public readonly gameOver$: Observable<void>;
+	@Observed({ type: 'subject' }) private gameOver: string = null;
+	public readonly gameOver$: Observable<string>;
 
 	constructor() {
 		this.resetSnekGame();
@@ -41,7 +41,8 @@ export class SnekStateService implements OnDestroy {
 	}
 
 	ngOnDestroy(): void {
-		this.stopGame();
+		this.stopGame('de-rendering snek');
+		this.subscriptions.unsubscribe();
 	}
 
 	public resetSnekGame(): void {
@@ -65,26 +66,29 @@ export class SnekStateService implements OnDestroy {
 	private startGame(): void {
 		this.gameCounterSubscription = timer(100, 100)
 			.pipe(
-				tap(() => this.snekGame.snekLegs()),
-				scan((ignoredAcc, ignoredVal, gameCounter) => gameCounter),
-				map(gameCounter => SnekGameState.from(this.snekGame, this.initialSnekLength, gameCounter)),
+				tap(() => this.snekGame.moveSnek()),
+				scan(gameCounter => gameCounter + 1, 0),
+				map(gameCounter => this.getGameState(gameCounter)),
 				tap(gameState => this.gameState = gameState),
-				catchError(error => {
-					this.stopGame();
-					return of(error.message);
-				}),
+				catchError(error => this.stopGame(error.message)),
 			).subscribe();
 	}
 
-	private stopGame(): void {
+	private stopGame(gameOverMessage: string): Observable<string> {
 		this.paused = true;
 
 		if (this.playing) {
 			this.playing = false;
 			this.gameCounterSubscription.unsubscribe();
 
-			this.gameOver = null;
+			this.gameOver = gameOverMessage;
 		}
+
+		return of(gameOverMessage);
+	}
+
+	private getGameState(gameCounter: number): SnekGameState {
+		return SnekGameState.from(this.snekGame, this.initialSnekLength, gameCounter);
 	}
 
 	private initializeScore(): void {

src/app/pages/not-found/snek/services/peripheral/snek-statistics.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { distinctUntilKeyChanged, map, tap } from 'rxjs/operators';
+import { distinctUntilKeyChanged, filter, map, tap } from 'rxjs/operators';
 import { SnekGameState } from 'src/app/pages/not-found/snek/models/state/snek-game-state.model';
 import { SnekStateService } from 'src/app/pages/not-found/snek/services/core/snek-state.service';
 import { notNullFilter } from 'src/app/shared/functions/rxjs/not-null-filter.function';
@@ -30,6 +29,7 @@ export class SnekStatisticsService {
 	private printGameStateLog(): void {
 		this.subscriptions.sink = this.snekStateService.gameOver$
 			.pipe(
+				filter(gameStateLog => gameStateLog.length > 0),
 				map(() => this.gameStateLog[this.gameStateLog.length - 1].toConsoleFormat()),
 				tap(gameStateLog => console.log(gameStateLog)),
 			).subscribe(() => this.gameStateLog = []);

src/app/shared/material.module.ts

@@ -8,9 +8,10 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSliderModule } from '@angular/material/slider';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
 	imports: [
@@ -23,9 +24,10 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 		MatIconModule,
 		MatMenuModule,
 		MatSidenavModule,
-		MatSliderModule,
 		MatSlideToggleModule,
+		MatSliderModule,
 		MatToolbarModule,
+		MatTooltipModule,
 	],
 	exports: [
 		MatButtonModule,
@@ -36,9 +38,10 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 		MatIconModule,
 		MatMenuModule,
 		MatSidenavModule,
-		MatSliderModule,
 		MatSlideToggleModule,
+		MatSliderModule,
 		MatToolbarModule,
+		MatTooltipModule,
 	],
 })
 export class MaterialModule {

src/styles.scss

@@ -1,10 +1,10 @@
 // Angular Material Core & Theming
-@use 'styles/material-theme';
+@use 'src/styles/material-theme';
 
 // Colors and Default Color Values
-@use 'styles/colors/colors';
+@use 'src/styles/colors/colors';
 
 // Overrides
-@use 'styles/overrides/browser-overrides';
-@use 'styles/overrides/material-overrides';
-@use 'styles/overrides/scrollbar-overrides';
+@use 'src/styles/overrides/browser-overrides';
+@use 'src/styles/overrides/material-overrides';
+@use 'src/styles/overrides/scrollbar-overrides';

src/styles/material/mat-icon.scss

@@ -0,0 +1,12 @@
+.mat-icon {
+	fill: currentColor;
+
+	> svg {
+		width: auto;
+		max-width: 100%;
+
+		> path {
+			fill: currentColor;
+		}
+	}
+}

src/styles/material/mat-slider.scss

@@ -0,0 +1,5 @@
+.mat-menu-content {
+	> .mat-slider {
+		margin: 0 .5rem;
+	}
+}

src/styles/material/mat-tooltip.scss

@@ -0,0 +1,3 @@
+.mat-tooltip {
+	font-size: 14px;
+}

src/styles/overrides/material-overrides.scss

@@ -1,19 +1,3 @@
-
-.mat-menu-content {
-	> .mat-slider {
-		margin: 0 .5rem;
-	}
-}
-
-.mat-icon {
-	fill: currentColor;
-
-	> svg {
-		width: auto;
-		max-width: 100%;
-
-		> path {
-			fill: currentColor;
-		}
-	}
-}
+@use 'src/styles/material/mat-icon';
+@use 'src/styles/material/mat-slider';
+@use 'src/styles/material/mat-tooltip';