slot game 다이얼로그 추가

src/app/modules/beteran/component/home.component.html

@@ -126,7 +126,10 @@
                       target="_blank"
                       rel="noreferrer"
                     > -->
-                    <div (click)="onClickGame(casino)">
+                    <div
+                      style="cursor: pointer"
+                      (click)="onClickGame(casino, 0)"
+                    >
                       <img
                         class="w-full object-cover border-b"
                         [src]="'assets/images/beteran/allbet.jpg'"
@@ -167,7 +170,10 @@
                       target="_blank"
                       rel="noreferrer"
                     > -->
-                    <div (click)="onClickGame(casino)">
+                    <div
+                      style="cursor: pointer"
+                      (click)="onClickGame(casino, 1)"
+                    >
                       <img
                         class="w-full object-cover border-b"
                         [src]="'assets/images/beteran/allbet.jpg'"
@@ -208,7 +214,7 @@
                       target="_blank"
                       rel="noreferrer"
                     > -->
-                    <div (click)="onClickGame(slot)">
+                    <div style="cursor: pointer" (click)="onClickGame(slot, 2)">
                       <img
                         class="w-full object-cover border-b"
                         [src]="'assets/images/beteran/allbet.jpg'"

src/app/modules/beteran/component/home.component.ts

@@ -20,7 +20,9 @@ import { WithdrawHistoryComposeComponent } from 'app/modules/beteran/compose/com
 import { GameService } from 'app/modules/polyglot/api/services/game.service';
 import { VendorService } from 'app/modules/polyglot/api/services/vendor.service';
 import { ListGamesResponse } from 'app/modules/proto/c2se/api/game_pb';
+import { Game } from 'app/modules/proto/models/api/game_pb';
 import { Vendor } from 'app/modules/proto/models/api/vendor_pb';
