spot-mlb game

import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { ActivatedRoute, NavigationStart, Router } from "@angular/router";
import { CountdownConfig } from "ngx-countdown";
import { Subject, takeUntil } from "rxjs";
import { LasService } from "../../../core/services/las.service";
import { environment } from "src/environments/environment";

@Component({
	selector: "spot-mlb-game",
	templateUrl: "./game.component.html",
	styleUrl: "./game.component.scss",
	encapsulation: ViewEncapsulation.None,
})
export class GameComponent implements OnInit {
	unsubscriber: Subject<any> = new Subject<any>();
	backendURL = environment.backendURL;
	ngStyle: any;
	levelTime!: number;
	levelTheme!: any;
	config: CountdownConfig = { leftTime: this.levelTime, notify: 0, format: "mm:ss" };
	clickCount: number = 0;
	remainingTime: number = 0;
	isUserWinner: boolean = false;

	// Backend Values
	spotMlbData: any;
	HeaderTextLocal: string;
	spotMlbPack: string;
	spotMlbObject: number;
	outputImg: string;
	gameImageData: any;
	footerBtnText = "Suivant";

	// LocalStorage
	spotMlbGame: any;

	constructor(
		private router: Router,
		private activatedRoute: ActivatedRoute,
		private lasService: LasService
	) {
		localStorage.setItem("hasValue", "true");
		this.initializeSpotMlbGame();

		if (this.router.getCurrentNavigation() && this.levelTime !== 0) {
			this.levelTime = Number(this.router.getCurrentNavigation()?.extras.state["levelValue"]);
			this.updateSpotMlbGame("levelTime", this.levelTime);
		} else {
			this.levelTime = 0;
		}

		if (this.router.getCurrentNavigation()) {
			this.levelTheme = this.router.getCurrentNavigation()?.extras.state["levelTheme"];
			this.updateSpotMlbGame("levelTheme", this.levelTheme);
		}

		// Reset clickCount when navigating back.
		this.router.events.subscribe((event) => {
			if (event instanceof NavigationStart) {
				if (event.navigationTrigger === "popstate") {
					this.clickCount = 0;
					this.updateSpotMlbGame("clickCount", this.clickCount);
				}
			}
		});
	}

	// --------------------------------------------------------------------------------------------
	// @ Lifecycle hooks
	// --------------------------------------------------------------------------------------------
	ngOnInit(): void {
		let value = this.spotMlbGame.time || this.levelTime;
		this.config = { ...this.config, leftTime: value };

		this.levelTime = this.spotMlbGame.levelTime;
		this.levelTheme = this.spotMlbGame.levelTheme;
		this.clickCount = this.spotMlbGame.clickCount || 0;

		this.lasService.campaignSubject.pipe(takeUntil(this.unsubscriber)).subscribe((data: any) => {
			if (data != null) {
				this.spotMlbData = data.campaign.steps.filter((e) => e.__component === "game-spot-mlb.spot-mlb")[0];

				this.HeaderTextLocal = this.spotMlbData.ambiances[this.levelTheme].headerTitle;
				this.spotMlbPack = this.spotMlbData.pack.url;
				this.spotMlbObject = this.spotMlbData.ambiances[this.levelTheme].spotObjects.length;
				this.outputImg = this.spotMlbData.ambiances[this.levelTheme].outputImg.url;
				this.gameImageData = this.spotMlbData.ambiances[this.levelTheme].spotObjects;
				this.footerBtnText = this.spotMlbData.ctaText;

				// Set theme --------------------
				const theme = data.campaign.theme;
				this.ngStyle = { color: theme.textColor, "background-color": theme.bgColor, "background-image": "url(" + this.backendURL + theme.bgImg.url + ")" };
				if (this.spotMlbData.bgImg != null) {
					this.ngStyle["background-image"] = "url(" + this.backendURL + this.spotMlbData.bgImg.url + ")";
				}
			}
		});
	}

	ngOnDestroy(): void {
		this.unsubscriber.next(null);
		this.unsubscriber.complete();

		// Remove saved countdown time from spot mlb game state.
		this.updateSpotMlbGame("time", null);
	}

	// --------------------------------------------------------------------------------------------
	// @ Events
	// --------------------------------------------------------------------------------------------
	onFooterBtnClick() {
		this.router.navigate(["../final"], { relativeTo: this.activatedRoute });
	}

	handleEvent(event) {
		if (event.action === "notify") {
			this.updateSpotMlbGame("time", event.left / 1000);
			this.remainingTime = event.left / 1000;
		}
	}

	// Restart the game when the user loses
	handleGameReset() {
		if (this.clickCount < this.spotMlbObject && this.remainingTime === 0) {
			this.remainingTime = 1;
			this.isUserWinner = false;
			this.config = { leftTime: this.spotMlbGame.levelTime, notify: 0, format: "mm:ss" };
			this.clickCount = 0;
			this.updateSpotMlbGame("clickCount", this.clickCount);
		}

		// Reset the box image display
		const boxImages: NodeListOf<HTMLImageElement> = document.querySelectorAll(".box-img");

		if (boxImages) {
			boxImages.forEach((boxImage) => {
				boxImage.style.display = "inline-block";
			});
		}
	}

	handleBoxImg(event: MouseEvent) {
		const image = event.target as HTMLImageElement;

		this.clickCount++;
		this.updateSpotMlbGame("clickCount", this.clickCount);

		if (this.clickCount === this.gameImageData.length && this.remainingTime) {
			// Show modal when the user wins the game and reset the clickCount to 0.
			this.isUserWinner = true;
			this.updateSpotMlbGame("clickCount", 0);
			this.config = { leftTime: 0, notify: 0, format: "mm:ss" };
			this.clickCount = 0;
		}

		// Hide the image when it is clicked
		image.style.display = "none";
	}

	// --------------------------------------------------------------------------------------------
	// @ Function
	// --------------------------------------------------------------------------------------------
	private initializeSpotMlbGame() {
		const storedState = localStorage.getItem("spot-mlb-game");
		this.spotMlbGame = storedState ? JSON.parse(storedState) : {};
	}

	private updateSpotMlbGame(key: string, value: any) {
		this.spotMlbGame[key] = value;
		localStorage.setItem("spot-mlb-game", JSON.stringify(this.spotMlbGame));
	}
}