spot-mlb game
FadadOussama
typescript
14 days ago
6.1 kB
2
Indexable
Never
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)); } }
Leave a Comment