+import { SlotGameComposeComponent } from '../compose/compose/slot-game-compose.component';
 
 export enum ComposeMenuType {
   signIn = 'signIn',
@@ -176,14 +178,39 @@ export class HomeComponent implements OnInit {
     return await this.__gameService.listGames(parenId);
   }
 
-  onClickGame(vendor: Vendor): void {
+  private openGameWindow(url: string): void {
+    window.open(
+      url,
+      'gamepopup',
+      'width=1400, height=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes'
+    );
+  }
+  private showSlotDialog(vendor: Vendor, gameList: Game[]): void {
+    const dialogRef = this._matDialog.open(SlotGameComposeComponent, {
+      data: {
+        vendor,
+        gameList,
+      },
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      console.log('Slot game Compose dialog was closed!');
+    });
+  }
+
+  onClickGame(vendor: Vendor, type: number): void {
     console.log(vendor.toString());
+
     this.getGameByParentId(vendor.getId()).then((result) => {
       const gameList = result.getGamesList();
-
       if (gameList.length === 0) {
         return;
       }
+      if (type === 2) {
+        this.showSlotDialog(vendor, gameList);
+        return;
+      }
+
       const game = gameList[0];
 
       let r = this.__gameService
@@ -191,11 +218,12 @@ export class HomeComponent implements OnInit {
         .then((r) => {
           console.log('success', r.getUrl());
 
-          window.open(
+          this.openGameWindow(r.getUrl());
-            r.getUrl(),
+          // window.open(
-            'gamepopup',
+          //   r.getUrl(),
-            'width=1400, height=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes'
+          //   'gamepopup',
-          );
+          //   'width=1400, height=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes'
+          // );
         })
         .catch((e) => {
           console.log('fail', e);

src/app/modules/beteran/compose/compose/index.ts

@@ -7,6 +7,8 @@ import { WithdrawComposeComponent } from './withdraw-compose.component';
 import { WithdrawHistoryComposeComponent } from './withdraw-history-compose.component';
 import { SignUpComposeComponent } from './sign-up-compose.component';
 import { SignInComposeComponent } from './sign-in-compose.component';
+import { SlotGameComposeComponent } from './slot-game-compose.component';
+
 export const COMPOSE = [
   DepositComposeComponent,
   WithdrawComposeComponent,
@@ -17,4 +19,5 @@ export const COMPOSE = [
   NoticeComposeComponent,
   SignUpComposeComponent,
   SignInComposeComponent,
+  SlotGameComposeComponent,
 ];

src/app/modules/beteran/compose/compose/slot-game-compose.component.html

@@ -0,0 +1,44 @@
+<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
+  <!-- Header -->
+  <div
+    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
+  >
+    <div class="text-lg font-medium">{{ data.vendor.getName() }}</div>
+    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
+      <mat-icon
+        class="text-current"
+        [svgIcon]="'heroicons_outline:x'"
+      ></mat-icon>
+    </button>
+  </div>
+  <div class="flex justify-center mt-10 sm:mt-20">
+    <div class="w-full max-w-sm md:max-w-7xl">
+      <div
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-16 mt-8"
+      >
+        <ng-container *ngFor="let slot of data.gameList">
+          <div style="cursor: pointer" (click)="onClickSlotGame(slot)">
+            <!-- <img
+              class="w-full object-cover border-b"
+              [src]="'assets/images/beteran/allbet.jpg'"
+            /> -->
+            <img
+              class="w-full object-cover border-b"
+              [src]="getSlotGameImage(slot)"
+            />
+            <div class="py-4 px-5">
+              <div class="text-xl font-semibold">
+                {{ getSlotGameName(slot) }}
+              </div>
+              <div class="mt-1 text-secondary">
+                {{ slot.getCategory() }}
+              </div>
+            </div>
+          </div>
+
+          <!-- </a> -->
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/beteran/compose/compose/slot-game-compose.component.ts

@@ -0,0 +1,105 @@
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { fuseAnimations } from '@fuse/animations';
+import { GameService } from 'app/modules/polyglot/api/services/game.service';
+import { Game } from 'app/modules/proto/models/api/game_pb';
+import { Vendor } from 'app/modules/proto/models/api/vendor_pb';
+
+export interface SlotGameComposeData {
+  vendor: Vendor;
+  gameList: Game[];
+}
+export interface SlotGameComposeResult {
+  choice: boolean;
+}
+
+@Component({
+  selector: 'slot-game-compose',
+  templateUrl: './slot-game-compose.component.html',
+  encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations,
+})
+export class SlotGameComposeComponent implements OnInit {
+  /**
+   * Constructor
+   */
+  constructor(
+    public matDialogRef: MatDialogRef<SlotGameComposeComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: SlotGameComposeData,
+    private __gameService: GameService,
+    private _sanitizer: DomSanitizer
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Create the form
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Save and close
+   */
+  saveAndClose(): void {
+    // Save the message as a draft
+    this.saveAsDraft();
+
+    // Close the dialog
+    this.matDialogRef.close();
+  }
+
+  /**
+   * Discard the message
+   */
+  discard(): void {}
+
+  /**
+   * Save the message as a draft
+   */
+  saveAsDraft(): void {}
+
+  private openSlotGameWindow(url: string): void {
+    window.open(
+      url,
+      'gamepopup',
+      'width=1400, height=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes'
+    );
+  }
+
+  onClickSlotGame(selectSlot: Game): void {
+    console.log(selectSlot);
+    let r = this.__gameService
+      .getGameUrl(this.data.vendor.getKey(), selectSlot.getKey())
+      .then((r) => {
+        console.log('success', r.getUrl());
+
+        this.openSlotGameWindow(r.getUrl());
+      })
+      .catch((e) => {
+        console.log('fail', e);
+      });
+  }
+
+  getSlotGameName(slot: Game): string {
+    const namesJson = JSON.parse(slot.getNames());
+
+    return namesJson.ko;
+  }
+
+  getSlotGameImage(slot: Game): SafeResourceUrl {
+    const imagePathUrl = this._sanitizer.bypassSecurityTrustResourceUrl(
+      slot.getImage()
+    );
+    return !!imagePathUrl ? imagePathUrl : 'assets/images/beteran/allbet.jpg';
+  }
+}