I’m going to show you how poker works, so you’ll be ready to jump onto the tables and play against other Whiz’s like me!',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step1',\n },\n {\n time: 8,\n animationType: 1,\n message:\n 'In this tutorial, we will run through a hand of Texas Hold’em. This is a poker variant where each player is dealt two cards along with five community cards which will be shared amongst all players. The aim is to make the best five-card poker hand, using any combination of your two cards and the five community cards.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step2',\n },\n {\n time: 11,\n animationType: 2,\n message: 'In each poker game, there will be a dealer button. This signifies the order in which players will take turns.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step5',\n },\n {\n time: 15,\n animationType: 2,\n message:\n 'The player directly to the left of the button will act first on any betting round. At the end of each hand, the dealer button is moved clockwise to the next player.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step5',\n },\n {\n time: 18,\n animationType: 2,\n message:\n 'The two players to the direct left of the dealer button, known as the small blind and the big blind, will have to post forced bets called blinds before any cards are dealt.
This is to ensure that there is something in the pot to play for at the start of each hand.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step5',\n },\n {\n time: 23,\n animationType: 2,\n message:\n 'Each player is dealt two cards, called hole cards. Yours are K ♦ K ♣ for this hand. These are your unique cards. Other players can’t see them, nor use them to make their hand.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step6',\n },\n {\n time: 31,\n animationType: 2,\n message: 'Another player has raised to $2.50. You now have three options.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step7',\n },\n {\n time: 35,\n animationType: 2,\n message: 'You can either Fold – this means you will put no more chips in, and will no longer be in this hand.',\n animationDirection: 'right',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step8',\n },\n {\n time: 39,\n animationType: 2,\n message: 'Call – match the amount of the most recent bet or raise on this betting round. Here, that would be $2.50.',\n animationDirection: 'right',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step9',\n },\n {\n time: 43,\n animationType: 2,\n message:\n 'Or Raise – put more chips into the pot than the last player who didn’t fold. You usually raise when you have a strong hand or want to bluff. Bluffing is an important part of poker strategy, as you won’t always have a hand strong enough to beat your opponent’s most likely holdings.',\n animationDirection: 'right',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step10',\n },\n {\n time: 47,\n animationType: 2,\n message: 'However, in this situation, KK is a strong hand, so let’s put in some more chips and raise to $7.50 here. ',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step11',\n },\n {\n time: 54,\n animationType: 2,\n message:\n 'Your opponent has called your raise, which concludes the first round of betting (called preflop). Now, three community cards will be dealt. ',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step12',\n },\n {\n time: 59,\n animationType: 2,\n message:\n 'These three cards are called the Flop.
Each player can use as many of the community cards as they like, in combination with their unique hole cards to make the best five card hand.',\n animationDirection: 'right',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step13',\n },\n {\n time: 62,\n animationType: 2,\n message: 'Now there will be a round of betting. ',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step14',\n },\n {\n time: 64,\n animationType: 2,\n message: 'Your opponent has checked, this means that no-one has made a bet on this betting round before us, which gives you two options.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step15',\n },\n {\n time: 67,\n animationType: 2,\n message:\n 'You can Check – which means you put no chips in the middle and both players will see the next community card for free. You have the option to do this because no-one else has made a bet on this betting round.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step16',\n },\n {\n time: 70,\n animationType: 2,\n message:\n 'Or you can Bet - Just like when you raise, you put more chips into the pot, which your opponent will either have to re-raise or call to continue in the hand, if they fold, then you win right away!',\n animationDirection: 'right',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step17',\n },\n {\n time: 73,\n animationType: 2,\n message: 'Your opponent could make a better hand when the next card comes, but right now you definitely have the best hand.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step18',\n },\n {\n time: 73,\n animationType: 2,\n message:\n 'You have three of a kind here (the two Kings in our hole cards and one King on the board). This is the best possible hand right now, because there are no possible straights or flushes with the cards on the board.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step19',\n },\n {\n time: 78,\n animationType: 2,\n message: 'You can see a list of the hand rankings by clicking the info icon here.',\n animationDirection: 'right',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step20',\n },\n {\n time: 81,\n animationType: 0,\n message: null,\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step21',\n },\n {\n time: 84,\n animationType: 2,\n message: 'Since we know we have the best hand, let’s to bet and hope our opponent calls! ',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step22',\n },\n {\n time: 86,\n animationType: 2,\n message: 'Raising or betting in poker is “aggressive” play, whereas checking and calling is considered “passive”. ',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step23',\n },\n {\n time: 91,\n animationType: 2,\n message: 'One more community card has been dealt. This is called the Turn.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step24',\n },\n {\n time: 98,\n animationType: 2,\n message:\n 'Your opponent has checked to you. The turn card didn’t improve your hand and we still have three of a kind, but it’s still good enough to bet, so let’s do that!',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step25',\n },\n {\n time: 104,\n animationType: 2,\n message: 'The last community card has been dealt – this is called the River.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step26',\n },\n {\n time: 109,\n animationType: 2,\n message: 'This card improved you to a full house. Remember, you can look at the hand rankings here.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step27',\n },\n {\n time: 112,\n animationType: 2,\n message:\n 'There is one more round of betting left and your opponent has checked to you. Let’s bet all of your chips (also known as All-In) and hope that our opponent calls.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step28',\n },\n {\n time: 118,\n animationType: 2,\n message:\n 'Your opponent has called and now you are at showdown. This is where both players will show their cards and the player with the best hand will win. ',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step29',\n },\n {\n time: 121,\n animationType: 2,\n message: 'Here, your opponent has three of a kind, using the 7 in their hole cards and the two sevens on the board.',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step30',\n },\n {\n time: 124,\n animationType: 2,\n message: 'A full house is better than three of a kind, so you win the pot! ',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step31',\n },\n {\n time: 130,\n animationType: 2,\n message: 'Now you know your way around the game, why don’t you try playing a few hands in my demo? See you there!',\n animationDirection: 'left',\n positions: {\n x: 20,\n y: 30,\n },\n extraClass: 'ani-step32',\n },\n ];\n currentTime: any;\n pauseFlag: boolean = true;\n public nativeApp: boolean = false;\n public commonParams: any;\n public videoStart: boolean = true;\n public videoEnd: boolean = false;\n public isAndroid: boolean = false;\n public playReminder: boolean = false;\n public clrIntervel: any;\n public insight: any;\n public showInsight: boolean = false;\n public showLoopAnimate: boolean = false;\n public subscription: Subscription;\n\n constructor(\n public serve: SimulatedService,\n private vnPage: Page,\n public trackingService: TrackingService,\n ) {}\n ngOnInit(): void {\n this.nativeApp = this.serve.nativeApp;\n this.commonParams = this.item.parameters;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n this.subscription = this.serve.informStatus$.subscribe((_) => {\n this.getVideo();\n });\n }\n\n ngAfterViewInit() {\n const userAgent: any = navigator.userAgent;\n if (userAgent.match(/Android/)) {\n this.isAndroid = true;\n }\n this.getVideo();\n }\n\n getVideo() {\n setTimeout(() => {\n this.videoPlayer.nativeElement.currentTime = 5;\n this.videoPlayer.nativeElement.play();\n this.videoPlayer.nativeElement.addEventListener('timeupdate', this.onTimeUpdate.bind(this));\n }, 500);\n }\n\n onTimeUpdate() {\n this.currentTime = Math.floor(this.videoPlayer.nativeElement.currentTime);\n this.playReminder = false;\n\n const matchingFrame = this.insights.find((frame) => frame.time === this.currentTime);\n\n if (matchingFrame && !this.pauseFlag) {\n this.insight = matchingFrame;\n this.showInsight = true;\n this.videoPlayer.nativeElement.pause();\n this.pauseFlag = true;\n this.playReminderUser();\n\n // Hold time for second animation\n const holdTimeOptions: { [key: number]: number } = {\n 2: 1000,\n 8: 1000,\n };\n\n const holdTime = holdTimeOptions[this.insight?.time] || 450;\n\n setTimeout(() => {\n this.showLoopAnimate = true;\n }, holdTime);\n\n if (this.currentTime === 130) {\n this.videoEnd = true;\n if (this.clrIntervel) {\n clearTimeout(this.clrIntervel);\n }\n }\n } else if (!matchingFrame && this.pauseFlag) {\n this.pauseFlag = false;\n if (this.clrIntervel) {\n clearTimeout(this.clrIntervel);\n }\n }\n }\n\n playVideo() {\n if (this.videoEnd) return;\n this.videoPlayer.nativeElement.play();\n this.videoStart = false;\n this.showInsight = false;\n this.showLoopAnimate = false;\n }\n\n playReminderUser() {\n this.clrIntervel = setTimeout(() => {\n this.playReminder = true;\n }, 1500);\n }\n\n skipDemo() {\n this.passSkipDemo.emit();\n }\n\n closeGameTable() {\n this.trackingCloseButton();\n window.open(this.vnPage.homePage, '_self');\n }\n\n // ------GTM tracking start-------\n\n trackingCloseButton() {\n this.trackingService.triggerEvent('Event.Tracking', {\n 'component.CategoryEvent': 'poker onboarding',\n 'component.LabelEvent': 'sim hands',\n 'component.ActionEvent': 'click',\n 'component.PositionEvent': 'not applicable',\n 'component.LocationEvent': 'demo video screen',\n 'component.EventDetails': 'close icon',\n 'component.URLClicked': 'not applicable',\n });\n }\n\n trackingSkipVideo(text: any) {\n this.trackingService.triggerEvent('Event.Tracking', {\n 'component.CategoryEvent': 'poker onboarding',\n 'component.LabelEvent': 'sim hands',\n 'component.ActionEvent': 'click',\n 'component.PositionEvent': 'not applicable', //hand num or not applicable\n 'component.LocationEvent': 'demo video screen',\n 'component.EventDetails': text + ' link',\n 'component.URLClicked': 'not applicable',\n });\n }\n\n trackingSkipToDownloadClick(url: any, urltext: any) {\n this.trackingService.triggerEvent('Event.Tracking', {\n 'component.CategoryEvent': 'poker onboarding',\n 'component.LabelEvent': 'sim hands',\n 'component.ActionEvent': 'click',\n 'component.PositionEvent': 'not applicable', //hand num or not applicable\n 'component.LocationEvent': 'demo video screen',\n 'component.EventDetails': urltext + ' link',\n 'component.URLClicked': url,\n });\n }\n\n trackingPlayTutorial(text: any, cta: string) {\n this.trackingService.triggerEvent('Event.Tracking', {\n 'component.CategoryEvent': 'poker onboarding',\n 'component.LabelEvent': 'sim hands',\n 'component.ActionEvent': 'click',\n 'component.PositionEvent': 'not applicable', // hand num or not applicable\n 'component.LocationEvent': 'demo video screen',\n 'component.EventDetails': text + ' ' + cta,\n 'component.URLClicked': 'not applicable',\n });\n }\n // ------GTM tracking end-------\n\n ngAfterViewChecked() {\n const width = window.innerWidth;\n const ele: any = document.querySelectorAll('.wiz-modal-zoom');\n let zoomValue = width / 500;\n if (zoomValue > 1.46) {\n zoomValue = 1.46;\n }\n if (ele && ele.length != 0) {\n ele.forEach((modal: any) => {\n modal.style.zoom = zoomValue;\n });\n }\n }\n\n ngOnDestroy(): void {\n if (this.subscription) this.subscription.unsubscribe();\n }\n}\n","\n
\n","import { CommonModule } from '@angular/common';\nimport { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\nimport { PCComponent } from '@frontend/vanilla/features/content';\nimport { TrustAsHtmlPipe } from '@frontend/vanilla/shared/browser';\nimport { DropdownModule } from 'primeng/dropdown';\n\nimport { formatCurrencyPipe } from './formatCurrency.pipe';\nimport { PPCashierOptionsService } from './pp-cashier-options.service';\nimport { SearchPipe } from './search.pipe';\n\n@Component({\n selector: 'pk-cashier-options-faqs-modal',\n templateUrl: 'pp-cashier-option-faqs-modal.component.html',\n standalone: true,\n imports: [CommonModule, DropdownModule, FormsModule, ReactiveFormsModule, TrustAsHtmlPipe, formatCurrencyPipe, SearchPipe],\n})\nexport class PPCashierOptionsFaqsModalComponent extends PCComponent implements OnChanges {\n @Input() serviceParams: any;\n @Input() widgetConfig: any;\n @Output() clearFaqs = new EventEmitter();\n\n public faqData: any = '';\n public testMarkup: SafeHtml;\n public faqSearch: string;\n public enableLoader: boolean = false;\n\n constructor(\n private cashierOptionsService: PPCashierOptionsService,\n private sanitized: DomSanitizer,\n ) {\n super();\n }\n\n ngOnInit() {\n this.enableLoader = true;\n this.getFaq(this.serviceParams);\n }\n\n ngOnChanges(changes: SimpleChanges) {\n this.getFaq(changes.serviceID);\n }\n\n getFaq(serviceParams: any) {\n if (serviceParams?.option) {\n serviceParams.option = serviceParams.option.replace('pay_', '');\n this.cashierOptionsService\n .getCashierOptionsFaq(\n serviceParams.country,\n serviceParams.optionType,\n serviceParams.option,\n serviceParams.currency,\n serviceParams.language,\n )\n .subscribe((response: any) => {\n this.faqData = response.faqDetails[0];\n if (!this.faqData) {\n //this.toasterService.pop('error', 'Error', this.widgetConfig?.faqsNotFound);\n this.closeFAQsModal(true);\n }\n this.enableLoader = false;\n });\n }\n }\n\n getFaqAnswer(faqAnswer: any) {\n return this.sanitized.bypassSecurityTrustHtml(faqAnswer);\n }\n\n closeFAQsModal(value: any) {\n this.clearFaqs.emit(value);\n }\n}\n","
\n
\n
\n
\n
\n
\n {{ widgetConfig?.countrySelectTitle?.part1 || 'Not your country?' }} {{\n widgetConfig?.countrySelectTitle?.part2 || 'Select your country from here'\n }}\n
\n \n \n
\n \n
{{ selectedCountry.name }}
\n
\n \n \n
\n \n
{{ country.name }}
\n
\n \n \n
\n
\n
\n
\n
\n
\n
{{ widgetConfig?.optionsFilterTitle || 'Show me only these options' }}
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n {{ widgetConfig?.depositOptionsTitle || 'Click on a Deposit Option below to learn more' }}:\n
\n
\n {{ widgetConfig?.cashoutOptionsTitle || 'Click on a Cashout Option below to learn more' }}:\n