popup call example (game-page component)

projects/ui/src/lib/popup/popup.component.scss

@@ -58,6 +58,7 @@
     justify-content: center;
     align-items: center;
     opacity: 0;
+    z-index: 100;
 
     &.shown {
       animation: showOverlay 0.2s ease 0s 1 forwards;

src/app/components/main/sections/game-page/game-page.component.html

@@ -1,12 +1,15 @@
-<!-- <ng-template [skirdaPopup]></ng-template>
+
+<!-- File: name.component.html -->
+<!-- 1. Создать ng-template с директивой [skirdaPopup], в котором
+будет спавниться оверлей с окном (в будущем этот портал будет глобальным) -->
+<ng-template [skirdaPopup]></ng-template>
+
+<!-- 2. Если в окне нужно что-то более сложное, чем просто текст,
+то нужно создать шаблон тела окна (то, что между шапкой окна и кнопками действий) -->
 <ng-template #popupContent>
   <h1 style="font-size: 72px">😳🕶🤏</h1>
   <p>Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.</p>
-</ng-template> -->
+</ng-template>
-<!-- <skirda-button (click)="openPopup(popupContent)">
-  <skirda-icon name="play" size="16"></skirda-icon>
-  Run game
-</skirda-button> -->
 
 <div class="section">
   <div class="section-head">
@@ -41,7 +44,10 @@
           <skirda-avatar *ngFor="let friend of friends" [username]="friend"></skirda-avatar>
         </div>
       </div>
-      <skirda-button size="large" appearance="secondary">
+      <!-- 6. Вызываем в нужном месте (в html компонента) открытие попап окна и передаем в метод из ts шаблон
+      (название переменной popupContent должно совпадать с аттрибутом
+      у описанного шаблона из пункта 2 (<ng-template #popupContent>)) -->
+      <skirda-button size="large" appearance="primary" (click)="openPopup(popupContent)">
         <skirda-icon name="play" size="32"></skirda-icon>
         <skirda-heading size="1">Play</skirda-heading>
       </skirda-button>

src/app/components/main/sections/game-page/game-page.component.ts

@@ -1,12 +1,10 @@
-import { inject, OnDestroy, TemplateRef, ViewChild } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core'
-import { Component, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router'
-import { NavigationEnd, Router } from '@angular/router';
+import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive'
-import { PopupConfiguration } from 'projects/ui/src/lib/popup/popup.class';
+import { PopupService } from 'projects/ui/src/lib/popup/popup.service'
-import { PopupDirective } from 'projects/ui/src/lib/popup/popup.directive';
+import { Subscription } from 'rxjs'
-import { PopupService } from 'projects/ui/src/lib/popup/popup.service';
+import { Game } from 'src/app/interfaces/game.interface'
-import { first, Subscription } from 'rxjs';
+import { UiService } from 'src/app/services/ui.service'
-import { Game } from 'src/app/interfaces/game.interface';
-import { UiService } from 'src/app/services/ui.service';
 
 @Component({
   selector: 'app-game-page',
@@ -14,7 +12,10 @@ import { UiService } from 'src/app/services/ui.service';
   styleUrls: ['./game-page.component.scss'],
 })
 export class GamePageComponent implements OnInit, OnDestroy {
-  // @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective;
+  // File: name.component.ts
+  // 3. Получить в классе компонента элемент с директивой (портал из 1 пункта)
+  @ViewChild(PopupDirective, { static: true }) popupPortal!: PopupDirective;
+
   uiService = inject(UiService)
   subs: Map<string, Subscription> = new Map();
   game: Game = {
@@ -40,8 +41,11 @@ export class GamePageComponent implements OnInit, OnDestroy {
   ]
 
   constructor(
-    private router: Router
+    private router: Router,
-  ) {} // private popup: PopupService
+
+    // 4. Импортировать сервис для попап окон
+    private popup: PopupService
+  ) {}
 
   ngOnInit(): void {
     this.observeNavigation()
@@ -64,39 +68,24 @@ export class GamePageComponent implements OnInit, OnDestroy {
     return this.tempImages[Math.floor(0 + Math.random() * ((this.tempImages.length - 1) + 1 - 0))]
   }
 
-  // openPopup(template?: TemplateRef<any>) {
+  // 5. Написать метод для вызова попап окна, куда аргументом передается
-  //   this.subs.set(
+  // шаблон тела окна (из пункта 2)
-  //     'popup-events',
+  openPopup(template?: TemplateRef<any>) {
-  //     this.popup
+    // Здесь мы подписываемся на ивента попап окна и сохраняем подписку, чтобы потом
-  //       .open(this.popupPortal, undefined, {
+    // при дестрое компонента можно было от них отписаться
-  //         header: { closable: false, title: 'Warning' },
+    this.subs.set(
-  //         actions: [
+      'popup-events',
-  //           {
+      // при вызове передается:
-  //             title: 'I understand, delete file',
+      // 1. popupPortal - портал для спавна оверлея с окном (пункт 1 в html, пункт 3 в ts),
-  //             event: 'delete',
+      // 2. template - шаблон тела окна, если он есть
-  //             appearance: 'primary',
+      // 3. объект с настройками окна (необязательный параметр), где можно кастомизировать внешний вид
-  //           },
+      // типа PopupConfig (\projects\ui\src\lib\popup\popup.class.ts)
-  //           {
+      this.popup
-  //             title: 'Do not delete',
+        .open(this.popupPortal, template, {})
-  //             event: 'cancel',
+        .subscribe((event) => {
-  //             appearance: 'outline',
+          // здесь описываются обработчики по нажатию на кнопки действий в попап окне
-  //           },
+          console.log(`event: ${event}`);
-  //           // {
+        })
-  //           //   title: 'Primary button',
+    );
-  //           //   event: 'button-2',
+  }
-  //           //   appearance: 'primary',
-  //           // },
-  //         ],
-  //         overlay: {
-  //           closable: true,
-  //           // background: 'rgba(255, 255, 255, 1)',
-  //         },
-  //         body: 'Humblebrag chillwave sriracha, ramps polaroid distillery edison bulb palo santo etsy sus pabst knausgaard typewriter dreamcatcher.',
-  //         theme: 'dark',
-  //       })
-  //       .subscribe((event) => {
-  //         console.log(`event: ${event}`);
-  //       })
-  //   );
-  // }
 }